feat: add sortings

src/lib/Others/ChatList.svelte

@@ -65,7 +65,7 @@
                 const cha = $CurrentCharacter
                 const len = $CurrentCharacter.chats.length
                 let chats = $CurrentCharacter.chats
-                chats.push({
+                chats.unshift({
                     message:[], note:'', name:`New Chat ${len + 1}`, localLore:[]
                 })
                 if(cha.type === 'group'){

src/lib/SideBars/LoreBook/LoreBookList.svelte

@@ -4,7 +4,7 @@
     import { CurrentChat, CurrentCharacter } from "src/ts/stores";
     import Sortable from 'sortablejs/modular/sortable.core.esm.js';
     import { onDestroy, onMount } from "svelte";
-    import { sleep } from "src/ts/util";
+    import { sleep, sortableOptions } from "src/ts/util";
 
     export let globalMode = false
     export let submenu = 0
@@ -44,10 +44,11 @@
                 sorted += 1
                 await sleep(1)
                 createStb()
-            }
+            },
+            ...sortableOptions
         })
     }
-    // onMount(createStb)
+    onMount(createStb)
 
     let opened = 0
     
@@ -59,9 +60,9 @@
     }
     const onClose = () => {
         opened -= 1
-        // if(opened === 0){
+        if(opened === 0){
-        //     createStb()
+            createStb()
-        // }
+        }
     }
 
     onDestroy(() => {

src/lib/SideBars/Scripts/RegexList.svelte

@@ -2,7 +2,7 @@
     import type { customscript } from "src/ts/storage/database";
     import RegexData from "./RegexData.svelte";
     import Sortable from "sortablejs";
-    import { sleep } from "src/ts/util";
+    import { sleep, sortableOptions } from "src/ts/util";
     import { onDestroy, onMount } from "svelte";
     export let value:customscript[] = []
     let stb: Sortable = null
@@ -25,7 +25,8 @@
                 sorted += 1
                 await sleep(1)
                 createStb()
-            }
+            },
+            ...sortableOptions
         })
     }
 
@@ -37,12 +38,12 @@
     }
     const onClose = () => {
         opened -= 1
-        // if(opened === 0){
+        if(opened === 0){
-        //     createStb()
+            createStb()
-        // }
+        }
     }
 
-    // onMount(createStb)
+    onMount(createStb)
 
     onDestroy(() => {
         if(stb){

src/lib/SideBars/SideChatList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { character, groupChat } from "src/ts/storage/database";
+    import type { Chat, character, groupChat } from "src/ts/storage/database";
     import { DataBase } from "src/ts/storage/database";
     import TextInput from "../UI/GUI/TextInput.svelte";
     import { DownloadIcon, PencilIcon, FolderUpIcon, MenuIcon, TrashIcon } from "lucide-svelte";
@@ -7,12 +7,54 @@
     import { alertConfirm, alertError, alertSelect } from "src/ts/alert";
     import { language } from "src/lang";
     import Button from "../UI/GUI/Button.svelte";
-    import { findCharacterbyId, parseKeyValue } from "src/ts/util";
+    import { findCharacterbyId, parseKeyValue, sleep, sortableOptions } from "src/ts/util";
     import CheckInput from "../UI/GUI/CheckInput.svelte";
     import { createMultiuserRoom } from "src/ts/sync/multiuser";
     import { CurrentCharacter } from "src/ts/stores";
+    import Sortable from 'sortablejs/modular/sortable.core.esm.js';
+  import { onDestroy, onMount } from "svelte";
+
     export let chara:character|groupChat
     let editMode = false
+
+    let stb: Sortable = null
+    let ele: HTMLDivElement
+    let sorted = 0
+    let opened = 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')))
+                })
+                console.log(idx)
+                let newValue:Chat[] = []
+                let newChatPage = chara.chatPage
+                idx.forEach((i) => {
+                    newValue.push(chara.chats[i])
+                    if(chara.chatPage === i){
+                        newChatPage = newValue.length - 1
+                    }
+                })
+                chara.chats = newValue
+                chara.chatPage = newChatPage
+                stb.destroy()
+                sorted += 1
+                await sleep(1)
+                createStb()
+            },
+            ...sortableOptions
+        })
+    }
+
+    onMount(createStb)
+
+    onDestroy(() => {
+        if(stb){
+            stb.destroy()
+        }
+    })
 </script>
 <div class="flex flex-col w-full h-[calc(100%-2rem)] max-h-[calc(100%-2rem)]">
 
@@ -35,10 +77,10 @@
         chara.chats = chats
         chara.chatPage = 0
     }}>New Chat</Button>
-    <div class="flex flex-col w-full mt-2 overflow-y-auto flex-grow">
+    <div class="flex flex-col w-full mt-2 overflow-y-auto flex-grow" bind:this={ele}>
-    
+        {#key sorted}
         {#each chara.chats as chat, i}
-        <button on:click={() => {
+        <button data-risu-idx={i} on:click={() => {
             if(!editMode){
                 chara.chatPage = i
             }
@@ -88,7 +130,8 @@
                 </button>
             </div>
         </button>
-    {/each}
+        {/each}
+        {/key}
     </div>
     
     <div class="border-t border-selected mt-2">

src/ts/characters.ts

@@ -232,7 +232,7 @@ export async function importChat(){
                 return
             }
 
-            db.characters[selectedID].chats.push(newChat)
+            db.characters[selectedID].chats.unshift(newChat)
             setDatabase(db)
             alertNormal(language.successImport)
         }
@@ -241,7 +241,7 @@ export async function importChat(){
             if(json.type === 'risuChat' && json.ver === 1){
                 const das:Chat = json.data
                 if(!(checkNullish(das.message) || checkNullish(das.note) || checkNullish(das.name) || checkNullish(das.localLore))){
-                    db.characters[selectedID].chats.push(das)
+                    db.characters[selectedID].chats.unshift(das)
                     setDatabase(db)
                     alertNormal(language.successImport)
                     return

src/ts/util.ts

@@ -987,4 +987,9 @@ export function parseKeyValue(template:string){
     }
 
     return keyValue
-}
+}
+
+export const sortableOptions = {
+	delay: 300, // time in milliseconds to define when the sorting should start
+	delayOnTouchOnly: true
+} as const