Fix currency selector sync issue between homepage and calculators

- CurrencySelector: Use useLayoutEffect for synchronous sync before paint
- CurrencySelector: Use refs to avoid stale closures in event handlers
- useLocalStorage: Auto-sync currency field with global preference when
  loading saved state, so calculators respect homepage currency selection
  while preserving other saved values

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: kitfunso

src/components/ui/calculator/CurrencySelector.tsx

@@ -1,8 +1,11 @@
-import { useEffect } from 'preact/hooks';
+import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 import { CURRENCY_OPTIONS, type Currency } from '../../../lib/regions';
 
 const STORAGE_KEY = 'boring-math-currency';
 
+// Use useLayoutEffect on client, useEffect on server
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 export interface CurrencySelectorProps {
   /** Currently selected currency */
   value: Currency;
@@ -30,24 +33,36 @@ export interface CurrencySelectorProps {
  * ```
  */
 export function CurrencySelector({ value, onChange, className = '' }: CurrencySelectorProps) {
-  // Sync with global currency on mount and listen for changes
+  // Keep refs to avoid stale closures in event handlers
+  const valueRef = useRef(value);
+  const onChangeRef = useRef(onChange);
+
+  // Update refs when props change
   useEffect(() => {
-    // Load initial value from localStorage
+    valueRef.current = value;
+    onChangeRef.current = onChange;
+  }, [value, onChange]);
+
+  // Sync with global currency on mount (synchronously before paint)
+  useIsomorphicLayoutEffect(() => {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored && ['USD', 'GBP', 'EUR'].includes(stored) && stored !== value) {
       onChange(stored as Currency);
     }
+  }, []); // Only on mount
 
-    // Listen for changes from other calculators
+  // Listen for changes from other calculators
+  useEffect(() => {
     const handler = (e: CustomEvent<{ currency: Currency }>) => {
-      if (e.detail.currency !== value) {
-        onChange(e.detail.currency);
+      const newCurrency = e.detail.currency;
+      if (newCurrency && newCurrency !== valueRef.current) {
+        onChangeRef.current(newCurrency);
       }
     };
 
     window.addEventListener('currencyChange', handler as EventListener);
     return () => window.removeEventListener('currencyChange', handler as EventListener);
-  }, []);
+  }, []); // Stable handler using refs
 
   const handleChange = (newCurrency: Currency) => {
     // Save to localStorage

src/hooks/useLocalStorage.ts

@@ -3,9 +3,15 @@
  *
  * Persists state to localStorage and syncs across tabs.
  * Perfect for saving calculator inputs so users don't lose their work.
+ *
+ * When loading saved state that has a 'currency' field, it will automatically
+ * sync with the global currency preference from 'boring-math-currency'.
  */
 
 import { useState, useEffect, useCallback } from 'preact/hooks';
+import { type Currency, getInitialCurrency } from '../lib/regions';
+
+const CURRENCY_STORAGE_KEY = 'boring-math-currency';
 
 export function useLocalStorage<T>(
   key: string,
@@ -20,7 +26,21 @@ export function useLocalStorage<T>(
     try {
       const stored = localStorage.getItem(key);
       if (stored) {
-        return JSON.parse(stored);
+        const parsed = JSON.parse(stored) as T;
+
+        // If the saved state has a currency field, sync it with the global preference
+        if (parsed && typeof parsed === 'object' && 'currency' in parsed) {
+          const globalCurrency = getInitialCurrency();
+          const savedCurrency = (parsed as { currency: Currency }).currency;
+
+          // If global currency differs from saved, update the currency field
+          // but keep all other saved values
+          if (globalCurrency !== savedCurrency) {
+            return { ...parsed, currency: globalCurrency };
+          }
+        }
+
+        return parsed;
       }
     } catch (error) {
       console.warn(`Error reading localStorage key "${key}":`, error);