@glassly/engine 0.3.7-beta.889 → 0.3.7-beta.896

package/src/services/appStateBackupFile.ts

@@ -0,0 +1,171 @@
+/**
+ * App state backup files: the share-sheet export and file-picker restore
+ * behind Settings > Profile > Backup. What goes in the file is decided in
+ * AppStateBackup.ts; this side reads and writes the live stores.
+ */
+
+import type {MemoryImportResult} from "@glassly/miniapp"
+import {File, Paths} from "expo-file-system"
+import {Platform} from "react-native"
+import Share from "react-native-share"
+
+import {SETTINGS, useSettingsStore} from "../stores/settings"
+import {useAppStatusStore} from "../stores/apps"
+import {storage} from "../utils/storage/storage"
+import appRegistry, {saveAlwaysOnOverride, saveWidgetExpandChoice} from "./AppRegistry"
+import {
+  AppStateBackupError,
+  collectAppStateBackup,
+  miniappPrefs,
+  miniappsWithStorage,
+  parseAppStateBackup,
+  restorableSettings,
+  restoreMiniappStorage,
+  type AppStateBackupBackend,
+} from "./AppStateBackup"
+import {cloudClientService} from "./CloudClientService"
+import {memoryStore} from "./memoryStoreInstance"
+import {respawnMiniapp, runningMiniappPackages, stopMiniapp} from "./MiniappEngine"
+
+export interface AppStateExportResult {
+  success: boolean
+  cancelled?: boolean
+}
+
+export interface AppStateRestoreResult {
+  /** Settings written. */
+  settings: number
+  /** Miniapps whose storage was restored. */
+  miniapps: number
+  memory: MemoryImportResult | null
+  /** Installed when the backup was made but not on this phone now. */
+  missing: string[]
+}
+
+export interface AppStateRestoreOptions {
+  /**
+   * Install what the backup had installed and this phone lacks. Runs before
+   * the restored miniapps start again, so the dashboard comes back with every
+   * widget provider its saved layout names: it drops unknown widgets from the
+   * layout the next time it saves it.
+   */
+  reinstall?: (packageNames: string[]) => Promise<void>
+}
+
+const PICK_MIME_TYPES =
+  Platform.OS === "android" ? ["application/json", "application/octet-stream"] : ["application/json"]
+
+const backend: AppStateBackupBackend = {
+  get(key) {
+    const result = storage.load<unknown>(key)
+    return result.is_ok() ? result.value : null
+  },
+  set(key, value) {
+    const result = storage.save(key, value)
+    if (result.is_error()) throw result.error
+  },
+  keys: () => storage.getAllKeys(),
+}
+
+export async function exportAppStateFile(): Promise<AppStateExportResult> {
+  const userId = await cloudClientService.resolveUserId()
+  const installed: Array<{packageName: string; version: string; source?: string}> = []
+  for (const app of await appRegistry.getInstalledMiniapps()) {
+    const version = await appRegistry.getActiveVersion(app.packageName)
+    if (!version) continue
+    installed.push({
+      packageName: app.packageName,
+      version,
+      source: appRegistry.getReleaseIdentity(app.packageName, version)?.source,
+    })
+  }
+  const backup = collectAppStateBackup({
+    backend,
+    userId,
+    settings: Object.values(SETTINGS),
+    installed,
+    memory: await memoryStore.exportBackup(),
+    now: Date.now(),
+  })
+
+  const filename = `glassly-backup-${localDate(backup.exportedAt)}.json`
+  const file = new File(Paths.cache, filename)
+  file.writeSync(JSON.stringify(backup))
+  try {
+    await Share.open({url: file.uri, type: "application/json", filename, title: "Glassly backup"})
+    return {success: true}
+  } catch (error: any) {
+    // react-native-share rejects when the user dismisses the sheet.
+    if (error?.message?.includes("User did not share")) return {success: false, cancelled: true}
+    throw error
+  }
+}
+
+/** Resolves null when the user cancels the picker. */
+export async function importAppStateFile(opts: AppStateRestoreOptions = {}): Promise<AppStateRestoreResult | null> {
+  const picked = await File.pickFileAsync({mimeTypes: PICK_MIME_TYPES})
+  if (picked.canceled) return null
+  let data: unknown
+  try {
+    data = JSON.parse(await picked.result.text())
+  } catch {
+    throw new AppStateBackupError("Not a Glassly app state backup")
+  }
+  const backup = parseAppStateBackup(data)
+  const userId = await cloudClientService.resolveUserId()
+
+  // First, so a memory section this build rejects fails the restore before anything is written.
+  const memory = backup.memory ? await memoryStore.importBackup(backup.memory) : null
+
+  const {plain, indexed} = restorableSettings(backup, Object.values(SETTINGS))
+  const written = await useSettingsStore.getState().setManyLocally(plain)
+  if (written.is_error()) throw written.error
+  // setManyLocally only takes registry keys; `key:index` values go to storage and the store directly.
+  for (const [key, value] of Object.entries(indexed)) backend.set(key, value)
+  if (Object.keys(indexed).length > 0) {
+    useSettingsStore.setState((state) => ({settings: {...state.settings, ...indexed}}))
+  }
+
+  // A running miniapp holds its old values in memory and could write them back over the
+  // restore, so the ones getting storage stop now and start again at the end.
+  const running = new Set(runningMiniappPackages())
+  const restarting = miniappsWithStorage(backup).filter((packageName) => running.has(packageName))
+  for (const packageName of restarting) await stopMiniapp(packageName)
+
+  try {
+    const restored = restoreMiniappStorage(backend, userId, backup)
+
+    const apps = useAppStatusStore.getState()
+    for (const [packageName, record] of Object.entries(backup.miniapps)) {
+      const prefs = miniappPrefs(record)
+      if (prefs.hidden !== undefined) apps.setHiddenStatus(packageName, prefs.hidden)
+      if (prefs.alwaysOn !== undefined) saveAlwaysOnOverride(packageName, prefs.alwaysOn)
+      for (const [widgetId, expand] of Object.entries(prefs.widgetExpand)) {
+        saveWidgetExpandChoice(packageName, widgetId, expand)
+      }
+    }
+    appRegistry.markRefreshNeeded()
+    await apps.refresh()
+
+    const installedNow = new Set((await appRegistry.getInstalledMiniapps()).map((app) => app.packageName))
+    const missing = Object.entries(backup.miniapps)
+      .filter(([packageName, record]) => record.installed && !installedNow.has(packageName))
+      .map(([packageName]) => packageName)
+    if (missing.length > 0) await opts.reinstall?.(missing)
+
+    return {
+      settings: Object.keys(plain).length + Object.keys(indexed).length,
+      miniapps: restored.packages.length,
+      memory,
+      missing,
+    }
+  } finally {
+    for (const packageName of restarting) await respawnMiniapp(packageName)
+  }
+}
+
+function localDate(ms: number): string {
+  const d = new Date(ms)
+  const pad = (n: number) => String(n).padStart(2, "0")
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}

