[feat] added regex sorting

src/lib/Setting/Pages/GlobalRegex.svelte

@@ -2,23 +2,12 @@
   import { DownloadIcon, FolderUpIcon, PlusIcon } from "lucide-svelte";
   import { language } from "src/lang";
   import Help from "src/lib/Others/Help.svelte";
-  import RegexData from "src/lib/SideBars/RegexData.svelte";
   import { DataBase } from "src/ts/storage/database";
   import { exportRegex, importRegex } from "src/ts/process/scripts";
+  import RegexList from "src/lib/SideBars/Regex/RegexList.svelte";
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.globalRegexScript} <Help key="regexScript" /></h2>
-<table class="contain w-full max-w-full tabler mt-4 flex flex-col p-2 gap-2 border-selected border-1 bg-darkbg">
+<RegexList bind:value={$DataBase.globalscript} />
-    {#if $DataBase.globalscript.length === 0}
-            <div class="text-gray-500">No Scripts</div>
-    {/if}
-    {#each $DataBase.globalscript as customscript, i}
-        <RegexData bind:value={$DataBase.globalscript[i]}  onRemove={() => {
-            let customscript = $DataBase.globalscript
-            customscript.splice(i, 1)
-            $DataBase.globalscript = customscript
-        }}/>
-    {/each}
-</table>
 <div class="text-gray-500 mt-2 flex gap-2">
     <button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
         let script = $DataBase.globalscript

src/lib/SideBars/CharConfig.svelte

@@ -13,7 +13,7 @@
     import { onDestroy } from "svelte";
     import {isEqual, cloneDeep} from 'lodash'
     import Help from "../Others/Help.svelte";
-    import RegexData from "./RegexData.svelte";
+    import RegexData from "./Regex/RegexData.svelte";
     import { exportChar, shareRisuHub } from "src/ts/characterCards";
     import { getElevenTTSVoices, getWebSpeechTTSVoices, getVOICEVOXVoices } from "src/ts/process/tts";
     import { checkCharOrder, getFileSrc } from "src/ts/storage/globalApi";
@@ -25,6 +25,7 @@
   import Button from "../UI/GUI/Button.svelte";
   import SelectInput from "../UI/GUI/SelectInput.svelte";
   import OptionInput from "../UI/GUI/OptionInput.svelte";
+  import RegexList from "./Regex/RegexList.svelte";
 
     let subMenu = 0
     let openHubUpload = false
@@ -446,22 +447,7 @@
         </div>
 
         <span class="text-neutral-200 mt-4">{language.regexScript} <Help key="regexScript"/></span>
-        <div class="w-full max-w-full border border-selected rounded-md p-2">
+        <RegexList bind:value={currentChar.data.customscript} />
-            <table class="w-full max-w-full tabler mt-2 flex flex-col p-2 gap-2">
-                {#if currentChar.data.customscript.length === 0}
-                        <div class="text-gray-500">No Scripts</div>
-                {/if}
-                {#each currentChar.data.customscript as customscript, i}
-                    <RegexData bind:value={currentChar.data.customscript[i]}  onRemove={() => {
-                        if(currentChar.type === 'character'){
-                            let customscript = currentChar.data.customscript
-                            customscript.splice(i, 1)
-                            currentChar.data.customscript = customscript
-                        }
-                    }}/>
-                {/each}
-            </table>
-        </div>
         <button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
             if(currentChar.type === 'character'){
                 let script = currentChar.data.customscript

src/lib/SideBars/LoreBook/LoreBookData.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
-    <div class="flex items-center transition-colors w-full ">
+    <div class="flex items-center transition-colors w-full p-1">
         <button class="endflex valuer border-borderc" on:click={() => {
             value.secondkey = value.secondkey ?? ''
             open = !open

src/lib/SideBars/Regex/RegexData.svelte

@@ -3,17 +3,18 @@
     import { language } from "src/lang";
     import { alertConfirm } from "src/ts/alert";
     import type { customscript } from "src/ts/storage/database";
-    import Check from "../UI/GUI/Check.svelte";
+    import Check from "../../UI/GUI/Check.svelte";
-  import TextInput from "../UI/GUI/TextInput.svelte";
+    import TextInput from "../../UI/GUI/TextInput.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";
 
     export let value:customscript
     export let onRemove: () => void = () => {}
+    export let idx:number
     let open = false
 </script>
 
-<div class="w-full flex flex-col">
+<div class="w-full flex flex-col pt-2 mt-2 border-t border-t-selected first:pt-0 first:mt-0 first:border-0" data-risu-idx={idx}>
     <div class="flex items-center transition-colors w-full ">
         <button class="endflex valuer border-borderc" on:click={() => {
             open = !open
@@ -76,11 +77,9 @@
         border: none;
         outline: 0;
         width: 100%;
-        margin-top: 0.5rem;
         display: flex;
         flex-direction: column;
         margin-bottom: 0.5rem;
-        background-color: #282a36;
     }
     
 </style>

src/lib/SideBars/Regex/RegexList.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import type { customscript } from "src/ts/storage/database";
+    import RegexData from "./RegexData.svelte";
+    import Sortable from "sortablejs";
+    import { sleep } from "src/ts/util";
+    import { onDestroy, onMount } from "svelte";
+    export let value:customscript[] = []
+    let stb: Sortable = null
+    let ele: HTMLDivElement
+    let sorted = 0
+    const createStb = () => {
+        stb = Sortable.create(ele, {
+            onEnd: async () => {
+                let idx:number[] = []
+                ele.querySelectorAll('[data-risu-idx]').forEach((e, i) => {
+                    idx.push(parseInt(e.getAttribute('data-risu-idx')))
+                })
+                let newValue:customscript[] = []
+                idx.forEach((i) => {
+                    newValue.push(value[i])
+                })
+                value = newValue
+                stb.destroy()
+                sorted += 1
+                await sleep(1)
+                createStb()
+            }
+        })
+    }
+    onMount(createStb)
+
+    onDestroy(() => {
+        if(stb){
+            stb.destroy()
+        }
+    })
+</script>
+
+<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
+    {#if value.length === 0}
+            <div class="text-gray-500">No Scripts</div>
+    {/if}
+    {#key sorted}
+        {#each value as customscript, i}
+            <RegexData idx={i} bind:value={value[i]}  onRemove={() => {
+                let customscript = value
+                customscript.splice(i, 1)
+                value = customscript
+            }}/>
+        {/each}
+    {/key}
+</div>