[feat] folderble bias

src/lib/Setting/Pages/BotSettings.svelte

@@ -22,6 +22,7 @@
     import { novelLogin } from "src/ts/process/models/nai";
     import { alertConfirm } from "src/ts/alert";
     import OobaSettings from "./OobaSettings.svelte";
+  import Arcodion from "src/lib/UI/Arcodion.svelte";
 
     let tokens = {
         mainPrompt: 0,
@@ -481,44 +482,43 @@
         <span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
         <DropList bind:list={$DataBase.formatingOrder} />
     {/if}
-    <span class="text-textcolor mt-2">Bias <Help key="bias"/></span>
+    <Arcodion styled name="Bias">
-    <div class="p-2 border border-selected round mt-2 rounded-md">
+        <table class="contain w-full max-w-full tabler">
-    <table class="contain w-full max-w-full tabler">
-        <tr>
-            <th class="font-medium w-1/2">Bias</th>
-            <th class="font-medium w-1/3">{language.value}</th>
-            <th>
-                <button class="font-medium cursor-pointer hover:text-green-500 w-full flex justify-center items-center" on:click={() => {
-                    let bia = $DataBase.bias
-                    bia.push(['', 0])
-                    $DataBase.bias = bia
-                }}><PlusIcon /></button>
-            </th>
-        </tr>
-        {#if $DataBase.bias.length === 0}
             <tr>
-                <div class="text-textcolor2">{language.noBias}</div>
+                <th class="font-medium w-1/2">Bias</th>
-            </tr>
+                <th class="font-medium w-1/3">{language.value}</th>
-        {/if}
+                <th>
-        {#each $DataBase.bias as bias, i}
+                    <button class="font-medium cursor-pointer hover:text-green-500 w-full flex justify-center items-center" on:click={() => {
-            <tr>
-                <td class="font-medium truncate w-1/2">
-                    <TextInput bind:value={$DataBase.bias[i][0]} size="lg" fullwidth/>
-                </td>
-                <td class="font-medium truncate w-1/3">
-                    <NumberInput bind:value={$DataBase.bias[i][1]} max={100} min={-100} size="lg" fullwidth/>
-                </td>
-                <td>
-                    <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
                         let bia = $DataBase.bias
-                        bia.splice(i, 1)
+                        bia.push(['', 0])
                         $DataBase.bias = bia
-                    }}><TrashIcon /></button>
+                    }}><PlusIcon /></button>
-                </td>
+                </th>
             </tr>
-        {/each}
+            {#if $DataBase.bias.length === 0}
-    </table>
+                <tr>
-    </div>
+                    <div class="text-textcolor2">{language.noBias}</div>
+                </tr>
+            {/if}
+            {#each $DataBase.bias as bias, i}
+                <tr>
+                    <td class="font-medium truncate w-1/2">
+                        <TextInput bind:value={$DataBase.bias[i][0]} size="lg" fullwidth/>
+                    </td>
+                    <td class="font-medium truncate w-1/3">
+                        <NumberInput bind:value={$DataBase.bias[i][1]} max={100} min={-100} size="lg" fullwidth/>
+                    </td>
+                    <td>
+                        <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" on:click={() => {
+                            let bia = $DataBase.bias
+                            bia.splice(i, 1)
+                            $DataBase.bias = bia
+                        }}><TrashIcon /></button>
+                    </td>
+                </tr>
+            {/each}
+        </table>
+    </Arcodion>
 
     {#if !$DataBase.promptTemplate}
         <div class="flex items-center mt-4">

src/lib/Setting/Pages/OobaSettings.svelte

@@ -8,6 +8,7 @@
   import { language } from "src/lang";
   import { PlusIcon, TrashIcon } from "lucide-svelte";
   import TextInput from "src/lib/UI/GUI/TextInput.svelte";
+  import Arcodion from "src/lib/UI/Arcodion.svelte";
     let openOobaSettings = false
     const toggleOobaSettings = () => {
         openOobaSettings = !openOobaSettings
@@ -15,20 +16,7 @@
     export let instructionMode = false
 </script>
 
-<div class="border-darkborderc border px-2 flex flex-col py-4 rounded-md">
+<Arcodion name="Ooba Settings" styled>
-
-{#if !openOobaSettings}
-    <button on:click={toggleOobaSettings}>
-        ⮞ Ooba Settings
-    </button>
-{:else}
-    <button on:click={toggleOobaSettings}> 
-        ⮟ Ooba Settings
-    </button>
-
-    <div class="border-b border-b-darkborderc mt-4 mb-4">
-
-    </div>
     {#if instructionMode}
         <span class="text-textcolor">System Prefix</span>
         <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.systemPrefix} />
@@ -176,5 +164,4 @@
             </div>
         {/if}
     {/if}
-{/if}
+</Arcodion>
-</div>