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] 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>