[feat] sidebar arrows

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -531,14 +531,12 @@
                         
                     {/if}
             
-                    {#if $DataBase.useExperimental}
-                        <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
-                            screenShot()
-                        }}>
-                            <CameraIcon />
-                            <span class="ml-2">{language.screenshot} <Help key="experimental"/></span>
-                        </div>
-                    {/if}
+                    <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
+                        screenShot()
+                    }}>
+                        <CameraIcon />
+                        <span class="ml-2">{language.screenshot} <Help key="experimental"/></span>
+                    </div>
 
 
                     <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoSuggestions ? 'text-green-500':'lg:hover:text-green-500')} on:click={async () => {

src/lib/SideBars/Sidebar.svelte

@@ -5,6 +5,7 @@
     botMakerMode,
     selectedCharID,
     settingsOpen,
+    sideBarClosing,
     sideBarStore,
   } from "../../ts/stores";
   import { DataBase, setDatabase, type folder } from "../../ts/storage/database";
@@ -29,7 +30,7 @@
   import CharConfig from "./CharConfig.svelte";
   import { language } from "../../lang";
   import Botpreset from "../Setting/botpreset.svelte";
-  import { onDestroy } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import { cloneDeep, isEqual } from "lodash";
   import SidebarAvatar from "./SidebarAvatar.svelte";
   import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
@@ -98,7 +99,9 @@
   let IconRounded = false
   let openFolders:string[] = []
   let currentDrag: DragData = null
-  let closing = false
+
+  sideBarClosing.set(false)
+
 
   const unsub = DataBase.subscribe((db) => {
     let newCharImages: sortType[] = [];
@@ -326,8 +329,8 @@
 <div
   class="flex h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg relative"
   class:editMode
-  class:risu-sub-sidebar={!closing}
-  class:risu-sub-sidebar-close={closing}
+  class:risu-sub-sidebar={$sideBarClosing}
+  class:risu-sub-sidebar-close={$sideBarClosing}
 
 >
   <button
@@ -581,12 +584,13 @@
 </div>
 <div
   class="setting-area flex w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200 max-h-full"
-  class:risu-sidebar={!closing}
-  class:risu-sidebar-close={closing}
+  class:risu-sidebar={!$sideBarClosing}
+  class:risu-sidebar-close={$sideBarClosing}
   class:minw96={!$DynamicGUI}
+  class:dynamic-sidebar={$DynamicGUI}
   on:animationend={() => {
-    if(closing){
-      closing = false
+    if($sideBarClosing){
+      $sideBarClosing = false
       sideBarStore.set(false)
     }
   }}
@@ -594,10 +598,10 @@
   <button
     class="flex w-full justify-end text-gray-200"
     on:click={async () => {
-      if(closing){
+      if($sideBarClosing){
         return
       }
-      closing = true;
+      $sideBarClosing = true;
     }}
   >
     <!-- <button class="border-none bg-transparent p-0 text-gray-200"><X /></button> -->
@@ -657,13 +661,13 @@
 
 {#if $DynamicGUI}
     <div class="flex-grow h-full min-w-12" on:click={() => {
-      if(closing){
+      if($sideBarClosing){
         return
       }
-      closing = true;
+      $sideBarClosing = true;
     }}
-      class:sidebar-dark-animation={!closing}
-      class:sidebar-dark-close-animation={closing}>
+      class:sidebar-dark-animation={!$sideBarClosing}
+      class:sidebar-dark-close-animation={$sideBarClosing}>
 
     </div>
 
@@ -694,6 +698,28 @@
       right: 10rem;
     }
   }
+  @keyframes sidebar-transition-non-dynamic {
+    from {
+      width: 0rem;
+      min-width: 0rem;
+    }
+    to {
+      width: 24rem;
+      min-width: 24rem;
+    }
+  }
+  @keyframes sidebar-transition-close-non-dynamic {
+    from {
+      width: 24rem;
+      min-width: 24rem;
+      right:0rem;
+    }
+    to {
+      width: 0rem;
+      min-width: 0rem;
+      right:3rem;
+    }
+  }
   @keyframes sub-sidebar-transition {
     from {
       width: 0rem;
@@ -736,15 +762,27 @@
     }
   }
 
-  .risu-sidebar {
-    animation-name: sidebar-transition;
+  .risu-sidebar:not(.dynamic-sidebar) {
+    animation-name: sidebar-transition-non-dynamic;
     animation-duration: var(--risu-animation-speed);
   }
-  .risu-sidebar-close {
-    animation-name: sidebar-transition-close;
+  .risu-sidebar-close:not(.dynamic-sidebar) {
+    animation-name: sidebar-transition-close-non-dynamic;
     animation-duration: var(--risu-animation-speed);
     position: relative;
   }
+  .risu-sidebar.dynamic-sidebar {
+    animation-name: sidebar-transition;
+    animation-duration: var(--risu-animation-speed);
+  }
+  .risu-sidebar-close.dynamic-sidebar {
+    animation-name: sidebar-transition-close;
+    animation-duration: var(--risu-animation-speed);
+    position: relative;
+    right: 3rem;
+  }
+
+
   .risu-sub-sidebar {
     animation-name: sub-sidebar-transition;
     animation-duration: var(--risu-animation-speed);

src/lib/UI/GUI/SideBarArrow.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
   import { ArrowLeft, ArrowRight } from "lucide-svelte";
-  import { DynamicGUI, sideBarStore } from "src/ts/stores";
+  import { DynamicGUI, sideBarClosing, sideBarStore } from "src/ts/stores";
 
 </script>
 
 {#if $sideBarStore && !$DynamicGUI}
-    <button on:click={() => {sideBarStore.set(false)}} 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-neutral-200 z-20">
+    <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-neutral-200 z-20">
         <ArrowLeft />
     </button>
 {:else}
-    <button on:click={() => {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-neutral-200 opacity-50 hover:opacity-90 z-20">
+    <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-neutral-200 opacity-50 hover:opacity-90 z-20">
         <ArrowRight />
     </button>
 {/if}

src/ts/stores.ts

@@ -13,6 +13,7 @@ export const SizeStore = writable({
     h: 0
 })
 export const DynamicGUI = writable(false)
+export const sideBarClosing = writable(false)
 export const sideBarStore = writable(window.innerWidth > 1024)
 export const selectedCharID = writable(-1)
 export const CharEmotion = writable({} as {[key:string]: [string, string, number][]})