66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
'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';
|
|
import { NotificationPrefs } from '@/components/notifications/notification-prefs';
|
|
|
|
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>
|
|
|
|
{/* Notification Preferences */}
|
|
<div className="pt-4 border-t">
|
|
<h3 className="font-semibold mb-1">Notification Preferences</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">
|
|
Choose which events trigger in-app notifications.
|
|
</p>
|
|
<NotificationPrefs />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|