fix: improve cookie store

apps/start/src/hooks/use-cookie-store.tsx

@@ -2,10 +2,11 @@ import { useRouteContext } from '@tanstack/react-router';
 import { createServerFn, createServerOnlyFn } from '@tanstack/react-start';
 import { getCookies, setCookie } from '@tanstack/react-start/server';
 import { pick } from 'ramda';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { z } from 'zod';
 
 const VALID_COOKIES = ['ui-theme', 'chartType', 'range'] as const;
+const COOKIE_EVENT_NAME = '__cookie-change';
 
 const setCookieFn = createServerFn({ method: 'POST' })
   .inputValidator(z.object({ key: z.enum(VALID_COOKIES), value: z.string() }))
@@ -25,15 +26,41 @@ export function useCookieStore<T>(
 ) {
   const { cookies } = useRouteContext({ strict: false });
   const [value, setValue] = useState<T>((cookies?.[key] ?? defaultValue) as T);
+  const ref = useRef(Math.random().toString(36).substring(7));
+
+  useEffect(() => {
+    const handleCookieChange = (
+      event: CustomEvent<{ key: string; value: T; from: string }>,
+    ) => {
+      if (event.detail.key === key && event.detail.from !== ref.current) {
+        setValue(event.detail.value);
+      }
+    };
+
+    window.addEventListener(
+      COOKIE_EVENT_NAME,
+      handleCookieChange as EventListener,
+    );
+    return () => {
+      window.removeEventListener(
+        COOKIE_EVENT_NAME,
+        handleCookieChange as EventListener,
+      );
+    };
+  }, [key]);
 
   return useMemo(
     () =>
       [
         value,
-        (value: T) => {
-          console.log('setting cookie', key, value);
-          setValue(value);
-          setCookieFn({ data: { key, value: String(value) } });
+        (newValue: T) => {
+          setValue(newValue);
+          setCookieFn({ data: { key, value: String(newValue) } });
+          window.dispatchEvent(
+            new CustomEvent(COOKIE_EVENT_NAME, {
+              detail: { key, value: newValue, from: ref.current },
+            }),
+          );
         },
       ] as const,
     [value, key],