+
setIsOpen(false)} />
+
+ {items.map((it) => (
-
-
-
-
-
-
+ ))}
+
+
)}
diff --git a/web/src/components/ShortcutsHelp.tsx b/web/src/components/ShortcutsHelp.tsx
new file mode 100644
index 0000000..80614d7
--- /dev/null
+++ b/web/src/components/ShortcutsHelp.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+
+const GROUPS: { title: string; keys: [string, string][] }[] = [
+ {
+ title: 'Liste',
+ keys: [
+ ['j / k', 'Article suivant / précédent'],
+ ['o · Entrée', 'Ouvrir l’article'],
+ ['m', 'Marquer lu / non lu'],
+ ['s · f', 'Favori'],
+ ['v', 'Ouvrir l’original'],
+ ['/', 'Rechercher'],
+ ['u', 'Basculer Non lus / Tous'],
+ ['r', 'Actualiser les flux'],
+ ],
+ },
+ {
+ title: 'Lecture',
+ keys: [
+ ['Espace', 'Défiler, puis article suivant'],
+ ['j · → / k · ←', 'Suivant / précédent'],
+ ['+ / -', 'Taille du texte'],
+ ['Échap', 'Fermer'],
+ ],
+ },
+];
+
+export function ShortcutsHelp({ onClose }: { onClose: () => void }) {
+ const ref = useRef
(null);
+
+ useEffect(() => {
+ ref.current?.focus();
+ const onKey = (e: KeyboardEvent) => {
+ if (e.key === 'Escape' || e.key === '?') {
+ e.stopImmediatePropagation();
+ onClose();
+ }
+ };
+ window.addEventListener('keydown', onKey, true);
+ return () => window.removeEventListener('keydown', onKey, true);
+ }, [onClose]);
+
+ return (
+
+
e.stopPropagation()}
+ >
+
Raccourcis clavier
+
+ {GROUPS.map((g) => (
+
+ {g.title}
+
+ {g.keys.map(([k, label]) => (
+
+
- {label}
+ - {k}
+
+ ))}
+
+
+ ))}
+
+
+
+
setImgFailed(true)}
+ />
+ ) : (
+