fix: show platform-correct modifier keys on homepage shortcut hints (#613)

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Manish Reddy <hello@nmreddy.me>
Co-authored-by: Jinjing <6427696+AmethystLiang@users.noreply.github.com>

src/renderer/src/components/Landing.tsx

@@ -3,6 +3,7 @@ import { AlertTriangle, ExternalLink, FolderPlus, GitBranchPlus, Star } from 'lu
 import { cn } from '../lib/utils'
 import { useAppStore } from '../store'
 import { isGitRepoKind } from '../../../shared/repo-kind'
+import { ShortcutKeyCombo } from './ShortcutKeyCombo'
 import logo from '../../../../resources/logo.svg'
 
 type ShortcutItem = {
@@ -56,14 +57,6 @@ function getPreflightIssues(status: {
   return issues
 }
 
-function KeyCap({ label }: { label: string }): React.JSX.Element {
-  return (
-    <span className="inline-flex min-w-6 items-center justify-center rounded border border-border/80 bg-secondary/70 px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
-      {label}
-    </span>
-  )
-}
-
 type StarState = 'loading' | 'starred' | 'not-starred' | 'hidden'
 
 function GitHubStarButton({ hasRepos }: { hasRepos: boolean }): React.JSX.Element | null {
@@ -208,14 +201,18 @@ export default function Landing(): React.JSX.Element {
     return () => window.clearInterval(intervalId)
   }, [preflightIssues.length])
 
-  const shortcuts = useMemo<ShortcutItem[]>(
-    () => [
-      { id: 'create', keys: ['⌘', 'N'], action: 'Create worktree' },
-      { id: 'up', keys: ['⌘', '⇧', '↑'], action: 'Move up worktree' },
-      { id: 'down', keys: ['⌘', '⇧', '↓'], action: 'Move down worktree' }
-    ],
-    []
-  )
+  const shortcuts = useMemo<ShortcutItem[]>(() => {
+    // Use platform-appropriate modifier key labels so Windows users see Ctrl/Shift
+    // rather than the Mac-only ⌘/⇧ symbols.
+    const isMac = navigator.userAgent.includes('Mac')
+    const mod = isMac ? '⌘' : 'Ctrl'
+    const shift = isMac ? '⇧' : 'Shift'
+    return [
+      { id: 'create', keys: [mod, 'N'], action: 'Create worktree' },
+      { id: 'up', keys: [mod, shift, '↑'], action: 'Move up worktree' },
+      { id: 'down', keys: [mod, shift, '↓'], action: 'Move down worktree' }
+    ]
+  }, [])
 
   return (
     <div className="absolute inset-0 flex items-center justify-center bg-background">
@@ -261,11 +258,10 @@ export default function Landing(): React.JSX.Element {
             {shortcuts.map((shortcut) => (
               <div key={shortcut.id} className="grid grid-cols-[1fr_auto] items-center gap-3">
                 <span className="text-sm text-muted-foreground">{shortcut.action}</span>
-                <div className="flex items-center gap-1">
-                  {shortcut.keys.map((key) => (
-                    <KeyCap key={`${shortcut.id}-${key}`} label={key} />
-                  ))}
-                </div>
+                <ShortcutKeyCombo
+                  keys={shortcut.keys}
+                  separatorClassName="mx-0.5 text-[10px] text-muted-foreground"
+                />
               </div>
             ))}
           </div>

src/renderer/src/components/ShortcutKeyCombo.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+
+function KeyCap({ label }: { label: string }): React.JSX.Element {
+  return (
+    <span className="inline-flex min-w-6 items-center justify-center rounded border border-border/80 bg-secondary/70 px-1.5 py-0.5 text-xs font-medium text-muted-foreground shadow-sm">
+      {label}
+    </span>
+  )
+}
+
+type ShortcutKeyComboProps = {
+  keys: string[]
+  separatorClassName?: string
+}
+
+export function ShortcutKeyCombo({
+  keys,
+  separatorClassName
+}: ShortcutKeyComboProps): React.JSX.Element {
+  const isMac = navigator.userAgent.includes('Mac')
+
+  return (
+    <div className="flex items-center gap-1">
+      {keys.map((key, index) => (
+        <React.Fragment key={`${key}-${index}`}>
+          <KeyCap label={key} />
+          {/* Why: Orca renders Mac shortcuts as adjacent glyphs, but Windows/Linux
+              shortcuts read more naturally with explicit "+" separators. */}
+          {!isMac && index < keys.length - 1 ? (
+            <span className={separatorClassName ?? 'mx-0.5 text-xs text-muted-foreground'}>+</span>
+          ) : null}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+}

src/renderer/src/components/settings/ShortcutsPane.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
 import { useAppStore } from '../../store'
+import { ShortcutKeyCombo } from '../ShortcutKeyCombo'
 import { SearchableSetting } from './SearchableSetting'
 import { matchesSettingsSearch, type SettingsSearchEntry } from './settings-search'
 
@@ -256,18 +257,7 @@ export function ShortcutsPane(): React.JSX.Element {
                         className="flex items-center justify-between py-1"
                       >
                         <span className="text-sm text-foreground">{item.action}</span>
-                        <div className="flex items-center gap-1">
-                          {item.keys.map((key, kIdx) => (
-                            <React.Fragment key={kIdx}>
-                              <span className="inline-flex min-w-6 items-center justify-center rounded border border-border/80 bg-secondary/70 px-1.5 py-0.5 text-xs font-medium text-muted-foreground shadow-sm">
-                                {key}
-                              </span>
-                              {!isMac && kIdx < item.keys.length - 1 ? (
-                                <span className="mx-0.5 text-xs text-muted-foreground">+</span>
-                              ) : null}
-                            </React.Fragment>
-                          ))}
-                        </div>
+                        <ShortcutKeyCombo keys={item.keys} />
                       </SearchableSetting>
                     )
                   })}