Use capacitor preferences package instead of localStorage

src/app/core/commands.ts

@@ -78,6 +78,7 @@ import {
   userRoomsByUrl,
   userSettingsValues,
 } from "@app/core/state"
+import {preferencesStorageProvider} from "@src/lib/storage"
 
 // Utils
 
@@ -124,6 +125,7 @@ export const logout = async () => {
   await clearStorage()
 
   localStorage.clear()
+  await preferencesStorageProvider.clear()
 }
 
 // Synchronization

src/app/core/state.ts

@@ -31,7 +31,6 @@ import {
   deriveEventsMapped,
   withGetter,
   synced,
-  localStorageProvider,
 } from "@welshman/store"
 import {
   getIdFilters,
@@ -97,6 +96,7 @@ import {
   publishThunk,
 } from "@welshman/app"
 import type {Thunk, Relay} from "@welshman/app"
+import {preferencesStorageProvider} from "@src/lib/storage"
 
 export const fromCsv = (s: string) => (s || "").split(",").filter(identity)
 
@@ -317,7 +317,7 @@ netContext.isEventValid = (event: TrustedEvent, url: string) =>
 export const canDecrypt = synced({
   key: "canDecrypt",
   defaultValue: false,
-  storage: localStorageProvider,
+  storage: preferencesStorageProvider,
 })
 
 export const SETTINGS = "flotilla/settings"

src/app/util/notifications.ts

@@ -1,5 +1,5 @@
 import {derived} from "svelte/store"
-import {synced, localStorageProvider, throttled} from "@welshman/store"
+import {synced, throttled} from "@welshman/store"
 import {pubkey, relaysByUrl} from "@welshman/app"
 import {prop, spec, identity, now, groupBy} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
@@ -13,13 +13,14 @@ import {
   makeRoomPath,
 } from "@app/util/routes"
 import {chats, hasNip29, getUrlsForEvent, userRoomsByUrl, repositoryStore} from "@app/core/state"
+import {preferencesStorageProvider} from "@src/lib/storage"
 
 // Checked state
 
 export const checked = synced<Record<string, number>>({
   key: "checked",
   defaultValue: {},
-  storage: localStorageProvider,
+  storage: preferencesStorageProvider,
 })
 
 export const deriveChecked = (key: string) => derived(checked, prop(key))

src/app/util/theme.ts

@@ -1,7 +1,8 @@
-import {synced, localStorageProvider} from "@welshman/store"
+import {preferencesStorageProvider} from "@src/lib/storage"
+import {synced} from "@welshman/store"
 
 export const theme = synced({
   key: "theme",
   defaultValue: "dark",
-  storage: localStorageProvider,
+  storage: preferencesStorageProvider,
 })

src/lib/storage.ts

@@ -0,0 +1,28 @@
+import {type StorageProvider} from "@welshman/store"
+import {Preferences} from "@capacitor/preferences"
+
+export class PreferencesStorageProvider implements StorageProvider {
+  get = async <T>(key: string): Promise<T | undefined> => {
+    const result = await Preferences.get({key})
+    if (!result.value) return undefined
+    try {
+      return JSON.parse(result.value)
+    } catch (e) {
+      return undefined
+    }
+  }
+
+  p = Promise.resolve()
+  set = async <T>(key: string, value: T): Promise<void> => {
+    this.p = this.p.then(async () => await Preferences.set({key, value: JSON.stringify(value)}))
+    await this.p
+  }
+
+  clear = async (): Promise<void> => {
+    await Preferences.clear()
+    this.p = Promise.resolve()
+  }
+}
+
+// singleton instance of PreferencesStorageProvider
+export const preferencesStorageProvider = new PreferencesStorageProvider()

src/routes/+layout.svelte

@@ -10,18 +10,18 @@
   import {goto} from "$app/navigation"
   import {sync, localStorageProvider} from "@welshman/store"
   import {
-    identity,
-    call,
-    memoize,
-    spec,
-    sleep,
-    on,
-    defer,
     ago,
-    WEEK,
-    TaskQueue,
     assoc,
+    call,
+    defer,
     dissoc,
+    identity,
+    memoize,
+    on,
+    sleep,
+    spec,
+    TaskQueue,
+    WEEK,
   } from "@welshman/lib"
   import type {TrustedEvent, StampedEvent} from "@welshman/util"
   import {
@@ -82,6 +82,7 @@
   import * as net from "@welshman/net"
   import * as app from "@welshman/app"
   import {nsecDecode} from "@lib/util"
+  import {preferencesStorageProvider} from "@lib/storage"
   import AppContainer from "@app/components/AppContainer.svelte"
   import ModalContainer from "@app/components/ModalContainer.svelte"
   import {setupTracking} from "@app/util/tracking"
@@ -134,6 +135,44 @@
       ...notifications,
     })
 
+    // migrate from localStorage to capacitor Preferences storage if needed
+    const runMigration = async () => {
+      const isSome = (item: any) => {
+        return item !== undefined && item !== null && item !== ""
+      }
+
+      const localStoragePubKey = await localStorageProvider.get("pubkey")
+      if (isSome(localStoragePubKey)) {
+        await preferencesStorageProvider.set("pubkey", localStoragePubKey)
+        localStorage.removeItem("pubkey")
+      }
+
+      const localStorageSessions = await localStorageProvider.get("sessions")
+      if (isSome(localStorageSessions)) {
+        await preferencesStorageProvider.set("sessions", localStorageSessions)
+        localStorage.removeItem("sessions")
+      }
+
+      const localStorageCanDecrypt = await localStorageProvider.get("canDecrypt")
+      if (isSome(localStorageCanDecrypt)) {
+        await preferencesStorageProvider.set("canDecrypt", localStorageCanDecrypt)
+        localStorage.removeItem("canDecrypt")
+      }
+
+      const localStorageChecked = await localStorageProvider.get("checked")
+      if (isSome(localStorageChecked)) {
+        await preferencesStorageProvider.set("checked", localStorageChecked)
+        localStorage.removeItem("checked")
+      }
+
+      const localStorageTheme = await localStorageProvider.get("theme")
+      if (isSome(localStorageTheme)) {
+        await preferencesStorageProvider.set("theme", localStorageTheme)
+        localStorage.removeItem("theme")
+      }
+    }
+    await runMigration()
+
     // Listen for navigation messages from service worker
     navigator.serviceWorker?.addEventListener("message", event => {
       if (event.data && event.data.type === "NAVIGATE") {
@@ -221,17 +260,17 @@
       })
 
       // Sync current pubkey
-      sync({
+      await sync({
         key: "pubkey",
         store: pubkey,
-        storage: localStorageProvider,
+        storage: preferencesStorageProvider,
       })
 
       // Sync user sessions
-      sync({
+      await sync({
         key: "sessions",
         store: sessions,
-        storage: localStorageProvider,
+        storage: preferencesStorageProvider,
       })
 
       await initStorage("flotilla", 8, {