feat: backup and restore

package.json

@@ -1,7 +1,7 @@
 {
   "name": "talk-vite",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/home/panel/global/other-setting.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React, {useCallback, useRef} from 'react'
 import {CountDownButton, ResetButton} from "../shared/widget/button.tsx"
 import {appState} from "../../../state/app-state.ts"
 import {BsTrash3} from "react-icons/bs"
@@ -9,9 +9,15 @@ import {allArts} from "../../../wallpaper/art.tsx"
 import {PiButterflyThin} from "react-icons/pi";
 import {clearChats} from "../../../state/dangerous.ts";
 import {Separator} from "../shared/widget/separator.tsx";
+import {TfiDownload, TfiUpload} from "react-icons/tfi";
+import {talkDB} from "../../../state/db.ts";
+import {useNavigate} from "react-router-dom";
+import {formatNow} from "../../../util/util.tsx";
 
 export const OtherSetting: React.FC = () => {
     const {butterflyOnAttachedMessage, showRecorder, wallpaper} = useSnapshot(appState.pref)
+    const fileInputRef = useRef(null);
+    const navigate = useNavigate()
 
     const showButterfly = useCallback((enabled: boolean) => {
         appState.pref.butterflyOnAttachedMessage = enabled
@@ -29,6 +35,54 @@ export const OtherSetting: React.FC = () => {
         appState.pref.wallpaper.previewIndex = value
     }, [])
 
+    const download = useCallback(() => {
+        const db: Record<string, unknown> = {}
+        talkDB.iterate((v, k) => {
+            db[k] = v
+            console.log(v)
+            console.log(k)
+        }).then(() => {
+            const json = JSON.stringify(db, null, 2)
+            console.debug("characters of json:", json.length)
+            console.debug("json:", json)
+            const blob = new Blob([json], {type: 'application/json'});
+            const href = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = href;
+            link.download = `talk-backup-${formatNow()}.json`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        })
+    }, [])
+
+    const restore = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = async (e) => {
+                try {
+                    const json = e.target?.result as string;
+                    const jsonObject = JSON.parse(json);
+                    console.debug("json:", jsonObject);
+
+                    const keys = Object.keys(jsonObject)
+
+                    for (const key of keys) {
+                        await talkDB.setItem(key, jsonObject[key])
+                    }
+
+                    navigate(0)
+                } catch (error) {
+                    // Handle JSON parsing error
+                    console.error('Error parsing JSON file: ', error);
+                }
+            };
+            reader.readAsText(file);
+        }
+    };
+
     return <div
         className="relative flex h-full select-none flex-col w-full before:bg-white before:bg-opacity-40
          pt-1 pb-3 px-3 gap-1 before:backdrop-hack before:backdrop-blur before:rounded-xl">
@@ -72,6 +126,29 @@ export const OtherSetting: React.FC = () => {
                     hoverOnValue={setWallpaperPreviewIndex}
                 />
             </div>
+            <Separator/>
+            <div className="flex flex-wrap pt-2 pb-2 w-full gap-2">
+                <CountDownButton text={"Backup"}
+                                 countDownMs={0}
+                                 color="blue"
+                                 action={download}
+                                 icon={<TfiDownload className="scale-y-90 stroke-[0.3px]"/>}
+                />
+                <input ref={fileInputRef} type="file" accept=".json"
+                       onChange={restore}
+                       className="hidden">
+                </input>
+                <CountDownButton text={"Restore[beta]"}
+                                 countDownMs={0}
+                                 color="blue"
+                                 action={() => {
+                                     if (fileInputRef.current) {
+                                         (fileInputRef.current as HTMLInputElement).click()
+                                     }
+                                 }}
+                                 icon={<TfiUpload className="scale-y-[0.8] stroke-[0.3px]"/>}
+                />
+            </div>
             <div className="flex flex-wrap pt-10 pb-2 w-full gap-2">
                 <CountDownButton text={"Clear All Chats"}
                                  countDownMs={1000}

src/state/app-state.ts

@@ -104,9 +104,8 @@ export const defaultAppState = (): AppState => ({
     }
 })
 
-talkDB.getItem<AppState>(appStateKey).then((as: AppState | null) => {
-    console.debug("restoring from db:", as)
-
+const apply = (as: AppState | null) => {
+    hydrationState.hydrated = false
     if (as !== null) {
         const dft = defaultAppState()
         Object.keys(appState).forEach((key) => {
@@ -120,10 +119,16 @@ talkDB.getItem<AppState>(appStateKey).then((as: AppState | null) => {
             appState[key as keyof AppState] = as[key] ?? dft[key]
         })
     }
-    console.debug("restored")
     hydrationState.hydrated = true
-})
+}
 
+talkDB.getItem<AppState>(appStateKey).then(
+    (as) => {
+        console.debug("restoring from db:", as)
+        apply(as)
+        console.debug("restored")
+    }
+)
 
 subscribe(appState, () => {
     persistState.changedAt = Date.now()

src/state/promt-state.ts

@@ -26,9 +26,7 @@ export const defaultPromptState = (): PromptState => ({
     prompts: presetPrompts()
 })
 
-talkDB.getItem<PromptState>(promptStateKey).then((ps: PromptState | null) => {
-    console.debug("restoring promptState from db:", ps)
-
+const apply = (ps: PromptState | null) => {
     if (ps !== null) {
         const dft = defaultPromptState()
         Object.keys(promptState).forEach((key) => {
@@ -38,6 +36,11 @@ talkDB.getItem<PromptState>(promptStateKey).then((ps: PromptState | null) => {
             promptState[key as keyof PromptState] = ps[key] ?? dft[key]
         })
     }
+}
+
+talkDB.getItem<PromptState>(promptStateKey).then((ps) => {
+    console.debug("restoring promptState from db:", ps)
+    apply(ps)
     console.debug("restored")
 })