feat(grid): ajout algorithme score produit avec parametrage dynamique et page d'aide

src/components/shared/header.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { Search, X, Sun, Moon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useGridStore } from "@/features/grid/store/use-grid-store";
+
+export function Header() {
+    const { resolvedTheme, setTheme } = useTheme();
+    const setFilter = useGridStore((s) => s.setFilter);
+    const search = useGridStore((s) => s.filters.search);
+    const isDark = resolvedTheme === "dark";
+
+    return (
+        <header
+            className="h-12 flex items-center justify-between px-5 sticky top-0 z-20 glass"
+            style={{ borderBottom: "1px solid var(--border)" }}
+        >
+            {/* Search */}
+            <div className="relative w-72">
+                <Search
+                    className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5"
+                    style={{ color: "var(--text-muted)" }}
+                    strokeWidth={2}
+                />
+                <input
+                    type="search"
+                    placeholder="Rechercher…"
+                    value={search}
+                    onChange={(e) => setFilter("search", e.target.value)}
+                    className="apple-input pr-8 h-8 text-[13px]"
+                    style={{ paddingLeft: "32px" }}
+                />
+                {search && (
+                    <button
+                        onClick={() => setFilter("search", "")}
+                        className="absolute right-2.5 top-1/2 -translate-y-1/2"
+                    >
+                        <X className="w-3 h-3" style={{ color: "var(--text-muted)" }} />
+                    </button>
+                )}
+            </div>
+
+            {/* Right controls */}
+            <div className="flex items-center gap-2">
+                {/* Theme toggle */}
+                <button
+                    onClick={() => setTheme(isDark ? "light" : "dark")}
+                    title={isDark ? "Mode clair" : "Mode sombre"}
+                    className="w-8 h-8 rounded-[8px] flex items-center justify-center transition-all duration-150"
+                    style={{ color: "var(--text-secondary)" }}
+                    onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = "var(--bg-elevated)"; }}
+                    onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+                >
+                    {isDark
+                        ? <Sun className="w-[15px] h-[15px]" strokeWidth={1.8} />
+                        : <Moon className="w-[15px] h-[15px]" strokeWidth={1.8} />}
+                </button>
+
+                {/* Divider */}
+                <div className="w-px h-5 mx-1" style={{ background: "var(--border)" }} />
+
+                {/* User */}
+                <div className="flex items-center gap-2">
+                    <div className="w-[26px] h-[26px] rounded-full bg-emerald-500 dark:bg-emerald-600 flex items-center justify-center text-[11px] font-bold text-white shadow-sm border border-white/20">
+                        M
+                    </div>
+                    <span className="text-[13px] font-medium" style={{ color: "var(--text-secondary)" }}>
+                        Michael
+                    </span>
+                </div>
+            </div>
+        </header>
+    );
+}