feat: add persona sort

src/lib/Setting/Pages/PersonaSettings.svelte

@@ -8,16 +8,65 @@
     import { alertConfirm, alertSelect } from "src/ts/alert";
     import { getCharImage } from "src/ts/characters";
     import { changeUserPersona, exportUserPersona, importUserPersona, saveUserPersona, selectUserImg } from "src/ts/persona";
+    import Sortable from 'sortablejs/modular/sortable.core.esm.js';
+    import { onDestroy, onMount } from "svelte";
+    import { sleep, sortableOptions } from "src/ts/util";
     import { setDatabase } from "src/ts/storage/database.svelte";
     import { DBState } from 'src/ts/stores.svelte';
     import { get } from "svelte/store";
 
+    let stb: Sortable = null
+    let ele: HTMLDivElement = $state()
+    let sorted = $state(0)
+    const createStb = () => {
+        stb = Sortable.create(ele, {
+            onStart: async () => {
+                saveUserPersona()
+            },
+            onEnd: async () => {
+                let idx:number[] = []
+                ele.querySelectorAll('[data-risu-idx]').forEach((e, i) => {
+                    idx.push(parseInt(e.getAttribute('data-risu-idx')))
+                })
+                let newValue:{
+                    personaPrompt:string
+                    name:string
+                    icon:string
+                    largePortrait?:boolean
+                    id?:string
+                }[] = []
+                idx.forEach((i) => {
+                    newValue.push(DBState.db.personas[i])
+                })
+                DBState.db.personas = newValue
+                changeUserPersona(0, 'noSave')
+                try {
+                    stb.destroy()
+                } catch (error) {}
+                sorted += 1
+                await sleep(1)
+                createStb()
+            },
+            ...sortableOptions
+        })
+    }
+
+    onMount(createStb)
+
+    onDestroy(() => {
+        if(stb){
+            try {
+                stb.destroy()
+            } catch (error) {}
+        }
+    })
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.persona}</h2>
 
-<div class="p-4 rounded-md border-darkborderc border mb-2 flex-wrap flex gap-2">
+{#key sorted}
+<div class="p-4 rounded-md border-darkborderc border mb-2 flex-wrap flex gap-2" bind:this={ele}>
     {#each DBState.db.personas as persona, i}
-        <button onclick={() => {
+        <button data-risu-idx={i} onclick={() => {
             changeUserPersona(i)
         }}>
             {#if persona.icon === ''}
@@ -58,6 +107,7 @@
         </BaseRoundedButton>
     </div>
 </div>
+{/key}
 
 <div class="flex w-full items-starts rounded-md border-darkborderc border p-4 max-w-full flex-wrap">
     <div class="flex flex-col mt-4 mr-4">