mirror of
https://github.com/binaricat/Netcatty.git
synced 2026-11-12 17:30:45 +00:00
bincxz
1ff64ff07b
Skip terminal focus steal during multi-tab snippet fan-out and restore the original pane afterward. Trap Tab focus inside the quick-add drawer and restore the opener element on close.
639 lines
22 KiB
TypeScript
639 lines
22 KiB
TypeScript
/**
|
|
* QuickAddSnippetDialog — lightweight "new snippet" side panel mounted at the
|
|
* App root and triggered by the `netcatty:snippets:add` window event.
|
|
*
|
|
* Opens as a right-side drawer (AsidePanel) so it matches the host-list
|
|
* create/edit UX. Fields: label, command, package, shortkey, multi-line mode.
|
|
* Advanced fields (target hosts, tags) can still be set later in the full
|
|
* Snippets manager.
|
|
*/
|
|
|
|
import { Keyboard, Package, RotateCcw } from 'lucide-react';
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useI18n } from '../application/i18n/I18nProvider';
|
|
import type { Snippet } from '../domain/models';
|
|
import {
|
|
type HotkeyScheme,
|
|
type KeyBinding,
|
|
keyEventToString,
|
|
matchesKeyBinding,
|
|
parseKeyCombo,
|
|
} from '../domain/models';
|
|
import { isScriptSnippet } from '../domain/snippetScript.ts';
|
|
import { cn, isMacPlatform } from '../lib/utils';
|
|
import { AsidePanel, AsidePanelContent, AsidePanelFooter } from './ui/aside-panel';
|
|
import { Button } from './ui/button';
|
|
import { Combobox } from './ui/combobox';
|
|
import { Input } from './ui/input';
|
|
import { Label } from './ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
|
|
import { SnippetScriptEditor } from './snippets/SnippetScriptEditor';
|
|
|
|
export interface QuickAddSnippetDialogProps {
|
|
snippets: Snippet[];
|
|
packages: string[];
|
|
onCreateSnippet: (snippet: Snippet) => void;
|
|
onUpdateSnippet?: (snippet: Snippet) => void;
|
|
onCreatePackage?: (packagePath: string) => void;
|
|
/** Optional — used to validate shortkey conflicts with system bindings. */
|
|
hotkeyScheme?: HotkeyScheme;
|
|
keyBindings?: KeyBinding[];
|
|
}
|
|
|
|
export function getQuickAddSnippetInitialCommand(event: Event): string {
|
|
const detail = (event as CustomEvent<{ command?: unknown }>).detail;
|
|
return typeof detail?.command === 'string' ? detail.command : '';
|
|
}
|
|
|
|
export const QuickAddSnippetDialog: React.FC<QuickAddSnippetDialogProps> = ({
|
|
snippets,
|
|
packages,
|
|
onCreateSnippet,
|
|
onUpdateSnippet,
|
|
onCreatePackage,
|
|
hotkeyScheme = 'disabled',
|
|
keyBindings = [],
|
|
}) => {
|
|
const { t } = useI18n();
|
|
const [open, setOpen] = useState(false);
|
|
const [label, setLabel] = useState('');
|
|
const [command, setCommand] = useState('');
|
|
const [packagePath, setPackagePath] = useState('');
|
|
const [noAutoRun, setNoAutoRun] = useState(false);
|
|
const [multiLineRunMode, setMultiLineRunMode] = useState<Snippet['multiLineRunMode']>(undefined);
|
|
const [shortkey, setShortkey] = useState<string | undefined>(undefined);
|
|
const [isRecordingShortkey, setIsRecordingShortkey] = useState(false);
|
|
const [shortkeyError, setShortkeyError] = useState<string | null>(null);
|
|
const [editing, setEditing] = useState<Snippet | null>(null);
|
|
const labelInputRef = useRef<HTMLInputElement>(null);
|
|
const dialogRootRef = useRef<HTMLDivElement>(null);
|
|
const previouslyFocusedRef = useRef<HTMLElement | null>(null);
|
|
|
|
// Listen for the global "add snippet" request dispatched by the
|
|
// terminal-side ScriptsSidePanel + button. We reset form state on
|
|
// every open so stale input from a previous cancel does not leak.
|
|
useEffect(() => {
|
|
const handler = (event: Event) => {
|
|
setEditing(null);
|
|
setLabel('');
|
|
setCommand(getQuickAddSnippetInitialCommand(event));
|
|
setPackagePath('');
|
|
setNoAutoRun(false);
|
|
setMultiLineRunMode(undefined);
|
|
setShortkey(undefined);
|
|
setShortkeyError(null);
|
|
setIsRecordingShortkey(false);
|
|
setOpen(true);
|
|
};
|
|
window.addEventListener('netcatty:snippets:add', handler);
|
|
return () => window.removeEventListener('netcatty:snippets:add', handler);
|
|
}, []);
|
|
|
|
// Sibling event for editing an existing snippet from the ScriptsSidePanel
|
|
// context menu. Prefills the form and flips the dialog into update mode.
|
|
useEffect(() => {
|
|
const handler = (e: Event) => {
|
|
const detail = (e as CustomEvent<{ snippet?: Snippet }>).detail;
|
|
const snippet = detail?.snippet;
|
|
if (!snippet || isScriptSnippet(snippet)) return;
|
|
setEditing(snippet);
|
|
setLabel(snippet.label ?? '');
|
|
setCommand(snippet.command ?? '');
|
|
setPackagePath(snippet.package ?? '');
|
|
setNoAutoRun(snippet.noAutoRun ?? false);
|
|
setMultiLineRunMode(snippet.multiLineRunMode);
|
|
setShortkey(snippet.shortkey);
|
|
setShortkeyError(null);
|
|
setIsRecordingShortkey(false);
|
|
setOpen(true);
|
|
};
|
|
window.addEventListener('netcatty:snippets:edit', handler);
|
|
return () => window.removeEventListener('netcatty:snippets:edit', handler);
|
|
}, []);
|
|
|
|
// Capture opener focus on open; restore it when the drawer closes.
|
|
// Also trap Tab within the drawer so focus cannot fall into the covered terminal.
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
previouslyFocusedRef.current = document.activeElement instanceof HTMLElement
|
|
? document.activeElement
|
|
: null;
|
|
|
|
const root = () => dialogRootRef.current;
|
|
|
|
const isInsideOpenOverlay = (node: Node | null): boolean => {
|
|
if (!(node instanceof Element)) return false;
|
|
// Portaled Select/Combobox content is still part of the modal interaction.
|
|
if (node.closest('[data-radix-popper-content-wrapper], [role="listbox"]')) return true;
|
|
return Boolean(root()?.contains(node));
|
|
};
|
|
|
|
const listFocusable = (): HTMLElement[] => {
|
|
const container = root();
|
|
if (!container) return [];
|
|
const nodes = container.querySelectorAll<HTMLElement>(
|
|
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
|
|
);
|
|
return Array.from(nodes).filter((el) => {
|
|
if (el.getAttribute('aria-hidden') === 'true') return false;
|
|
if (el.tabIndex < 0) return false;
|
|
// Skip the invisible full-screen backdrop and sr-only dialog-close control.
|
|
if (el.classList.contains('sr-only')) return false;
|
|
if (el.getAttribute('aria-label') === t('common.cancel') && el.classList.contains('absolute')) {
|
|
return false;
|
|
}
|
|
return el.offsetParent !== null || el === document.activeElement;
|
|
});
|
|
};
|
|
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key !== 'Tab' || e.defaultPrevented) return;
|
|
const focusable = listFocusable();
|
|
if (focusable.length === 0) return;
|
|
const first = focusable[0];
|
|
const last = focusable[focusable.length - 1];
|
|
const active = document.activeElement as HTMLElement | null;
|
|
if (e.shiftKey) {
|
|
if (!active || active === first || !isInsideOpenOverlay(active)) {
|
|
e.preventDefault();
|
|
last.focus();
|
|
}
|
|
} else if (!active || active === last || !isInsideOpenOverlay(active)) {
|
|
e.preventDefault();
|
|
first.focus();
|
|
}
|
|
};
|
|
|
|
const onFocusIn = (e: FocusEvent) => {
|
|
const target = e.target as Node | null;
|
|
if (isInsideOpenOverlay(target)) return;
|
|
// Keep focus inside the drawer when something outside tries to steal it.
|
|
const focusable = listFocusable();
|
|
(focusable[0] ?? labelInputRef.current)?.focus();
|
|
};
|
|
|
|
// Defer initial focus so AsidePanel / inputs mount first.
|
|
const focusTimer = window.setTimeout(() => labelInputRef.current?.focus(), 50);
|
|
document.addEventListener('keydown', onKeyDown, true);
|
|
document.addEventListener('focusin', onFocusIn);
|
|
|
|
return () => {
|
|
window.clearTimeout(focusTimer);
|
|
document.removeEventListener('keydown', onKeyDown, true);
|
|
document.removeEventListener('focusin', onFocusIn);
|
|
const previous = previouslyFocusedRef.current;
|
|
previouslyFocusedRef.current = null;
|
|
window.setTimeout(() => {
|
|
if (previous && document.contains(previous)) {
|
|
previous.focus();
|
|
}
|
|
}, 0);
|
|
};
|
|
}, [open, t]);
|
|
|
|
const isMac = useMemo(() => (
|
|
hotkeyScheme === 'mac' || (hotkeyScheme === 'disabled' && isMacPlatform())
|
|
), [hotkeyScheme]);
|
|
|
|
const existingShortkeys = useMemo(() => (
|
|
snippets.filter((s) => Boolean(s.shortkey) && s.id !== editing?.id)
|
|
), [snippets, editing?.id]);
|
|
|
|
const activeSystemBindings = useMemo(() => {
|
|
return keyBindings.flatMap((binding) => {
|
|
const entries: { binding: string; isMac: boolean }[] = [];
|
|
const macBinding = binding.mac;
|
|
const pcBinding = binding.pc;
|
|
|
|
if (hotkeyScheme === 'mac') {
|
|
if (macBinding && macBinding !== 'Disabled') {
|
|
entries.push({ binding: macBinding, isMac: true });
|
|
}
|
|
return entries;
|
|
}
|
|
|
|
if (hotkeyScheme === 'pc') {
|
|
if (pcBinding && pcBinding !== 'Disabled') {
|
|
entries.push({ binding: pcBinding, isMac: false });
|
|
}
|
|
return entries;
|
|
}
|
|
|
|
if (macBinding && macBinding !== 'Disabled') {
|
|
entries.push({ binding: macBinding, isMac: true });
|
|
}
|
|
if (pcBinding && pcBinding !== 'Disabled') {
|
|
entries.push({ binding: pcBinding, isMac: false });
|
|
}
|
|
return entries;
|
|
});
|
|
}, [hotkeyScheme, keyBindings]);
|
|
|
|
const buildKeyEventFromString = useCallback((keyString: string) => {
|
|
const parsed = parseKeyCombo(keyString);
|
|
if (!parsed) return null;
|
|
|
|
const modifiers = new Set(parsed.modifiers);
|
|
const key = parsed.key;
|
|
const normalizedKey = (() => {
|
|
switch (key) {
|
|
case 'Space':
|
|
return ' ';
|
|
case '↑':
|
|
return 'ArrowUp';
|
|
case '↓':
|
|
return 'ArrowDown';
|
|
case '←':
|
|
return 'ArrowLeft';
|
|
case '→':
|
|
return 'ArrowRight';
|
|
case 'Esc':
|
|
return 'Escape';
|
|
case '⌫':
|
|
return 'Backspace';
|
|
case 'Del':
|
|
return 'Delete';
|
|
case '↵':
|
|
return 'Enter';
|
|
case '⇥':
|
|
return 'Tab';
|
|
default:
|
|
return key.length === 1 ? key.toLowerCase() : key;
|
|
}
|
|
})();
|
|
|
|
return new KeyboardEvent('keydown', {
|
|
key: normalizedKey,
|
|
metaKey: modifiers.has('⌘') || modifiers.has('Win'),
|
|
ctrlKey: modifiers.has('⌃') || modifiers.has('Ctrl'),
|
|
altKey: modifiers.has('⌥') || modifiers.has('Alt'),
|
|
shiftKey: modifiers.has('Shift'),
|
|
});
|
|
}, []);
|
|
|
|
const normalizeKeyString = useCallback((value: string) => (
|
|
value.toLowerCase().replace(/\s+/g, '')
|
|
), []);
|
|
|
|
const validateShortkey = useCallback((key: string): string | null => {
|
|
if (!key) return null;
|
|
|
|
const syntheticEvent = buildKeyEventFromString(key);
|
|
if (syntheticEvent) {
|
|
const conflictsSystem = activeSystemBindings.some(({ binding, isMac: bindingIsMac }) => (
|
|
matchesKeyBinding(syntheticEvent, binding, bindingIsMac)
|
|
));
|
|
if (conflictsSystem) {
|
|
return t('snippets.shortkey.error.systemConflict');
|
|
}
|
|
}
|
|
|
|
if (syntheticEvent) {
|
|
for (const snippet of existingShortkeys) {
|
|
if (snippet.shortkey && matchesKeyBinding(syntheticEvent, snippet.shortkey, isMac)) {
|
|
return t('snippets.shortkey.error.snippetConflict', { name: snippet.label });
|
|
}
|
|
}
|
|
} else {
|
|
const normalizedKey = normalizeKeyString(key);
|
|
const conflictingSnippet = existingShortkeys.find((snippet) => (
|
|
snippet.shortkey && normalizeKeyString(snippet.shortkey) === normalizedKey
|
|
));
|
|
if (conflictingSnippet) {
|
|
return t('snippets.shortkey.error.snippetConflict', { name: conflictingSnippet.label });
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}, [
|
|
activeSystemBindings,
|
|
buildKeyEventFromString,
|
|
existingShortkeys,
|
|
isMac,
|
|
normalizeKeyString,
|
|
t,
|
|
]);
|
|
|
|
// Shortkey recording capture. Escape cancels recording only (does not close the panel).
|
|
useEffect(() => {
|
|
if (!isRecordingShortkey) return;
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (e.key === 'Escape') {
|
|
setIsRecordingShortkey(false);
|
|
setShortkeyError(null);
|
|
return;
|
|
}
|
|
|
|
if (['Meta', 'Control', 'Alt', 'Shift'].includes(e.key)) return;
|
|
|
|
const keyString = keyEventToString(e, isMac);
|
|
const error = validateShortkey(keyString);
|
|
if (error) {
|
|
setShortkeyError(error);
|
|
return;
|
|
}
|
|
|
|
setShortkeyError(null);
|
|
setShortkey(keyString);
|
|
setIsRecordingShortkey(false);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
setIsRecordingShortkey(false);
|
|
setShortkeyError(null);
|
|
};
|
|
|
|
const timer = setTimeout(() => {
|
|
window.addEventListener('click', handleClick, true);
|
|
}, 100);
|
|
|
|
window.addEventListener('keydown', handleKeyDown, true);
|
|
return () => {
|
|
clearTimeout(timer);
|
|
window.removeEventListener('keydown', handleKeyDown, true);
|
|
window.removeEventListener('click', handleClick, true);
|
|
};
|
|
}, [isRecordingShortkey, isMac, validateShortkey]);
|
|
|
|
// Derive combobox options from the union of existing packages (from
|
|
// props) and any package path referenced by an existing snippet, so
|
|
// the user can reuse anything they see in the main snippets view.
|
|
const packageOptions = useMemo(() => {
|
|
const set = new Set<string>();
|
|
for (const p of packages) {
|
|
if (p) set.add(p);
|
|
}
|
|
for (const s of snippets) {
|
|
if (s.package) set.add(s.package);
|
|
}
|
|
return Array.from(set).sort().map((value) => ({ value, label: value }));
|
|
}, [packages, snippets]);
|
|
|
|
const canSave = label.trim().length > 0 && command.trim().length > 0;
|
|
|
|
const handleClose = useCallback(() => {
|
|
setOpen(false);
|
|
setIsRecordingShortkey(false);
|
|
setShortkeyError(null);
|
|
}, []);
|
|
|
|
// Escape dismisses the drawer when not recording a shortkey (matches previous Dialog).
|
|
// Use bubble phase so nested Select/Combobox can consume Escape first.
|
|
useEffect(() => {
|
|
if (!open || isRecordingShortkey) return;
|
|
const onEscape = (e: KeyboardEvent) => {
|
|
if (e.key !== 'Escape' || e.defaultPrevented) return;
|
|
// Nested popovers/listboxes that stay open should keep Escape.
|
|
if (document.querySelector(
|
|
'[role="listbox"][data-state="open"], [data-radix-popper-content-wrapper] [data-state="open"]',
|
|
)) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
handleClose();
|
|
};
|
|
window.addEventListener('keydown', onEscape);
|
|
return () => window.removeEventListener('keydown', onEscape);
|
|
}, [open, isRecordingShortkey, handleClose]);
|
|
|
|
const handleSave = useCallback(() => {
|
|
if (!canSave) return;
|
|
const trimmedPackage = packagePath.trim();
|
|
// If the user typed a brand new package name, surface it to the parent
|
|
// so it can be added to the user's package list alongside the snippet.
|
|
if (trimmedPackage && !packages.includes(trimmedPackage)) {
|
|
onCreatePackage?.(trimmedPackage);
|
|
}
|
|
if (editing && onUpdateSnippet) {
|
|
// Preserve tags/targets/etc. that this lightweight panel does not expose.
|
|
onUpdateSnippet({
|
|
...editing,
|
|
label: label.trim(),
|
|
command,
|
|
package: trimmedPackage || '',
|
|
noAutoRun: noAutoRun || undefined,
|
|
multiLineRunMode,
|
|
shortkey: shortkey || undefined,
|
|
});
|
|
} else {
|
|
onCreateSnippet({
|
|
id: crypto.randomUUID(),
|
|
label: label.trim(),
|
|
command, // preserve whitespace in multi-line commands
|
|
tags: [],
|
|
package: trimmedPackage || '',
|
|
targets: [],
|
|
noAutoRun: noAutoRun || undefined,
|
|
multiLineRunMode,
|
|
shortkey: shortkey || undefined,
|
|
});
|
|
}
|
|
handleClose();
|
|
}, [
|
|
canSave,
|
|
packagePath,
|
|
packages,
|
|
onCreatePackage,
|
|
onCreateSnippet,
|
|
onUpdateSnippet,
|
|
editing,
|
|
label,
|
|
command,
|
|
noAutoRun,
|
|
multiLineRunMode,
|
|
shortkey,
|
|
handleClose,
|
|
]);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent) => {
|
|
if (e.defaultPrevented) return;
|
|
// Cmd/Ctrl+Enter from anywhere in the panel saves the snippet.
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && canSave) {
|
|
e.preventDefault();
|
|
handleSave();
|
|
}
|
|
},
|
|
[canSave, handleSave],
|
|
);
|
|
|
|
const handleSubmitShortcut = useCallback(() => {
|
|
if (canSave) handleSave();
|
|
}, [canSave, handleSave]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={dialogRootRef}
|
|
className="fixed inset-0 z-50"
|
|
onKeyDown={handleKeyDown}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
data-state="open"
|
|
aria-label={t(editing ? 'snippets.panel.editTitle' : 'snippets.panel.newTitle')}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="absolute inset-0 bg-black/40 cursor-default"
|
|
aria-label={t('common.cancel')}
|
|
tabIndex={-1}
|
|
onClick={handleClose}
|
|
/>
|
|
{/* Hidden control so Cmd/Ctrl+W / hasOpenAppDialog() treat this drawer as an open dialog. */}
|
|
<button
|
|
type="button"
|
|
data-dialog-close="true"
|
|
tabIndex={-1}
|
|
aria-hidden="true"
|
|
className="sr-only"
|
|
onClick={handleClose}
|
|
>
|
|
{t('common.close')}
|
|
</button>
|
|
<AsidePanel
|
|
open={open}
|
|
onClose={handleClose}
|
|
title={t(editing ? 'snippets.panel.editTitle' : 'snippets.panel.newTitle')}
|
|
subtitle={t('snippets.empty.desc')}
|
|
layout="overlay"
|
|
width="w-[400px]"
|
|
className="shadow-[-16px_0_32px_hsl(var(--foreground)/0.12)]"
|
|
>
|
|
<AsidePanelContent>
|
|
<div className="space-y-1.5">
|
|
<Label htmlFor="quick-add-snippet-label" className="text-xs">
|
|
{t('snippets.field.description')}
|
|
</Label>
|
|
<Input
|
|
id="quick-add-snippet-label"
|
|
ref={labelInputRef}
|
|
value={label}
|
|
onChange={(e) => setLabel(e.target.value)}
|
|
placeholder={t('snippets.field.descriptionPlaceholder')}
|
|
className="h-9"
|
|
spellCheck={false}
|
|
/>
|
|
</div>
|
|
|
|
<SnippetScriptEditor
|
|
id="quick-add-snippet-command"
|
|
label={t('snippets.field.scriptRequired')}
|
|
value={command}
|
|
onChange={setCommand}
|
|
onSubmitShortcut={handleSubmitShortcut}
|
|
placeholder="echo hello"
|
|
/>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs flex items-center gap-1.5">
|
|
<Package size={12} /> {t('snippets.field.package')}
|
|
</Label>
|
|
<Combobox
|
|
value={packagePath}
|
|
onValueChange={setPackagePath}
|
|
options={packageOptions}
|
|
placeholder={t('snippets.field.packagePlaceholder')}
|
|
allowCreate
|
|
onCreateNew={setPackagePath}
|
|
createText={t('snippets.field.createPackage')}
|
|
/>
|
|
</div>
|
|
|
|
<label className="flex items-center gap-2 cursor-pointer px-1">
|
|
<input
|
|
type="checkbox"
|
|
checked={noAutoRun}
|
|
onChange={(e) => setNoAutoRun(e.target.checked)}
|
|
className="rounded border-input"
|
|
/>
|
|
<span className="text-xs text-muted-foreground">{t('snippets.field.noAutoRun')}</span>
|
|
</label>
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">{t('snippets.field.multiLineRunMode')}</Label>
|
|
<Select
|
|
value={multiLineRunMode ?? 'paste'}
|
|
onValueChange={(value) => setMultiLineRunMode(value === 'lineDelay' ? 'lineDelay' : undefined)}
|
|
>
|
|
<SelectTrigger className="h-10">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="paste">{t('snippets.field.multiLineRunMode.paste')}</SelectItem>
|
|
<SelectItem value="lineDelay">{t('snippets.field.multiLineRunMode.lineDelay')}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">{t('snippets.field.shortkey')}</Label>
|
|
{shortkey ? (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-6 px-2 text-xs"
|
|
onClick={() => {
|
|
setShortkey(undefined);
|
|
setShortkeyError(null);
|
|
}}
|
|
>
|
|
<RotateCcw size={12} />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>{t('snippets.shortkey.clear')}</TooltipContent>
|
|
</Tooltip>
|
|
) : null}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
aria-pressed={isRecordingShortkey}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsRecordingShortkey(true);
|
|
setShortkeyError(null);
|
|
}}
|
|
className={cn(
|
|
'w-full h-10 px-3 text-sm font-mono rounded-lg border transition-colors flex items-center justify-center gap-2',
|
|
isRecordingShortkey
|
|
? 'border-primary bg-primary/10 animate-pulse'
|
|
: 'border-border hover:border-primary/50 bg-background',
|
|
)}
|
|
>
|
|
<Keyboard size={14} className="text-muted-foreground" />
|
|
{isRecordingShortkey
|
|
? t('snippets.shortkey.recording')
|
|
: shortkey || t('snippets.shortkey.placeholder')}
|
|
</button>
|
|
{shortkeyError ? (
|
|
<p className="text-xs text-destructive">{shortkeyError}</p>
|
|
) : null}
|
|
<p className="text-[11px] text-muted-foreground">{t('snippets.shortkey.hint')}</p>
|
|
</div>
|
|
</AsidePanelContent>
|
|
<AsidePanelFooter>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" className="flex-1" onClick={handleClose}>
|
|
{t('common.cancel')}
|
|
</Button>
|
|
<Button className="flex-1" onClick={handleSave} disabled={!canSave}>
|
|
{t('common.save')}
|
|
</Button>
|
|
</div>
|
|
</AsidePanelFooter>
|
|
</AsidePanel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default QuickAddSnippetDialog;
|