feat(ui): migrate all shortcut surfaces to the centralized registry

2026-08-26 10:59:04 +03:00
parent f1c3870909
commit 94f6b5fd38
24 changed files with 1057 additions and 904 deletions
@@ -141,6 +141,9 @@ and the send path reading the same grammar.
 - `state/useDraftTarget.ts` — the draft can target a directory that does not
  exist yet (a worktree being created). It must survive not appearing in the
  branch list, or the selector snaps back to the project root mid-creation.
+- `ui/DraftTargetSelectors.tsx` owns the controlled project/worktree picker
+  state and registers its application shortcuts locally. The selectors only
+  consume their shared prefix while the draft target UI is mounted.

 ## Mobile

@@ -12,6 +12,7 @@ import React from 'react';
 import { Icon } from '@/components/icon/Icon';
 import { Input } from '@/components/ui/input';
 import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
+import { shouldDismissDropdown } from '@/components/ui/dropdown-navigation';
 import {
    Select,
    SelectContent,
@@ -26,6 +27,7 @@ import { useI18n } from '@/lib/i18n';
 import { matchesRankQuery, rankByQuery } from '@/lib/search/fuzzySearch';
 import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP, ProjectIconImage } from '@/lib/projectMeta';
 import { createWorktreeDraft } from '@/lib/worktreeSessionCreator';
+import { useKeybind } from '@/hooks/useKeybind';
 import type { Theme } from '@/types/theme';
 import { normalizePath } from '../attachments/filePaths';
 import { getProjectDisplayLabel, type DraftTargetProject } from '../state/useDraftTarget';
@@ -106,14 +108,48 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
        onDirectoryChange,
        theme,
    } = props;
+    const [openPicker, setOpenPicker] = React.useState<'project' | 'worktree' | null>(null);
+    const projectTriggerRef = React.useRef<HTMLButtonElement>(null);
+    const worktreeTriggerRef = React.useRef<HTMLButtonElement>(null);
+    const handlePickerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (openPicker === null || !shouldDismissDropdown(event)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        setOpenPicker(null);
+    };
+
+    useKeybind('open_draft_project_picker', () => {
+        projectTriggerRef.current?.focus();
+        setOpenPicker('project');
+    });
+    useKeybind('open_draft_worktree_picker', () => {
+        if (!showBranchSelector) return false;
+        worktreeTriggerRef.current?.focus();
+        setOpenPicker('worktree');
+    });
+
+    const handleProjectChange = (projectId: string) => {
+        onProjectChange(projectId);
+        setOpenPicker(null);
+    };
+
+    const handleDirectoryChange = (directory: string) => {
+        onDirectoryChange(directory);
+        setOpenPicker(null);
+    };

    return (
        <div className="mb-1.5 flex min-w-0 items-center gap-1.5 px-0.5">
            <Select
                value={selectedProject.id}
-                onValueChange={onProjectChange}
+                open={openPicker === 'project'}
+                onOpenChange={(open) => setOpenPicker(open ? 'project' : null)}
+                onValueChange={handleProjectChange}
+                disableGlobalShortcuts
            >
                <SelectTrigger
+                    ref={projectTriggerRef}
+                    onKeyDown={handlePickerKeyDown}
                    size="sm"
                    className="h-7 min-w-0 w-fit max-w-[42vw] sm:max-w-[18rem] border-transparent bg-transparent px-1.5 hover:bg-transparent data-[popup-open]:bg-transparent"
                >
@@ -123,9 +159,9 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
                            : <ProjectLabel project={selectedProject} theme={theme} />}
                    </SelectValue>
                </SelectTrigger>
-                <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain fitContent>
+                <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain fitContent onKeyDown={handlePickerKeyDown}>
                    {projects.map((project) => (
-                        <SelectItem key={project.id} value={project.id} className="max-w-[24rem] truncate">
+                        <SelectItem key={project.id} value={project.id} showSelectedBackground={false} className="max-w-[24rem] truncate">
                            <ProjectLabel project={project} theme={theme} />
                        </SelectItem>
                    ))}
