feat: Add full suite of Evernote-compatible keyboard shortcuts and visual cheat sheet modal

src/components/EvercloneWorkspace.tsx

@@ -105,6 +105,7 @@ export default function EvercloneWorkspace() {
   const [shareToast, setShareToast] = useState<string | null>(null);
   const [historyStack, setHistoryStack] = useState<string[]>([]);
   const [historyIndex, setHistoryIndex] = useState<number>(-1);
+  const [shortcutsModalOpen, setShortcutsModalOpen] = useState(false);
 
   const activeFilterCount =
     (filterNotebookId ? 1 : 0) +

src/components/KeyboardShortcutsModal.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import React from 'react';
+import {
+  Keyboard,
+  X,
+  FileText,
+  Search,
+  ArrowLeft,
+  ArrowRight,
+  Pin,
+  Star,
+  Trash2,
+  Tag,
+  Link2,
+  PanelLeft,
+  Bold,
+  Italic,
+  Underline,
+  List,
+  ListOrdered,
+  CheckSquare,
+  Code,
+  Highlighter,
+  Save,
+} from 'lucide-react';
+
+interface KeyboardShortcutsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface ShortcutItem {
+  keys: string[];
+  description: string;
+  icon?: React.ReactNode;
+}
+
+export default function KeyboardShortcutsModal({
+  isOpen,
+  onClose,
+}: KeyboardShortcutsModalProps) {
+  if (!isOpen) return null;
+
+  const navigationShortcuts: ShortcutItem[] = [
+    {
+      keys: ['Alt', 'N'],
+      description: 'Create New Note',
+      icon: <FileText className="w-3.5 h-3.5 text-evernote-green" />,
+    },
+    {
+      keys: ['Ctrl', 'K'],
+      description: 'Focus Search / Link',
+      icon: <Search className="w-3.5 h-3.5 text-blue-500" />,
+    },
+    {
+      keys: ['/'],
+      description: 'Jump to Search (when not editing)',
+      icon: <Search className="w-3.5 h-3.5 text-blue-500" />,
+    },
+    {
+      keys: ['Alt', '←'],
+      description: 'Previous Visited Note (Back)',
+      icon: <ArrowLeft className="w-3.5 h-3.5 text-amber-500" />,
+    },
+    {
+      keys: ['Alt', '→'],
+      description: 'Next Visited Note (Forward)',
+      icon: <ArrowRight className="w-3.5 h-3.5 text-amber-500" />,
+    },
+    {
+      keys: ['Ctrl', '\\'],
+      description: 'Toggle Left Sidebar',
+      icon: <PanelLeft className="w-3.5 h-3.5 text-gray-500" />,
+    },
+    {
+      keys: ['Ctrl', 'Alt', 'L'],
+      description: 'Copy Internal Note Link',
+      icon: <Link2 className="w-3.5 h-3.5 text-evernote-green" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', 'P'],
+      description: 'Pin / Unpin Note',
+      icon: <Pin className="w-3.5 h-3.5 text-evernote-green" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', 'S'],
+      description: 'Add / Remove Shortcut (Star)',
+      icon: <Star className="w-3.5 h-3.5 text-amber-400" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', 'T'],
+      description: 'Focus Add Tag Input',
+      icon: <Tag className="w-3.5 h-3.5 text-emerald-500" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', 'Del'],
+      description: 'Move Note to Trash',
+      icon: <Trash2 className="w-3.5 h-3.5 text-red-500" />,
+    },
+    {
+      keys: ['?'],
+      description: 'Show Shortcuts Cheat Sheet',
+      icon: <Keyboard className="w-3.5 h-3.5 text-gray-500" />,
+    },
+    {
+      keys: ['Esc'],
+      description: 'Close Modals / Deselect',
+    },
+  ];
+
+  const editorShortcuts: ShortcutItem[] = [
+    {
+      keys: ['Ctrl', 'K'],
+      description: 'Insert Link / Internal Note Link',
+      icon: <Link2 className="w-3.5 h-3.5 text-evernote-green" />,
+    },
+    {
+      keys: ['Ctrl', 'S'],
+      description: 'Save Edits Immediately',
+      icon: <Save className="w-3.5 h-3.5 text-emerald-600" />,
+    },
+    {
+      keys: ['Ctrl', 'B'],
+      description: 'Bold Text',
+      icon: <Bold className="w-3.5 h-3.5" />,
+    },
+    {
+      keys: ['Ctrl', 'I'],
+      description: 'Italic Text',
+      icon: <Italic className="w-3.5 h-3.5" />,
+    },
+    {
+      keys: ['Ctrl', 'U'],
+      description: 'Underline Text',
+      icon: <Underline className="w-3.5 h-3.5" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', 'X'],
+      description: 'Strikethrough',
+    },
+    {
+      keys: ['Ctrl', 'Shift', 'H'],
+      description: 'Highlight Text',
+      icon: <Highlighter className="w-3.5 h-3.5 text-amber-500" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', '7'],
+      description: 'Bulleted List',
+      icon: <List className="w-3.5 h-3.5" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', '8'],
+      description: 'Numbered List',
+      icon: <ListOrdered className="w-3.5 h-3.5" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', '9'],
+      description: 'Task Checklist',
+      icon: <CheckSquare className="w-3.5 h-3.5 text-evernote-green" />,
+    },
+    {
+      keys: ['Ctrl', 'Shift', 'C'],
+      description: 'Code Block',
+      icon: <Code className="w-3.5 h-3.5 text-blue-500" />,
+    },
+    {
+      keys: ['Ctrl', 'Alt', '1-3'],
+      description: 'Heading 1, 2, 3',
+    },
+    {
+      keys: ['Ctrl', 'Z'],
+      description: 'Undo Edit',
+    },
+    {
+      keys: ['Ctrl', 'Y'],
+      description: 'Redo Edit',
+    },
+  ];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-fade-in">
+      <div className="bg-white rounded-2xl shadow-2xl border border-gray-200 w-full max-w-2xl max-h-[85vh] flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between bg-gradient-to-r from-emerald-50 to-teal-50">
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 rounded-lg bg-evernote-green/15 text-evernote-green flex items-center justify-center">
+              <Keyboard className="w-4 h-4" />
+            </div>
+            <div>
+              <h3 className="font-bold text-gray-900 text-sm">
+                Keyboard Shortcuts
+              </h3>
+              <p className="text-[11px] text-gray-500">
+                Evernote-compatible hotkeys for fast navigation and editing
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 text-gray-400 hover:text-gray-700 rounded-lg hover:bg-white transition"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Content Body: 2 Columns */}
+        <div className="flex-1 overflow-y-auto p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Column 1: Navigation & Library */}
+          <div className="space-y-3">
+            <h4 className="text-xs font-bold uppercase tracking-wider text-gray-500 pb-1 border-b border-gray-100 flex items-center gap-1.5">
+              <span>Navigation & Library</span>
+            </h4>
+            <div className="space-y-2">
+              {navigationShortcuts.map((sc, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between gap-2 text-xs py-1"
+                >
+                  <div className="flex items-center gap-2 text-gray-700 min-w-0">
+                    {sc.icon && <span className="shrink-0">{sc.icon}</span>}
+                    <span className="truncate">{sc.description}</span>
+                  </div>
+                  <div className="flex items-center gap-1 shrink-0">
+                    {sc.keys.map((k, ki) => (
+                      <kbd
+                        key={ki}
+                        className="px-2 py-0.5 text-[11px] font-semibold bg-gray-100 text-gray-800 border border-gray-300 rounded shadow-2xs font-mono"
+                      >
+                        {k}
+                      </kbd>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Column 2: Editor & Formatting */}
+          <div className="space-y-3">
+            <h4 className="text-xs font-bold uppercase tracking-wider text-gray-500 pb-1 border-b border-gray-100 flex items-center gap-1.5">
+              <span>Editor & Formatting</span>
+            </h4>
+            <div className="space-y-2">
+              {editorShortcuts.map((sc, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between gap-2 text-xs py-1"
+                >
+                  <div className="flex items-center gap-2 text-gray-700 min-w-0">
+                    {sc.icon && <span className="shrink-0">{sc.icon}</span>}
+                    <span className="truncate">{sc.description}</span>
+                  </div>
+                  <div className="flex items-center gap-1 shrink-0">
+                    {sc.keys.map((k, ki) => (
+                      <kbd
+                        key={ki}
+                        className="px-2 py-0.5 text-[11px] font-semibold bg-gray-100 text-gray-800 border border-gray-300 rounded shadow-2xs font-mono"
+                      >
+                        {k}
+                      </kbd>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between text-xs text-gray-500">
+          <span>Tip: On Mac, use <kbd className="px-1.5 py-0.2 bg-gray-200 rounded font-mono text-[10px]">Cmd</kbd> instead of <kbd className="px-1.5 py-0.2 bg-gray-200 rounded font-mono text-[10px]">Ctrl</kbd></span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-1.5 bg-white border border-gray-300 hover:bg-gray-100 text-gray-700 rounded-lg font-semibold text-xs transition"
+          >
+            Close (Esc)
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}