Skip to content

Commit 116ad90

Browse files
serge-eric-kalagaserge-eric-kalaga
committed
feat: ajouter un modal d'aide avec des raccourcis clavier et des instructions d'utilisation
1 parent f07144a commit 116ad90

2 files changed

Lines changed: 173 additions & 0 deletions

File tree

‎frontend/src/components/HelpModal.tsx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import { X } from "lucide-react";
2+
3+
interface Props {
4+
open: boolean;
5+
onClose: () => void;
6+
}
7+
8+
export default function HelpModal({ open, onClose }: Props) {
9+
if (!open) return null;
10+
11+
return (
12+
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
13+
<div className="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={onClose} />
14+
<div className="relative bg-card border border-border rounded-xl shadow-lg w-full max-w-2xl p-6 animate-fade-in max-h-[90vh] overflow-y-auto">
15+
<button
16+
onClick={onClose}
17+
className="absolute top-4 right-4 p-1 rounded-md hover:bg-surface-hover text-muted-foreground"
18+
aria-label="Fermer"
19+
title="Fermer"
20+
>
21+
<X className="w-4 h-4" />
22+
</button>
23+
24+
<h2 className="text-lg font-semibold text-card-foreground pr-8">Aide</h2>
25+
<p className="text-sm text-muted-foreground mt-1">
26+
Raccourcis clavier, recherche, variables et actions rapides.
27+
</p>
28+
29+
<div className="mt-6 space-y-6">
30+
<section>
31+
<h3 className="text-sm font-semibold text-foreground">Raccourcis</h3>
32+
<ul className="mt-2 space-y-1 text-sm text-muted-foreground">
33+
<li>
34+
<span className="font-mono text-foreground">Ctrl/Cmd + P</span> : ouvrir la palette (recherche rapide)
35+
</li>
36+
<li>
37+
<span className="font-mono text-foreground">Ctrl/Cmd + K</span> : focus sur la recherche
38+
</li>
39+
<li>
40+
<span className="font-mono text-foreground">Entrée</span> (palette) : copier la commande sélectionnée
41+
</li>
42+
<li>
43+
<span className="font-mono text-foreground">Esc</span> : fermer la palette / les modals
44+
</li>
45+
</ul>
46+
</section>
47+
48+
<section>
49+
<h3 className="text-sm font-semibold text-foreground">Palette (Ctrl/Cmd + P)</h3>
50+
<div className="mt-2 text-sm text-muted-foreground space-y-2">
51+
<p>
52+
La palette s’ouvre en overlay et affiche par défaut les <strong className="text-foreground">10 commandes les plus copiées</strong>.
53+
Quand tu commences à taper, elle lance une recherche serveur.
54+
</p>
55+
<p>
56+
Le nombre à droite correspond au <strong className="text-foreground">nombre de copies</strong>.
57+
</p>
58+
</div>
59+
</section>
60+
61+
<section>
62+
<h3 className="text-sm font-semibold text-foreground">Recherche avancée</h3>
63+
<div className="mt-2 text-sm text-muted-foreground space-y-2">
64+
<p>
65+
Tu peux utiliser des opérateurs (dans la barre de recherche ou dans la palette) :
66+
</p>
67+
<ul className="space-y-1">
68+
<li>
69+
<span className="font-mono text-foreground">tag:docker</span> — filtrer par tag
70+
</li>
71+
<li>
72+
<span className="font-mono text-foreground">group:prod</span> — filtrer par groupe (nom exact)
73+
</li>
74+
<li>
75+
<span className="font-mono text-foreground">fav:true</span> — seulement les favoris
76+
</li>
77+
</ul>
78+
</div>
79+
</section>
80+
81+
<section>
82+
<h3 className="text-sm font-semibold text-foreground">Copie & variables</h3>
83+
<div className="mt-2 text-sm text-muted-foreground space-y-2">
84+
<p>
85+
Si une commande contient des variables <span className="font-mono text-foreground">{"{{VAR}}"}</span>, le bouton Copy (ou la palette)
86+
ouvre un modal pour remplir les valeurs.
87+
</p>
88+
<ul className="space-y-1">
89+
<li>Copy as-is : copie la commande telle quelle</li>
90+
<li>Copy with values : remplace les variables par tes valeurs</li>
91+
</ul>
92+
</div>
93+
</section>
94+
95+
<section>
96+
<h3 className="text-sm font-semibold text-foreground">Organisation & actions</h3>
97+
<ul className="mt-2 space-y-1 text-sm text-muted-foreground">
98+
<li>Groupes : organise tes commandes par contexte (projet, environnement…)</li>
99+
<li>Tags : clique sur un tag d’une commande pour filtrer</li>
100+
<li>Favoris : l’étoile permet de marquer une commande</li>
101+
<li>Tri : Recent / Most copied</li>
102+
<li>Affichage : Vertical / Horizontal</li>
103+
<li>Vue : bouton View pour ouvrir une commande en modal</li>
104+
</ul>
105+
</section>
106+
107+
<section>
108+
<h3 className="text-sm font-semibold text-foreground">Sélection multiple</h3>
109+
<div className="mt-2 text-sm text-muted-foreground space-y-2">
110+
<p>
111+
Active le mode <strong className="text-foreground">Select</strong> pour cocher plusieurs commandes.
112+
Une barre d’actions s’affiche en bas (Move / Export / Favorite / Delete).
113+
</p>
114+
</div>
115+
</section>
116+
117+
<section>
118+
<h3 className="text-sm font-semibold text-foreground">Import / Export</h3>
119+
<div className="mt-2 text-sm text-muted-foreground space-y-2">
120+
<p>
121+
Export (JSON/CSV/PDF) et import JSON sont accessibles depuis la sidebar.
122+
Tu peux aussi exporter une sélection via la barre d’actions.
123+
</p>
124+
</div>
125+
</section>
126+
127+
<section>
128+
<h3 className="text-sm font-semibold text-foreground">Dashboard</h3>
129+
<div className="mt-2 text-sm text-muted-foreground">
130+
Le dashboard affiche des compteurs (commandes, groupes, tags) et les copies sur une plage de dates.
131+
</div>
132+
</section>
133+
</div>
134+
135+
<div className="flex justify-end mt-6">
136+
<button
137+
onClick={onClose}
138+
className="px-4 py-2 text-sm rounded-md bg-accent-blue text-accent-blue-foreground hover:opacity-90 transition-all font-medium"
139+
>
140+
Fermer
141+
</button>
142+
</div>
143+
</div>
144+
</div>
145+
);
146+
}

