From b07a9b9d1569dba9435cbe81b59f35ac68e01b87 Mon Sep 17 00:00:00 2001
From: Kwaroran <amasio1234@proton.me>
Date: Thu, 19 Dec 2024 05:34:09 +0900
Subject: [PATCH] Update version to 143.7.1 and add menu sidebar options

---
 src-tauri/tauri.conf.json                    |  2 +-
 src/lang/en.ts                               |  2 +
 src/lib/Mobile/MobileCharacters.svelte       | 15 ++--
 src/lib/Others/GridCatalog.svelte            | 20 +++---
 src/lib/Setting/Pages/DisplaySettings.svelte |  4 ++
 src/lib/SideBars/Sidebar.svelte              | 74 ++++++++++++++++++++
 src/ts/storage/database.svelte.ts            |  3 +-
 version.json                                 |  2 +-
 8 files changed, 104 insertions(+), 18 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 3c36d6c7..34dedf62 100644
--- a/src-tauri/tauri.conf.json
+++ b/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": {
diff --git a/src/lang/en.ts b/src/lang/en.ts
index dc720fc9..6e621293 100644
--- a/src/lang/en.ts
+++ b/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",
 }
\ No newline at end of file
diff --git a/src/lib/Mobile/MobileCharacters.svelte b/src/lib/Mobile/MobileCharacters.svelte
index e1c1981a..db35cc3c 100644
--- a/src/lib/Mobile/MobileCharacters.svelte
+++ b/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>
\ No newline at end of file
+{#if gridMode}
+    <button class="p-4 rounded-full absolute bottom-2 right-2 bg-borderc" onclick={() => {
+        addCharacter()
+    }}>
+        <PlusIcon size={24} />
+    </button>
+{/if}
\ No newline at end of file
diff --git a/src/lib/Others/GridCatalog.svelte b/src/lib/Others/GridCatalog.svelte
index 01d1be54..a5a18311 100644
--- a/src/lib/Others/GridCatalog.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index 1d7ee9dd..2bdd38f1 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/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'}
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index ac63849f..9d7dcbe6 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/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}
diff --git a/src/ts/storage/database.svelte.ts b/src/ts/storage/database.svelte.ts
index 46da0e58..e3a728b5 100644
--- a/src/ts/storage/database.svelte.ts
+++ b/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{
diff --git a/version.json b/version.json
index 31c1916a..8b54713a 100644
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{"version":"143.7.0"}
\ No newline at end of file
+{"version":"143.7.1"}
\ No newline at end of file