From 384cee29951450b49a5db88b215c8531ed1fe346 Mon Sep 17 00:00:00 2001 From: simosmik Date: Thu, 30 Apr 2026 07:51:28 +0000 Subject: [PATCH] refactor(command-palette): extract useCommandKey and SETTINGS_MAIN_TABS metadata --- .../ProviderSelectionEmptyState.tsx | 4 ++- .../command-palette/CommandPalette.tsx | 23 ++---------- .../settings/constants/constants.ts | 36 ++++++++++++++----- .../view/subcomponents/SidebarHeader.tsx | 4 ++- src/hooks/useCommandKey.ts | 10 ++++++ 5 files changed, 47 insertions(+), 30 deletions(-) create mode 100644 src/hooks/useCommandKey.ts diff --git a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx index 62a578e8..5f080467 100644 --- a/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx +++ b/src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx @@ -3,6 +3,7 @@ import { Check, ChevronDown } from "lucide-react"; import { useTranslation } from "react-i18next"; import { useServerPlatform } from "../../../../hooks/useServerPlatform"; +import { useCommandKey } from "../../../../hooks/useCommandKey"; import SessionProviderLogo from "../../../llm-logo-provider/SessionProviderLogo"; import { CLAUDE_MODELS, @@ -107,6 +108,7 @@ export default function ProviderSelectionEmptyState({ }: ProviderSelectionEmptyStateProps) { const { t } = useTranslation("chat"); const { isWindowsServer } = useServerPlatform(); + const { modKey } = useCommandKey(); const [dialogOpen, setDialogOpen] = useState(false); const visibleProviderGroups = useMemo( @@ -291,7 +293,7 @@ export default function ProviderSelectionEmptyState({

Press - {typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl"} + {modKey} K to search sessions, files, and commits diff --git a/src/components/command-palette/CommandPalette.tsx b/src/components/command-palette/CommandPalette.tsx index 2c67271c..17df2019 100644 --- a/src/components/command-palette/CommandPalette.tsx +++ b/src/components/command-palette/CommandPalette.tsx @@ -3,24 +3,18 @@ import { useNavigate } from 'react-router-dom'; import { ArrowDownToLine, ArrowUpFromLine, - Bell, - Bot, FileText, - GitBranch, GitCommit, GitMerge, - Info, - KeyRound, - ListChecks, MessageSquare, MessageSquarePlus, - Palette, - Plug, RefreshCw, Settings, SunMoon, } from 'lucide-react'; +import { SETTINGS_MAIN_TABS } from '../settings/constants/constants'; + import { Command, CommandEmpty, @@ -58,17 +52,6 @@ function parseMode(input: string): { mode: Mode; query: string } { return { mode: 'mixed', query: input }; } -const SETTINGS_TABS: Array<{ id: string; label: string; keywords: string; icon: React.ComponentType<{ className?: string }> }> = [ - { id: 'agents', label: 'Agents', keywords: 'agents subagents claude code', icon: Bot }, - { id: 'appearance', label: 'Appearance', keywords: 'appearance theme dark light language', icon: Palette }, - { id: 'git', label: 'Git', keywords: 'git github commits', icon: GitBranch }, - { id: 'api', label: 'API Tokens', keywords: 'api tokens auth keys', icon: KeyRound }, - { id: 'tasks', label: 'Tasks', keywords: 'tasks taskmaster', icon: ListChecks }, - { id: 'notifications', label: 'Notifications', keywords: 'notifications alerts push', icon: Bell }, - { id: 'plugins', label: 'Plugins', keywords: 'plugins extensions integrations', icon: Plug }, - { id: 'about', label: 'About', keywords: 'about version info', icon: Info }, -]; - const NAV_TABS: Array<{ id: AppTab; label: string; keywords: string }> = [ { id: 'chat', label: 'Go to Chat', keywords: 'chat messages conversation' }, { id: 'files', label: 'Go to Files', keywords: 'files file tree explorer' }, @@ -255,7 +238,7 @@ export default function CommandPalette({ {showActions && ( - {SETTINGS_TABS.map(({ id, label, keywords, icon: Icon }) => ( + {SETTINGS_MAIN_TABS.map(({ id, label, keywords, icon: Icon }) => ( ; +}; + +export const SETTINGS_MAIN_TABS: SettingsMainTabMeta[] = [ + { id: 'agents', label: 'Agents', keywords: 'agents subagents claude code', icon: Bot }, + { id: 'appearance', label: 'Appearance', keywords: 'appearance theme dark light language', icon: Palette }, + { id: 'git', label: 'Git', keywords: 'git github commits', icon: GitBranch }, + { id: 'api', label: 'API Tokens', keywords: 'api tokens auth keys', icon: KeyRound }, + { id: 'tasks', label: 'Tasks', keywords: 'tasks taskmaster', icon: ListChecks }, + { id: 'notifications', label: 'Notifications', keywords: 'notifications alerts push', icon: Bell }, + { id: 'plugins', label: 'Plugins', keywords: 'plugins extensions integrations', icon: Plug }, + { id: 'about', label: 'About', keywords: 'about version info', icon: Info }, ]; export const AGENT_PROVIDERS: AgentProvider[] = ['claude', 'cursor', 'codex', 'gemini']; @@ -34,4 +55,3 @@ export const DEFAULT_CURSOR_PERMISSIONS: CursorPermissionsState = { disallowedCommands: [], skipPermissions: false, }; - diff --git a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx index 833be2ff..18081553 100644 --- a/src/components/sidebar/view/subcomponents/SidebarHeader.tsx +++ b/src/components/sidebar/view/subcomponents/SidebarHeader.tsx @@ -3,6 +3,7 @@ import type { TFunction } from 'i18next'; import { Button, Input } from '../../../../shared/view/ui'; import { IS_PLATFORM } from '../../../../constants/config'; import { cn } from '../../../../lib/utils'; +import { useCommandKey } from '../../../../hooks/useCommandKey'; import GitHubStarBadge from './GitHubStarBadge'; type SearchMode = 'projects' | 'conversations'; @@ -40,6 +41,7 @@ export default function SidebarHeader({ onCollapseSidebar, t, }: SidebarHeaderProps) { + const { modKey } = useCommandKey(); const LogoBlock = () => (

@@ -164,7 +166,7 @@ export default function SidebarHeader({ title="Open command palette" className="pointer-events-none absolute right-2.5 top-1/2 hidden -translate-y-1/2 items-center gap-0.5 rounded border border-border/60 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground md:inline-flex" > - {typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl'} + {modKey} K )} diff --git a/src/hooks/useCommandKey.ts b/src/hooks/useCommandKey.ts new file mode 100644 index 00000000..00ce8ea1 --- /dev/null +++ b/src/hooks/useCommandKey.ts @@ -0,0 +1,10 @@ +export type CommandKey = { + isMac: boolean; + modKey: '⌘' | 'Ctrl'; +}; + +export function useCommandKey(): CommandKey { + const isMac = + typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform); + return { isMac, modKey: isMac ? '⌘' : 'Ctrl' }; +}