Change DataBase inside svelte to DBState for performance

src/lib/Others/AlertComp.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { alertStore, alertGenerationInfoStore } from "../../ts/alert";
-    import { DataBase } from '../../ts/storage/database';
+    import { DBState } from '../../ts/storage/database.svelte';
     import { getCharImage } from '../../ts/characters';
     import { ParseMarkdown } from '../../ts/parser';
     import BarIcon from '../SideBars/BarIcon.svelte';
@@ -160,10 +160,10 @@
                 </div>
             {:else if $alertStore.type === 'selectChar'}
                 <div class="flex w-full items-start flex-wrap gap-2 justify-start">
-                    {#each $DataBase.characters as char, i}
+                    {#each DBState.db.characters as char, i}
                         {#if char.type !== 'group'}
                             {#if char.image}
-                                {#await getCharImage($DataBase.characters[i].image, 'css')}
+                                {#await getCharImage(DBState.db.characters[i].image, 'css')}
                                     <BarIcon onClick={() => {
                                         //@ts-ignore
                                         alertStore.set({type: 'none',msg: char.chaId})
@@ -237,17 +237,17 @@
                     <span class="text-amber-500">Model</span>
                     <span class="text-amber-500 justify-self-end">{$alertGenerationInfoStore.genInfo.model}</span>
                     <span class="text-green-500">ID</span>
-                    <span class="text-green-500 justify-self-end">{$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].chatId ?? "None"}</span>
+                    <span class="text-green-500 justify-self-end">{DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].chatId ?? "None"}</span>
                     <span class="text-red-500">GenID</span>
                     <span class="text-red-500 justify-self-end">{$alertGenerationInfoStore.genInfo.generationId}</span>
                     <span class="text-cyan-500">Saying</span>
-                    <span class="text-cyan-500 justify-self-end">{$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].saying}</span>
+                    <span class="text-cyan-500 justify-self-end">{DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].saying}</span>
                     <span class="text-purple-500">Size</span>
-                    <span class="text-purple-500 justify-self-end">{JSON.stringify($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx]).length} Bytes</span>
+                    <span class="text-purple-500 justify-self-end">{JSON.stringify(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx]).length} Bytes</span>
                     <span class="text-yellow-500">Time</span>
-                    <span class="text-yellow-500 justify-self-end">{(new Date($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].time ?? 0)).toLocaleString()}</span>
+                    <span class="text-yellow-500 justify-self-end">{(new Date(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].time ?? 0)).toLocaleString()}</span>
                     <span class="text-green-500">Tokens</span>
