feat(keyboard): introduce visual keyboard map and shortcut customization

- Added a new `KeyboardMap` component for a visual representation of keyboard shortcuts, allowing users to easily customize their shortcuts with single-modifier support.
- Integrated `ShortcutReferencePanel` for editing shortcuts directly within the settings view.
- Updated the settings view to include a button for opening the keyboard map dialog, enhancing user experience in managing keyboard shortcuts.
- Refactored keyboard shortcut handling to support modifier keys and improve shortcut parsing and formatting.

app/src/store/app-store.ts

@@ -37,7 +37,68 @@ export interface ApiKeys {
   openai: string;
 }
 
-// Keyboard Shortcuts
+// Keyboard Shortcut with optional modifiers
+export interface ShortcutKey {
+  key: string;           // The main key (e.g., "K", "N", "1")
+  shift?: boolean;       // Shift key modifier
+  cmdCtrl?: boolean;     // Cmd on Mac, Ctrl on Windows/Linux
+  alt?: boolean;         // Alt/Option key modifier
+}
+
+// Helper to parse shortcut string to ShortcutKey object
+export function parseShortcut(shortcut: string): ShortcutKey {
+  const parts = shortcut.split("+").map(p => p.trim());
+  const result: ShortcutKey = { key: parts[parts.length - 1] };
+
+  for (let i = 0; i < parts.length - 1; i++) {
+    const modifier = parts[i].toLowerCase();
+    if (modifier === "shift") result.shift = true;
+    else if (modifier === "cmd" || modifier === "ctrl" || modifier === "win" || modifier === "super" || modifier === "⌘" || modifier === "^" || modifier === "⊞" || modifier === "◆") result.cmdCtrl = true;
+    else if (modifier === "alt" || modifier === "opt" || modifier === "option" || modifier === "⌥") result.alt = true;
+  }
+
+  return result;
+}
+
+// Helper to format ShortcutKey to display string
+export function formatShortcut(shortcut: string, forDisplay = false): string {
+  const parsed = parseShortcut(shortcut);
+  const parts: string[] = [];
+
+  // Improved OS detection
+  let platform: 'darwin' | 'win32' | 'linux' = 'linux';
+  if (typeof navigator !== 'undefined') {
+    const p = navigator.platform.toLowerCase();
+    if (p.includes('mac')) platform = 'darwin';
+    else if (p.includes('win')) platform = 'win32';
+  }
+
+  // Primary modifier - OS-specific
+  if (parsed.cmdCtrl) {
+    if (forDisplay) {
+      parts.push(platform === 'darwin' ? '⌘' : platform === 'win32' ? '⊞' : '◆');
+    } else {
+      parts.push(platform === 'darwin' ? 'Cmd' : platform === 'win32' ? 'Win' : 'Super');
+    }
+  }
+
+  // Alt/Option
+  if (parsed.alt) {
+    parts.push(forDisplay ? (platform === 'darwin' ? '⌥' : 'Alt') : (platform === 'darwin' ? 'Opt' : 'Alt'));
+  }
+
+  // Shift
+  if (parsed.shift) {
+    parts.push(forDisplay ? '⇧' : 'Shift');
+  }
+
+  parts.push(parsed.key.toUpperCase());
+
+  // Add spacing when displaying symbols
+  return parts.join(forDisplay ? " " : "+");
+}
+
+// Keyboard Shortcuts - stored as strings like "K", "Shift+N", "Cmd+K"
 export interface KeyboardShortcuts {
   // Navigation shortcuts
   board: string;
@@ -47,10 +108,10 @@ export interface KeyboardShortcuts {
   tools: string;
   settings: string;
   profiles: string;
-  
+
   // UI shortcuts
   toggleSidebar: string;
-  
+
   // Action shortcuts
   addFeature: string;
   addContextFile: string;