feat: integrate global keyboard shortcuts across multiple components
- Added `KeyboardShortcutsProvider` to `RootLayout` for centralized keyboard shortcut management. - Implemented `useGlobalKeyboardShortcuts` in `DailyPageClient`, `KanbanPageClient`, and `HomePageClient` to enhance navigation and task management with keyboard shortcuts. - Updated `KeyboardShortcuts` component to render a modal for displaying available shortcuts, improving user accessibility. - Enhanced `Header` component with buttons to open the keyboard shortcuts modal, streamlining user interaction.
This commit is contained in:
@@ -14,6 +14,7 @@ import { PendingTasksSection } from '@/components/daily/PendingTasksSection';
|
||||
import { dailyClient } from '@/clients/daily-client';
|
||||
import { Header } from '@/components/ui/Header';
|
||||
import { getPreviousWorkday, formatDateLong, isToday, generateDateTitle, formatDateShort, isYesterday } from '@/lib/date-utils';
|
||||
import { useGlobalKeyboardShortcuts } from '@/hooks/useGlobalKeyboardShortcuts';
|
||||
|
||||
interface DailyPageClientProps {
|
||||
initialDailyView?: DailyView;
|
||||
@@ -85,6 +86,13 @@ export function DailyPageClient({
|
||||
await refreshDailyDates();
|
||||
};
|
||||
|
||||
// Raccourcis clavier globaux pour la page Daily
|
||||
useGlobalKeyboardShortcuts({
|
||||
onNavigatePrevious: goToPreviousDay,
|
||||
onNavigateNext: goToNextDay,
|
||||
onGoToToday: goToToday
|
||||
});
|
||||
|
||||
const handleToggleCheckbox = async (checkboxId: string) => {
|
||||
await toggleCheckbox(checkboxId);
|
||||
};
|
||||
|
||||
@@ -12,6 +12,7 @@ import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
|
||||
import { MobileControls } from '@/components/kanban/MobileControls';
|
||||
import { DesktopControls } from '@/components/kanban/DesktopControls';
|
||||
import { useIsMobile } from '@/hooks/useIsMobile';
|
||||
import { useGlobalKeyboardShortcuts } from '@/hooks/useGlobalKeyboardShortcuts';
|
||||
|
||||
interface KanbanPageClientProps {
|
||||
initialTasks: Task[];
|
||||
@@ -55,6 +56,19 @@ function KanbanPageContent() {
|
||||
setIsCreateModalOpen(false);
|
||||
};
|
||||
|
||||
// Raccourcis clavier globaux pour la page Kanban
|
||||
useGlobalKeyboardShortcuts({
|
||||
onCreateTask: () => setIsCreateModalOpen(true),
|
||||
onToggleFilters: handleToggleFilters,
|
||||
onToggleCompactView: handleToggleCompactView,
|
||||
onToggleSwimlanes: handleToggleSwimlanes,
|
||||
onOpenSearch: () => {
|
||||
// Focus sur le champ de recherche dans les contrôles desktop
|
||||
const searchInput = document.querySelector('input[placeholder*="Rechercher"]') as HTMLInputElement;
|
||||
searchInput?.focus();
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--background)]">
|
||||
<Header
|
||||
|
||||
@@ -4,6 +4,7 @@ import "./globals.css";
|
||||
import { ThemeProvider } from "@/contexts/ThemeContext";
|
||||
import { JiraConfigProvider } from "@/contexts/JiraConfigContext";
|
||||
import { UserPreferencesProvider } from "@/contexts/UserPreferencesContext";
|
||||
import { KeyboardShortcutsProvider } from "@/contexts/KeyboardShortcutsContext";
|
||||
import { userPreferencesService } from "@/services/core/user-preferences";
|
||||
import { KeyboardShortcuts } from "@/components/KeyboardShortcuts";
|
||||
|
||||
@@ -39,12 +40,14 @@ export default async function RootLayout({
|
||||
initialTheme={initialPreferences.viewPreferences.theme}
|
||||
userPreferredTheme={initialPreferences.viewPreferences.theme === 'light' ? 'dark' : initialPreferences.viewPreferences.theme}
|
||||
>
|
||||
<KeyboardShortcuts />
|
||||
<JiraConfigProvider config={initialPreferences.jiraConfig}>
|
||||
<UserPreferencesProvider initialPreferences={initialPreferences}>
|
||||
{children}
|
||||
</UserPreferencesProvider>
|
||||
</JiraConfigProvider>
|
||||
<KeyboardShortcutsProvider>
|
||||
<KeyboardShortcuts />
|
||||
<JiraConfigProvider config={initialPreferences.jiraConfig}>
|
||||
<UserPreferencesProvider initialPreferences={initialPreferences}>
|
||||
{children}
|
||||
</UserPreferencesProvider>
|
||||
</JiraConfigProvider>
|
||||
</KeyboardShortcutsProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user