Add drag & drop import

src/App.svelte

@@ -8,7 +8,7 @@
     import GridChars from './lib/Others/GridCatalog.svelte';
     import WelcomeRisu from './lib/Others/WelcomeRisu.svelte';
     import Settings from './lib/Setting/Settings.svelte';
-    import { showRealmInfoStore } from './ts/characterCards';
+    import { showRealmInfoStore, importCharacterProcess } from './ts/characterCards';
     import RealmFrame from './lib/UI/Realm/RealmFrame.svelte';
     import { AccountWarning } from './ts/storage/accountStorage';
     import AccountWarningComp from './lib/Others/AccountWarningComp.svelte';
@@ -18,6 +18,7 @@
     import MobileBody from './lib/Mobile/MobileBody.svelte';
     import MobileFooter from './lib/Mobile/MobileFooter.svelte';
     import CustomGUISettingMenu from './lib/Setting/Pages/CustomGUISettingMenu.svelte';
+  import { checkCharOrder } from './ts/globalApi';
 
   
     let didFirstSetup: boolean  = $derived(DBState.db?.didFirstSetup)
@@ -25,7 +26,20 @@
 
 </script>
 
-<main class="flex bg-bg w-full h-full max-w-100vw text-textcolor">
+<main class="flex bg-bg w-full h-full max-w-100vw text-textcolor" ondragover={(e) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'link'
+}} ondrop={async (e) => {
+    e.preventDefault()
+    const file = e.dataTransfer.files[0]
+    if (file) {
+        await importCharacterProcess({
+            name: file.name,
+            data: file
+        })
+        checkCharOrder()
+    }
+}}>
     {#if !$loadedStore}
         <div class="w-full h-full flex justify-center items-center text-textcolor text-xl bg-gray-900">
             <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-textcolor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

src/ts/characterCards.ts

@@ -41,7 +41,7 @@ export async function importCharacter() {
     }
 }
 
-async function importCharacterProcess(f:{
+export async function importCharacterProcess(f:{
     name: string;
     data: Uint8Array|File|ReadableStream<Uint8Array>
 }) {