first commit

2026-05-22 09:17:28 +02:00
commit 26b3ed6994
33 changed files with 2943 additions and 0 deletions
@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+import { triggerRefresh } from "@/lib/api";
+
+interface Props {
+    lastUpdated: string | null;
+    videoCount: number;
+    onSearch: (q: string) => void;
+    dark: boolean;
+    onToggleDark: () => void;
+}
+
+export default function TopBar({ lastUpdated, videoCount, onSearch, dark, onToggleDark }: Props) {
+    const [refreshing, setRefreshing] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+
+    const commitSearch = () => onSearch(inputValue);
+
+    const handleRefresh = async () => {
+        commitSearch();
+        setRefreshing(true);
+        try {
+            await triggerRefresh();
+            setTimeout(() => window.location.reload(), 3000);
+        } catch {
+            // silently fail
+        } finally {
+            setTimeout(() => setRefreshing(false), 3000);
+        }
+    };
+
+    return (
+        <header className="topbar">
+            <div className="topbar__search">
+                <span>🔍</span>
+                <input
+                    id="search-input"
+                    type="text"
+                    placeholder="Rechercher dans les vidéos... (Entrée pour valider)"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && commitSearch()}
+                />
+            </div>
+
+            {lastUpdated && (
+                <p className="topbar__status">
+                    {videoCount} vidéos · mis à jour {new Intl.RelativeTimeFormat("fr", { numeric: "auto" }).format(
+                        -Math.round((Date.now() - new Date(lastUpdated).getTime()) / 3600000),
+                        "hours"
+                    )}
+                </p>
+            )}
+
+            <button
+                className="topbar__theme-btn"
+                onClick={onToggleDark}
+                title={dark ? "Passer en mode clair" : "Passer en mode sombre"}
+                aria-label="Basculer le thème"
+            >
+                {dark ? "☀️" : "🌙"}
+            </button>
+
+            <button
+                id="btn-refresh"
+                className="topbar__btn"
+                onClick={handleRefresh}
+                disabled={refreshing}
+            >
+                {refreshing ? "⟳ Actualisation..." : "⟳ Actualiser"}
+            </button>
+        </header>
+    );
+}