From a94489dd07f6e372f6aa4c07120463b381bd0688 Mon Sep 17 00:00:00 2001
From: Michael <michael@collectflow.local>
Date: Sat, 21 Feb 2026 18:42:00 +0100
Subject: [PATCH] fix(grid): preserve active grid query in store to restore
 context on navigation

---
 src/components/shared/sidebar.tsx            | 17 ++++++++++++++++-
 src/features/grid/components/grid-client.tsx | 13 ++++++++++++-
 src/features/grid/store/use-grid-store.ts    | 10 ++++++++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/shared/sidebar.tsx b/src/components/shared/sidebar.tsx
index 30e2f1e..7d630a1 100644
--- a/src/components/shared/sidebar.tsx
+++ b/src/components/shared/sidebar.tsx
@@ -4,6 +4,8 @@ import { LayoutGrid, Camera, FileDown, Settings, Package, BarChart3 } from "luci
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
+import { useGridStore } from "@/features/grid/store/use-grid-store";
+import { useEffect, useState } from "react";
 
 const NAV_ITEMS = [
     { icon: LayoutGrid, label: "Grille", href: "/grid" },
@@ -15,6 +17,12 @@ const NAV_ITEMS = [
 
 export function Sidebar() {
     const pathname = usePathname();
+    const activeGridQuery = useGridStore((s) => s.activeGridQuery);
+    const [isMounted, setIsMounted] = useState(false);
+
+    useEffect(() => {
+        setIsMounted(true);
+    }, []);
 
     return (
         <aside
@@ -37,10 +45,17 @@ export function Sidebar() {
             <nav className="px-2 pt-2.5 space-y-0.5">
                 {NAV_ITEMS.map(({ icon: Icon, label, href }) => {
                     const isActive = pathname.startsWith(href);
+
+                    // Restore grid context if navigating back to the grid
+                    let resolvedHref = href;
+                    if (href === "/grid" && isMounted && activeGridQuery) {
+                        resolvedHref = `/grid${activeGridQuery}`;
+                    }
+
                     return (
                         <Link
                             key={href}
-                            href={href}
+                            href={resolvedHref}
                             style={{
                                 color: isActive ? "var(--text-primary)" : "var(--text-secondary)",
                                 background: isActive ? "var(--bg-elevated)" : "transparent",
diff --git a/src/features/grid/components/grid-client.tsx b/src/features/grid/components/grid-client.tsx
index 9ed97fa..bfe9906 100644
--- a/src/features/grid/components/grid-client.tsx
+++ b/src/features/grid/components/grid-client.tsx
@@ -11,6 +11,7 @@ import type { ProductRow } from "@/types/grid";
 import { CheckCircle, AlertCircle, Loader2 } from "lucide-react";
 
 import { useScoreSettingsStore } from "@/features/score/store/use-score-settings-store";
+import { useSearchParams } from "next/navigation";
 import { computeProductScores } from "@/lib/score-engine";
 
 interface GridClientProps {
@@ -25,6 +26,9 @@ interface GridClientProps {
 
 export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins, magasin, nomenclature }: GridClientProps) {
     const setRows = useGridStore((s) => s.setRows);
+    const setActiveGridQuery = useGridStore((s) => s.setActiveGridQuery);
+    const searchParams = useSearchParams();
+
     const seuilAxeFort = useScoreSettingsStore((s) => s.seuilAxeFort);
     const bonusParAxe = useScoreSettingsStore((s) => s.bonusParAxe);
 
@@ -36,10 +40,17 @@ export function GridClient({ initialRows, nomFournisseur, fournisseurs, magasins
     const [isMounted, setIsMounted] = useState(false);
 
     useEffect(() => {
-        // eslint-disable-next-line react-hooks/set-state-in-effect
         setIsMounted(true);
     }, []);
 
+    // Sync active search params to the store
+    useEffect(() => {
+        if (!isMounted) return;
+        const currentQueryString = searchParams.toString();
+        // Set the active query, ensuring it starts with ? if not empty
+        setActiveGridQuery(currentQueryString ? `?${currentQueryString}` : "");
+    }, [searchParams, setActiveGridQuery, isMounted]);
+
     useEffect(() => {
         if (!isMounted) return;
         // Deep clone to avoid mutating the React prop directly across re-renders
diff --git a/src/features/grid/store/use-grid-store.ts b/src/features/grid/store/use-grid-store.ts
index 487f3e7..d4e728f 100644
--- a/src/features/grid/store/use-grid-store.ts
+++ b/src/features/grid/store/use-grid-store.ts
@@ -12,6 +12,8 @@ interface GridState {
     filters: GridFilters;
     summary: GridSummary;
     displayDensity: "compact" | "normal" | "comfortable";
+    /** The active URL search parameters (e.g. ?fournisseur=123&magasin=TOTAL) */
+    activeGridQuery: string;
 
     // Actions
     setRows: (rows: ProductRow[]) => void;
@@ -19,6 +21,7 @@ interface GridState {
     resetDrafts: () => void;
     setFilter: (key: keyof GridFilters, value: string | null) => void;
     setDisplayDensity: (density: "compact" | "normal" | "comfortable") => void;
+    setActiveGridQuery: (query: string) => void;
 }
 
 function computeSummary(rows: ProductRow[], drafts: Record<string, GammeCode>): GridSummary {
@@ -59,6 +62,7 @@ export const useGridStore = create<GridState>()(
                 tauxMargeGlobal: 0,
             },
             displayDensity: "normal",
+            activeGridQuery: "",
 
             setRows: (rows) => {
                 set({ rows, summary: computeSummary(rows, get().draftChanges) });
@@ -74,17 +78,19 @@ export const useGridStore = create<GridState>()(
             },
 
             setFilter: (key, value) => {
-                set((state) => ({ filters: { ...state.filters, [key]: value } }));
+                set((state) => ({ ...state, filters: { ...state.filters, [key]: value } }));
             },
             setDisplayDensity: (density) => set({ displayDensity: density }),
+            setActiveGridQuery: (query) => set({ activeGridQuery: query }),
         }),
         {
             name: "collectflow-grid-storage",
-            // Only persist filters and display density, do not persist data rows and drafts
+            // Only persist filters, display density, drafts, and active grid query
             partialize: (state) => ({
                 filters: state.filters,
                 displayDensity: state.displayDensity,
                 draftChanges: state.draftChanges,
+                activeGridQuery: state.activeGridQuery,
             }),
         }
     )