Improve beta mobile accessibility

src/lib/Mobile/MobileBody.svelte

@@ -7,38 +7,37 @@
     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
+    import SideChatList from "../SideBars/SideChatList.svelte";
+    import DevTool from "../SideBars/DevTool.svelte";
 </script>
 
-{#if $MobileSideBar}
+{#if $MobileSideBar > 0}
 <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
+    <button class="flex-1 border-r border-r-darkborderc" class:text-textcolor={$MobileSideBar === 1} on:click={() => {
+        $MobileSideBar = 1
     }}>
         {language.Chat}
     </button>
-    <button class="flex-1 border-r border-r-darkborderc" class:text-textcolor={sbt === 1} on:click={() => {
-        sbt = 1
+    <button class="flex-1 border-r border-r-darkborderc" class:text-textcolor={$MobileSideBar === 2} on:click={() => {
+        $MobileSideBar = 2
     }}>
         {language.character}
     </button>
-    <button class:text-textcolor={sbt === 2} on:click={() => {
-        sbt = 2
+    <button class:text-textcolor={$MobileSideBar === 3} on:click={() => {
+        $MobileSideBar = 3
     }}>
         <WrenchIcon size={18} />
     </button>
 </div>
 {/if}
-<div class="w-full flex-1 overflow-y-auto">
-    {#if $MobileSideBar}
+<div class="w-full flex-1 overflow-y-auto bg-bgcolor">
+    {#if $MobileSideBar > 0}
         <div class="w-full flex flex-col p-2 mt-2 h-full">
-            {#if sbt === 0}
+            {#if $MobileSideBar === 1}
                 <SideChatList bind:chara={$CurrentCharacter} />
-            {:else if sbt === 1}
+            {:else if $MobileSideBar === 2}
                 <CharConfig />
-            {:else if sbt === 2}
+            {:else if $MobileSideBar === 3}
                 <DevTool />
             {/if}
         </div>
@@ -48,7 +47,7 @@
         <RealmMain />
     {:else if $MobileGUIStack === 1}
         <MobileCharacters />
-    {:else if $MobileGUIStack === 3}
+    {:else if $MobileGUIStack === 2}
         <Settings />
     {/if}
 </div>

src/lib/Mobile/MobileCharacters.svelte

@@ -1,27 +1,85 @@
 <script lang="ts">
-    import { DataBase } from "src/ts/storage/database";
+    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 { MobileSearch, selectedCharID } from "src/ts/stores";
     import { doingChat } from "src/ts/process";
+    import { language } from "src/lang";
+  import { MessageSquareIcon } from "lucide-svelte";
     function changeChar(index: number) {
         if($doingChat){
             return
         }
-        characterFormatUpdate(index);
+        characterFormatUpdate(index, {
+            updateInteraction: true,
+        });
         selectedCharID.set(index);
     }
+
+    const agoFormatter = new Intl.RelativeTimeFormat(navigator.languages, { style: 'short' });
+
+    function makeAgoText(time:number){
+        if(time === 0){
+            return "Unknown";
+        }
+        const diff = Date.now() - time;
+        if(diff < 3600000){
+            const min = Math.floor(diff / 60000);
+            return agoFormatter.format(-min, 'minute');
+        }
+        if(diff < 86400000){
+            const hour = Math.floor(diff / 3600000);
+            return agoFormatter.format(-hour, 'hour');
+        }
+        if(diff < 604800000){
+            const day = Math.floor(diff / 86400000);
+            return agoFormatter.format(-day, 'day');
+        }
+        if(diff < 2592000000){
+            const week = Math.floor(diff / 604800000);
+            return agoFormatter.format(-week, 'week');
+        }
+        if(diff < 31536000000){
+            const month = Math.floor(diff / 2592000000);
+            return agoFormatter.format(-month, 'month');
+        }
+        const year = Math.floor(diff / 31536000000);
+        return agoFormatter.format(-year, 'year');
+    }
+
+    function sortChar(char: (character|groupChat)[]) {
+        return char.map((c, i) => {
+            return {
+                name: c.name || "Unnamed",
+                image: c.image,
+                chats: c.chats.length,
+                i: i,
+                interaction: c.lastInteraction || 0,
+                agoText: makeAgoText(c.lastInteraction || 0),
+            }
+        }).sort((a, b) => {
+            if (a.interaction === b.interaction) {
+                return a.name.localeCompare(b.name);
+            }
+            return b.interaction - a.interaction;
+        });
+    }
 </script>
 <div class="flex flex-col items-center w-full">
-    {#each $DataBase.characters as char, i}
+    {#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={() => {
-                changeChar(i)
+                changeChar(char.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 class="text-sm text-textcolor2 flex items-center w-full flex-wrap">
+                        <span class="mr-1">{char.chats}</span>
+                        <MessageSquareIcon size={14} />
+                        <span class="mr-1 ml-1">|</span>
+                        <span>{char.agoText}</span>
+                    </div>
                 </div>
             </button>
         {/if}

src/lib/Mobile/MobileFooter.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 
-  import { SettingsIcon, GlobeIcon, HomeIcon, MessageSquare } from "lucide-svelte";
+  import { SettingsIcon, GlobeIcon, HomeIcon, MessageSquare, Volume2Icon, CurlyBraces, ActivityIcon, BookIcon, SmileIcon, UserIcon } from "lucide-svelte";
   import { language } from "src/lang";
-  import { MobileGUIStack, selectedCharID } from "src/ts/stores";
+  import { CharConfigSubMenu, MobileGUIStack, MobileSideBar, selectedCharID } from "src/ts/stores";
 
 </script>
 {#if $selectedCharID === -1}
@@ -20,12 +20,53 @@
             <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)
+        <button class="flex justify-center items-center flex-col gap-2 w-20" class:text-textcolor={$MobileGUIStack === 2} on:click={() => {
+            MobileGUIStack.set(2)
         }}>
             <SettingsIcon size={24} />
             <span class="text-xs">{language.settings}</span>
         </button>
     </div>
 
+{/if}
+
+{#if $selectedCharID !== -1 && $MobileSideBar === 2}
+    <div class="w-full p-4 text-lg border-t border-t-darkborderc bg-darkbg flex items-center justify-center text-textcolor2 truncate">
+        <button class="flex justify-center items-center flex-col gap-2 w-16 max-w-16" class:text-textcolor={$CharConfigSubMenu === 0} on:click={() => {
+            CharConfigSubMenu.set(0)
+        }}>
+            <UserIcon size={24} />
+            <span class="text-xs truncate max-w-16">{language.basicInfo}</span>
+        </button>
+        <button class="flex justify-center items-center flex-col gap-2 w-16 max-w-16" class:text-textcolor={$CharConfigSubMenu === 1} on:click={() => {
+            CharConfigSubMenu.set(1)
+        }}>
+            <SmileIcon size={24} />
+            <span class="text-xs truncate max-w-16">{language.characterDisplay}</span>
+        </button>
+        <button class="flex justify-center items-center flex-col gap-2 w-16 max-w-16" class:text-textcolor={$CharConfigSubMenu === 3} on:click={() => {
+            CharConfigSubMenu.set(3)
+        }}>
+            <BookIcon size={24} />
+            <span class="text-xs truncate max-w-16">{language.loreBook}</span>
+        </button>
+        <button class="flex justify-center items-center flex-col gap-2 w-16 max-w-16" class:text-textcolor={$CharConfigSubMenu === 5} on:click={() => {
+            CharConfigSubMenu.set(5)
+        }}>
+            <Volume2Icon size={24} />
+            <span class="text-xs truncate max-w-16">TTS</span>
+        </button>
+        <button class="flex justify-center items-center flex-col gap-2 w-16 max-w-16" class:text-textcolor={$CharConfigSubMenu === 4} on:click={() => {
+            CharConfigSubMenu.set(4)
+        }}>
+            <CurlyBraces size={24} />
+            <span class="text-xs truncate max-w-16">{language.scripts}</span>
+        </button>
+        <button class="flex justify-center items-center flex-col gap-2 w-16 max-w-16" class:text-textcolor={$CharConfigSubMenu === 2} on:click={() => {
+            CharConfigSubMenu.set(2)
+        }}>
+            <ActivityIcon size={24} />
+            <span class="text-xs truncate max-w-16">{language.advanced}</span>
+        </button>
+    </div>
 {/if}

src/lib/Mobile/MobileHeader.svelte

@@ -5,9 +5,9 @@
 
 </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}
+    {#if $selectedCharID !== -1 && $MobileSideBar > 0}
         <button on:click={() => {
-            MobileSideBar.set(false)
+            MobileSideBar.set(0)
         }}>
             <ArrowLeft />
         </button>
@@ -21,12 +21,12 @@
         <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)
+                MobileSideBar.set(1)
             }}>
                 <MenuIcon />
             </button>
         </div>
-    {:else if $MobileGUIStack === 3 && $SettingsMenuIndex > -1}
+    {:else if $MobileGUIStack === 2 && $SettingsMenuIndex > -1}
         <button on:click={() => {
             SettingsMenuIndex.set(-1)
         }}>