[feat] drag and drop order and folders

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@dqbd/tiktoken": "^1.0.4",
     "@msgpack/msgpack": "3.0.0-beta2",
-    "@tauri-apps/api": "1.2.0",
+    "@tauri-apps/api": "1.3.0",
     "buffer": "^6.0.3",
     "core-js": "^3.30.2",
     "dompurify": "^3.0.1",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.0.0",
     "@tailwindcss/typography": "^0.5.9",
-    "@tauri-apps/cli": "1.2.3",
+    "@tauri-apps/cli": "1.3.1",
     "@tsconfig/svelte": "^3.0.0",
     "@types/dompurify": "^3.0.1",
     "@types/lodash": "^4.14.194",

pnpm-lock.yaml

@@ -5,8 +5,8 @@ specifiers:
   '@msgpack/msgpack': 3.0.0-beta2
   '@sveltejs/vite-plugin-svelte': ^2.0.0
   '@tailwindcss/typography': ^0.5.9
-  '@tauri-apps/api': 1.2.0
+  '@tauri-apps/api': 1.3.0
-  '@tauri-apps/cli': 1.2.3
+  '@tauri-apps/cli': 1.3.1
   '@tsconfig/svelte': ^3.0.0
   '@types/dompurify': ^3.0.1
   '@types/lodash': ^4.14.194
@@ -54,7 +54,7 @@ specifiers:
 dependencies:
   '@dqbd/tiktoken': 1.0.4
   '@msgpack/msgpack': 3.0.0-beta2
-  '@tauri-apps/api': 1.2.0
+  '@tauri-apps/api': 1.3.0
   buffer: 6.0.3
   core-js: 3.30.2
   dompurify: 3.0.1
@@ -79,7 +79,7 @@ dependencies:
 devDependencies:
   '@sveltejs/vite-plugin-svelte': 2.0.4_svelte@3.58.0+vite@4.2.1
   '@tailwindcss/typography': 0.5.9_tailwindcss@3.3.1
-  '@tauri-apps/cli': 1.2.3
+  '@tauri-apps/cli': 1.3.1
   '@tsconfig/svelte': 3.0.0
   '@types/dompurify': 3.0.1
   '@types/lodash': 4.14.194
@@ -505,13 +505,13 @@ packages:
       tailwindcss: 3.3.1_postcss@8.4.23
     dev: true
 
-  /@tauri-apps/api/1.2.0:
+  /@tauri-apps/api/1.3.0:
-    resolution: {integrity: sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw==}
+    resolution: {integrity: sha512-AH+3FonkKZNtfRtGrObY38PrzEj4d+1emCbwNGu0V2ENbXjlLHMZQlUh+Bhu/CRmjaIwZMGJ3yFvWaZZgTHoog==}
     engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
     dev: false
 
