feat: B3 — search vidéos (filtre client-side + param ?q= backend)

frontend/src/pages/HomePage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
 
@@ -20,6 +20,7 @@ export default function HomePage() {
   const [videos, setVideos] = useState<Video[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
+  const [query, setQuery] = useState('');
 
   useEffect(() => {
     apiFetch<VideosResponse>('/videos')
@@ -28,8 +29,16 @@ export default function HomePage() {
       .finally(() => setLoading(false));
   }, []);
 
-  const free    = videos.filter((v) => !v.locked);
-  const premium = videos.filter((v) => v.locked);
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return videos;
+    return videos.filter(
+      (v) => v.title.toLowerCase().includes(q) || v.description?.toLowerCase().includes(q),
+    );
+  }, [videos, query]);
+
+  const free    = filtered.filter((v) => !v.locked);
+  const premium = filtered.filter((v) => v.locked);
 
   return (
     <div className="flex flex-col gap-10">
@@ -40,6 +49,13 @@ export default function HomePage() {
         <p className="mt-2 text-sm text-od-muted">
           Contenu libre et premium — connecte-toi pour accéder aux formations complètes.
         </p>
+        <input
+          type="search"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Rechercher…"
+          className="mt-4 w-full max-w-sm rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+        />
       </section>
 
       {loading && (
@@ -79,6 +95,9 @@ export default function HomePage() {
           {videos.length === 0 && (
             <p className="text-sm text-od-muted">Aucune vidéo disponible pour l'instant.</p>
           )}
+          {videos.length > 0 && filtered.length === 0 && (
+            <p className="text-sm text-od-muted">Aucun résultat pour « {query} ».</p>
+          )}
         </>
       )}