feat: redesign Toolbox navigation and personalization

src/usePreferences.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import {
   PREFERENCES_KEY,
   defaultPreferences,
+  parsePreferences,
   readPreferences,
   writePreferences,
   type Preferences,
@@ -43,5 +44,22 @@ export function usePreferences(): [
     }
   }, [preferences]);
 
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key !== PREFERENCES_KEY) return;
+      if (event.newValue === null) {
+        setPreferences({ ...defaultPreferences });
+        return;
+      }
+      try {
+        setPreferences(parsePreferences(JSON.parse(event.newValue)));
+      } catch {
+        setPreferences({ ...defaultPreferences });
+      }
+    };
+    globalThis.addEventListener('storage', handleStorage);
+    return () => globalThis.removeEventListener('storage', handleStorage);
+  }, []);
+
   return [preferences, setPreferences, initial.storageAvailable];
 }