-  /@tauri-apps/cli-darwin-arm64/1.2.3:
+  /@tauri-apps/cli-darwin-arm64/1.3.1:
-    resolution: {integrity: sha512-phJN3fN8FtZZwqXg08bcxfq1+X1JSDglLvRxOxB7VWPq+O5SuB8uLyssjJsu+PIhyZZnIhTGdjhzLSFhSXfLsw==}
+    resolution: {integrity: sha512-QlepYVPgOgspcwA/u4kGG4ZUijlXfdRtno00zEy+LxinN/IRXtk+6ErVtsmoLi1ZC9WbuMwzAcsRvqsD+RtNAg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -519,8 +519,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-darwin-x64/1.2.3:
+  /@tauri-apps/cli-darwin-x64/1.3.1:
-    resolution: {integrity: sha512-jFZ/y6z8z6v4yliIbXKBXA7BJgtZVMsITmEXSuD6s5+eCOpDhQxbRkr6CA+FFfr+/r96rWSDSgDenDQuSvPAKw==}
+    resolution: {integrity: sha512-fKcAUPVFO3jfDKXCSDGY0MhZFF/wDtx3rgFnogWYu4knk38o9RaqRkvMvqJhLYPuWaEM5h6/z1dRrr9KKCbrVg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -528,8 +528,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-linux-arm-gnueabihf/1.2.3:
+  /@tauri-apps/cli-linux-arm-gnueabihf/1.3.1:
-    resolution: {integrity: sha512-C7h5vqAwXzY0kRGSU00Fj8PudiDWFCiQqqUNI1N+fhCILrzWZB9TPBwdx33ZfXKt/U4+emdIoo/N34v3TiAOmQ==}
+    resolution: {integrity: sha512-+4H0dv8ltJHYu/Ma1h9ixUPUWka9EjaYa8nJfiMsdCI4LJLNE6cPveE7RmhZ59v9GW1XB108/k083JUC/OtGvA==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
@@ -537,8 +537,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-linux-arm64-gnu/1.2.3:
+  /@tauri-apps/cli-linux-arm64-gnu/1.3.1:
-    resolution: {integrity: sha512-buf1c8sdkuUzVDkGPQpyUdAIIdn5r0UgXU6+H5fGPq/Xzt5K69JzXaeo6fHsZEZghbV0hOK+taKV4J0m30UUMQ==}
+    resolution: {integrity: sha512-Pj3odVO1JAxLjYmoXKxcrpj/tPxcA8UP8N06finhNtBtBaxAjrjjxKjO4968KB0BUH7AASIss9EL4Tr0FGnDuw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -546,8 +546,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-linux-arm64-musl/1.2.3:
+  /@tauri-apps/cli-linux-arm64-musl/1.3.1:
-    resolution: {integrity: sha512-x88wPS9W5xAyk392vc4uNHcKBBvCp0wf4H9JFMF9OBwB7vfd59LbQCFcPSu8f0BI7bPrOsyHqspWHuFL8ojQEA==}
+    resolution: {integrity: sha512-tA0JdDLPFaj42UDIVcF2t8V0tSha40rppcmAR/MfQpTCxih6399iMjwihz9kZE1n4b5O4KTq9GliYo50a8zYlQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -555,8 +555,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-linux-x64-gnu/1.2.3:
+  /@tauri-apps/cli-linux-x64-gnu/1.3.1:
-    resolution: {integrity: sha512-ZMz1jxEVe0B4/7NJnlPHmwmSIuwiD6ViXKs8F+OWWz2Y4jn5TGxWKFg7DLx5OwQTRvEIZxxT7lXHi5CuTNAxKg==}
+    resolution: {integrity: sha512-FDU+Mnvk6NLkqQimcNojdKpMN4Y3W51+SQl+NqG9AFCWprCcSg62yRb84751ujZuf2MGT8HQOfmd0i77F4Q3tQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -564,8 +564,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-linux-x64-musl/1.2.3:
+  /@tauri-apps/cli-linux-x64-musl/1.3.1:
-    resolution: {integrity: sha512-B/az59EjJhdbZDzawEVox0LQu2ZHCZlk8rJf85AMIktIUoAZPFbwyiUv7/zjzA/sY6Nb58OSJgaPL2/IBy7E0A==}
+    resolution: {integrity: sha512-MpO3akXFmK8lZYEbyQRDfhdxz1JkTBhonVuz5rRqxwA7gnGWHa1aF1+/2zsy7ahjB2tQ9x8DDFDMdVE20o9HrA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -573,8 +573,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-win32-ia32-msvc/1.2.3:
+  /@tauri-apps/cli-win32-ia32-msvc/1.3.1:
-    resolution: {integrity: sha512-ypdO1OdC5ugNJAKO2m3sb1nsd+0TSvMS9Tr5qN/ZSMvtSduaNwrcZ3D7G/iOIanrqu/Nl8t3LYlgPZGBKlw7Ng==}
+    resolution: {integrity: sha512-9Boeo3K5sOrSBAZBuYyGkpV2RfnGQz3ZhGJt4hE6P+HxRd62lS6+qDKAiw1GmkZ0l1drc2INWrNeT50gwOKwIQ==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -582,8 +582,8 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli-win32-x64-msvc/1.2.3:
+  /@tauri-apps/cli-win32-x64-msvc/1.3.1:
-    resolution: {integrity: sha512-CsbHQ+XhnV/2csOBBDVfH16cdK00gNyNYUW68isedmqcn8j+s0e9cQ1xXIqi+Hue3awp8g3ImYN5KPepf3UExw==}
+    resolution: {integrity: sha512-wMrTo91hUu5CdpbElrOmcZEoJR4aooTG+fbtcc87SMyPGQy1Ux62b+ZdwLvL1sVTxnIm//7v6QLRIWGiUjCPwA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -591,20 +591,20 @@ packages:
     dev: true
     optional: true
 
-  /@tauri-apps/cli/1.2.3:
+  /@tauri-apps/cli/1.3.1:
-    resolution: {integrity: sha512-erxtXuPhMEGJPBtnhPILD4AjuT81GZsraqpFvXAmEJZ2p8P6t7MVBifCL8LznRknznM3jn90D3M8RNBP3wcXTw==}
+    resolution: {integrity: sha512-o4I0JujdITsVRm3/0spfJX7FcKYrYV1DXJqzlWIn6IY25/RltjU6qbC1TPgVww3RsRX63jyVUTcWpj5wwFl+EQ==}
     engines: {node: '>= 10'}
     hasBin: true
     optionalDependencies:
-      '@tauri-apps/cli-darwin-arm64': 1.2.3
+      '@tauri-apps/cli-darwin-arm64': 1.3.1
-      '@tauri-apps/cli-darwin-x64': 1.2.3
+      '@tauri-apps/cli-darwin-x64': 1.3.1
-      '@tauri-apps/cli-linux-arm-gnueabihf': 1.2.3
+      '@tauri-apps/cli-linux-arm-gnueabihf': 1.3.1
-      '@tauri-apps/cli-linux-arm64-gnu': 1.2.3
+      '@tauri-apps/cli-linux-arm64-gnu': 1.3.1
-      '@tauri-apps/cli-linux-arm64-musl': 1.2.3
+      '@tauri-apps/cli-linux-arm64-musl': 1.3.1
-      '@tauri-apps/cli-linux-x64-gnu': 1.2.3
+      '@tauri-apps/cli-linux-x64-gnu': 1.3.1
-      '@tauri-apps/cli-linux-x64-musl': 1.2.3
+      '@tauri-apps/cli-linux-x64-musl': 1.3.1
-      '@tauri-apps/cli-win32-ia32-msvc': 1.2.3
+      '@tauri-apps/cli-win32-ia32-msvc': 1.3.1
-      '@tauri-apps/cli-win32-x64-msvc': 1.2.3
+      '@tauri-apps/cli-win32-x64-msvc': 1.3.1
     dev: true
 
   /@tootallnate/once/2.0.0:

src-tauri/tauri.conf.json

@@ -90,7 +90,7 @@
       "targets": "all"
     },
     "security": {
-      "csp": null
+      "csp": ""
     },
     "updater": {
       "active": false
@@ -103,7 +103,8 @@
         "width": 1024,
         "height": 768,
         "minWidth": 300,
-        "minHeight": 500
+        "minHeight": 500,
+        "fileDropEnabled": false
       }
     ]
   }

src/lib/SideBars/CharConfig.svelte

@@ -16,6 +16,7 @@
     import RegexData from "./RegexData.svelte";
     import { exportChar } from "src/ts/characterCards";
     import { getElevenTTSVoices, getWebSpeechTTSVoices } from "src/ts/process/tts";
+  import { checkCharOrder } from "src/ts/globalApi";
 
     let subMenu = 0
     let subberMenu = 0
@@ -671,6 +672,7 @@
         }
         let chars = $DataBase.characters
         chars.splice($selectedCharID, 1)
+        checkCharOrder()
         $selectedCharID = -1
         $DataBase.characters = chars
 

src/lib/SideBars/Sidebar.svelte

@@ -6,7 +6,7 @@
     settingsOpen,
     sideBarStore,
   } from "../../ts/stores";
-  import { DataBase } from "../../ts/database";
+  import { DataBase, setDatabase, type folder } from "../../ts/database";
   import BarIcon from "./BarIcon.svelte";
   import SidebarIndicator from "./SidebarIndicator.svelte";
   import {
@@ -21,6 +21,8 @@
     ListIcon,
     LayoutGridIcon,
     PlusIcon,
+    FolderIcon,
+    FolderOpenIcon,
   } from "lucide-svelte";
   import {
     characterFormatUpdate,
@@ -36,6 +38,10 @@
   import { isEqual } from "lodash";
   import SidebarAvatar from "./SidebarAvatar.svelte";
   import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
+  import { get } from "svelte/store";
+  import { findCharacterIndexbyId, findCharacterbyId, getCharacterIndexObject } from "src/ts/util";
+  import { v4 } from "uuid";
+  import { checkCharOrder } from "src/ts/globalApi";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -72,13 +78,47 @@
     CharEmotion.set({});
   }
 
-  let charImages: string[] = [];
+  type sortTypeNormal = { type:'normal',img: string; index: number; }
+  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string}
+  let charImages: sortType[] = [];
   let IconRounded = false
+  let openFolders:string[] = []
 
   const unsub = DataBase.subscribe((db) => {
-    let newCharImages: string[] = [];
+    let newCharImages: sortType[] = [];
-    for (const cha of db.characters) {
+    const idObject = getCharacterIndexObject()
-      newCharImages.push(cha.image ?? "");
+    for (const id of db.characterOrder) {
+      if(typeof(id) === 'string'){
+        const index = idObject[id] ?? -1
+        if(index !== -1){
+          const cha = db.characters[index]
+          newCharImages.push({
+            img:cha.image ?? "",
+            index:index,
+            type: "normal"
+          });
+        }
+      }
+      else{
+        const folder = id
+        let folderCharImages: sortTypeNormal[] = []
+        for(const id of folder.data){
+          const index = idObject[id] ?? -1
+          if(index !== -1){
+            const cha = db.characters[index]
+            folderCharImages.push({
+              img:cha.image ?? "",
+              index:index,
+              type: "normal"
+            });
+          }
+        }
+        newCharImages.push({
+          folder: folderCharImages,
+          type: "folder",
+          id: folder.id
+        });
+      }
     }
     if (!isEqual(charImages, newCharImages)) {
       charImages = newCharImages;
@@ -88,11 +128,160 @@
     }
   });
 
+  const inserter = (mainIndex:DragData, targetIndex:DragData) => {
+    if(mainIndex.index === targetIndex.index && mainIndex.folder === targetIndex.folder){
+      return
+    }
+    let db = get(DataBase)
+    let mainFolderIndex = mainIndex.folder ? getFolderIndex(mainIndex.folder) : null
+    let targetFolderIndex = targetIndex.folder ? getFolderIndex(targetIndex.folder) : null
+    let mainFolderId = mainIndex.folder ? (db.characterOrder[mainFolderIndex] as folder).id : ''
+    let mainId = ''
+    if(mainIndex.folder){
+      mainId = (db.characterOrder[mainFolderIndex] as folder).data[mainIndex.index]
+    }
+    else{
+      const da = db.characterOrder[mainIndex.index]
+      if(typeof(da) !== 'string'){
+        return
+      }
+      mainId = da
+    }
+    if(targetIndex.folder){
+        const folder = db.characterOrder[targetFolderIndex] as folder
+        folder.data.splice(targetIndex.index,0,mainId)
+        db.characterOrder[targetFolderIndex] = folder
+    }
+    else{
+        db.characterOrder.splice(targetIndex.index,0,mainId)
+    }
+    if(mainIndex.folder){
+      mainFolderIndex = -1
+      for(let i=0;i<db.characterOrder.length;i++){
+        const a =db.characterOrder[i]
+        if(typeof(a) !== 'string'){
+          if(a.id === mainFolderId){
+            mainFolderIndex = i
+            break
+          }
+        }
+      }
+      if(mainFolderIndex !== -1){
+        const folder:folder = db.characterOrder[mainFolderIndex] as folder
+        const ind = mainIndex.index > targetIndex.index ? folder.data.lastIndexOf(mainId) : folder.data.indexOf(mainId) 
+        if(ind !== -1){
+          folder.data.splice(ind, 1)
+        }
+        db.characterOrder[mainFolderIndex] = folder
+      }
+      else{
+        console.log('folder not found')
+      }
+    }
+    else{
+      const ind = mainIndex.index > targetIndex.index ? db.characterOrder.lastIndexOf(mainId) : db.characterOrder.indexOf(mainId) 
+      if(ind !== -1){
+        db.characterOrder.splice(ind, 1)
+      }
+    }
+
+    setDatabase(db)
+    checkCharOrder()
+  }
+
+  function getFolderIndex(id:string){
+    let db = get(DataBase)
+    for(let i=0;i<db.characterOrder.length;i++){
+      const data = db.characterOrder[i]
+      if(typeof(data) !== 'string' && data.id === id){
+        return i
+      }
+    }
+    return -1
+  }
+
+  const createFolder = (mainIndex:DragData, targetIndex:DragData) => {
+    if(mainIndex.index === targetIndex.index && mainIndex.folder === targetIndex.folder){
+      return
+    }
+    let db = get(DataBase)
+    let mainFolderIndex = mainIndex.folder ? getFolderIndex(mainIndex.folder) : null
+    let mainFolder = db.characterOrder[mainFolderIndex] as folder
+    if(targetIndex.folder){
+      return
+    }
+    const main = mainIndex.folder ? mainFolder.data[mainIndex.index] : db.characterOrder[mainIndex.index]
+    const target = db.characterOrder[targetIndex.index]
+    if(typeof(main) !== 'string'){
+      return
+    }
+    if(typeof (target) === 'string'){
+      const newFolder:folder = {
+        name: "New Folder",
+        data: [main, target],
+        color: "",
+        id: v4()
+      }
+      db.characterOrder[targetIndex.index] = newFolder
+      if(mainIndex.folder){
+        mainFolder.data.splice(mainIndex.index, 1)
+        db.characterOrder[mainFolderIndex] = mainFolder
+      }
+      else{
+        db.characterOrder.splice(mainIndex.index, 1)
+      }
+    }
+    else{
+      target.data.push(main)
+      if(mainIndex.folder){
+        mainFolder.data.splice(mainIndex.index, 1)
+        db.characterOrder[mainFolderIndex] = mainFolder
+      }
+      else{
+        db.characterOrder.splice(mainIndex.index, 1)
+      }
+    }
+    setDatabase(db)
+  }
+
+  type DragEv = DragEvent & {
+    currentTarget: EventTarget & HTMLDivElement;
+  }
+  type DragData = {
+    index:number,
+    folder?:string
+  }
+  const avatarDragStart = (ind:DragData, e:DragEv) => {
+    e.dataTransfer.setData("application/json", JSON.stringify({
+      type: "risuDrag",
+      index: ind
+    }))
+    const avatar = e.currentTarget.querySelector('.avatar')
+      if(avatar){
+        e.dataTransfer.setDragImage(avatar, 10, 10);
+      }
+  }
+
+  const avatarDragOver = (e:DragEv) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }
+
+  const avatarDrop = (ind:DragData, e:DragEv) => {
+    e.preventDefault()
+    try {
+      const da = JSON.parse(e.dataTransfer.getData("application/json"))
+      if(da.type === "risuDrag"){
+        createFolder(da.index,ind)
+      }
+    } catch (error) {}
+  }
+
   onDestroy(unsub);
 </script>
 
 <div
-  class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg gap-2"
+  class="flex h-full w-20 min-w-20 flex-col items-center overflow-x-hidden overflow-y-scroll bg-bgcolor text-white shadow-lg"
   class:editMode
 >
   <button
@@ -102,57 +291,148 @@
     }}><ListIcon /></button
   >
   <div class="h-8 min-h-8 w-14 min-w-14 bg-transparent" />
+  <div class="h-3 w-14" on:dragover={(e) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    e.currentTarget.classList.add('bg-green-500')
+  }} on:dragleave={(e) => {
+    e.currentTarget.classList.remove('bg-green-500')
+  }} on:drop={(e) => {
+    e.preventDefault()
+    e.currentTarget.classList.remove('bg-green-500')
+    const da = JSON.parse(e.dataTransfer.getData("application/json"))
+    if(da.type === "risuDrag"){
+      inserter(da.index,{index:0})
+    }
+  }} />
   {#if menuMode === 0}
-    {#each charImages as charimg, i}
+    {#each charImages as char, ind}
-      <div class="group relative flex items-center px-2">
+      <div class="group relative flex items-center px-2"
+        draggable="true"
+        on:dragstart={(e) => {avatarDragStart({index:ind}, e)}}
+        on:dragover={avatarDragOver}
+        on:drop={(e) => {avatarDrop({index:ind}, e)}}
+      >
         <SidebarIndicator
-          isActive={$selectedCharID === i && sideBarMode !== 1}
+          isActive={char.type === 'normal' && $selectedCharID === char.index && sideBarMode !== 1}
         />
         <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
         <div
-          on:click={() => {
+            on:click={() => {
-            changeChar(i);
+              if(char.type === "normal"){
-          }}
+                changeChar(char.index);
-          on:keydown={(e) => {
+              }
-            if (e.key === "Enter") {
+            }}
-              changeChar(i);
+            on:keydown={(e) => {
+              if (e.key === "Enter") {
+                if(char.type === "normal"){
+                  changeChar(char.index);
+                }
+              }
+            }}
+            tabindex="0"
+          >
+          {#if char.type === 'normal'}
+            <SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
+          {:else if char.type === "folder"}
+            <SidebarAvatar src="slot" size="56" rounded={IconRounded} onClick={() => {
+              if(char.type !== 'folder'){
+                return
+              }
+              if(openFolders.includes(char.id)){
+                openFolders.splice(openFolders.indexOf(char.id), 1)
+              }
+              else{
+                openFolders.push(char.id)
+              }
+              openFolders = openFolders
+            }}>
+              {#if openFolders.includes(char.id)}
+                <FolderOpenIcon />
+              {:else}
+                <FolderIcon />
+              {/if}
+            </SidebarAvatar>
+          {/if}
+        </div>
+      </div>
+      {#if char.type === 'folder' && openFolders.includes(char.id)}
+        <div class="w-full flex flex-col items-center py-1 mt-1 rounded-lg relative">
+          <div class="absolute top-0 left-1 bg-darkbg w-full h-full rounded-lg z-0"></div>
+          <div class="h-3 w-14 relative z-10" on:dragover={(e) => {
+            e.preventDefault()
+            e.dataTransfer.dropEffect = 'move'
+            e.currentTarget.classList.add('bg-green-500')
+          }} on:dragleave={(e) => {
+            e.currentTarget.classList.remove('bg-green-500')
+          }} on:drop={(e) => {
+            e.preventDefault()
+            e.currentTarget.classList.remove('bg-green-500')
+            const da = JSON.parse(e.dataTransfer.getData("application/json"))
+            if(da.type === "risuDrag", char.type === 'folder'){
+              inserter(da.index,{index:0,folder:char.id})
             }
-          }}
+          }} />
-          tabindex="0"
+          {#each char.folder as char2, ind}
-        >
+              <div class="group relative flex items-center px-2 z-10"
-        <SidebarAvatar src={charImages[i] ? getCharImage(charImages[i], "plain") : "/none.webp"} size="56" rounded={IconRounded} />
+              draggable="true"
-      </div>
+              on:dragstart={(e) => {if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}}
-        {#if editMode}
+              on:dragover={avatarDragOver}
-          <div class="mt-2 flex flex-col">
+              on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}}
-            <button
-              on:click={() => {
-                let chars = $DataBase.characters;
-                if (chars[i - 1]) {
-                  const currentchar = chars[i];
-                  chars[i] = chars[i - 1];
-                  chars[i - 1] = currentchar;
-                  $DataBase.characters = chars;
-                }
-              }}
             >
-              <ArrowUp size={20} />
+              <SidebarIndicator
-            </button>
+                isActive={$selectedCharID === char2.index && sideBarMode !== 1}
-            <button
+              />
-              on:click={() => {
+              <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-                let chars = $DataBase.characters;
+              <div
-                if (chars[i + 1]) {
+                  on:click={() => {
-                  const currentchar = chars[i];
+                    if(char2.type === "normal"){
-                  chars[i] = chars[i + 1];
+                      changeChar(char2.index);
-                  chars[i + 1] = currentchar;
+                    }
-                  $DataBase.characters = chars;
+                  }}
-                }
+                  on:keydown={(e) => {
-              }}
+                    if (e.key === "Enter") {
-            >
+                      if(char2.type === "normal"){
-              <ArrowDown size={22} />
+                        changeChar(char2.index);
-            </button>
+                      }
-          </div>
+                    }
-        {/if}
+                  }}
-      </div>
+                  tabindex="0"
+                >
+                <SidebarAvatar src={char2.img ? getCharImage(char2.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} />
+              </div>
+            </div>
+            <div class="h-3 w-14 relative z-10" on:dragover={(e) => {
+              e.preventDefault()
+              e.dataTransfer.dropEffect = 'move'
+              e.currentTarget.classList.add('bg-green-500')
+            }} on:dragleave={(e) => {
+              e.currentTarget.classList.remove('bg-green-500')
+            }} on:drop={(e) => {
+              e.preventDefault()
+              e.currentTarget.classList.remove('bg-green-500')
+              const da = JSON.parse(e.dataTransfer.getData("application/json"))
+              if(da.type === "risuDrag" && char.type === 'folder'){
+                inserter(da.index,{index:ind+1,folder:char.id})
+              }
+            }} />
+          {/each}
+        </div>
+      {/if}
+      <div class="h-3 w-14" on:dragover={(e) => {
+        e.preventDefault()
+        e.dataTransfer.dropEffect = 'move'
+        e.currentTarget.classList.add('bg-green-500')
+      }} on:dragleave={(e) => {
+        e.currentTarget.classList.remove('bg-green-500')
+      }} on:drop={(e) => {
+        e.preventDefault()
+        e.currentTarget.classList.remove('bg-green-500')
+        const da = JSON.parse(e.dataTransfer.getData("application/json"))
+        if(da.type === "risuDrag"){
+          inserter(da.index,{index:ind+1})
+        }
+      }} />
     {/each}
     <div class="flex flex-col items-center space-y-2 px-2">
       <BaseRoundedButton

src/lib/SideBars/SidebarAvatar.svelte

@@ -2,29 +2,41 @@
   export let rounded:boolean
   export let src:string|Promise<string>;
   export let size = "22";
+  export let onClick = () => {}
 </script>
 
-<span class="flex shrink-0 items-center justify-center">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<span class="flex shrink-0 items-center justify-center avatar" on:click={onClick}>
   {#if src}
-    {#await src}
+    {#if src === "slot"}
       <div
-        class="bg-skin-border sidebar-avatar rounded-md bg-top"
+        class="bg-skin-border sidebar-avatar rounded-md bg-top bg-darkbg flex items-center justify-center"
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}
         class:rounded-md={!rounded} class:rounded-full={rounded} 
-      />
+      ><slot /></div>
-    {:then img}
+    {:else}
-      <img
+      {#await src}
-        src={img}
+        <div
-        class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
+          class="bg-skin-border sidebar-avatar rounded-md bg-top"
-        style:width={size + "px"}
+          style:width={size + "px"}
-        style:height={size + "px"}
+          style:height={size + "px"}
-        style:minWidth={size + "px"}
+          style:minWidth={size + "px"}
-        class:rounded-md={!rounded} class:rounded-full={rounded} 
+          class:rounded-md={!rounded} class:rounded-full={rounded} 
-        alt="avatar"
+        />
-      />
+      {:then img}
-    {/await}
+        <img
+          src={img}
+          class="bg-skin-border sidebar-avatar rounded-md object-cover object-top"
+          style:width={size + "px"}
+          style:height={size + "px"}
+          style:minWidth={size + "px"}
+          class:rounded-md={!rounded} class:rounded-full={rounded} 
+          alt="avatar"
+        />
+      {/await}
+    {/if}
   {:else}
     <div
       class="bg-skin-border sidebar-avatar rounded-md bg-top"

src/ts/characterCards.ts

@@ -8,7 +8,7 @@ import { v4 as uuidv4 } from 'uuid';
 import exifr from 'exifr'
 import { PngMetadata } from "./exif"
 import { characterFormatUpdate } from "./characters"
-import { downloadFile, readImage, saveAsset } from "./globalApi"
+import { checkCharOrder, downloadFile, readImage, saveAsset } from "./globalApi"
 import { cloneDeep } from "lodash"
 
 
@@ -21,6 +21,7 @@ export async function importCharacter() {
 
         for(const f of files){
             await importCharacterProcess(f)
+            checkCharOrder()
         }
     } catch (error) {
         alertError(`${error}`)
@@ -145,7 +146,7 @@ export async function characterHubImport() {
             {
                 const charaData:CharacterCardV2 = JSON.parse(Buffer.from(readed.chara, 'base64').toString('utf-8'))
                 if(await importSpecv2(charaData, img)){
-                    
+                    checkCharOrder()
                     return
                 }
             }
@@ -156,6 +157,7 @@ export async function characterHubImport() {
                 db.characters.push(convertOldTavernAndJSON(charaData, imgp))
     
                 DataBase.set(db)
+                checkCharOrder()
                 alertNormal(language.importedCharacter)
                 return
             }
@@ -431,6 +433,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
 
     db.characters.push(char)
     
+
     setDatabase(db)
 
     alertNormal(language.importedCharacter)

src/ts/characters.ts

@@ -8,12 +8,13 @@ import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpa
 import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util";
 import { v4 as uuidv4 } from 'uuid';
 import { selectedCharID } from "./stores";
-import { downloadFile, getFileSrc, readImage } from "./globalApi";
+import { checkCharOrder, downloadFile, getFileSrc, readImage } from "./globalApi";
 
 export function createNewCharacter() {
     let db = get(DataBase)
     db.characters.push(createBlankChar())
     setDatabase(db)
+    checkCharOrder()
     return db.characters.length - 1
 }
 

src/ts/database.ts

@@ -219,6 +219,8 @@ export function setDatabase(data:Database){
             FontColorItalicBold: "#8C8D93"
         }
     }
+
+
     changeLanguage(data.language)
     DataBase.set(data)
 }
@@ -424,6 +426,14 @@ export interface Database{
     textBorder?:boolean
     textScreenRounded?:boolean
     textScreenBorder?:string
+    characterOrder:(string|folder)[]
+}
+
+export interface folder{
+    name:string
+    data:string[]
+    color:string
+    id:string
 }
 
 

src/ts/globalApi.ts

@@ -17,6 +17,7 @@ import { alertError, alertStore } from "./alert";
 import { checkDriverInit } from "./drive/drive";
 import { hasher } from "./parser";
 import { characterHubImport } from "./characterCards";
+import { cloneDeep } from "lodash";
 
 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -620,6 +621,65 @@ async function checkNewFormat() {
 
         db.formatversion = 3
     }
+    if(!db.characterOrder){
+        db.characterOrder = []
+    }
+
+
+    setDatabase(db)
+    checkCharOrder()
+}
+
+export function checkCharOrder() {
+    let db = get(DataBase)
+    let ordered = cloneDeep(db.characterOrder ?? [])
+    for(let i=0;i<db.characterOrder.length;i++){
+        const folder =db.characterOrder[i]
+        if(typeof(folder) !== 'string'){
+            console.log(folder)
+            for(const f of folder.data){
+                ordered.push(f)
+            }
+        }
+    }
+
+    let charIdList:string[] = []
+
+    for(let i=0;i<db.characters.length;i++){
+        const charId = db.characters[i].chaId
+        charIdList.push(charId)
+        if(!ordered.includes(charId)){
+            db.characterOrder.push(charId)
+        }
+    }
+
+
+    for(let i=0;i<db.characterOrder.length;i++){
+        const data =db.characterOrder[i]
+        if(typeof(data) !== 'string'){
+            if(data.data.length === 0){
+                db.characterOrder.splice(i,1)
+                i--;
+                continue
+            }
+            for(let i2=0;i2<data.data.length;i2++){
+                const data2 = data.data[i2]
+                if(!charIdList.includes(data2)){
+                    data.data.splice(i2,1)
+                    i2--;
+                }
+            }
+            db.characterOrder[i] = data
+        }
+        else{
+            if(!charIdList.includes(data)){
+                db.characterOrder.splice(i,1)
+                i--;
+            }
+        }
+    }
+
+
     setDatabase(db)
 }
 

src/ts/util.ts

@@ -188,6 +188,29 @@ export function findCharacterbyId(id:string) {
     return unknown
 }
 
+export function findCharacterIndexbyId(id:string) {
+    const db = get(DataBase)
+    let i=0;
+    for(const char of db.characters){
+        if(char.chaId === id){
+            return i
+        }
+        i += 1
+    }
+    return -1
+}
+
+export function getCharacterIndexObject() {
+    const db = get(DataBase)
+    let i=0;
+    let result:{[key:string]:number} = {}
+    for(const char of db.characters){
+        result[char.chaId] = i
+        i += 1
+    }
+    return result
+}
+
 export function defaultEmotion(em:[string,string][]){
     if(!em){
         return ''