refactor(command-palette): extract useCommandKey and SETTINGS_MAIN_TABS metadata

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({
           <p className="mt-3 flex items-center justify-center gap-1.5 text-center text-xs text-muted-foreground/60">
             <span>Press</span>
             <kbd className="inline-flex items-center gap-0.5 rounded border border-border/60 bg-muted/40 px-1.5 py-0.5 font-mono text-[10px]">
-              {typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl"}
+              {modKey}
               <span>K</span>
             </kbd>
             <span>to search sessions, files, and commits</span>

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 && (
               <CommandGroup heading="Settings">
-                {SETTINGS_TABS.map(({ id, label, keywords, icon: Icon }) => (
+                {SETTINGS_MAIN_TABS.map(({ id, label, keywords, icon: Icon }) => (
                   <CommandItem
                     key={id}
                     value={`settings ${label} ${keywords}`}

src/components/settings/constants/constants.ts

@@ -1,3 +1,15 @@
+import type { ComponentType } from 'react';
+import {
+  Bell,
+  Bot,
+  GitBranch,
+  Info,
+  KeyRound,
+  ListChecks,
+  Palette,
+  Plug,
+} from 'lucide-react';
+
 import type {
   AgentCategory,
   AgentProvider,
@@ -7,13 +19,22 @@ import type {
   SettingsMainTab,
 } from '../types/types';
 
-export const SETTINGS_MAIN_TABS: SettingsMainTab[] = [
+export type SettingsMainTabMeta = {
-  'agents',
+  id: SettingsMainTab;
-  'appearance',
+  label: string;
-  'git',
+  keywords: string;
-  'api',
+  icon: ComponentType<{ className?: string }>;
-  'tasks',
+};
-  'notifications',
+
+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,
 };
-

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 = () => (
     <div className="flex min-w-0 items-center gap-2.5">
       <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg bg-primary/90 shadow-sm">
@@ -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}
                   <span>K</span>
                 </kbd>
               )}

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' };
+}