Refactor character creation

src/lib/Mobile/MobileBody.svelte

@@ -30,7 +30,7 @@
     </button>
 </div>
 {/if}
-<div class="w-full flex-1 overflow-y-auto bg-bgcolor">
+<div class="w-full flex-1 overflow-y-auto bg-bgcolor relative">
     {#if $MobileSideBar > 0}
         <div class="w-full flex flex-col p-2 mt-2 h-full">
             {#if $MobileSideBar === 1}

src/lib/Mobile/MobileCharacters.svelte

@@ -1,20 +1,9 @@
 <script lang="ts">
     import { type character, DataBase, type groupChat } from "src/ts/storage/database";
     import BarIcon from "../SideBars/BarIcon.svelte";
-    import { characterFormatUpdate, getCharImage } from "src/ts/characters";
+    import { addCharacter, changeChar, getCharImage } from "src/ts/characters";
-    import { MobileSearch, selectedCharID } from "src/ts/stores";
+    import { MobileSearch } from "src/ts/stores";
-    import { doingChat } from "src/ts/process";
+    import { MessageSquareIcon, PlusIcon } from "lucide-svelte";
-    import { language } from "src/lang";
-  import { MessageSquareIcon } from "lucide-svelte";
-    function changeChar(index: number) {
-        if($doingChat){
-            return
-        }
-        characterFormatUpdate(index, {
-            updateInteraction: true,
-        });
-        selectedCharID.set(index);
-    }
 
     const agoFormatter = new Intl.RelativeTimeFormat(navigator.languages, { style: 'short' });
 
@@ -65,7 +54,7 @@
         });
     }
 </script>
