fix(ui): Fix reference guide key hint for PC (#782)

* fix: show Ctrl instead of ⌘ on non-Mac keyboards in keyboard shortcut hints

The KeyboardShortcutHint component now detects the user's platform and
displays 'Ctrl' instead of '⌘' for Windows/Linux users. This fixes the
issue where the Reference Guide hint (and other keyboard shortcut hints)
incorrectly showed Mac-specific keyboard symbols on non-Mac platforms.

Co-authored-by: michael <michael@sourcebot.dev>

* changelog

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: msukkari

CHANGELOG.md

@@ -10,6 +10,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Added `isBranchFilteringEnabled` flag to `search_finished` PostHog event. [#781](https://github.com/sourcebot-dev/sourcebot/pull/781)
 
+### Fixed
+- Fixed reference guide key hint for PC [#782](https://github.com/sourcebot-dev/sourcebot/pull/782)
+
 ## [4.10.15] - 2026-01-22
 
 ### Fixed

packages/web/src/app/components/keyboardShortcutHint.tsx

@@ -1,24 +1,41 @@
-import { cn } from '@/lib/utils'
-import React from 'react'
+'use client';
+
+import { cn, IS_MAC } from '@/lib/utils'
+import React, { useMemo } from 'react'
 
 interface KeyboardShortcutHintProps {
   shortcut: string
   label?: string
   className?: string
 }
 
+/**
+ * Converts Mac-specific keyboard shortcuts to platform-appropriate shortcuts.
+ * On Mac: displays the shortcut as-is (e.g., "⌘")
+ * On Windows/Linux: replaces "⌘" with "Ctrl"
+ */
+function getPlatformShortcut(shortcut: string): string {
+    if (IS_MAC) {
+        return shortcut;
+    }
+    // Replace Mac Command key symbol with Ctrl for non-Mac platforms
+    return shortcut.replace(/⌘/g, 'Ctrl');
+}
+
 export function KeyboardShortcutHint({ shortcut, label, className }: KeyboardShortcutHintProps) {
-  return (
-    <div className={cn("inline-flex items-center", className)} aria-label={label || `Keyboard shortcut: ${shortcut}`}>
-      <kbd
-        className="px-2 py-1 font-semibold font-sans border rounded-md"
-        style={{
-          fontSize: "0.65rem",
-          lineHeight: "0.875rem",
-        }}
-      >
-        {shortcut}
-      </kbd>
-    </div>
-  )
+    const platformShortcut = useMemo(() => getPlatformShortcut(shortcut), [shortcut]);
+
+    return (
+        <div className={cn("inline-flex items-center", className)} aria-label={label || `Keyboard shortcut: ${platformShortcut}`}>
+            <kbd
+                className="px-2 py-1 font-semibold font-sans border rounded-md"
+                style={{
+                    fontSize: "0.65rem",
+                    lineHeight: "0.875rem",
+                }}
+            >
+                {platformShortcut}
+            </kbd>
+        </div>
+    )
 }