mirrors/raycast-linux
1
0
Fork 0
mirror of https://github.com/ByteAtATime/raycast-linux.git synced 2025-08-31 19:27:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(CommandDeeplinkConfirm): replace custom dialog with AlertDialog component

Browse source
This commit is contained in:
ByteAtATime 2025-07-06 09:45:52 -07:00
parent 685985b9b3
commit 1582f2c9c9
No known key found for this signature in database
2 changed files with 39 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/lib/components/CommandDeeplinkConfirm.svelte
View file

@ -2,67 +2,49 @@
import type { PluginInfo } from '@raycast-linux/protocol';
import { Button } from './ui/button';
import Icon from './Icon.svelte';
import { createEventDispatcher } from 'svelte';
import path from 'path';
import * as AlertDialog from '$lib/components/ui/alert-dialog';
type Props = {
plugin: PluginInfo;
open?: boolean;
onconfirm: () => void;
oncancel: () => void;
};
let { plugin }: Props = $props();
const dispatch = createEventDispatcher<{ confirm: void; cancel: void }>();
let { plugin, open = $bindable(true), onconfirm, oncancel }: Props = $props();
const assetsPath = $derived(path.dirname(plugin.pluginPath) + '/assets');
function handleConfirm() {
dispatch('confirm');
}
function handleCancel() {
dispatch('cancel');
}
function handleKeydown(e: KeyboardEvent) {
if (e.key === 'Escape') {
e.preventDefault();
handleCancel();
}
}
</script>
<svelte:window onkeydown={handleKeydown} />
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
onclick={(e) => {
if (e.target === e.currentTarget) handleCancel();
}}
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title"
tabindex={0}
>
<div
class="bg-background/80 text-foreground flex w-full max-w-sm flex-col items-center gap-4 rounded-xl border border-white/10 p-6 text-center shadow-2xl"
role="dialog"
aria-modal="true"
aria-labelledby="dialog-title"
>
<AlertDialog.Root bind:open onOpenChange={(isOpen) => !isOpen && oncancel()}>
<AlertDialog.Content class="w-fit">
<AlertDialog.Header class="items-center text-center">
<Icon icon={plugin.icon} class="size-16" {assetsPath} />
<h2 id="dialog-title" class="text-xl font-semibold">Request to open {plugin.title}</h2>
<p class="text-muted-foreground text-sm">
<AlertDialog.Title class="text-xl font-semibold">
Request to open {plugin.title}
</AlertDialog.Title>
<AlertDialog.Description class="text-center text-sm">
The command was triggered from outside of Raycast. If you did not do this, please cancel the
operation.
</p>
<div class="mt-2 flex w-full flex-col gap-2">
<Button onclick={handleConfirm} class="w-full text-base" size="lg">Open Command</Button>
<Button onclick={handleConfirm} variant="secondary" class="w-full text-base" size="lg"
>Always Open Command</Button
>
<Button onclick={handleCancel} variant="ghost" class="w-full text-base" size="lg"
>Cancel</Button
>
</div>
</div>
</div>
</AlertDialog.Description>
</AlertDialog.Header>
<AlertDialog.Footer class="mt-2 !flex-col gap-2">
<AlertDialog.Action>
{#snippet child({ props })}
<Button {...props} onclick={onconfirm} class="w-full text-base" size="lg">
Open Command
</Button>
{/snippet}
</AlertDialog.Action>
<!-- TODO: implement "always open" -->
<Button onclick={onconfirm} variant="secondary" class="w-full text-base" size="lg">
Always Open Command
</Button>
<AlertDialog.Cancel>
{#snippet child({ props })}
<Button {...props} variant="ghost" class="w-full text-base" size="lg">Cancel</Button>
{/snippet}
</AlertDialog.Cancel>
</AlertDialog.Footer>
</AlertDialog.Content>
</AlertDialog.Root>

4
src/routes/+page.svelte
View file

@ -206,8 +206,8 @@
{#if commandToConfirm}
<CommandDeeplinkConfirm
plugin={commandToConfirm}
on:confirm={viewManager.confirmRunCommand}
on:cancel={viewManager.cancelRunCommand}
onconfirm={viewManager.confirmRunCommand}
oncancel={viewManager.cancelRunCommand}
/>
{/if}