Add persistent storage feature

src/lang/en.ts

@@ -530,4 +530,10 @@ export const languageEnglish = {
     enableGlobal: "Enable Globally",
     chatModulesInfo: "You can enable or disable modules for this chat.",
     sideMenuRerollButton: "Side Menu Reroll Button",
+    persistentStorage: "Persistent Storage",
+    persistentStorageSuccess: "Storage is successfully persisted",
+    persistentStorageFail: "Storage is not persisted. Did you deny the request?, or is the browser not supported?",
+    persistentStorageRecommended: "Persistent Storage Recommended",
+    persistentStorageDesc: "Your browser supports persistent storage. this is recommended for better performance and user experience.",
+    enable: "Enable",
 }

src/lib/Setting/Pages/FilesSettings.svelte

@@ -4,6 +4,7 @@
     import { checkDriver } from "src/ts/drive/drive";
     import { DataBase } from "src/ts/storage/database";
     import { isNodeServer, isTauri } from "src/ts/storage/globalApi";
+  import { persistantStorageRecommended } from "src/ts/storage/persistant";
 
 </script>
 

src/lib/Setting/Pages/UserSettings.svelte

@@ -11,8 +11,9 @@
     import { LoadLocalBackup, SaveLocalBackup } from "src/ts/drive/backuplocal";
     import Button from "src/lib/UI/GUI/Button.svelte";
     import { exportAsDataset } from "src/ts/storage/exportAsDataset";
-  import { Capacitor } from "@capacitor/core";
+    import { Capacitor } from "@capacitor/core";
-  import { isNative } from "lodash";
+    import { isNative } from "lodash";
+    import { persistantStorageRecommended, requestPersistantStorage } from "src/ts/storage/persistant";
     let openIframe = false
     let openIframeURL = ''
     let popup:Window = null
@@ -40,7 +41,21 @@
     }
 }}></svelte:window>
 
+
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.account} & {language.files}</h2>
+
+{#await persistantStorageRecommended() then a}
+    {#if a}
+        <button
+            class="flex justify-center p-3 text-left items-start border-red-300 cursor-pointer hover:border-red-700 border-solid mt-2 border-2 hover:bg-red-600 text-textcolor hover:text-white transition-colors rounded-md flex-col"
+            on:click={requestPersistantStorage}
+        >
+            <h3 class="text-xl">{language.persistentStorageRecommended}</h3>
+            <span class="text-gray-200">{language.persistentStorageDesc}</span>
+        </button>
+    {/if}
+{/await}
+
 <Button
     on:click={async () => {
         if(await alertConfirm(language.backupConfirm)){

src/ts/storage/persistant.ts

@@ -0,0 +1,61 @@
+import { get } from "svelte/store";
+import { DataBase } from "./database";
+import { alertNormal } from "../alert";
+import { language } from "src/lang";
+import { isNodeServer, isTauri } from "./globalApi";
+
+async function requestPersistantStorageMain() {
+    
+    if(navigator.storage && navigator.storage.persist) {
+
+        if(await navigator.storage.persisted()) {
+            return true;
+        }
+
+        //if is chromium
+        //@ts-ignore
+        const isChromium = window.chrome;
+        if (isChromium) {
+            //chromium requires notification to persist
+            alertNormal("For chromium based browsers, you need to allow notifications to persist data")
+            const status = await Notification.requestPermission()
+            
+            if(status === 'granted') {
+                return navigator.storage.persist();
+            }
+        }
+
+        const isFirefox = navigator.userAgent.indexOf("Firefox") !== -1;
+
+        if(isFirefox) {
+            //firefox can just ask for persist
+            return navigator.storage.persist();
+        }
+
+        return false;
+    }
+    return false
+}
+
+export async function persistantStorageRecommended() {
+    const db = get(DataBase)
+    if(navigator.storage && navigator.storage.persist && (!isTauri) && (!isNodeServer)) {
+        if(await navigator.storage.persisted()) {
+            return false;
+        }
+        if(db.characters.length > 5){
+            return true;
+        }
+    }
+    return false;
+}
+
+export async function requestPersistantStorage() {
+    const status = await requestPersistantStorageMain();
+    if(status) {
+        alertNormal(language.persistentStorageSuccess)
+    } else {
+        alertNormal(language.persistentStorageFail)
+    }
+    return status;
+}