feat: Themes and appeareance settings are now local to your device and not synced (#2847)

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -4,7 +4,7 @@ import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { WebApplication } from '@/Application/WebApplication'
-import { PrefKey, FeatureStatus, naturalSort, PrefDefaults } from '@standardnotes/snjs'
+import { FeatureStatus, naturalSort, LocalPrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useEffect, useState } from 'react'
 import { Subtitle, Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
@@ -14,7 +14,7 @@ import PreferencesSegment from '../PreferencesComponents/PreferencesSegment'
 import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
 import EditorAppearance from './Appearance/EditorAppearance'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
-import usePreference from '@/Hooks/usePreference'
+import { useLocalPreference } from '@/Hooks/usePreference'
 
 type Props = {
   application: WebApplication
@@ -24,19 +24,14 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
   const premiumModal = usePremiumModal()
 
   const [themeItems, setThemeItems] = useState<DropdownItem[]>([])
-  const [autoLightTheme, setAutoLightTheme] = useState<string>(() =>
-    application.getPreference(PrefKey.AutoLightThemeIdentifier, PrefDefaults[PrefKey.AutoLightThemeIdentifier]),
-  )
-  const [autoDarkTheme, setAutoDarkTheme] = useState<string>(() =>
-    application.getPreference(PrefKey.AutoDarkThemeIdentifier, PrefDefaults[PrefKey.AutoDarkThemeIdentifier]),
-  )
-  const [useDeviceSettings, setUseDeviceSettings] = useState(() =>
-    application.getPreference(PrefKey.UseSystemColorScheme, PrefDefaults[PrefKey.UseSystemColorScheme]),
-  )
 
-  const useTranslucentUI = usePreference(PrefKey.UseTranslucentUI)
+  const [autoLightTheme, setAutoLightTheme] = useLocalPreference(LocalPrefKey.AutoLightThemeIdentifier)
+  const [autoDarkTheme, setAutoDarkTheme] = useLocalPreference(LocalPrefKey.AutoDarkThemeIdentifier)
+  const [useDeviceSettings, setUseDeviceSettings] = useLocalPreference(LocalPrefKey.UseSystemColorScheme)
+
+  const [useTranslucentUI, setUseTranslucentUI] = useLocalPreference(LocalPrefKey.UseTranslucentUI)
   const toggleTranslucentUI = () => {
-    application.setPreference(PrefKey.UseTranslucentUI, !useTranslucentUI).catch(console.error)
+    setUseTranslucentUI(!useTranslucentUI)
   }
 
   useEffect(() => {
@@ -76,12 +71,12 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
   }, [application])
 
   const toggleUseDeviceSettings = () => {
-    application.setPreference(PrefKey.UseSystemColorScheme, !useDeviceSettings).catch(console.error)
-    if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
-      application.setPreference(PrefKey.AutoLightThemeIdentifier, autoLightTheme).catch(console.error)
+    setUseDeviceSettings(!useDeviceSettings)
+    if (!application.preferences.getLocalValue(LocalPrefKey.AutoLightThemeIdentifier)) {
+      setAutoLightTheme(autoLightTheme)
     }
-    if (!application.getPreference(PrefKey.AutoDarkThemeIdentifier)) {
-      application.setPreference(PrefKey.AutoDarkThemeIdentifier, autoDarkTheme).catch(console.error)
+    if (!application.preferences.getLocalValue(LocalPrefKey.AutoDarkThemeIdentifier)) {
+      setAutoDarkTheme(autoDarkTheme)
     }
     setUseDeviceSettings(!useDeviceSettings)
   }
@@ -92,7 +87,6 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
       premiumModal.activate(`${item.label} theme`)
       return
     }
-    application.setPreference(PrefKey.AutoLightThemeIdentifier, value).catch(console.error)
     setAutoLightTheme(value)
   }
 
@@ -102,7 +96,6 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
       premiumModal.activate(`${item.label} theme`)
       return
     }
-    application.setPreference(PrefKey.AutoDarkThemeIdentifier, value).catch(console.error)
     setAutoDarkTheme(value)
   }
 

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -76,7 +76,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ closeMenu }) => {
 
   useEffect(() => {
     return application.preferences.addEventObserver((event) => {
-      if (event === PreferencesServiceEvent.PreferencesChanged) {
+      if (event === PreferencesServiceEvent.LocalPreferencesChanged) {
         reloadThemes()
       }
     })

packages/web/src/javascripts/Hooks/usePreference.tsx

@@ -1,6 +1,29 @@
 import { useApplication } from '@/Components/ApplicationProvider'
-import { ApplicationEvent, PrefKey, PrefDefaults } from '@standardnotes/snjs'
-import { useEffect, useState } from 'react'
+import { ApplicationEvent, PrefKey, PrefDefaults, LocalPrefKey, LocalPrefValue } from '@standardnotes/snjs'
+import { useCallback, useEffect, useState } from 'react'
+
+export function useLocalPreference<Key extends LocalPrefKey>(preference: Key) {
+  const application = useApplication()
+
+  const [value, setValue] = useState(application.preferences.getLocalValue(preference, PrefDefaults[preference]))
+
+  const setNewValue = useCallback(
+    (newValue: LocalPrefValue[Key]) => {
+      application.preferences.setLocalValue(preference, newValue)
+    },
+    [application, preference],
+  )
+
+  useEffect(() => {
+    return application.addEventObserver(async () => {
+      const latestValue = application.preferences.getLocalValue(preference, PrefDefaults[preference])
+
+      setValue(latestValue)
+    }, ApplicationEvent.LocalPreferencesChanged)
+  }, [application, preference])
+
+  return [value, setNewValue] as const
+}
 
 export default function usePreference<Key extends PrefKey>(preference: Key) {
   const application = useApplication()