Add mobile gui beta

src/lib/Mobile/MobileBody.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import { CurrentCharacter, MobileGUIStack, MobileSideBar, selectedCharID } from "src/ts/stores";
+    import Settings from "../Setting/Settings.svelte";
+    import RealmMain from "../UI/Realm/RealmMain.svelte";
+    import MobileCharacters from "./MobileCharacters.svelte";
+    import ChatScreen from "../ChatScreens/ChatScreen.svelte";
+    import CharConfig from "../SideBars/CharConfig.svelte";
+    import { WrenchIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+  import SideChatList from "../SideBars/SideChatList.svelte";
+  import DevTool from "../SideBars/DevTool.svelte";
+    let sbt = 0
+</script>
+
+{#if $MobileSideBar}
+<div class="w-full px-2 py-1 text-textcolor2 border-b border-b-darkborderc bg-darkbg flex justify-start items-center gap-2">
+    <button class="flex-1 border-r border-r-darkborderc" class:text-textcolor={sbt === 0} on:click={() => {
+        sbt = 0
+    }}>
+        {language.Chat}
+    </button>
+    <button class="flex-1 border-r border-r-darkborderc" class:text-textcolor={sbt === 1} on:click={() => {
+        sbt = 1
+    }}>
+        {language.character}
+    </button>
+    <button class:text-textcolor={sbt === 2} on:click={() => {
+        sbt = 2
+    }}>
+        <WrenchIcon size={18} />
+    </button>
+</div>
+{/if}
+<div class="w-full flex-1 overflow-y-auto">
+    {#if $MobileSideBar}
+        <div class="w-full flex flex-col p-2 mt-2 h-full">
+            {#if sbt === 0}
+                <SideChatList bind:chara={$CurrentCharacter} />
+            {:else if sbt === 1}
+                <CharConfig />
+            {:else if sbt === 2}
+                <DevTool />
+            {/if}
+        </div>
+    {:else if $selectedCharID !== -1}
+        <ChatScreen />
+    {:else if $MobileGUIStack === 0}
+        <RealmMain />
+    {:else if $MobileGUIStack === 1}
+        <MobileCharacters />
+    {:else if $MobileGUIStack === 3}
+        <Settings />
+    {/if}
+</div>

src/lib/Mobile/MobileCharacters.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { DataBase } from "src/ts/storage/database";
+    import BarIcon from "../SideBars/BarIcon.svelte";
+    import { characterFormatUpdate, getCharImage } from "src/ts/characters";
+    import { MobileSearch, selectedCharID } from "src/ts/stores";
+    import { doingChat } from "src/ts/process";
+    function changeChar(index: number) {
+        if($doingChat){
+            return
+        }
+        characterFormatUpdate(index);
+        selectedCharID.set(index);
+    }
+</script>
+<div class="flex flex-col items-center w-full">
+    {#each $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={() => {
+                changeChar(i)
+            }}>
+                <BarIcon additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
+                <div class="flex flex-1 w-full flex-col justify-start items-start text-start">
+                    <span>{char.name}</span>
+                    <span class="text-sm text-textcolor2">{char.chats.length} Chats</span>
+                </div>
+            </button>
+        {/if}
+    {/each}
+</div>

src/lib/Mobile/MobileFooter.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+
+  import { SettingsIcon, GlobeIcon, HomeIcon, MessageSquare } from "lucide-svelte";
+  import { language } from "src/lang";
+  import { MobileGUIStack, selectedCharID } from "src/ts/stores";
+
+</script>
+{#if $selectedCharID === -1}
+
+    <div class="w-full p-4 text-lg border-t border-t-darkborderc bg-darkbg flex items-center justify-center text-textcolor2">
+        <button class="flex justify-center items-center flex-col gap-2 w-20" class:text-textcolor={$MobileGUIStack === 0} on:click={() => {
+            MobileGUIStack.set(0)
+        }}>
+            <GlobeIcon size={24} />
+            <span class="text-xs">RisuRealm</span>
+        </button>
+        <button class="flex justify-center items-center flex-col gap-2 w-20" class:text-textcolor={$MobileGUIStack === 1} on:click={() => {
+            MobileGUIStack.set(1)
+        }}>
+            <HomeIcon size={24} />
+            <span class="text-xs">{language.character}</span>
+        </button>
+        <button class="flex justify-center items-center flex-col gap-2 w-20" class:text-textcolor={$MobileGUIStack === 3} on:click={() => {
+            MobileGUIStack.set(3)
+        }}>
+            <SettingsIcon size={24} />
+            <span class="text-xs">{language.settings}</span>
+        </button>
+    </div>
+
+{/if}

src/lib/Mobile/MobileHeader.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { ArrowLeft, MenuIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+    import { CurrentCharacter, MobileGUIStack, MobileSearch, selectedCharID, SettingsMenuIndex, MobileSideBar } from "src/ts/stores";
+
+</script>
+<div class="w-full px-4 h-16 border-b border-b-darkborderc bg-darkbg flex justify-start items-center gap-2">
+    {#if $selectedCharID !== -1 && $MobileSideBar}
+        <button on:click={() => {
+            MobileSideBar.set(false)
+        }}>
+            <ArrowLeft />
+        </button>
+        <span class="font-bold text-lg w-2/3 truncate">{language.menu}</span>
+    {:else if $selectedCharID !== -1}
+        <button on:click={() => {
+            selectedCharID.set(-1)
+        }}>
+            <ArrowLeft />
+        </button>
+        <span class="font-bold text-lg w-2/3 truncate">{$CurrentCharacter.name}</span>
+        <div class="flex-1 flex justify-end">
+            <button on:click={() => {
+                MobileSideBar.set(true)
+            }}>
+                <MenuIcon />
+            </button>
+        </div>
+    {:else if $MobileGUIStack === 3 && $SettingsMenuIndex > -1}
+        <button on:click={() => {
+            SettingsMenuIndex.set(-1)
+        }}>
+            <ArrowLeft />
+        </button>
+        <span class="font-bold text-lg">RisuAI</span>
+    {:else if $MobileGUIStack === 1}
+        <div class="flex items-stretch w-2xl max-w-full">
+            <input placeholder={language.search + '...'} bind:value={$MobileSearch} class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border bg-transparent rounded-md input-text text-xl flex-grow mx-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full">
+        </div>
+    {:else}
+        <span class="font-bold text-lg">RisuAI</span>
+
+    {/if}
+</div>