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>

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -319,6 +319,11 @@
         <Check bind:check={$DataBase.unformatQuotes} name={language.unformatQuotes}/>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.betaMobileGUI} name={language.betaMobileGUI}/>
+        <Help key="betaMobileGUI"/>
+    </div>
+
     {#if $DataBase.useExperimental}
         <div class="flex items-center mt-2">
             <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>

src/lib/Setting/Settings.svelte

@@ -8,7 +8,7 @@
     import PluginSettings from "./Pages/PluginSettings.svelte";
     import FilesSettings from "./Pages/FilesSettings.svelte";
     import AdvancedSettings from "./Pages/AdvancedSettings.svelte";
-    import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
+    import { MobileGUI, SettingsMenuIndex, settingsOpen } from "src/ts/stores";
     import Botpreset from "./botpreset.svelte";
     import Communities from "./Pages/Communities.svelte";
     import GlobalLoreBookSettings from "./Pages/GlobalLoreBookSettings.svelte";
@@ -29,7 +29,7 @@
 </script>
 <div class="h-full w-full flex justify-center setting-bg rs-setting-cont">
     <div class="h-full max-w-screen-lg w-full flex relative rs-setting-cont-2">
-        {#if window.innerWidth >= 700 || $SettingsMenuIndex === -1}
+        {#if (window.innerWidth >= 700 && !$MobileGUI) || $SettingsMenuIndex === -1}
             <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative rs-setting-cont-3"
                 class:w-full={window.innerWidth < 700}>
                 <button class="flex gap-2 items-center hover:text-textcolor"
@@ -132,14 +132,14 @@
                     <BoxIcon />
                     <span>{language.supporterThanks}</span>
                 </button>
-                {#if window.innerWidth < 700}
+                {#if window.innerWidth < 700 && !$MobileGUI}
                     <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
                         settingsOpen.set(false)
                     }}> <XCircleIcon /> </button>
                 {/if}
             </div>
         {/if}
-        {#if window.innerWidth >= 700 || $SettingsMenuIndex !== -1}
+        {#if (window.innerWidth >= 700 && !$MobileGUI) || $SettingsMenuIndex !== -1}
             {#key $SettingsMenuIndex}
                 <div class="flex-grow py-6 px-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative rs-setting-cont-4">
                     {#if $SettingsMenuIndex === 0}
@@ -181,16 +181,18 @@
                     {/if}
             </div>
             {/key}
-            <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
-                if(window.innerWidth >= 700){
-                    settingsOpen.set(false)
-                }
-                else{
-                    $SettingsMenuIndex = -1
-                }
-            }}>
-                <XCircleIcon />
-            </button>            
+            {#if !$MobileGUI}
+                <button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
+                    if(window.innerWidth >= 700){
+                        settingsOpen.set(false)
+                    }
+                    else{
+                        $SettingsMenuIndex = -1
+                    }
+                }}>
+                    <XCircleIcon />
+                </button>
+            {/if}
         {/if}
     </div>
 </div>

src/lib/UI/GUI/SideBarArrow.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
     import { ArrowLeft, ArrowRight } from "lucide-svelte";
-    import { DynamicGUI, sideBarClosing, sideBarStore } from "src/ts/stores";
+    import { DynamicGUI, MobileGUI, sideBarClosing, sideBarStore } from "src/ts/stores";
 
 </script>
 
-{#if $sideBarStore && !$DynamicGUI}
-    <button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent  rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor z-20">
-        <ArrowLeft />
-    </button>
-{:else}
-    <button on:click={() => {
-        sideBarClosing.set(false);
-        sideBarStore.set(true)}
-    } class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor opacity-50 hover:opacity-90 z-20">
-        <ArrowRight />
-    </button>
+{#if !MobileGUI}
+    {#if $sideBarStore && !$DynamicGUI}
+        <button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent  rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor z-20">
+            <ArrowLeft />
+        </button>
+    {:else}
+        <button on:click={() => {
+            sideBarClosing.set(false);
+            sideBarStore.set(true)}
+        } class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor opacity-50 hover:opacity-90 z-20">
+            <ArrowRight />
+        </button>
+    {/if}
 {/if}

src/lib/UI/Realm/RealmMain.svelte

@@ -5,7 +5,7 @@
     import { language } from "src/lang";
     import RisuHubIcon from "./RealmHubIcon.svelte";
     import TextInput from "../GUI/TextInput.svelte";
-    import { SizeStore } from "src/ts/stores";
+    import { MobileGUI, SizeStore } from "src/ts/stores";
     import { Capacitor } from "@capacitor/core";
   import RealmPopUp from "./RealmPopUp.svelte";
   import { googleBuild } from "src/ts/storage/globalApi";
@@ -35,29 +35,66 @@
 
 
 </script>
-<div class="w-full flex justify-center mt-4">
-    <div class="flex w-2xl max-w-full items-center">
-        {#if $SizeStore.w < 768}
-            <TextInput className="flex-grow min-w-0" placeholder="Search" bind:value={search} />
-        {:else}
-            <TextInput size="xl" className="flex-grow" placeholder="Search" bind:value={search} />
-
-        {/if}
-        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
-            page = 0
-            getHub()
-        }}>
+<div class="w-full flex justify-center mt-4 mb-2">
+    <div class="flex items-stretch w-2xl max-w-full">
+        <input bind:value={search} class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full">
+            <button
+            on:click={() => {
+                page = 0
+                getHub()
+            }}
+            class="flex justify-center border-y border-darkborderc items-center text-gray-100 p-3 peer-focus:border-textcolor hover:bg-blue-500 transition-colors"
+        >
             <SearchIcon />
         </button>
-        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
-            menuOpen = true
-        }}>
+        <button
+            on:click={(e) => {
+                menuOpen = true
+            }}
+            class="peer-focus:border-textcolor mr-2 flex border-y border-r border-darkborderc justify-center items-center text-gray-100 p-3 rounded-r-md hover:bg-blue-500 transition-colors"
+        >
             <MenuIcon />
         </button>
     </div>
 </div>
-<div class="w-full p-1 flex mb-3 overflow-x-auto sm:justify-center">
-    {#if !googleBuild}
+{#if $MobileGUI}
+<div class="ml-4 flex items-start ">
+    <div class="p-2 flex mb-3 overflow-x-auto rounded-lg border-darkborderc border gap-2">
+        <button on:click={() => {
+            nsfw = !nsfw
+            getHub()
+        }}>
+            {nsfw ? 'NSFW' : 'SFW'}
+        </button>
+        <div class="h-full border-r border-r-selected"></div>
+        <button on:click={() => {
+            switch(sort){
+                case '':
+                    sort = 'trending'
+                    break
+                case 'trending':
+                    sort = 'downloads'
+                    break
+                case 'downloads':
+                    sort = 'random'
+                    break
+                default:
+                    sort = ''
+                    break
+            }
+            getHub()
+        }}>
+            {
+                sort === '' ? language.recent : 
+                sort === 'trending' ? language.trending :
+                sort === 'downloads' ? language.downloads :
+                language.random
+            }
+        </button>
+    </div>
+</div>
+{:else}
+    <div class="w-full p-1 flex mb-3 overflow-x-auto sm:justify-center">
         <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={nsfw} on:click={() => {
             nsfw = !nsfw
             getHub()
@@ -65,32 +102,32 @@
             NSFW
         </button>
         <div class="ml-2 mr-2 h-full border-r border-r-selected"></div>
-    {/if}
-    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} on:click={() => {
-        sort = ''
-        getHub()
-    }}>
-        {language.recent}
-    </button>
-    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'trending'} on:click={() => {
-        sort = 'trending'
-        getHub()
-    }}>
-        {language.trending}
-    </button>
-    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'downloads'} on:click={() => {
-        sort = 'downloads'
-        getHub()
-    }}>
-        {language.downloads}
-    </button>
-    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'random'} on:click={() => {
-        sort = 'random'
-        getHub()
-    }}>
-        {language.random}
-    </button>
-</div>
+        <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} on:click={() => {
+            sort = ''
+            getHub()
+        }}>
+            {language.recent}
+        </button>
+        <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'trending'} on:click={() => {
+            sort = 'trending'
+            getHub()
+        }}>
+            {language.trending}
+        </button>
+        <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'downloads'} on:click={() => {
+            sort = 'downloads'
+            getHub()
+        }}>
+            {language.downloads}
+        </button>
+        <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow min-w-0 max-w-full" class:ring={sort === 'random'} on:click={() => {
+            sort = 'random'
+            getHub()
+        }}>
+            {language.random}
+        </button>
+    </div>
+{/if}
 {@html hubAdditionalHTML}
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
     {#key charas}