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:
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user