From ab485543b83cb36954e96cd0d79cf8d22442fbd4 Mon Sep 17 00:00:00 2001
From: enzi221 <enz3224@gmail.com>
Date: Mon, 19 May 2025 02:05:11 +0900
Subject: [PATCH 1/5] feat: Add 'divider' type toggle

---
 src/lib/SideBars/Toggles.svelte | 13 +++++++++++-
 src/ts/util.ts                  | 37 +++++++++++++++++++++++----------
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/lib/SideBars/Toggles.svelte b/src/lib/SideBars/Toggles.svelte
index afefa2bd..c7b99d04 100644
--- a/src/lib/SideBars/Toggles.svelte
+++ b/src/lib/SideBars/Toggles.svelte
@@ -21,7 +21,7 @@
 </script>
 
 {#snippet toggles(reverse: boolean = false)}
-    {#each parsedKv as toggle}
+    {#each parsedKv as toggle, index}
         {#if toggle.type === 'select'}
             <div class="flex gap-2 mt-2 items-center" class:flex-row-reverse={!reverse} class:justify-end={!reverse}>
                 <span>{toggle.value}</span>
@@ -37,6 +37,17 @@
                 <span>{toggle.value}</span>
                 <TextInput className="w-32" bind:value={DBState.db.globalChatVariables[`toggle_${toggle.key}`]} />
             </div>
+        {:else if toggle.type === 'divider'}
+            {@const prevToggle = parsedKv[index - 1]}
+            <!-- Prevent multiple dividers appearing in a row -->
+            {#if index === 0 || prevToggle.type !== 'divider' || prevToggle.value !== toggle.value}
+                <div class="flex gap-2 mt-2 w-full min-h-5 items-center" class:flex-row-reverse={!reverse} class:justify-end={!reverse}>
+                    {#if toggle.value}
+                        <span>{toggle.value}</span>
+                    {/if}
+                    <hr class="border-t border-darkborderc m-0 min-w-32 flex-grow" />
+                </div>
+            {/if}
         {:else}
             <div class="flex mt-2 items-center">
                 <CheckInput check={DBState.db.globalChatVariables[`toggle_${toggle.key}`] === '1'} reverse={reverse} name={toggle.value} onChange={() => {
diff --git a/src/ts/util.ts b/src/ts/util.ts
index c80360a2..3b12e5c6 100644
--- a/src/ts/util.ts
+++ b/src/ts/util.ts
@@ -1009,33 +1009,48 @@ export function parseKeyValue(template:string){
     }
 }
 
+type sidebarToggle = 
+    | {
+        key?:string,
+        value?:string,
+        type:'divider',
+        options?:string[]
+    } 
+    | {
+        key:string,
+        value:string,
+        type:'select',
+        options:string[]
+    }
+    | {
+        key:string,
+        value:string,
+        type:string|undefined,
+        options?:string[]
+    }
+
 export function parseToggleSyntax(template:string){
     try {
-        console.log(template)
         if(!template){
             return []
         }
     
-        const keyValue:{
-            key:string,
-            value:string,
-            type?:string,
-            options?:string[]
-        }[] = []
+        const keyValue:sidebarToggle[] = []
     
         const splited = template.split('\n')
 
         for(const line of splited){
             const [key, value, type, option] = line.split('=')
-            if(key && value){
+            if((key && value) || type === 'divider'){
                 keyValue.push({
-                    key, value, type, options: option ? option.split(',') : []
+                    key,
+                    value,
+                    type,
+                    options: option?.split(',') ?? []
                 })
             }
         }
 
-        console.log(keyValue)
-    
         return keyValue   
     } catch (error) {
         console.error(error)

From 3f68238c9a7a4609fa0c86545af4bf04b145c034 Mon Sep 17 00:00:00 2001
From: enzi221 <enz3224@gmail.com>
Date: Tue, 20 May 2025 01:11:21 +0900
Subject: [PATCH 2/5] feat: Add 'group' and 'groupEnd' type toggle

---
 src/lib/SideBars/Toggles.svelte | 45 +++++++++++++++++++++++++--------
 src/ts/util.ts                  | 29 ++++++++++++++++++---
 2 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/src/lib/SideBars/Toggles.svelte b/src/lib/SideBars/Toggles.svelte
index c7b99d04..0cf2525e 100644
--- a/src/lib/SideBars/Toggles.svelte
+++ b/src/lib/SideBars/Toggles.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { getModuleToggles } from "src/ts/process/modules";
     import { DBState, MobileGUI } from "src/ts/stores.svelte";
-    import { parseToggleSyntax } from "src/ts/util";
-    import CheckInput from "../UI/GUI/CheckInput.svelte";
+    import { parseToggleSyntax, type sidebarToggle, type sidebarToggleGroup } from "src/ts/util";
     import { language } from "src/lang";
     import type { character, groupChat } from "src/ts/storage/database.svelte";
+    import CheckInput from "../UI/GUI/CheckInput.svelte";
     import SelectInput from "../UI/GUI/SelectInput.svelte";
     import OptionInput from "../UI/GUI/OptionInput.svelte";
     import TextInput from "../UI/GUI/TextInput.svelte";
@@ -16,16 +16,39 @@
 
     let { chara = $bindable(), noContainer }: Props = $props();
 
-    let parsedKv = $derived(parseToggleSyntax(DBState.db.customPromptTemplateToggle + getModuleToggles()))
+    let groupedToggles = $derived.by(() => {
+        const ungrouped = parseToggleSyntax(DBState.db.customPromptTemplateToggle + getModuleToggles())
 
+        let groupOpen = false
+        // group toggles together between group ... groupEnd
+        return ungrouped.reduce<sidebarToggle[]>((acc, toggle) => {
+            if (toggle.type === 'group') {
+                groupOpen = true
+                acc.push(toggle)
+            } else if (toggle.type === 'groupEnd') {
+                groupOpen = false
+            } else if (groupOpen) {
+                (acc.at(-1) as sidebarToggleGroup).children.push(toggle)
+            } else {
+                acc.push(toggle)
+            }
+            return acc
+        }, [])
+    })
 </script>
 
-{#snippet toggles(reverse: boolean = false)}
-    {#each parsedKv as toggle, index}
-        {#if toggle.type === 'select'}
+{#snippet toggles(items: sidebarToggle[], reverse: boolean = false)}
+    {#each items as toggle, index}
+        {#if toggle.type === 'group' && toggle.children.length > 0}
+            <details class="mt-3 mb-1 w-full border border-darkborderc rounded">
+                <summary class="-m-px p-2 bg-darkbutton border border-darkborderc rounded text-xs cursor-pointer select-none hover:bg-selected transition-colors duration-190">{toggle.value}</summary>
+                <div class="flex flex-col px-2 py-4 pt-0">
+                    {@render toggles((toggle as sidebarToggleGroup).children, reverse)}
+                </div>
+            </details>
+        {:else if toggle.type === 'select'}
             <div class="flex gap-2 mt-2 items-center" class:flex-row-reverse={!reverse} class:justify-end={!reverse}>
                 <span>{toggle.value}</span>
-
                 <SelectInput className="w-32" bind:value={DBState.db.globalChatVariables[`toggle_${toggle.key}`]}>
                     {#each toggle.options as option, i}
                         <OptionInput value={i.toString()}>{option}</OptionInput>
@@ -38,7 +61,7 @@
                 <TextInput className="w-32" bind:value={DBState.db.globalChatVariables[`toggle_${toggle.key}`]} />
             </div>
         {:else if toggle.type === 'divider'}
-            {@const prevToggle = parsedKv[index - 1]}
+            {@const prevToggle = groupedToggles[index - 1]}
             <!-- Prevent multiple dividers appearing in a row -->
             {#if index === 0 || prevToggle.type !== 'divider' || prevToggle.value !== toggle.value}
                 <div class="flex gap-2 mt-2 w-full min-h-5 items-center" class:flex-row-reverse={!reverse} class:justify-end={!reverse}>
@@ -58,12 +81,12 @@
     {/each}
 {/snippet}
 
-{#if !noContainer && parsedKv.length > 4}
+{#if !noContainer && groupedToggles.length > 4}
     <div class="h-48 border-darkborderc p-2 border rounded flex flex-col items-start mt-2 overflow-y-auto">
         <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
             <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle} reverse />
         </div>
-        {@render toggles(true)}
+        {@render toggles(groupedToggles, true)}
         {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable || DBState.db.hypaV3}
             <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
                 <CheckInput bind:check={chara.supaMemory} reverse name={DBState.db.hypaV3 ? language.ToggleHypaMemory : DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
@@ -74,7 +97,7 @@
     <div class="flex mt-2 items-center">
         <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle}/>
     </div>
-    {@render toggles()}
+    {@render toggles(groupedToggles)}
     {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable || DBState.db.hypaV3}
         <div class="flex mt-2 items-center">
             <CheckInput bind:check={chara.supaMemory} name={DBState.db.hypaV3 ? language.ToggleHypaMemory : DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
diff --git a/src/ts/util.ts b/src/ts/util.ts
index 3b12e5c6..1c20da11 100644
--- a/src/ts/util.ts
+++ b/src/ts/util.ts
@@ -1009,12 +1009,26 @@ export function parseKeyValue(template:string){
     }
 }
 
-type sidebarToggle = 
+export type sidebarToggleGroup = {
+    key?:string,
+    value?:string,
+    type:'group',
+    children:sidebarToggle[]
+}
+
+export type sidebarToggleGroupEnd = {
+    key?:string,
+    value?:string,
+    type:'groupEnd',
+}
+
+export type sidebarToggle =
+    | sidebarToggleGroup
+    | sidebarToggleGroupEnd
     | {
         key?:string,
         value?:string,
         type:'divider',
-        options?:string[]
     } 
     | {
         key:string,
@@ -1025,7 +1039,7 @@ type sidebarToggle =
     | {
         key:string,
         value:string,
-        type:string|undefined,
+        type:'text'|undefined,
         options?:string[]
     }
 
@@ -1041,11 +1055,18 @@ export function parseToggleSyntax(template:string){
 
         for(const line of splited){
             const [key, value, type, option] = line.split('=')
-            if((key && value) || type === 'divider'){
+            if(type === 'group' || type === 'groupEnd' || type === 'divider'){
                 keyValue.push({
                     key,
                     value,
                     type,
+                    children: []
+                })
+            } else if((key && value)){
+                keyValue.push({
+                    key,
+                    value,
+                    type: type === 'select' || type === 'text' ? type : undefined,
                     options: option?.split(',') ?? []
                 })
             }

From 932ce2646f36f841486e7d8f4f70fea827fd99b0 Mon Sep 17 00:00:00 2001
From: enzi221 <enz3224@gmail.com>
Date: Tue, 20 May 2025 01:21:54 +0900
Subject: [PATCH 3/5] feat: Apply mobileGUI justify-end to other toggles

---
 src/lib/SideBars/Toggles.svelte | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/lib/SideBars/Toggles.svelte b/src/lib/SideBars/Toggles.svelte
index 0cf2525e..fa650855 100644
--- a/src/lib/SideBars/Toggles.svelte
+++ b/src/lib/SideBars/Toggles.svelte
@@ -40,14 +40,18 @@
 {#snippet toggles(items: sidebarToggle[], reverse: boolean = false)}
     {#each items as toggle, index}
         {#if toggle.type === 'group' && toggle.children.length > 0}
-            <details class="mt-3 mb-1 w-full border border-darkborderc rounded">
-                <summary class="-m-px p-2 bg-darkbutton border border-darkborderc rounded text-xs cursor-pointer select-none hover:bg-selected transition-colors duration-190">{toggle.value}</summary>
+            <details class="w-full mt-3 mb-1 border border-darkborderc rounded">
+                <summary
+                    class="-m-px p-2 bg-darkbutton border border-darkborderc rounded text-xs cursor-pointer select-none hover:bg-selected transition-colors duration-190"
+                    class:justify-end={$MobileGUI}>
+                    {toggle.value}
+                </summary>
                 <div class="flex flex-col px-2 py-4 pt-0">
                     {@render toggles((toggle as sidebarToggleGroup).children, reverse)}
                 </div>
             </details>
         {:else if toggle.type === 'select'}
-            <div class="flex gap-2 mt-2 items-center" class:flex-row-reverse={!reverse} class:justify-end={!reverse}>
+            <div class="w-full flex gap-2 mt-2 items-center" class:justify-end={$MobileGUI} >
                 <span>{toggle.value}</span>
                 <SelectInput className="w-32" bind:value={DBState.db.globalChatVariables[`toggle_${toggle.key}`]}>
                     {#each toggle.options as option, i}
@@ -56,7 +60,7 @@
                 </SelectInput>
             </div>
         {:else if toggle.type === 'text'}
-            <div class="flex gap-2 mt-2 items-center" class:flex-row-reverse={!reverse} class:justify-end={!reverse}>
+            <div class="w-full flex gap-2 mt-2 items-center" class:justify-end={$MobileGUI}>
                 <span>{toggle.value}</span>
                 <TextInput className="w-32" bind:value={DBState.db.globalChatVariables[`toggle_${toggle.key}`]} />
             </div>
@@ -64,7 +68,7 @@
             {@const prevToggle = groupedToggles[index - 1]}
             <!-- Prevent multiple dividers appearing in a row -->
             {#if index === 0 || prevToggle.type !== 'divider' || prevToggle.value !== toggle.value}
-                <div class="flex gap-2 mt-2 w-full min-h-5 items-center" class:flex-row-reverse={!reverse} class:justify-end={!reverse}>
+                <div class="w-full min-h-5 flex gap-2 mt-2 items-center" class:justify-end={!reverse}>
                     {#if toggle.value}
                         <span>{toggle.value}</span>
                     {/if}
@@ -72,7 +76,7 @@
                 </div>
             {/if}
         {:else}
-            <div class="flex mt-2 items-center">
+            <div class="w-full flex mt-2 items-center" class:justify-end={$MobileGUI}>
                 <CheckInput check={DBState.db.globalChatVariables[`toggle_${toggle.key}`] === '1'} reverse={reverse} name={toggle.value} onChange={() => {
                     DBState.db.globalChatVariables[`toggle_${toggle.key}`] = DBState.db.globalChatVariables[`toggle_${toggle.key}`] === '1' ? '0' : '1'
                 }} />

From 129389b9c005d3249607141cbd6e3a96680df554 Mon Sep 17 00:00:00 2001
From: enzi221 <enz3224@gmail.com>
Date: Tue, 20 May 2025 01:28:00 +0900
Subject: [PATCH 4/5] fix: Smaller padding than anticipated

---
 src/lib/SideBars/Toggles.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/SideBars/Toggles.svelte b/src/lib/SideBars/Toggles.svelte
index fa650855..33ac7abe 100644
--- a/src/lib/SideBars/Toggles.svelte
+++ b/src/lib/SideBars/Toggles.svelte
@@ -46,7 +46,7 @@
                     class:justify-end={$MobileGUI}>
                     {toggle.value}
                 </summary>
-                <div class="flex flex-col px-2 py-4 pt-0">
+                <div class="flex flex-col px-2 pt-2 pb-4">
                     {@render toggles((toggle as sidebarToggleGroup).children, reverse)}
                 </div>
             </details>

From ade370e35da35f6f9c3e261f3037ac6fa68ca4a2 Mon Sep 17 00:00:00 2001
From: enzi221 <enz3224@gmail.com>
Date: Sun, 25 May 2025 00:25:23 +0900
Subject: [PATCH 5/5] refactor: Use predefined collapsible component

---
 src/lib/SideBars/Toggles.svelte | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/lib/SideBars/Toggles.svelte b/src/lib/SideBars/Toggles.svelte
index 33ac7abe..41402bda 100644
--- a/src/lib/SideBars/Toggles.svelte
+++ b/src/lib/SideBars/Toggles.svelte
@@ -4,6 +4,7 @@
     import { parseToggleSyntax, type sidebarToggle, type sidebarToggleGroup } from "src/ts/util";
     import { language } from "src/lang";
     import type { character, groupChat } from "src/ts/storage/database.svelte";
+    import Arcodion from '../UI/Arcodion.svelte'
     import CheckInput from "../UI/GUI/CheckInput.svelte";
     import SelectInput from "../UI/GUI/SelectInput.svelte";
     import OptionInput from "../UI/GUI/OptionInput.svelte";
@@ -40,16 +41,11 @@
 {#snippet toggles(items: sidebarToggle[], reverse: boolean = false)}
     {#each items as toggle, index}
         {#if toggle.type === 'group' && toggle.children.length > 0}
-            <details class="w-full mt-3 mb-1 border border-darkborderc rounded">
-                <summary
-                    class="-m-px p-2 bg-darkbutton border border-darkborderc rounded text-xs cursor-pointer select-none hover:bg-selected transition-colors duration-190"
-                    class:justify-end={$MobileGUI}>
-                    {toggle.value}
-                </summary>
-                <div class="flex flex-col px-2 pt-2 pb-4">
+            <div class="w-full">
+                <Arcodion styled name={toggle.value}>
                     {@render toggles((toggle as sidebarToggleGroup).children, reverse)}
-                </div>
-            </details>
+                </Arcodion>
+            </div>
         {:else if toggle.type === 'select'}
             <div class="w-full flex gap-2 mt-2 items-center" class:justify-end={$MobileGUI} >
                 <span>{toggle.value}</span>