From 5f1c601979f4e21c5eefc919a8cb7c6c3be6c80f Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 17 Jul 2026 06:51:38 +0000
Subject: [PATCH] refactor: simplify useCardSettings hook initialization

Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
---
 src/components/CardGeneratorModal.tsx |  2 +-
 src/hooks/useCardSettings.ts          | 27 +++------------------------
 2 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/src/components/CardGeneratorModal.tsx b/src/components/CardGeneratorModal.tsx
index 442f9a23..8364483f 100644
--- a/src/components/CardGeneratorModal.tsx
+++ b/src/components/CardGeneratorModal.tsx
@@ -41,7 +41,7 @@ export default function CardGeneratorModal({
     toggleMainBlockVisibility,
     toggleDisplayOption,
     isBlockVisible,
-  } = useCardSettings(mounted);
+  } = useCardSettings();
 
   const {
     isGenerating,
diff --git a/src/hooks/useCardSettings.ts b/src/hooks/useCardSettings.ts
index c54dbc3e..1f011704 100644
--- a/src/hooks/useCardSettings.ts
+++ b/src/hooks/useCardSettings.ts
@@ -9,37 +9,16 @@ import {
 } from "@/lib/cardSettings";
 import type { CardLayout, CardBlockId } from "@/lib/types";
 
-export function useCardSettings(mounted: boolean) {
-  const [isHydrated, setIsHydrated] = useState(false);
+export function useCardSettings() {
   const [layout, setLayout] = useState<CardLayout>(() => loadCardSettings().layout);
   const [displayOptions, setDisplayOptions] = useState<CardDisplayOptions>(
     () => loadCardSettings().options,
   );
 
-  // Initialize state from storage on mount
+    // Persist changes to storage
   useEffect(() => {
-    if (!mounted || isHydrated) {
-      return;
-    }
-
-    const { layout: storedLayout, options: storedOptions } = loadCardSettings();
-    
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setLayout((prev) => JSON.stringify(prev) !== JSON.stringify(storedLayout) ? storedLayout : prev);
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setDisplayOptions((prev) => JSON.stringify(prev) !== JSON.stringify(storedOptions) ? storedOptions : prev);
-    
-    setIsHydrated(true);
-  }, [mounted, isHydrated]);
-
-  // Persist changes to storage
-  useEffect(() => {
-    if (!mounted || !isHydrated) {
-      return;
-    }
-
     saveCardSettings(layout, displayOptions);
-  }, [layout, displayOptions, mounted, isHydrated]);
+  }, [layout, displayOptions]);
 
   const toggleMainBlockVisibility = useCallback((blockId: CardBlockId) => {
     setLayout((prev) => toggleBlockVisibility(prev, blockId));