refactor: Use predefined collapsible component

This commit is contained in:
enzi221
2025-05-25 00:25:23 +09:00
parent 129389b9c0
commit ade370e35d

View File

@@ -4,6 +4,7 @@
import { parseToggleSyntax, type sidebarToggle, type sidebarToggleGroup } from "src/ts/util"; import { parseToggleSyntax, type sidebarToggle, type sidebarToggleGroup } from "src/ts/util";
import { language } from "src/lang"; import { language } from "src/lang";
import type { character, groupChat } from "src/ts/storage/database.svelte"; import type { character, groupChat } from "src/ts/storage/database.svelte";
import Arcodion from '../UI/Arcodion.svelte'
import CheckInput from "../UI/GUI/CheckInput.svelte"; import CheckInput from "../UI/GUI/CheckInput.svelte";
import SelectInput from "../UI/GUI/SelectInput.svelte"; import SelectInput from "../UI/GUI/SelectInput.svelte";
import OptionInput from "../UI/GUI/OptionInput.svelte"; import OptionInput from "../UI/GUI/OptionInput.svelte";
@@ -40,16 +41,11 @@
{#snippet toggles(items: sidebarToggle[], reverse: boolean = false)} {#snippet toggles(items: sidebarToggle[], reverse: boolean = false)}
{#each items as toggle, index} {#each items as toggle, index}
{#if toggle.type === 'group' && toggle.children.length > 0} {#if toggle.type === 'group' && toggle.children.length > 0}
<details class="w-full mt-3 mb-1 border border-darkborderc rounded"> <div class="w-full">
<summary <Arcodion styled name={toggle.value}>
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">
{@render toggles((toggle as sidebarToggleGroup).children, reverse)} {@render toggles((toggle as sidebarToggleGroup).children, reverse)}
</Arcodion>
</div> </div>
</details>
{:else if toggle.type === 'select'} {:else if toggle.type === 'select'}
<div class="w-full flex gap-2 mt-2 items-center" class:justify-end={$MobileGUI} > <div class="w-full flex gap-2 mt-2 items-center" class:justify-end={$MobileGUI} >
<span>{toggle.value}</span> <span>{toggle.value}</span>