Add GUI size options

src/lang/en.ts

@@ -581,6 +581,9 @@ export const languageEnglish = {
     useInstructPrompt: "Use Instruction Prompt",
     hanuraiMemory: "HanuraiMemory",
     playground: "Playground",
+    textAreaSize: "Input Area Size",
+    textAreaTextSize: "Input Area Text Size",
+    sideBarSize: "Sidebar Size",
     embedding: "Embedding",
     syntax: "Syntax",
     run: "Run",

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -11,6 +11,8 @@
     import { changeColorScheme, colorSchemeList, exportColorScheme, importColorScheme, updateColorScheme, updateTextTheme } from "src/ts/gui/colorscheme";
     import { DownloadIcon, FolderUpIcon } from "lucide-svelte";
 
+    import { guiSizeText, updateGuisize } from "src/ts/gui/guisize";
+
     const onSchemeInputChange = (e:Event) => {
         changeColorScheme((e.target as HTMLInputElement).value)
     }
@@ -135,6 +137,17 @@
 <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
 <span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
 
+<span class="text-textcolor">{language.textAreaSize}</span>
+<SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} on:change={updateGuisize} />
+<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaSize)}</span>
+
+<span class="text-textcolor">{language.textAreaTextSize}</span>
+<SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} on:change={updateGuisize} />
+<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.textAreaTextSize)}</span>
+
+<span class="text-textcolor">{language.sideBarSize}</span>
+<SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} on:change={updateGuisize} />
+<span class="text-textcolor2 mb-6 text-sm">{guiSizeText($DataBase.sideBarSize)}</span>
 
 <span class="text-textcolor">{language.assetWidth}</span>
 <SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />

src/lib/SideBars/Sidebar.svelte

@@ -51,6 +51,7 @@
     import { alertAddCharacter, alertInput, alertSelect } from "src/ts/alert";
     import SideChatList from "./SideChatList.svelte";
     import { joinMultiuserRoom } from "src/ts/sync/multiuser";
+  import { sideBarSize } from "src/ts/gui/guisize";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -614,10 +615,17 @@
   </div>
 </div>
 <div
-  class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-textcolor max-h-full"
+  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}
+  class:w-96={$sideBarSize === 0}
+  class:w-110={$sideBarSize === 1}
+  class:w-124={$sideBarSize === 2}
+  class:w-144={$sideBarSize === 3}
   class:risu-sidebar-close={$sideBarClosing}
-  class:minw96={!$DynamicGUI}
+  class:min-w-96={!$DynamicGUI && $sideBarSize === 0}
+  class:min-w-110={!$DynamicGUI && $sideBarSize === 1}
+  class:min-w-124={!$DynamicGUI && $sideBarSize === 2}
+  class:min-w-144={!$DynamicGUI && $sideBarSize === 3}
   class:px-2={$DynamicGUI}
   class:px-4={!$DynamicGUI}
   class:dynamic-sidebar={$DynamicGUI}
@@ -718,9 +726,6 @@
 {/if}
 
 <style>
-  .minw96 {
-    min-width: 24rem; /* 384px */
-  }
   .editMode {
     min-width: 6rem;
   }

src/lib/UI/GUI/TextAreaInput.svelte

@@ -1,11 +1,10 @@
-
 <textarea 
     class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')} 
-    class:text-sm={size === 'sm'}
+    class:text-sm={size === 'sm' || (size === 'default' && $textAreaTextSize === 1)}
-    class:text-md={size === 'md'}
+    class:text-md={size === 'md' || (size === 'default' && $textAreaTextSize === 2)}
-    class:text-lg={size === 'lg'}
+    class:text-lg={size === 'lg' || (size === 'default' && $textAreaTextSize === 3)}
     class:text-xl={size === 'xl'}
-    class:text-xs={size === 'xs'}
+    class:text-xs={size === 'xs' || (size === 'default' && $textAreaTextSize === 0)}
     class:px-4={padding}
     class:py-2={padding}
     class:mb-4={margin === 'bottom'}
@@ -13,12 +12,29 @@
     class:mt-4={margin === 'top'}
     class:mt-2={margin === 'both'}
     class:w-full={fullwidth}
-    class:h-20={height === '20'}
+    class:h-20={height === '20' || (height === 'default' && $textAreaSize === -5)}
-    class:h-24={height === '24'}
+    class:h-24={height === '24' || (height === 'default' && $textAreaSize === -4)}
-    class:h-32={height === '32'}
+    class:h-28={height === '28' || (height === 'default' && $textAreaSize === -3)}
+    class:h-32={height === '32' || (height === 'default' && $textAreaSize === -2)}
+    class:h-36={height === '36' || (height === 'default' && $textAreaSize === -1)}
+    class:h-40={height === 'default' && $textAreaSize === 0}
+    class:h-44={height === 'default' && $textAreaSize === 1}
+    class:h-48={height === 'default' && $textAreaSize === 2}
+    class:h-52={height === 'default' && $textAreaSize === 3}
+    class:h-56={height === 'default' && $textAreaSize === 4}
+    class:h-60={height === 'default' && $textAreaSize === 5}
     class:h-full={height === 'full'}