@@ -135,9 +171,14 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
            {showBranchSelector ? (
                <Select
                    value={selectedDirectory ?? branchItems[0]?.value ?? normalizePath(selectedProject.path) ?? ''}
-                    onValueChange={onDirectoryChange}
+                    open={openPicker === 'worktree'}
+                    onOpenChange={(open) => setOpenPicker(open ? 'worktree' : null)}
+                    onValueChange={handleDirectoryChange}
+                    disableGlobalShortcuts
                >
                    <SelectTrigger
+                        ref={worktreeTriggerRef}
+                        onKeyDown={handlePickerKeyDown}
                        size="sm"
                        className="h-7 min-w-0 w-fit max-w-[48vw] sm:max-w-[20rem] border-transparent bg-transparent px-1.5 hover:bg-transparent data-[popup-open]:bg-transparent"
                    >
@@ -145,11 +186,11 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
                            {selectedBranchLabel ?? t('chat.chatInput.branch')}
                        </SelectValue>
                    </SelectTrigger>
-                    <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain className="w-max min-w-48">
+                    <SelectContent side="top" collisionAvoidance={{ side: 'none' }} constrainToMain className="w-max min-w-48" onKeyDown={handlePickerKeyDown}>
                        {projectRootBranchOption ? (
                            <SelectGroup>
                                <SelectLabel>{t('chat.chatInput.projectRoot')}</SelectLabel>
-                                <SelectItem key={projectRootBranchOption.value} value={projectRootBranchOption.value} className="max-w-[24rem] truncate">
+                                <SelectItem key={projectRootBranchOption.value} value={projectRootBranchOption.value} showSelectedBackground={false} className="max-w-[24rem] truncate">
                                    {projectRootBranchOption.label}
                                </SelectItem>
                            </SelectGroup>
@@ -168,13 +209,13 @@ export function DraftTargetSelectors(props: DraftTargetProps) {
                                </button>
                            </div>
                            {worktreeBranchOptions.map((option) => (
-                                <SelectItem key={option.value} value={option.value} className="max-w-[24rem] truncate">
+                                <SelectItem key={option.value} value={option.value} showSelectedBackground={false} className="max-w-[24rem] truncate">
                                    {option.pending ? '⏳ ' : ''}{option.label}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                        {selectedDirectory && !selectedBranchIsKnown ? (
-                            <SelectItem value={selectedDirectory} className="max-w-[24rem] truncate">
+                            <SelectItem value={selectedDirectory} showSelectedBackground={false} className="max-w-[24rem] truncate">
                                {selectedBranchLabel}
                            </SelectItem>
                        ) : null}
@@ -5,7 +5,12 @@ import React from 'react';
 import { Icon } from '@/components/icon/Icon';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useI18n } from '@/lib/i18n';
-import { cn, isMacOS } from '@/lib/utils';
+import {
+    formatShortcutForDisplay,
+    getEffectiveShortcutCombo,
+} from '@/lib/shortcuts';
+import { cn } from '@/lib/utils';
+import { useUIStore } from '@/stores/useUIStore';

 type FocusModeButtonProps = {
    footerIconButtonClass: string;
@@ -17,6 +22,12 @@ type FocusModeButtonProps = {
 export const FocusModeButton = React.memo(function FocusModeButton(props: FocusModeButtonProps) {
    const { footerIconButtonClass, iconSizeClass, isExpandedInput, onToggle } = props;
    const { t } = useI18n();
+    const expandInputShortcutOverride = useUIStore((state) => state.shortcutOverrides.expand_input);
+    const expandInputCombo = getEffectiveShortcutCombo(
+        'expand_input',
+        expandInputShortcutOverride === undefined ? undefined : { expand_input: expandInputShortcutOverride },
+    );
+    const shortcut = expandInputCombo ? formatShortcutForDisplay(expandInputCombo) : null;

    return (
        <Tooltip>
@@ -43,9 +54,7 @@ export const FocusModeButton = React.memo(function FocusModeButton(props: FocusM
            <TooltipContent side="top" sideOffset={8}>
                <div className="flex flex-col gap-0.5 text-center">
                    <span>{t('chat.chatInput.focusMode.label')}</span>
-                    <span className="font-mono opacity-60">
-                        {isMacOS() ? '⌘⇧E' : 'Ctrl+Shift+E'}
-                    </span>
+                    {shortcut ? <span className="font-mono opacity-60">{shortcut}</span> : null}
                </div>
            </TooltipContent>
        </Tooltip>
@@ -18,6 +18,7 @@ import { isVSCodeRuntime } from '@/lib/desktop';
 import { useI18n } from '@/lib/i18n';
 import { rangeToMarkdown, trimSelectionValue, wrapMarkdownSelectionForChat } from './selectionMarkdown';
 import { focusChatInput } from '@/components/chat/composer/editor/dom';
+import { registerActiveSelectionToolbar } from '@/lib/addSelectionToChat';
 import { collectSelectionOverlayRects } from '@/lib/selectionOverlayRects';

 interface TextSelectionMenuProps {
@@ -106,6 +107,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
  const openRafRef = React.useRef<number | null>(null);
  const mouseUpTimeoutRef = React.useRef<number | null>(null);
  const isMenuVisibleRef = React.useRef(false);
+  const activeAddToChatCleanupRef = React.useRef<(() => void) | null>(null);
  const createSession = useSessionUIStore((state) => state.createSession);
  const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
  const newSessionDraftOpen = useSessionUIStore((state) => state.newSessionDraft?.open);
@@ -156,6 +158,8 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR

  React.useEffect(() => {
    return () => {
+      activeAddToChatCleanupRef.current?.();
+      activeAddToChatCleanupRef.current = null;
      if (openRafRef.current !== null) {
        window.cancelAnimationFrame(openRafRef.current);
        openRafRef.current = null;
@@ -169,6 +173,8 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR

  const hideMenu = React.useCallback(() => {
    pendingSelectionRef.current = null;
+    activeAddToChatCleanupRef.current?.();
+    activeAddToChatCleanupRef.current = null;
    setCommentRects(null);

    if (!isMenuVisibleRef.current) {
@@ -209,12 +215,30 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
    return Math.min(Math.max(anchorX, minX), maxX);
  }, []);

+  const addMarkdownToChat = React.useCallback((markdownText: string) => {
+    const markdownBlock = wrapMarkdownSelectionForChat(markdownText);
+    setPendingInputText(markdownBlock, 'append');
+
+    hideMenu();
+
+    window.getSelection()?.removeAllRanges();
+    queueMicrotask(() => {
+      focusChatInput();
+    });
+  }, [hideMenu, setPendingInputText]);
+
  const showMenu = React.useCallback(() => {
    if (!pendingSelectionRef.current) return;

    const { plainText, markdownText, rect, messageId } = pendingSelectionRef.current;
    const shouldAnimateIn = !position.show;

+    activeAddToChatCleanupRef.current?.();
+    activeAddToChatCleanupRef.current = registerActiveSelectionToolbar({
+      addToChat: () => addMarkdownToChat(markdownText),
+      dismiss: hideMenu,
+    });
+
    // Position menu above the selection
    const menuX = isMobile
      ? rect.left + rect.width / 2
@@ -241,7 +265,7 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
        openRafRef.current = null;
      });
    }
-  }, [getDesktopClampedX, isMobile, position.show]);
+  }, [addMarkdownToChat, getDesktopClampedX, hideMenu, isMobile, position.show]);

  React.useLayoutEffect(() => {
    if (!position.show || isMobile || !menuRef.current) {
@@ -428,18 +452,8 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR

  const handleAddToChat = React.useCallback(() => {
    if (!selectedTextMarkdown) return;
-
-    const markdownBlock = wrapMarkdownSelectionForChat(selectedTextMarkdown);
-    setPendingInputText(markdownBlock, 'append');
-    
-    hideMenu();
-    
-    // Clear selection
-    window.getSelection()?.removeAllRanges();
-    queueMicrotask(() => {
-      focusChatInput();
-    });
-  }, [selectedTextMarkdown, setPendingInputText, hideMenu]);
+    addMarkdownToChat(selectedTextMarkdown);
+  }, [addMarkdownToChat, selectedTextMarkdown]);

  const handleOpenComment = React.useCallback(() => {
    if (!selectedTextMarkdown) return;