-                    {#await tokenize($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].data)}
+                    {#await tokenize(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].data)}
                         <span class="text-green-500 justify-self-end">Loading</span>
                     {:then tokens} 
                         <span class="text-green-500 justify-self-end">{tokens}</span>
@@ -286,20 +286,20 @@
                 </div>
                 {#if generationInfoMenuIndex === 0}
                     <div class="flex flex-col gap-2 w-full">
-                        {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk}
+                        {#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk}
                             <TextAreaInput bind:value={chunk.text} />
                         {/each}
 
                         <Button onclick={() => {
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks.push({
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks.push({
                                 text: '',
                                 targetId: 'all'
                             })
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks
                         }}>+</Button>
                     </div>
                 {:else}
-                    {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk, i}
+                    {#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk, i}
                         <div class="flex flex-col p-2 rounded-md border-darkborderc border">
                             {#if i === 0}
                                 <span class="text-green-500">Active</span>
@@ -418,7 +418,7 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    {#if $DataBase.useExperimental}
+                    {#if DBState.db.useExperimental}
                         <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={() => {
                             alertStore.set({
                                 type: 'none',
@@ -478,7 +478,7 @@
                     <span class="text-textcolor2 text-sm">{language.risupresetDesc}</span>
                 {:else}
                     <span class="text-textcolor2 text-sm">{language.ccv3Desc}</span>
-                    {#if cardExportType2 !== 'charx' && isCharacterHasAssets($DataBase.characters[$selectedCharID])}
+                    {#if cardExportType2 !== 'charx' && isCharacterHasAssets(DBState.db.characters[$selectedCharID])}
                         <span class="text-red-500 text-sm">{language.notCharxWarn}</span>
                     {/if}
                 {/if}
@@ -501,7 +501,7 @@
                     <button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === 'realm'} onclick={() => {cardExportType = 'realm'}}>RisuRealm</button>
                     <button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === ''} onclick={() => {
                         cardExportType = ''
-                        cardExportType2 = isCharacterHasAssets($DataBase.characters[$selectedCharID]) ? 'charx' : ''
+                        cardExportType2 = isCharacterHasAssets(DBState.db.characters[$selectedCharID]) ? 'charx' : ''
                     }}>Character Card V3</button>
                     <button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === 'ccv2'} onclick={() => {cardExportType = 'ccv2'}}>Character Card V2</button>
                 {/if}

src/lib/Others/ChatList.svelte

@@ -1,7 +1,7 @@
 <script>
     import { alertConfirm, alertError } from "../../ts/alert";
     import { language } from "../../lang";
-    import { DataBase } from "../../ts/storage/database";
+    import { DBState } from "../../ts/storage/database.svelte";
     import { ReloadGUIPointer, selectedCharID } from "../../ts/stores";
     import { DownloadIcon, EditIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
     import { exportChat, importChat } from "../../ts/characters";
@@ -23,15 +23,15 @@
                 </button>
             </div>
         </div>
-        {#each $DataBase.characters[$selectedCharID].chats as chat, i}
+        {#each DBState.db.characters[$selectedCharID].chats as chat, i}
             <button onclick={() => {
                 if(!editMode){
-                    $DataBase.characters[$selectedCharID].chatPage = i
+                    DBState.db.characters[$selectedCharID].chatPage = i
                      close()
                 }
-            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === DBState.db.characters[$selectedCharID].chatPage}>
                 {#if editMode}
-                    <TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
+                    <TextInput bind:value={DBState.db.characters[$selectedCharID].chats[i].name} padding={false}/>
                 {:else}
                     <span>{chat.name}</span>
                 {/if}
@@ -44,16 +44,16 @@
                     </div>
                     <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
                         e.stopPropagation()
-                        if($DataBase.characters[$selectedCharID].chats.length === 1){
+                        if(DBState.db.characters[$selectedCharID].chats.length === 1){
                             alertError(language.errors.onlyOneChat)
                             return
                         }
                         const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
                         if(d){
-                            $DataBase.characters[$selectedCharID].chatPage = 0
-                            let chats = $DataBase.characters[$selectedCharID].chats
+                            DBState.db.characters[$selectedCharID].chatPage = 0
+                            let chats = DBState.db.characters[$selectedCharID].chats
                             chats.splice(i, 1)
-                            $DataBase.characters[$selectedCharID].chats = chats
+                            DBState.db.characters[$selectedCharID].chats = chats
                         }
                     }}>
                         <TrashIcon size={18}/>
@@ -63,9 +63,9 @@
         {/each}
         <div class="flex mt-2 items-center">
             <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" onclick={() => {
-                const cha = $DataBase.characters[$selectedCharID]
-                const len = $DataBase.characters[$selectedCharID].chats.length
-                let chats = $DataBase.characters[$selectedCharID].chats
+                const cha = DBState.db.characters[$selectedCharID]
+                const len = DBState.db.characters[$selectedCharID].chats.length
+                let chats = DBState.db.characters[$selectedCharID].chats
                 chats.unshift({
                     message:[], note:'', name:`New Chat ${len + 1}`, localLore:[], fmIndex: -1
                 })
@@ -78,9 +78,9 @@
                         })
                     })
                 }
-                $DataBase.characters[$selectedCharID].chats = chats
+                DBState.db.characters[$selectedCharID].chats = chats
                 $ReloadGUIPointer += 1
-                $DataBase.characters[$selectedCharID].chatPage = len
+                DBState.db.characters[$selectedCharID].chatPage = len
                 close()
             }}>
                 <PlusIcon/>

src/lib/Others/GridCatalog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { characterFormatUpdate, getCharImage, removeChar } from "../../ts/characters";
-    import { DataBase, type Database } from "../../ts/storage/database";
+    import { DBState, type Database } from "../../ts/storage/database.svelte";
     import BarIcon from "../SideBars/BarIcon.svelte";
     import { ArrowLeft, User, Users, Inspect, TrashIcon, Undo2Icon } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
@@ -8,12 +8,12 @@
     import Button from "../UI/GUI/Button.svelte";
     import { language } from "src/lang";
     import { parseMultilangString } from "src/ts/util";
-  import { checkCharOrder } from "src/ts/storage/globalApi";
-  interface Props {
-    endGrid?: any;
-  }
+    import { checkCharOrder } from "src/ts/storage/globalApi";
+    interface Props {
+        endGrid?: any;
+    }
 
-  let { endGrid = () => {} }: Props = $props();
+    let { endGrid = () => {} }: Props = $props();
     let search = $state('')
     let selected = $state(0)
 
@@ -79,7 +79,7 @@
         {#if selected === 0}
             <div class="w-full flex justify-center">
                 <div class="flex flex-wrap gap-2 w-full justify-center">
-                    {#each formatChars(search, $DataBase) as char}
+                    {#each formatChars(search, DBState.db) as char}
                         <div class="flex items-center text-textcolor">
                             {#if char.image}
                                 <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
@@ -97,7 +97,7 @@
                 </div>
             </div>
         {:else if selected === 1}
-            {#each formatChars(search, $DataBase) as char}
+            {#each formatChars(search, DBState.db) as char}
                 <div class="flex p-2 border border-darkborderc rounded-md mb-2">
                     <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
                     <div class="flex-1 flex flex-col ml-2">
@@ -120,7 +120,7 @@
             {/each}
         {:else if selected === 2}
             <span class="text-textcolor2 text-sm mb-2">{language.trashDesc}</span>
-            {#each formatChars(search, $DataBase, true) as char}
+            {#each formatChars(search, DBState.db, true) as char}
                 <div class="flex p-2 border border-darkborderc rounded-md mb-2">
                     <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
                     <div class="flex-1 flex flex-col ml-2">
@@ -128,7 +128,7 @@
                         <span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
                         <div class="flex gap-2 justify-end">
                             <button class="hover:text-textcolor text-textcolor2" onclick={() => {
-                                $DataBase.characters[char.index].trashTime = undefined
+                                DBState.db.characters[char.index].trashTime = undefined
                                 checkCharOrder()
                             }}>
                                 <Undo2Icon />

src/lib/Others/WelcomeRisu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { ArrowBigLeftIcon, Send } from "lucide-svelte";
+    import { Send } from "lucide-svelte";
     import { changeLanguage, language } from "src/lang";
-    import { DataBase, setPreset } from "src/ts/storage/database";
+    import { DBState, setPreset } from "src/ts/storage/database.svelte";
     import Chat from "../ChatScreens/Chat.svelte";
     import { prebuiltPresets } from "src/ts/process/templates/templates";
     import { updateTextThemeAndCSS } from "src/ts/gui/colorscheme";
@@ -16,7 +16,7 @@
         const usableLangs = ['de', 'en', 'ko', 'cn', 'vi', 'zh-Hant']
         if(usableLangs.includes(browserLangShort)){
             changeLanguage(browserLangShort)
-            $DataBase.language = browserLangShort
+            DBState.db.language = browserLangShort
             step = 1
         }
     }
@@ -26,7 +26,7 @@
         switch(step){
             case 1:{
                 if(input.length > 0){
-                    $DataBase.username = input
+                    DBState.db.username = input
                     step = 2
                     input = ''
                 }
@@ -43,14 +43,14 @@
             case 3:{
                 if(provider === 'openai'){
                     if(input.length > 0 && input.startsWith('sk-')){
-                        $DataBase.openAIKey = input
+                        DBState.db.openAIKey = input
                         step = 10
                         input = ''
                     }
                 }
                 if(provider === 'openrouter'){
                     if(input.length > 0 && input.startsWith('sk-')){
-                        $DataBase.openrouterKey = input
+                        DBState.db.openrouterKey = input
                         step = 10
                         input = ''
                     }
@@ -62,24 +62,24 @@
     $effect.pre(() => {
         if(step === 10){
             setTimeout(() => {
-                $DataBase = setPreset($DataBase, prebuiltPresets.OAI2)
-                $DataBase.textTheme = 'highcontrast'
+                DBState.db = setPreset(DBState.db, prebuiltPresets.OAI2)
+                DBState.db.textTheme = 'highcontrast'
                 updateTextThemeAndCSS()
                 if(provider === 'openrouter'){
-                    $DataBase.aiModel = 'openrouter'
-                    $DataBase.subModel = 'openrouter'
-                    $DataBase.openrouterRequestModel = 'risu/free'
-                    $DataBase.maxContext = 6000
+                    DBState.db.aiModel = 'openrouter'
+                    DBState.db.subModel = 'openrouter'
+                    DBState.db.openrouterRequestModel = 'risu/free'
+                    DBState.db.maxContext = 6000
                 }
                 if(provider === 'horde'){
-                    $DataBase.aiModel = 'horde:::auto'
-                    $DataBase.subModel = 'horde:::auto'
+                    DBState.db.aiModel = 'horde:::auto'
+                    DBState.db.subModel = 'horde:::auto'
                 }
 
                 if(provider === 'openai'){
-                    $DataBase.maxContext = 4000
+                    DBState.db.maxContext = 4000
                 }
-                $DataBase.didFirstSetup = true
+                DBState.db.didFirstSetup = true
             }, 1000);
         }
 
@@ -101,32 +101,32 @@
                     <div class="flex flex-col items-start ml-2">
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('de')
-                            $DataBase.language='de'
+                            DBState.db.language='de'
                             step = 1
                         }}>• Deutsch</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('en')
-                            $DataBase.language='en'
+                            DBState.db.language='en'
                             step = 1
                         }}>• English</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('ko')
-                            $DataBase.language='ko'
+                            DBState.db.language='ko'
                             step = 1
                         }}>• 한국어</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('cn')
-                            $DataBase.language='cn'
+                            DBState.db.language='cn'
                             step = 1
                         }}>• 中文</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('zh-Hant')
-                            $DataBase.language='zh-Hant'
+                            DBState.db.language='zh-Hant'
                             step = 1
                         }}>• 中文(繁體)</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('vi')
-                            $DataBase.language='vi'
+                            DBState.db.language='vi'
                             step = 1
                         }}>• Tiếng Việt</button>
                     </div>
@@ -134,8 +134,8 @@
                 {:else}
                     <Chat name="Risu" message={language.setup.welcome} isLastMemory={false} />
                     {#if step >= 2}
-                        <Chat name={$DataBase.username} message={$DataBase.username} isLastMemory={false} />
-                        <Chat name="Risu" message={language.setup.welcome2.replace('{username}', $DataBase.username)} isLastMemory={false} />
+                        <Chat name={DBState.db.username} message={DBState.db.username} isLastMemory={false} />
+                        <Chat name="Risu" message={language.setup.welcome2.replace('{username}', DBState.db.username)} isLastMemory={false} />
                     {/if}
                     {#if step === 2}
                         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -170,7 +170,7 @@
                         </div>
                     {/if}
                     {#if step >= 3}
-                        <Chat name={$DataBase.username} message={provider} isLastMemory={false} />
+                        <Chat name={DBState.db.username} message={provider} isLastMemory={false} />
                         {#if provider === 'openai'}
                             <Chat name="Risu" message={language.setup.setupOpenAI} isLastMemory={false} />
                         {/if}