feat: MVP-5 Sprint 2 - Command Palette and Global Shortcuts

- Add Command Palette (Ctrl+K / Cmd+K) with search and navigation
- Add global keyboard shortcuts: g h (dashboard), g n (notes), n (new note)
- Add keyboard shortcuts help dialog (?)
- Add shortcuts provider component
- Shortcuts ignore inputs/textareas for proper UX
This commit is contained in:
2026-03-22 18:22:28 -03:00
parent 8c80a12b81
commit cde0a143a5
6 changed files with 215 additions and 0 deletions
@@ -0,0 +1,39 @@
'use client'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Keyboard } from 'lucide-react'
const shortcuts = [
{ keys: ['n'], description: 'Nueva nota' },
{ keys: ['g', 'h'], description: 'Ir al Dashboard' },
{ keys: ['g', 'n'], description: 'Ir a Notas' },
{ keys: ['/'], description: 'Enfocar búsqueda' },
{ keys: ['?'], description: 'Mostrar atajos' },
{ keys: ['Ctrl', 'K'], description: 'Command Palette' },
]
export function KeyboardShortcutsDialog({ open, onOpenChange }: { open: boolean, onOpenChange: (o: boolean) => void }) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Keyboard className="h-5 w-5" />
Atajos de teclado
</DialogTitle>
</DialogHeader>
<div className="divide-y">
{shortcuts.map((s) => (
<div key={s.description} className="flex justify-between py-2">
<span className="text-sm">{s.description}</span>
<div className="flex gap-1">
{s.keys.map((k) => (
<kbd key={k} className="px-2 py-1 bg-muted rounded text-xs">{k}</kbd>
))}
</div>
</div>
))}
</div>
</DialogContent>
</Dialog>
)
}