[feat] better otherbots screen

src/lib/Setting/Pages/OtherBotSettings.svelte

@@ -12,12 +12,13 @@
     import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
     import Button from "src/lib/UI/GUI/Button.svelte";
     import { getCharImage } from "src/ts/characters";
+    import Arcodion from "src/lib/UI/Arcodion.svelte";
 
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
 
-<span class="text-textcolor mt-4 text-lg font-bold">{language.imageGeneration}</span>
 
+<Arcodion name={language.imageGeneration}  styled>
     <span class="text-textcolor mt-2">{language.imageGeneration} {language.provider} <Help key="sdProvider"/></span>
     <SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
         <OptionInput value="" >None</OptionInput>
@@ -123,8 +124,9 @@
     
         {/if}
     {/if}
+</Arcodion>
 
-<span class="text-textcolor mt-4 text-lg font-bold">TTS</span>
+<Arcodion name="TTS" styled>
     <span class="text-textcolor mt-2">ElevenLabs API key</span>
     <TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
     
@@ -134,15 +136,19 @@
     <span class="text-textcolor mt-2">NovelAI API key</span>
     <TextInput size="sm" marginBottom placeholder="pst-..." bind:value={$DataBase.NAIApiKey}/>
     
-<span class="text-textcolor mt-4 text-lg font-bold">{language.emotionImage}</span>
     
+</Arcodion>
+
+<Arcodion name={language.emotionImage} styled>
     <span class="text-textcolor mt-2">{language.emotionMethod}</span>
+
     <SelectInput className="mt-2 mb-4" bind:value={$DataBase.emotionProcesser}>
         <OptionInput value="submodel" >Ax. Model</OptionInput>
         <OptionInput value="embedding" >MiniLM-L6-v2</OptionInput>
     </SelectInput>
+</Arcodion>
 
-<span class="text-textcolor mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
+<Arcodion name="superMemory" styled>
     <span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
     <SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}>
         <OptionInput value="none" >None</OptionInput>
@@ -172,3 +178,4 @@
             <Check bind:check={$DataBase.hypaMemory} name={language.able + ' ' + language.HypaMemory}/> <Help key="experimental" />
         </div>
     {/if}
+</Arcodion>

src/lib/UI/Arcodion.svelte

@@ -1,8 +1,25 @@
 <script lang="ts">
     export let name = ""
     let open = false
+    export let styled = false
 </script>
 
+{#if styled}
+    <div class="flex flex-col mt-2">
+        <button class="hover:bg-selected px-6 py-2 text-lg rounded-t-md border-selected border"
+            class:bg-selected={open}
+            class:rounded-b-md={!open}
+            on:click={() => {
+                open = !open
+            }}
+        >{name}</button>
+        {#if open}
+            <div class="flex flex-col border border-selected p-2 rounded-b-md">
+                <slot></slot>
+            </div>
+        {/if}
+    </div>
+{:else}
     <div class="flex flex-col">
         <button class="hover:bg-selected px-6 py-2 text-lg" class:bg-selected={open} on:click={() => {
             open = !open
@@ -13,3 +30,4 @@
             </div>
         {/if}
     </div>
+{/if}