-    class:min-h-20={height === '20'}
+    class:min-h-20={height === '20' || (height === 'default' && $textAreaSize === -5)}
-    class:min-h-32={height === '32'}
+    class:min-h-24={height === '24' || (height === 'default' && $textAreaSize === -4)}
+    class:min-h-28={height === '28' || (height === 'default' && $textAreaSize === -3)}
+    class:min-h-32={height === '32' || (height === 'default' && $textAreaSize === -2)}
+    class:min-h-36={height === '36' || (height === 'default' && $textAreaSize === -1)}
+    class:min-h-40={height === 'default' && $textAreaSize === 0}
+    class:min-h-48={height === 'default' && $textAreaSize === 1}
+    class:min-h-56={height === 'default' && $textAreaSize === 2}
+    class:min-h-64={height === 'default' && $textAreaSize === 3}
+    class:min-h-72={height === 'default' && $textAreaSize === 4}
+    class:min-h-80={height === 'default' && $textAreaSize === 5}
     {autocomplete}
     {placeholder}
     id={id}
@@ -45,7 +61,8 @@
 />
 
 <script lang="ts">
-    export let size: 'xs'|'sm'|'md'|'lg'|'xl' = 'xs'
+    import { textAreaSize, textAreaTextSize } from 'src/ts/gui/guisize'
+    export let size: 'xs'|'sm'|'md'|'lg'|'xl'|'default' = 'default'
     export let autocomplete: 'on'|'off' = 'off'
     export let placeholder: string = ''
     export let value:string
@@ -54,7 +71,7 @@
     export let margin:"none"|"top"|"bottom"|"both" = "none"
     export let onInput = () => {}
     export let fullwidth = false
-    export let height:'20'|'24'|'32'|'full' = '20'
+    export let height:'20'|'24'|'28'|'32'|'36'|'full'|'default' = 'default'
     export let className = ''
     export let optimaizedInput = true
     let inpa = 0

src/styles.css

@@ -117,11 +117,6 @@ html, body{
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.setting-area textarea{
-    height: 10rem;
-    min-height: 10rem;
-}
-
 .chattext p:first-child{
   margin-top: 0.3rem;
 }

src/ts/gui/guisize.ts

@@ -0,0 +1,46 @@
+import { get, writable } from "svelte/store";
+import { DataBase } from "../storage/database";
+
+export let textAreaSize = writable(0)
+export let sideBarSize = writable(0)
+export let textAreaTextSize = writable(0)
+
+export function updateGuisize(){
+    let db = get(DataBase)
+    const root = document.querySelector(':root') as HTMLElement;
+    if(!root){
+        return
+    }
+    textAreaSize.set(db.textAreaSize)
+    sideBarSize.set(db.sideBarSize)
+    textAreaTextSize.set(db.textAreaTextSize)
+}
+
+export function guiSizeText(num:number){
+    switch(num){
+        case 0:
+            return 'Default'
+        case 1:
+            return 'Big'
+        case 2:
+            return 'Bigger'
+        case 3:
+            return 'Huge'
+        case 4:
+            return 'Huger'
+        case 5:
+            return 'Hugest'
+        case -1:
+            return 'Small'
+        case -2:
+            return 'Smaller'
+        case -3:
+            return 'Tiny'
+        case -4:
+            return 'Tinier'
+        case -5:
+            return 'Tiniest'
+        default:
+            return 'Default'
+    }
+}

src/ts/storage/database.ts

@@ -396,6 +396,9 @@ export function setDatabase(data:Database){
     data.hanuraiEnable ??= false
     data.hanuraiSplit ??= false
     data.hanuraiTokens ??= 1000
+    data.textAreaSize ??= 0
+    data.sideBarSize ??= 0
+    data.textAreaTextSize ??= 0
 
     changeLanguage(data.language)
     DataBase.set(data)
@@ -647,6 +650,9 @@ export interface Database{
     hanuraiTokens:number
     hanuraiSplit:boolean
     hanuraiEnable:boolean
+    textAreaSize:number
+    sideBarSize:number
+    textAreaTextSize:number
 }
 
 export interface customscript{

src/ts/storage/globalApi.ts

@@ -31,6 +31,7 @@ import { registerPlugin } from '@capacitor/core';
 import { language } from "src/lang";
 import { startObserveDom } from "../observer";
 import { removeDefaultHandler } from "src/main";
+import { updateGuisize } from "../gui/guisize";
 
 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -505,6 +506,7 @@ export async function loadData() {
             updateAnimationSpeed()
             updateHeightMode()
             updateErrorHandling()
+            updateGuisize()
             if(db.botSettingAtStart){
                 botMakerMode.set(true)
             }

tailwind.config.js

@@ -26,7 +26,10 @@ export default {
         'half': '50%',
         '5': '1.25rem',
         '6': '1.5rem',
-
+        '96': '24rem',
+        '110': '28rem',
+        '124': '32rem',
+        '144': '36rem',
       },
       maxWidth:{
         'half': '50%',
@@ -43,6 +46,9 @@ export default {
       width: {
         '2xl': '48rem',
         '3xl': '72rem',
+        '110': '28rem',
+        '124': '32rem',
+        '144': '36rem',
       },
       minHeight:{
         '2': '0.5rem',