[feat] import from id

src/lib/UI/Hub.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
-    import { DownloadIcon, FlagIcon, SearchIcon } from "lucide-svelte";
+    import { DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
   import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
 
     let openedData:null|{
@@ -21,6 +21,7 @@
     }[] = []
 
     let search = ''
+    let menuOpen = false
 
     async function getHub(){
         charas = await getRisuHub({
@@ -32,12 +33,17 @@
 
 
 </script>
-<div class="w-full flex justify-center mt-4">
+<div class="w-full flex justify-center mt-4 mb-3">
-    <div class="flex w-2xl max-w-full">
+    <div class="flex w-2xl max-w-full items-center">
-        <input class="flex-grow text-xl pl-3 pr-3 mb-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
+        <input class="flex-grow text-xl pl-3 pr-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
-        <button class="bg-darkbg h-16 w-16 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={getHub}>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={getHub}>
             <SearchIcon />
         </button>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+            menuOpen = true
+        }}>
+            <MenuIcon />
+        </button>
     </div>
 </div>
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
@@ -72,7 +78,7 @@
         openedData = null
     }}>
         <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
-            <div class="w-full flex flex-wrap gap-4">
+            <div class="w-full flex gap-4">
                 <div class="flex flex-col">
                     <img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
                     <h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis mt-4">{openedData.name}</h1>
@@ -97,7 +103,7 @@
                     <FlagIcon />
                 </button>
                 <button class="text-gray-400 hover:text-green-500" on:click={() => {
-                    downloadRisuHub(openedData.id ,openedData.img)
+                    downloadRisuHub(openedData.id)
                     openedData = null
                 }}>
                     <DownloadIcon />
@@ -106,4 +112,29 @@
         </div>
     </div>
 
+{/if}
+
+{#if menuOpen}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" on:click={() => {
+        menuOpen = false
+    }}>
+        <div class="max-w-full bg-darkbg rounded-md flex flex-col gap-4 overflow-y-auto p-4">
+            <h1 class="font-bold text-2xl w-full">
+                <span>
+                    Menu
+                </span>
+                <button class="float-right text-gray-400 hover:text-green-500" on:click={() => {menuOpen = false}}>
+                    <XIcon />
+                </button>
+            </h1>
+            <div class=" mt-2 w-full border-t-2 border-t-bgcolor"></div>
+            <button class="w-full hover:bg-selected p-4" on:click|stopPropagation={async () => {
+                menuOpen = false
+                const id = await alertInput('Import ID')
+                downloadRisuHub(id)
+
+            }}>Import Character from ID</button>
+        </div>
+    </div>
 {/if}

src/ts/characterCards.ts

@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert"
+import { alertConfirm, alertError, alertMd, alertNormal, alertSelect, alertStore } from "./alert"
 import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook } from "./storage/database"
 import { checkNullish, selectMultipleFile, selectSingleFile, sleep } from "./util"
 import { language } from "src/lang"
@@ -643,7 +643,7 @@ export async function shareRisuHub(char:character, arg:{
             alertError(await da.text())
         }
         else{
-            alertNormal("Successfuly Uploaded")
+            alertMd(await da.text())
         }
     }
     catch(e){
@@ -673,7 +673,7 @@ export async function getRisuHub(arg?:{
     return da.json()
 }
 
-export async function downloadRisuHub(id:string, img:string) {
+export async function downloadRisuHub(id:string) {
     alertStore.set({
         type: "wait",
         msg: "Downloading..."
@@ -688,7 +688,9 @@ export async function downloadRisuHub(id:string, img:string) {
         alertError(await res.text())
     }
 
-    const data:CharacterCardV2 = await res.json()
+    const result = await res.json()
+    const data:CharacterCardV2 = result.card
+    const img:string = result.img
 
     await importSpecv2(data, await getHubResources(img), 'hub')
     checkCharOrder()