package/src/utils/miniappGlobals.ts

@@ -7,7 +7,7 @@
  * same API surface.
  */
 
-import {Dimensions, Platform} from "react-native"
+import {Platform} from "react-native"
 
 export interface MiniappSafeArea {
   top: number
@@ -16,6 +16,11 @@ export interface MiniappSafeArea {
   right: number
 }
 
+/**
+ * The host's capsule menu in the WebView's own coordinate space. `corner`
+ * floats over the page's top-right; `rail` sits in the iPhone Duo's status
+ * rail, inside the side safe-area inset and clear of the page content.
+ */
 export interface CapsuleMenuRect {
   top: number
   right: number
@@ -23,36 +28,7 @@ export interface CapsuleMenuRect {
   left: number
   width: number
   height: number
-}
-
-/**
- * The capsule menu bounding rect in the WebView's own coordinate space.
- *
- * Keep in sync with CapsuleMenu.tsx:
- *   - CapsuleButton height ≈ h-7.5 (30px), width ≈ 73px
- *   - Positioned at right-2 (8px), top = theme.spacing.s2 (8px) below insets.top
- */
-const CAPSULE_MENU_HEIGHT = 30
-const CAPSULE_MENU_WIDTH = 73
-const CAPSULE_MENU_PADDING = 8
-
-/**
- * @param topInsetOffset  extra top offset to add when the WebView container does
- *   NOT already pad by the safe-area inset (i.e. WebView fills edge-to-edge under
- *   the status bar). Pass `insets.top` in that case, or 0 when the container
- *   already applies top padding.
- */
-export function getCapsuleMenuRect(topInsetOffset = 0): CapsuleMenuRect {
-  const screenWidth = Dimensions.get("window").width
-  const top = topInsetOffset + CAPSULE_MENU_PADDING
-  return {
-    top,
-    right: CAPSULE_MENU_PADDING,
-    bottom: top + CAPSULE_MENU_HEIGHT,
-    left: screenWidth - CAPSULE_MENU_PADDING - CAPSULE_MENU_WIDTH,
-    width: CAPSULE_MENU_WIDTH,
-    height: CAPSULE_MENU_HEIGHT,
-  }
+  placement: "corner" | "rail"
 }
 
 export type MiniappColorScheme = "light" | "dark"
@@ -63,37 +39,48 @@ export interface BuildMiniappGlobalsOptions {
   miniappLocal?: boolean
   miniappDeveloperMode?: boolean
   safeAreaInsets: MiniappSafeArea
-  /**
-   * True when the WebView container renders edge-to-edge (no top padding for
-   * the status bar). In that case the capsule menu rect needs to shift down by
-   * the top inset so its coords match where it's actually drawn on screen.
-   */
-  webviewFillsStatusBar?: boolean
+  /** Where the host draws its capsule menu over this WebView. */
+  capsuleMenu: CapsuleMenuRect
   /** Current host color scheme. Miniapps may follow this to match the phone. */
   colorScheme?: MiniappColorScheme
 }
 
-function safeAreaCssVars(insets: MiniappSafeArea): Record<string, string> {
+// CSS custom properties that mirror the safe-area and capsule menu data, so
+// miniapp CSS (or Tailwind arbitrary values) can read them without touching
+// JS: e.g. `style="margin-top: var(--glassly-capsule-top)"`.
+function layoutCssVars(insets: MiniappSafeArea, capsule: CapsuleMenuRect): Record<string, string> {
   return {
     "--glassly-safe-top": `${insets.top}px`,
     "--glassly-safe-bottom": `${insets.bottom}px`,
     "--glassly-safe-left": `${insets.left}px`,
     "--glassly-safe-right": `${insets.right}px`,
+    "--glassly-capsule-top": `${capsule.top}px`,
+    "--glassly-capsule-bottom": `${capsule.bottom}px`,
+    "--glassly-capsule-left": `${capsule.left}px`,
+    "--glassly-capsule-right": `${capsule.right}px`,
+    "--glassly-capsule-width": `${capsule.width}px`,
+    "--glassly-capsule-height": `${capsule.height}px`,
+    "--glassly-capsule-center-y": `${capsule.top + capsule.height / 2}px`,
+    // Right-side gutter to reserve so content doesn't slide under the
+    // capsule: its width + 16px breathing room, none when it sits in the rail.
+    "--glassly-capsule-gutter": `${capsule.placement === "rail" ? 0 : capsule.width + 16}px`,
   }
 }
 
 /**
- * JS to inject into a running miniapp when the host's safe area changes (an
- * iPhone Duo folding moves its status rail): updates window.Glassly and the
- * CSS variables, then fires `glassly:safe-area-change`.
+ * JS to inject into a running miniapp when the host's safe area or capsule
+ * menu moves (an iPhone Duo folding, or its rail's reserved regions growing):
+ * updates window.Glassly and the CSS variables, then fires
+ * `glassly:safe-area-change`.
  */
-export function buildSafeAreaUpdateScript(insets: MiniappSafeArea): string {
-  const sets = Object.entries(safeAreaCssVars(insets))
+export function buildSafeAreaUpdateScript(insets: MiniappSafeArea, capsuleMenu: CapsuleMenuRect): string {
+  const sets = Object.entries(layoutCssVars(insets, capsuleMenu))
     .map(([k, v]) => `document.documentElement.style.setProperty(${JSON.stringify(k)}, ${JSON.stringify(v)});`)
     .join("\n      ")
   return `
     window.Glassly = window.Glassly || {};
     window.Glassly.safeAreaInsets = ${JSON.stringify(insets)};
+    window.Glassly.capsuleMenu = ${JSON.stringify(capsuleMenu)};
     try {
       ${sets}
     } catch (e) { /* ignore */ }
@@ -115,37 +102,18 @@ export function buildSafeAreaUpdateScript(insets: MiniappSafeArea): string {
  * assign to it before the native bridge wires in.
  */
 export function buildMiniappGlobalsScript(opts: BuildMiniappGlobalsOptions): string {
-  const capsuleTopOffset = opts.webviewFillsStatusBar ? opts.safeAreaInsets.top : 0
   const globals: Record<string, unknown> = {
     platform: Platform.OS,
     capabilities: opts.capabilities ?? ["share", "open_url", "copy_clipboard", "download"],
     safeAreaInsets: opts.safeAreaInsets,
-    capsuleMenu: getCapsuleMenuRect(capsuleTopOffset),
+    capsuleMenu: opts.capsuleMenu,
   }
   if (opts.packageName) globals.packageName = opts.packageName
   if (opts.miniappLocal) globals.miniappLocal = true
   if (opts.miniappDeveloperMode) globals.miniappDeveloperMode = true
   if (opts.colorScheme) globals.colorScheme = opts.colorScheme
 
-  // CSS custom properties that mirror the capsule menu / safe-area data.
-  // Miniapp CSS (or Tailwind arbitrary values) can read these without
-  // touching JS: e.g. `style="margin-top: var(--glassly-capsule-top)"`.
-  const capsule = globals.capsuleMenu as CapsuleMenuRect
-  const insets = opts.safeAreaInsets
-  const capsuleCenter = capsule.top + capsule.height / 2
-  const cssVars: Record<string, string> = {
-    ...safeAreaCssVars(insets),
-    "--glassly-capsule-top": `${capsule.top}px`,
-    "--glassly-capsule-bottom": `${capsule.bottom}px`,
-    "--glassly-capsule-left": `${capsule.left}px`,
-    "--glassly-capsule-right": `${capsule.right}px`,
-    "--glassly-capsule-width": `${capsule.width}px`,
-    "--glassly-capsule-height": `${capsule.height}px`,
-    "--glassly-capsule-center-y": `${capsuleCenter}px`,
-    // Right-side gutter to reserve so content doesn't slide under the
-    // capsule: capsule width + 16px breathing room.
-    "--glassly-capsule-gutter": `${capsule.width + 16}px`,
-  }
+  const cssVars = layoutCssVars(opts.safeAreaInsets, opts.capsuleMenu)
   const cssVarsBlock = Object.entries(cssVars)
     .map(([k, v]) => `${k}: ${v};`)
     .join(" ")