feat(mobile): enhance settings synchronization and event handling

- Updated the settings change event to include a structured payload for better data management.
- Refactored the persist and load methods in the SettingSyncQueue to utilize a key-value storage system instead of localStorage.
- Added logging for remote settings in development mode to aid in debugging.

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

Author: Innei

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

@@ -119,8 +119,10 @@ export const createSettingAtom = <T extends object>(
     const updated = Date.now()
 
     EventBus.dispatch("SETTING_CHANGE_EVENT", {
-      key: key as "general" | "ui",
-      payload: value,
+      key: settingKey as "general" | "ui",
+      payload: {
+        [key]: value,
+      },
     })
     setSettings({
       ...getSettings(),

apps/mobile/src/modules/settings/sync-queue.ts

@@ -11,6 +11,7 @@ import {
 } from "@/src/atoms/settings/general"
 import { __uiSettingAtom, getUISettings, uiServerSyncWhiteListKeys } from "@/src/atoms/settings/ui"
 import { apiClient } from "@/src/lib/api-fetch"
+import { kv } from "@/src/lib/kv"
 
 type SettingMapping = {
   appearance: UISettings
@@ -77,6 +78,8 @@ class SettingSyncQueue {
       const nextPayload = omit(data.payload, omitKeys, settingWhiteListMap[tab])
       if (isEmptyObject(nextPayload)) return
       this.enqueue(tab, nextPayload)
+
+      this.persist()
     })
 
     this.disposers.push(d1)
@@ -90,16 +93,16 @@ class SettingSyncQueue {
   }
 
   private readonly storageKey = "setting_sync_queue"
-  private persist() {
+  private async persist() {
     if (this.queue.length === 0) {
       return
     }
-    localStorage.setItem(this.storageKey, JSON.stringify(this.queue))
+    kv.set(this.storageKey, JSON.stringify(this.queue))
   }
 
-  private load() {
-    const queue = localStorage.getItem(this.storageKey)
-    localStorage.removeItem(this.storageKey)
+  private async load() {
+    const queue = await kv.get(this.storageKey)
+    kv.delete(this.storageKey)
     if (!queue) {
       return
     }
@@ -242,6 +245,10 @@ class SettingSyncQueue {
     const remoteSettings = await this.fetchSettingRemote()
 
     if (!remoteSettings) return
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("remote settings:", remoteSettings)
+    }
 
     if (isEmptyObject(remoteSettings.settings)) return