‎frontend/src/pages/Index.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import GroupModal from "@/components/GroupModal";
1111
import CommandModal from "@/components/CommandModal";
1212
import CommandViewModal from "@/components/CommandViewModal";
1313
import CommandPalette from "@/components/CommandPalette";
14+
import HelpModal from "@/components/HelpModal";
1415
import ExportModal from "@/components/ExportModal";
1516
import VariableModal from "@/components/VariableModal";
1617
import DeleteModal from "@/components/DeleteModal";
@@ -154,6 +155,7 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
154155
const [editCmd, setEditCmd] = useState<Command | null>(null);
155156
const [viewCmd, setViewCmd] = useState<Command | null>(null);
156157
const [paletteOpen, setPaletteOpen] = useState(false);
158+
const [helpOpen, setHelpOpen] = useState(false);
157159
const [exportModal, setExportModal] = useState(false);
158160
const [exportSelection, setExportSelection] = useState<Command[] | null>(null);
159161
const [deleteTarget, setDeleteTarget] = useState<{ type: "command" | "group"; id: number; title: string } | null>(null);
@@ -187,6 +189,7 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
187189
}
188190
if (e.key === "Escape") {
189191
setPaletteOpen(false);
192+
setHelpOpen(false);
190193
setGroupModal(false);
191194
setCmdModal(false);
192195
setViewCmd(null);
@@ -644,6 +647,15 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
644647
>
645648
<Plus className="w-4 h-4" /> Add Command
646649
</button>
650+
651+
<button
652+
onClick={() => setHelpOpen(true)}
653+
disabled={vault.loading}
654+
className="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-md border border-input bg-background text-muted-foreground hover:text-foreground hover:bg-surface-hover disabled:opacity-50 transition-colors"
655+
title="Aide"
656+
>
657+
Aide
658+
</button>
647659
</div>
648660

649661
<div className="mt-1 text-[11px] text-muted-foreground pl-9">
@@ -685,6 +697,16 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
685697
<span>Unable to load stats</span>
686698
)}
687699
</div>
700+
701+
<div className="flex items-end justify-end">
702+
<button
703+
onClick={() => setHelpOpen(true)}
704+
className="inline-flex items-center justify-center px-3 py-2 text-sm rounded-md border border-input bg-background text-muted-foreground hover:text-foreground hover:bg-surface-hover transition-colors"
705+
title="Aide"
706+
>
707+
Aide
708+
</button>
709+
</div>
688710
</div>
689711
)}
690712
</div>
@@ -973,6 +995,11 @@ function VaultPage({ token, onLogout }: { token: string; onLogout: () => void })
973995
parseAdvancedSearch={parseAdvancedSearch}
974996
/>
975997

998+
<HelpModal
999+
open={helpOpen}
1000+
onClose={() => setHelpOpen(false)}
1001+
/>
1002+
9761003
<VariableModal
9771004
open={!!varModal}
9781005
command={varModal?.command ?? ""}

0 commit comments

Comments
 (0)