feat: add persona sort (#821)

# PR Checklist
- [ ] Have you checked if it works normally in all models? *Ignore this
if it doesn't use models.*
- [ ] Have you checked if it works normally in all web, local, and node
hosted versions? If it doesn't, have you blocked it in those versions?
- [x] Have you added type definitions?

# Description
This PR introduces the persona sorting feature.

**Changes:**

1. Uses the `sortable` library, consistent with other sorting
functionalities.
2. To prevent desynchronization between the selected persona and the UI
value during sorting:
    *   `OnStart`: Saves the currently selected persona.
* `OnEnd`: Switches selection to the first persona without saving the
initial selection.

I believe I've tested this sufficiently, but please feel free to point
out any potential issues or edge cases I might have missed.

Thank you for your time and review!

src/lib/Setting/Pages/PersonaSettings.svelte

@@ -8,16 +8,70 @@
     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";
+    import { v4 } from "uuid"
 
+    let stb: Sortable = null
+    let ele: HTMLDivElement = $state()
+    let sorted = $state(0)
+    let selectedId:string = null
+    const createStb = () => {
+        stb = Sortable.create(ele, {
+            onStart: async () => {
+                DBState.db.personas[DBState.db.selectedPersona].id ??= v4()
+                selectedId = DBState.db.personas[DBState.db.selectedPersona].id
+                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
+                const selectedPersona = DBState.db.personas.findIndex((e) => e.id === selectedId)
+                changeUserPersona(selectedPersona !== -1 ? selectedPersona : 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 +112,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">