julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance KanbanPageClient and KeyboardShortcuts with new functionality

Browse Source 
- Added `toggleFontSize` and `handleToggleDueDateFilter` to `KanbanPageClient` for improved user control over font size and due date visibility.
- Replaced `useKeyboardShortcuts` with `useGlobalKeyboardShortcuts` for better shortcut management across components.
- Updated keyboard shortcuts in `KeyboardShortcutsContext` to include new actions for toggling objectives, due date filters, and font size.
- Refined `KeyboardShortcutsModal` layout for better usability and consistency.
- Removed deprecated `useKeyboardShortcuts` hook to streamline codebase.
This commit is contained in:
Julien Froidefond
2025-09-29 20:57:00 +02:00
parent 749f69680b
commit 32f9d1d5de
6 changed files with 127 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/ui/KeyboardShortcutsModal.tsx
View File

@@ -18,7 +18,7 @@ interface KeyboardShortcutsModalProps {
function KeyBadge({ keyText }: { keyText: string }) {
return (
<kbd className="inline-flex items-center px-2 py-1 text-xs font-mono font-medium text-[var(--foreground)] bg-[var(--card)] border border-[var(--border)] rounded-md shadow-sm">
<kbd className="inline-flex items-center px-1.5 py-0.5 text-xs font-mono font-medium text-[var(--foreground)] bg-[var(--card)] border border-[var(--border)] rounded shadow-sm">
{keyText}
</kbd>
);
@@ -26,10 +26,10 @@ function KeyBadge({ keyText }: { keyText: string }) {
function ShortcutRow({ shortcut }: { shortcut: KeyboardShortcut }) {
return (
<div className="flex items-center justify-between py-2 px-3 rounded-md hover:bg-[var(--card-hover)] transition-colors">
<div className="flex items-center gap-2">
<div className="flex items-center justify-between py-1 px-2 rounded hover:bg-[var(--card-hover)] transition-colors">
<div className="flex items-center gap-1">
{shortcut.keys.map((key, index) => (
<div key={index} className="flex items-center gap-1">
<div key={index} className="flex items-center gap-0.5">
<KeyBadge keyText={key} />
{index < shortcut.keys.length - 1 && (
<span className="text-[var(--muted-foreground)] text-xs">+</span>
@@ -37,7 +37,7 @@ function ShortcutRow({ shortcut }: { shortcut: KeyboardShortcut }) {
</div>
))}
</div>
<span className="text-sm text-[var(--foreground)] font-mono">
<span className="text-xs text-[var(--foreground)] font-mono">
{shortcut.description}
</span>
</div>
@@ -61,14 +61,14 @@ export function KeyboardShortcutsModal({
}, {} as Record<string, KeyboardShortcut[]>);
return (
<Modal isOpen={isOpen} onClose={onClose} title={title} size="lg">
<div className="space-y-6">
<Modal isOpen={isOpen} onClose={onClose} title={title} size="md">
<div className="space-y-4">
{Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
<div key={category}>
<h3 className="text-sm font-mono font-semibold text-[var(--primary)] uppercase tracking-wider mb-3">
<h3 className="text-xs font-mono font-semibold text-[var(--primary)] uppercase tracking-wider mb-2">
{category}
</h3>
<div className="space-y-1">
<div className="space-y-0.5">
{categoryShortcuts.map((shortcut, index) => (
<ShortcutRow key={index} shortcut={shortcut} />
))}
@@ -77,8 +77,8 @@ export function KeyboardShortcutsModal({
))}
{shortcuts.length === 0 && (
<div className="text-center py-8">
<p className="text-[var(--muted-foreground)] font-mono">
<div className="text-center py-6">
<p className="text-xs text-[var(--muted-foreground)] font-mono">
Aucun raccourci disponible sur cette page
</p>
</div>
@@ -86,9 +86,9 @@ export function KeyboardShortcutsModal({
</div>
{/* Footer avec info */}
<div className="mt-6 pt-4 border-t border-[var(--border)]/50">
<div className="mt-4 pt-3 border-t border-[var(--border)]/50">
<p className="text-xs text-[var(--muted-foreground)] font-mono text-center">
Appuyez sur <KeyBadge keyText="Esc" /> pour fermer cette fenêtre
<KeyBadge keyText="Esc" /> pour fermer
</p>
</div>
</Modal>