feat(mobile): streamline settings management and sync functionality

- Updated general and UI settings to utilize shared default settings from the new shared package.
- Introduced a new sync queue for managing local and remote settings synchronization.
- Removed outdated settings interfaces that are now integrated into the shared package.
- Enhanced event handling for setting changes to improve responsiveness and data consistency.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/src/atoms/settings/general.ts

@@ -1,41 +1,18 @@
-import type { GeneralSettings } from "@/src/interfaces/settings/general"
+import { defaultGeneralSettings } from "@follow/shared/src/settings/defaults"
+import type { GeneralSettings } from "@follow/shared/src/settings/interface"
+
 import { getDeviceLanguage } from "@/src/lib/i18n"
 
 import { createSettingAtom } from "./internal/helper"
 
-const createDefaultSettings = (): GeneralSettings => ({
-  // App
-  language: getDeviceLanguage(),
-
-  // Action
-  summary: false,
-  translation: false,
-  actionLanguage: getDeviceLanguage(),
-
-  // Data control
-
-  sendAnonymousData: true,
-
-  autoGroup: true,
-
-  // view
-  unreadOnly: true,
-  // mark unread
-  scrollMarkUnread: true,
-
-  renderMarkUnread: false,
-  // UX
-  groupByDate: true,
-  autoExpandLongSocialMedia: false,
-
-  // Secure
-  jumpOutLinkWarn: true,
-  // TTS
-  voice: "en-US-AndrewMultilingualNeural",
-
-  // Content
-  openLinksInApp: true,
-})
+const createDefaultSettings = (): GeneralSettings => {
+  const deviceLanguage = getDeviceLanguage()
+  return {
+    ...defaultGeneralSettings,
+    actionLanguage: deviceLanguage,
+    language: deviceLanguage,
+  }
+}
 
 export const {
   useSettingKey: useGeneralSettingKey,
@@ -49,3 +26,11 @@ export const {
 
   settingAtom: __generalSettingAtom,
 } = createSettingAtom("general", createDefaultSettings)
+
+export const generalServerSyncWhiteListKeys: (keyof GeneralSettings)[] = [
+  "sendAnonymousData",
+  "language",
+  "appLaunchOnStartup",
+  "dataPersist",
+  "voice",
+]

apps/mobile/src/atoms/settings/internal/helper.ts

@@ -1,5 +1,6 @@
 import { useRefValue } from "@follow/hooks"
 import { createAtomHooks } from "@follow/utils"
+import { EventBus } from "@follow/utils/src/event-bus"
 import type { SetStateAction, WritableAtom } from "jotai"
 import { atom as jotaiAtom, useAtomValue } from "jotai"
 import { atomWithStorage, selectAtom } from "jotai/utils"
@@ -116,6 +117,11 @@ export const createSettingAtom = <T extends object>(
     value: ReturnType<typeof getSettings>[K],
   ) => {
     const updated = Date.now()
+
+    EventBus.dispatch("SETTING_CHANGE_EVENT", {
+      key: key as "general" | "ui",
+      payload: value,
+    })
     setSettings({
       ...getSettings(),
       [key]: value,

apps/mobile/src/atoms/settings/ui.ts

@@ -1,23 +1,9 @@
-import type { UISettings } from "@/src/interfaces/settings/ui"
+import { defaultUISettings } from "@follow/shared/src/settings/defaults"
+import type { UISettings } from "@follow/shared/src/settings/interface"
 
 import { createSettingAtom } from "./internal/helper"
 
-export const createDefaultSettings = (): UISettings => ({
-  // Subscription
-
-  hideExtraBadge: false,
-
-  subscriptionShowUnreadCount: true,
-  thumbnailRatio: "square",
-
-  // Content
-  readerRenderInlineStyle: false,
-  codeHighlightThemeLight: "github-light",
-  codeHighlightThemeDark: "github-dark",
-  guessCodeLanguage: true,
-  hideRecentReader: false,
-  customCSS: "",
-})
+export const createDefaultSettings = (): UISettings => defaultUISettings
 
 export const {
   useSettingKey: useUISettingKey,
@@ -30,3 +16,10 @@ export const {
   useSettingValue: useUISettingValue,
   settingAtom: __uiSettingAtom,
 } = createSettingAtom("ui", createDefaultSettings)
+
+export const uiServerSyncWhiteListKeys: (keyof UISettings)[] = [
+  "uiFontFamily",
+  "readerFontFamily",
+  "opaqueSidebar",
+  // "customCSS",
+]

apps/mobile/src/initialize/index.ts

@@ -2,6 +2,7 @@ import { tracker } from "@follow/tracker"
 import { nativeApplicationVersion } from "expo-application"
 
 import { initializeDb } from "../database"
+import { settingSyncQueue } from "../modules/settings/sync-queue"
 import { initAnalytics } from "./analytics"
 import { initializeAppCheck } from "./app-check"
 import { initCrashlytics } from "./crashlytics"
@@ -29,6 +30,11 @@ export const initializeApp = async () => {
   await apm("initializeAppCheck", initializeAppCheck)
   await apm("initializePlayer", initializePlayer)
 
+  apm("setting sync", () => {
+    settingSyncQueue.init()
+    settingSyncQueue.syncLocal()
+  })
+
   await initAnalytics()
   const loadingTime = Date.now() - now
   tracker.appInit({