feat: add settings subscription to watch for Nostr updates

- Import and use watchSettings from settingsService
- Subscribe to settings changes in eventStore
- Automatically update app state when settings change from Nostr
- Properly cleanup subscription on component unmount
- Fixes settings resetting on browser refresh

src/components/Bookmarks.tsx

@@ -12,7 +12,7 @@ import ContentPanel from './ContentPanel'
 import { HighlightsPanel } from './HighlightsPanel'
 import { fetchReadableContent, ReadableContent } from '../services/readerService'
 import Settings from './Settings'
-import { UserSettings, loadSettings, saveSettings } from '../services/settingsService'
+import { UserSettings, loadSettings, saveSettings, watchSettings } from '../services/settingsService'
 import { loadFont, getFontFamily } from '../utils/fontLoader'
 export type ViewMode = 'compact' | 'cards' | 'large'
 
@@ -53,6 +53,21 @@ const Bookmarks: React.FC<BookmarksProps> = ({ relayPool, onLogout }) => {
     }
   }, [relayPool, activeAccount?.pubkey])
 
+  // Watch for settings changes from Nostr
+  useEffect(() => {
+    if (!activeAccount || !eventStore) return
+    
+    const subscription = watchSettings(eventStore, activeAccount.pubkey, (loadedSettings) => {
+      if (loadedSettings) {
+        setSettings(loadedSettings)
+      }
+    })
+    
+    return () => {
+      subscription.unsubscribe()
+    }
+  }, [activeAccount?.pubkey, eventStore])
+
   useEffect(() => {
     const root = document.documentElement.style
     if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)