Add missing global Context for settings hook

package.json

@@ -44,7 +44,8 @@
   "dependencies": {
     "@decky/api": "^1.1.2",
     "localforage": "^1.10.0",
-    "react-icons": "^4.12.0"
+    "react-icons": "^4.12.0",
+    "rxjs": "^7.8.1"
   },
   "pnpm": {
     "peerDependencyRules": {

src/hooks/useSettings.ts

@@ -1,40 +1,50 @@
 import { call } from '@decky/api'
 import { useEffect, useState } from 'react'
+import { BehaviorSubject } from 'rxjs'
 
 export type Settings = {
   size: 'regular' | 'small' | 'minimalist'
   position: 'tl' | 'tr' | 'bl' | 'br'
   labelTypeOnHover: 'off' | 'small' | 'regular'
 }
 
-export const useSettings = () => {
-  const [settings, setSettings] = useState<Settings>({
-    size: 'regular',
-    position: 'tl',
-    labelTypeOnHover: 'off'
-  })
+// Not using the React context here as this approach is simpler.
+const SettingsContext = new BehaviorSubject<Settings>({
+  size: 'regular',
+  position: 'tl',
+  labelTypeOnHover: 'off'
+})
+const LoadingContext = new BehaviorSubject(true)
+
+function updateSettings(
+  key: keyof Settings,
+  value: Settings[keyof Settings]
+) {
+  const newSettings = { ...SettingsContext.value, [key]: value }
+  call<[string, Settings], Settings>('set_setting', 'settings', newSettings).catch(console.error)
+  SettingsContext.next(newSettings)
+}
+
+export function loadSettings() {
+  LoadingContext.next(true)
+  call<[string, Settings], Settings>('get_setting', 'settings', SettingsContext.value)
+    .then(settings => SettingsContext.next(settings))
+    .catch(console.error)
+    .finally(() => LoadingContext.next(false))
+}
 
-  const [loading, setLoading] = useState(true)
+export const useSettings = () => {
+  const [settings, setSettings] = useState(SettingsContext.value)
+  const [loading, setLoading] = useState(LoadingContext.value)
 
   useEffect(() => {
-    const getData = async () => {
-      const savedSettings = await call<[string, Settings], Settings>('get_setting', 'settings', settings)
-      setSettings(savedSettings)
-      setLoading(false)
-    }
-    getData()
-  }, [])
-
-  async function updateSettings(
-    key: keyof Settings,
-    value: Settings[keyof Settings]
-  ) {
-    setSettings((oldSettings) => {
-      const newSettings = { ...oldSettings, [key]: value }
-      call<[string, Settings], Settings>('set_setting', 'settings', newSettings).catch(console.error)
-      return newSettings
-    })
-  }
+    const settingsSub = SettingsContext.asObservable().subscribe((value) => setSettings(value));
+    const loadingSub = LoadingContext.asObservable().subscribe((value) => setLoading(value));
+    return () => {
+      loadingSub.unsubscribe();
+      settingsSub.unsubscribe();
+    };
+  }, []);
 
   function setSize(value: Settings['size']) {
     updateSettings('size', value)

src/index.tsx

@@ -5,8 +5,10 @@ import { FaReact } from 'react-icons/fa'
 
 import Settings from './components/settings'
 import patchLibraryApp from './lib/patchLibraryApp'
+import { loadSettings } from './hooks/useSettings'
 
 export default definePlugin(() => {
+  loadSettings()
   const libraryPatch = patchLibraryApp()
   return {
     title: <div className={staticClasses.Title}>ProtonDB Badges</div>,