Update version to 143.7.1 and add menu sidebar options

src-tauri/tauri.conf.json

@@ -29,7 +29,7 @@
   },
   "productName": "RisuAI",
   "mainBinaryName": "RisuAI",
-  "version": "143.5.0",
+  "version": "143.7.0",
   "identifier": "co.aiclient.risu",
   "plugins": {
     "updater": {

src/lang/en.ts

@@ -831,4 +831,6 @@ export const languageEnglish = {
     sourceLanguage: "Source Language",
     destinationLanguage: "Destination Language",
     noWebGPU: "Your Browser or OS doesn't support WebGPU. this will slow down the performance significantly.",
+    menuSideBar: "Menu Side Bar",
+    home: "Home",
 }

src/lib/Mobile/MobileCharacters.svelte

@@ -7,6 +7,8 @@
     import { MessageSquareIcon, PlusIcon } from "lucide-svelte";
 
     const agoFormatter = new Intl.RelativeTimeFormat(navigator.languages, { style: 'short' });
+    
+    let {gridMode = false, endGrid = () => {}} = $props();
 
     function makeAgoText(time:number){
         if(time === 0){
@@ -60,6 +62,7 @@
         {#if char.name.toLocaleLowerCase().includes($MobileSearch.toLocaleLowerCase())}
             <button class="flex p-2 border-t-darkborderc gap-2 w-full" class:border-t={i !== 0} onclick={() => {
                 changeChar(char.i)
+                endGrid()
             }}>
                 <BarIcon additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
                 <div class="flex flex-1 w-full flex-col justify-start items-start text-start">
@@ -76,8 +79,10 @@
     {/each}
 </div>
 
-<button class="p-4 rounded-full absolute bottom-2 right-2 bg-borderc" onclick={() => {
-    addCharacter()
-}}>
-    <PlusIcon size={24} />
-</button>
+{#if gridMode}
+    <button class="p-4 rounded-full absolute bottom-2 right-2 bg-borderc" onclick={() => {
+        addCharacter()
+    }}>
+        <PlusIcon size={24} />
+    </button>
+{/if}

src/lib/Others/GridCatalog.svelte

@@ -10,13 +10,14 @@
     import { language } from "src/lang";
     import { parseMultilangString } from "src/ts/util";
     import { checkCharOrder } from "src/ts/globalApi.svelte";
+  import MobileCharacters from "../Mobile/MobileCharacters.svelte";
     interface Props {
         endGrid?: any;
     }
 
     let { endGrid = () => {} }: Props = $props();
     let search = $state('')
-    let selected = $state(0)
+    let selected = $state(3)
 
     function changeChar(index = -1){
         characterFormatUpdate(index)
@@ -57,22 +58,19 @@
 
 <div class="h-full w-full flex justify-center">
     <div class="h-full p-6 bg-darkbg max-w-full w-2xl flex flex-col overflow-y-auto">
-        <h1 class="text-textcolor text-2xl font-bold mt-2 flex items-center mx-4 mb-2">
-            <button class="mr-2 hover:text-textcolor text-textcolor2" onclick={() => {
-                endGrid()
-            }}><ArrowLeft /></button>
-            <span>Catalog</span>
-        </h1>
         <div class="mx-4 mb-6 flex flex-col">
             <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off"/>
             <div class="flex flex-wrap gap-2 mt-2">
-                <Button selected={selected === 0} size="sm" onclick={() => {selected = 0}}>
+                <Button styled={selected === 3 ? 'primary' : 'outlined'} size="sm" onclick={() => {selected = 3}}>
+                    {language.simple}
+                </Button>
+                <Button styled={selected === 0 ? 'primary' : 'outlined'} size="sm" onclick={() => {selected = 0}}>
                     {language.grid}
                 </Button>
-                <Button selected={selected === 1} size="sm" onclick={() => {selected = 1}}>
+                <Button styled={selected === 1  ? 'primary' : 'outlined'} size="sm" onclick={() => {selected = 1}}>
                     {language.list}
                 </Button>
-                <Button selected={selected === 2} size="sm" onclick={() => {selected = 2}}>
+                <Button styled={selected === 2  ? 'primary' : 'outlined'} size="sm" onclick={() => {selected = 2}}>
                     {language.trash}
                 </Button>
             </div>
@@ -143,6 +141,8 @@
                     </div>
                 </div>
             {/each}
+        {:else if selected === 3}
+            <MobileCharacters gridMode endGrid={endGrid} />
         {/if}
     </div>
 </div>

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -363,6 +363,10 @@
         <Help key="betaMobileGUI"/>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={DBState.db.menuSideBar} name={language.menuSideBar}/>
+    </div>
+
     <div class="flex items-center mt-2">
         <Check bind:check={DBState.db.notification} name={language.notification} onChange={async (e) => {
             let hasPermission = {state: 'denied'}

src/lib/SideBars/Sidebar.svelte

@@ -23,6 +23,7 @@
     FolderOpenIcon,
     HomeIcon,
     WrenchIcon,
+    User2Icon,
   } from "lucide-svelte";
     import {
   addCharacter,
@@ -292,7 +293,79 @@
     return false
   }
 </script>
+{#if DBState.db.menuSideBar}
+<div
+  class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative rs-sidebar"
+  class:editMode
+  class:risu-sub-sidebar={$sideBarClosing}
+  class:risu-sub-sidebar-close={$sideBarClosing}
+  class:hidden={hidden}
+  class:flex={!hidden}
+>
+<button
+  class="flex items-center justify-center py-2 flex-col gap-1 w-full mt-4"
+  class:text-textcolor2={!(
+    $selectedCharID < 0 &&
+    $PlaygroundStore === 0 &&
+    !$settingsOpen
+  )}
+  onclick={() => {
+    reseter();
+    selectedCharID.set(-1)
+    PlaygroundStore.set(0)
+    OpenRealmStore.set(false)
+  }}
+>
+  <HomeIcon />
+  <span class="text-xs">{language.home}</span>
+</button>
+<button
+  class="flex items-center justify-center py-2 flex-col gap-1 w-full"
+  class:text-textcolor2={!$settingsOpen}
+  onclick={() => {
+    if ($settingsOpen) {
+      reseter();
+      settingsOpen.set(false);
+    } else {
+      reseter();
+      settingsOpen.set(true);
+    }
+  }}
+>
+  <Settings />
+  <span class="text-xs">{language.settings}</span>
+</button>
+<button
+  class="flex items-center justify-center py-2 flex-col gap-1 w-full"
+  class:text-textcolor2={!(
+    $selectedCharID >= 0
+  )}
+  onclick={() => {
+    reseter();
+    openGrid();
 
+  }}
+>
+  <User2Icon />
+  <span class="text-xs">{language.character}</span>
+</button>
+<button
+  class="flex items-center justify-center py-2 flex-col gap-1 w-full"
+  class:text-textcolor2={!(
+    $selectedCharID < 0 &&
+    $PlaygroundStore !== 0
+  )}
+  onclick={() => {
+    reseter();
+    selectedCharID.set(-1)
+    PlaygroundStore.set(1)
+  }}
+>
+  <ShellIcon />
+  <span class="text-xs">{language.playground}</span>
+</button>
+</div>
+{:else}
 <div
   class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative rs-sidebar"
   class:editMode
@@ -561,6 +634,7 @@
     </div>
   </div>
 </div>
+{/if}
 <div
   class="setting-area h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-textcolor max-h-full"
   class:risu-sidebar={!$sideBarClosing}

src/ts/storage/database.svelte.ts

@@ -12,7 +12,7 @@ import { defaultColorScheme, type ColorScheme } from '../gui/colorscheme';
 import type { PromptItem, PromptSettings } from '../process/prompt';
 import type { OobaChatCompletionRequestParams } from '../model/ooba';
 
-export let appVer = "143.5.0"
+export let appVer = "143.7.0"
 export let webAppSubVer = ''
 
 
@@ -856,6 +856,7 @@ export interface Database{
     legacyMediaFindings?:boolean
     geminiStream?:boolean
     assetMaxDifference:number
+    menuSideBar:boolean
 }
 
 interface SeparateParameters{

version.json

@@ -1 +1 @@
-{"version":"143.7.0"}
+{"version":"143.7.1"}