refactor: migrate to monorepo structure with Docker, PocketBase, and e2e tests

- Reorganize into apps/, packages/, docs/, e2e/, pocketbase/ directories
- Add Dockerfiles for web, worker, and PocketBase services
- Add docker-compose.yml for local orchestration
- Add turbo.json for monorepo task management
- Add Playwright e2e test infrastructure
- Add PocketBase backend with migrations
- Remove Vite/Next.js/ESLint/PostCSS config files
- Update package.json with workspace dependencies
- Add .env.example and .dockerignore

apps/web/components/settings/settings-shortcuts.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useKeyboardShortcutsStore } from '@/lib/stores/use-keyboard-shortcuts-store';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+
+export function SettingsShortcuts() {
+  const { enabled, shortcuts, setEnabled, resetShortcuts } = useKeyboardShortcutsStore();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Keyboard Shortcuts</CardTitle>
+        <CardDescription>Customize keyboard shortcuts for quick navigation and actions.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Enable/disable all */}
+        <div className="flex items-center justify-between">
+          <div>
+            <Label>Enable keyboard shortcuts</Label>
+            <p className="text-sm text-muted-foreground">
+              Turn off all keyboard shortcuts globally
+            </p>
+          </div>
+          <Switch checked={enabled} onCheckedChange={setEnabled} aria-label="Enable keyboard shortcuts" />
+        </div>
+
+        {/* Shortcuts list */}
+        <div className="space-y-2">
+          {shortcuts.map((shortcut) => (
+            <div
+              key={shortcut.key}
+              className="flex items-center justify-between rounded-lg border p-3"
+            >
+              <div>
+                <p className="font-medium">{shortcut.description}</p>
+                <p className="text-xs text-muted-foreground">{shortcut.action}</p>
+              </div>
+              <kbd className="rounded border bg-muted px-2 py-1 text-sm font-mono">
+                {shortcut.key}
+              </kbd>
+            </div>
+          ))}
+        </div>
+
+        {/* Reset button */}
+        <Button variant="outline" onClick={resetShortcuts}>
+          Reset to defaults
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}