From f5f852648e961d2b9f6c12b128865020f66df6fe Mon Sep 17 00:00:00 2001
From: Froidefond Julien <julienfroidefond@gmail.com>
Date: Wed, 25 Mar 2026 17:21:46 +0100
Subject: [PATCH] feat(gif-mood): persist layout mode in localStorage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/gif-mood/GifMoodBoard.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/gif-mood/GifMoodBoard.tsx b/src/components/gif-mood/GifMoodBoard.tsx
index 7238525..b30f596 100644
--- a/src/components/gif-mood/GifMoodBoard.tsx
+++ b/src/components/gif-mood/GifMoodBoard.tsx
@@ -264,8 +264,14 @@ export function GifMoodBoard({
   ratings,
   canEdit,
 }: GifMoodBoardProps) {
-  const [cols, setCols] = useState(4);
-  const [masonry, setMasonry] = useState(false);
+  const [cols, setCols] = useState<number>(() => {
+    if (typeof window === 'undefined') return 4;
+    return Number(localStorage.getItem('gif-mood-cols')) || 4;
+  });
+  const [masonry, setMasonry] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem('gif-mood-masonry') === 'true';
+  });
   const [, startReorderTransition] = useTransition();
   const [, startHiddenTransition] = useTransition();
 
@@ -374,7 +380,7 @@ export function GifMoodBoard({
           {[4, 5, 6].map((n) => (
             <button
               key={n}
-              onClick={() => setCols(n)}
+              onClick={() => { setCols(n); localStorage.setItem('gif-mood-cols', String(n)); }}
               className={`flex items-center justify-center rounded-lg px-2.5 py-1.5 transition-all ${
                 !masonry && cols === n
                   ? 'bg-primary text-primary-foreground shadow-sm'
@@ -387,7 +393,7 @@ export function GifMoodBoard({
           ))}
           <div className="w-px h-5 bg-border mx-0.5" />
           <button
-            onClick={() => setMasonry((m) => !m)}
+            onClick={() => setMasonry((m) => { localStorage.setItem('gif-mood-masonry', String(!m)); return !m; })}
             className={`flex items-center justify-center rounded-lg px-2.5 py-1.5 transition-all ${
               masonry
                 ? 'bg-primary text-primary-foreground shadow-sm'