Add mobile gui beta

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>