-<div class="flex flex-col items-center w-full">
+<div class="flex flex-col items-center w-full overflow-y-auto h-full">
     {#each sortChar($DataBase.characters) as char, i}
         {#if char.name.toLocaleLowerCase().includes($MobileSearch.toLocaleLowerCase())}
             <button class="flex p-2 border-t-darkborderc gap-2 w-full" class:border-t={i !== 0} on:click={() => {
@@ -85,3 +74,9 @@
         {/if}
     {/each}
 </div>
+
+<button class="p-4 rounded-full absolute bottom-2 right-2 bg-borderc" on:click={() => {
+    addCharacter()
+}}>
+    <PlusIcon size={24} />
+</button>

src/lib/Others/AlertComp.svelte

@@ -305,7 +305,7 @@
             {:else if $alertStore.type === 'addchar'}
                 <div class="w-2xl flex flex-col max-w-full">
 
-                    <button class="border-darkborderc border py-12 px-8 flex rounded-md hover:ring-2 justify-center items-center" on:click={() => {
+                    <button class="border-darkborderc border py-12 px-8 flex rounded-md hover:ring-2 justify-center items-center" on:click|stopPropagation|preventDefault={(e) => {
                         alertStore.set({
                             type: 'none',
                             msg: 'importFromRealm'
@@ -319,7 +319,7 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
                         alertStore.set({
                             type: 'none',
                             msg: 'importCharacter'
@@ -332,7 +332,7 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
                         alertStore.set({
                             type: 'none',
                             msg: 'createfromScratch'
@@ -345,7 +345,7 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
                         alertStore.set({
                             type: 'none',
                             msg: 'createGroup'
@@ -358,7 +358,7 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click|stopPropagation|preventDefault={() => {
                         alertStore.set({
                             type: 'none',
                             msg: 'cancel'

src/lib/SideBars/Sidebar.svelte

@@ -29,9 +29,8 @@
     WrenchIcon,
   } from "lucide-svelte";
     import {
-    characterFormatUpdate,
+  addCharacter,
-    createNewCharacter,
+    changeChar,
-    createNewGroup,
     getCharImage,
   } from "../../ts/characters";
     import { importCharacter } from "src/ts/characterCards";
@@ -60,42 +59,6 @@
   let devTool = false
   export let openGrid = () => {};
 
-  function createScratch() {
-    reseter();
-    createNewCharacter();
-    let db = get(DataBase)
-    if(db.characters[db.characters.length-1]){
-        changeChar(db.characters.length-1)
-    }
-  }
-  function createGroup() {
-    reseter();
-    createNewGroup();
-    let db = get(DataBase)
-    if(db.characters[db.characters.length-1]){
-        changeChar(db.characters.length-1)
-    }
-  }
-  async function createImport() {
-    reseter();
-    await importCharacter();
-    let db = get(DataBase)
-    if(db.characters[db.characters.length-1]){
-        changeChar(db.characters.length-1)
-    }
-  }
-
-  function changeChar(index: number) {
-    if($doingChat){
-      return
-    }
-    reseter();
-    characterFormatUpdate(index, {
-      updateInteraction: true,
-    });
-    selectedCharID.set(index);
-  }
-
   function reseter() {
     menuMode = 0;
     sideBarMode = 0;
@@ -426,13 +389,13 @@
         <div
             on:click={() => {
               if(char.type === "normal"){
-                changeChar(char.index);
+                changeChar(char.index, {reseter});
               }
             }}
             on:keydown={(e) => {
               if (e.key === "Enter") {
                 if(char.type === "normal"){
-                  changeChar(char.index);
+                  changeChar(char.index, {reseter});
                 }
               }
             }}
@@ -537,13 +500,13 @@
               <div
                   on:click={() => {
                     if(char2.type === "normal"){
-                      changeChar(char2.index);
+                      changeChar(char2.index, {reseter});
                     }
                   }}
                   on:keydown={(e) => {
                     if (e.key === "Enter") {
                       if(char2.type === "normal"){
-                        changeChar(char2.index);
+                        changeChar(char2.index, {reseter});
                       }
                     }
                   }}
@@ -587,22 +550,7 @@
     <div class="flex flex-col items-center space-y-2 px-2">
       <BaseRoundedButton
         onClick={async () => {
-          const r = await alertAddCharacter()
+          addCharacter({reseter}) 
-          switch(r){
-            case 'createfromScratch':
-              createScratch()
-              break
-            case 'importCharacter':
-              createImport()
-              break
-            case 'createGroup':
-              createGroup()
-              break
-            case 'importFromRealm':
-              selectedCharID.set(-1)
-              OpenRealmStore.set(true)
-              break
-          }
         }}
         ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
           ><path
@@ -703,38 +651,6 @@
         <SideChatList bind:chara={ $CurrentCharacter} />
       {/if}
     {/if}
-  {:else if sideBarMode === 1}
-    <Button
-      on:click={createScratch}
-      className="mt-2"
-    >
-      {language.createfromScratch}
-    </Button>
-    <Button
-      on:click={createImport}
-      className="mt-2"
-    >
-      {language.importCharacter}
-    </Button>
-    <Button
-      on:click={createGroup}
-      className="mt-2"
-    >
-      {language.createGroup}
-    </Button>
-    <Button
-      on:click={BotCreator.createBotFromWeb}
-      className="mt-2"
-    >
-      {language.createBotwithAI}
-    </Button>
-  {:else if sideBarMode === 2}
-    <Button
-      on:click={joinMultiuserRoom}
-      className="mt-2"
-    >
-      {language.joinMultiUserRoom}
-    </Button>
   {/if}
 </div>
 

src/ts/characters.ts

@@ -1,17 +1,19 @@
 import { get, writable } from "svelte/store";
 import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc, type loreBook } from "./storage/database";
-import { alertConfirm, alertError, alertNormal, alertSelect, alertStore, alertWait } from "./alert";
+import { alertAddCharacter, alertConfirm, alertError, alertNormal, alertSelect, alertStore, alertWait } from "./alert";
 import { language } from "../lang";
 import { decode as decodeMsgpack } from "msgpackr";
 import { checkNullish, findCharacterbyId, getUserName, selectMultipleFile, selectSingleFile, sleep } from "./util";
 import { v4 as uuidv4 } from 'uuid';
-import { selectedCharID } from "./stores";
+import { MobileGUIStack, OpenRealmStore, selectedCharID } from "./stores";
 import { checkCharOrder, downloadFile, getFileSrc } from "./storage/globalApi";
 import { reencodeImage } from "./process/files/image";
 import { updateInlayScreen } from "./process/inlayScreen";
 import { PngChunk } from "./pngChunk";
 import { parseMarkdownSafe } from "./parser";
 import { translateHTML } from "./translator/translator";
+import { doingChat } from "./process";
+import { importCharacter } from "./characterCards";
 
 export function createNewCharacter() {
     let db = get(DataBase)
@@ -735,3 +737,51 @@ export async function removeChar(index:number,name:string, type:'normal'|'perman
     setDatabase(db)
     selectedCharID.set(-1)
 }
+
+export async function addCharacter(arg:{
+    reseter?:()=>any,
+} = {}){
+    MobileGUIStack.set(100)
+    const reseter = arg.reseter ?? (() => {})
+    const r = await alertAddCharacter()
+    if(r === 'importFromRealm'){
+        selectedCharID.set(-1)
+        OpenRealmStore.set(true)
+        MobileGUIStack.set(0)
+        return
+    }
+    reseter();
+    switch(r){
+        case 'createfromScratch':
+            createNewCharacter()
+            break
+        case 'createGroup':
+            createNewGroup()
+            break
+        case 'importCharacter':
+            await importCharacter()
+            break
+        default:
+            MobileGUIStack.set(1)
+            return
+    }
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
+    MobileGUIStack.set(1)
+}
+
+export function changeChar(index: number, arg:{
+    reseter?:()=>any,
+} = {}) {
+    const reseter = arg.reseter ?? (() => {})
+    if(get(doingChat)){
+      return
+    }
+    reseter();
+    characterFormatUpdate(index, {
+      updateInteraction: true,
+    });
+    selectedCharID.set(index);
+}

src/ts/storage/globalApi.ts

@@ -543,7 +543,7 @@ export async function loadData() {
             if(db.botSettingAtStart){
                 botMakerMode.set(true)
             }
-            if((db.betaMobileGUI && window.innerWidth <= 800) || import.meta.env.VITE_RISU_LITE){
+            if((db.betaMobileGUI && window.innerWidth <= 800) || import.meta.env.VITE_RISU_LITE === 'TRUE'){
                 initMobileGesture()
                 MobileGUI.set(true)
             }