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

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

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

4
src/routes/+page.svelte
View file

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