[feat] download enchantments

src/lib/Setting/Pages/UserSettings.svelte

@@ -49,10 +49,9 @@
 </button>
 <span class="text-neutral-200 mt-4">{language.username}</span>
 <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="User" bind:value={$DataBase.username}>
-{#if $DataBase.useExperimental}
     <div class="bg-darkbg p-3 rounded-md mb-2 flex flex-col items-start">
         <div class="w-full">
-            <h1 class="text-3xl font-black min-w-0">Risu Account{#if $DataBase.account} <Help key="experimental"/>
+            <h1 class="text-3xl font-black min-w-0">Risu Account{#if $DataBase.account}
                 <button class="bg-selected p-1 text-sm font-light rounded-md hover:bg-green-500 transition-colors float-right" on:click={async () => {
                     $DataBase.account = undefined
                 }}>Logout</button>
@@ -60,19 +59,23 @@
         </div>
         {#if $DataBase.account}
             <span class="mb-4 text-gray-400">ID: {$DataBase.account.id}</span>
-            <h1 class="text-xl font-bold mt-2">{language.googleDriveConnection}</h1>
-            {#if !$DataBase.account.data.refresh_token}
-                <span class="text-sm font-light mb-2 text-gray-400">{language.googleDriveInfo}</span>
-                <button class="bg-selected p-2 rounded-md hover:bg-green-500 transition-colors" on:click={async () => {
-                    if((!popup) || popup.closed){
-                        popup = window.open(await checkDriver('reftoken'))                    
-                    }
-                }}>
-                    Connect to Google Drive
-                </button>
-            {:else}
-                <span class="text-sm font-light mb-2 text-gray-400">{language.googleDriveConnected}</span>
+            {#if $DataBase.useExperimental}
+
+                <h1 class="text-xl font-bold mt-2">{language.googleDriveConnection} <Help key="experimental"/></h1>
+                {#if !$DataBase.account.data.refresh_token}
+                    <span class="text-sm font-light mb-2 text-gray-400">{language.googleDriveInfo}</span>
+                    <button class="bg-selected p-2 rounded-md hover:bg-green-500 transition-colors" on:click={async () => {
+                        if((!popup) || popup.closed){
+                            popup = window.open(await checkDriver('reftoken'))                    
+                        }
+                    }}>
+                        Connect to Google Drive
+                    </button>
+                {:else}
+                    <span class="text-sm font-light mb-2 text-gray-400">{language.googleDriveConnected}</span>
+                {/if}
             {/if}
+
         {:else}
             <span>{language.notLoggedIn}</span>
             <button class="bg-selected p-2 rounded-md mt-2 hover:bg-green-500 transition-colors" on:click={() => {
@@ -83,7 +86,6 @@
             </button>
         {/if}
     </div>
-{/if}
 {#if openIframe}
     <div class="fixed top-0 left-0 bg-black bg-opacity-50 w-full h-full flex justify-center items-center">
         <iframe src={openIframeURL} title="login" class="w-full h-full">

src/lib/SideBars/CharConfig.svelte

@@ -663,12 +663,9 @@
         <button on:click={async () => {
             exportChar($selectedCharID)
         }} class="text-neutral-200 mt-6 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.exportCharacter}</button>
-
-        {#if $DataBase.useExperimental}
-            <button on:click={async () => {
-                openHubUpload = true
-            }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.shareCloud} <Help key="experimental" /></button>
-        {/if}
+        <button on:click={async () => {
+            openHubUpload = true
+        }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.shareCloud}</button>
         {#if openHubUpload}
             <HubUpload bind:char={currentChar.data} close={() => {openHubUpload=false}}/>
         {/if}

src/lib/UI/Hub.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { downloadRisuHub, getRisuHub, hubURL, type hubType } from "src/ts/characterCards";
-    import { ArrowLeft, ArrowRight, BookIcon, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, SmileIcon, XIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, BookIcon, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, SmileIcon, TrashIcon, XIcon } from "lucide-svelte";
     import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
-  import { parseMarkdownSafe } from "src/ts/parser";
-  import { language } from "src/lang";
-  import RisuHubIcon from "./RisuHubIcon.svelte";
+    import { parseMarkdownSafe } from "src/ts/parser";
+    import { language } from "src/lang";
+    import RisuHubIcon from "./RisuHubIcon.svelte";
+    import { DataBase } from "src/ts/storage/database";
 
     let openedData:null|hubType = null
 
@@ -125,6 +126,10 @@
                     {/each}
                 </div>
                 <div class="flex flex-wrap w-full flex-row gap-1 mt-2">
+                    <span class="text-gray-500">
+                        {openedData.download} {language.downloads}
+                    </span>
+                    <div class="border-l-selected border-l ml-1 mr-1"></div>
                     {#if openedData.viewScreen === 'emotion'}
                         <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
                     {/if}
@@ -150,6 +155,23 @@
                 }}>
                     <FlagIcon />
                 </button>
+                {#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
+                    <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
+                        const conf = await alertConfirm('Do you want to remove this character from Realm?')
+                        if(conf){
+                            const da = await fetch(hubURL + '/hub/remove', {
+                                method: "POST",
+                                body: JSON.stringify({
+                                    id: openedData.id,
+                                    token: $DataBase.account?.token
+                                })
+                            })
+                            alertNormal(await da.text())
+                        }
+                    }}>
+                        <TrashIcon />
+                    </button>
+                {/if}
                 <button class="bg-selected hover:ring flex-grow p-2 font-bold rounded-md mr-2" on:click={() => {
                     downloadRisuHub(openedData.id)
                     openedData = null

src/lib/UI/HubUpload.svelte

@@ -1,6 +1,15 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div  class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" on:click={close}>
     <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" on:click|stopPropagation>
+        
+        {#if !$DataBase.account}
+            <span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
+            <span class="text-gray-500">You can login in app settings 🡲 account</span>
+            <button on:click={async () => {
+                close()
+            }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
+            
+        {:else}
         <h1 class="font-bold text-2xl w-full">
             <span>
                 Share {char.name} to {language.hub}
@@ -46,6 +55,8 @@
                 close()
             }
         }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">{language.shareCloud}</button>
+        {/if}
+
     </div>
 </div>
 
@@ -55,7 +66,7 @@
     import { language } from "src/lang";
   import { alertError } from "src/ts/alert";
   import { shareRisuHub } from "src/ts/characterCards";
-    import type { character } from "src/ts/storage/database";
+    import { DataBase, type character } from "src/ts/storage/database";
     export let close = () => {}
     export let char:character
     let tags=""

src/lib/UI/MainMenu.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
-  import { DataBase, appVer } from "src/ts/storage/database";
+  import { appVer } from "src/ts/storage/database";
   import GithubStars from "../Others/GithubStars.svelte";
   import Hub from "./Hub.svelte";
   import { sideBarStore } from "src/ts/stores";
-  import Help from "../Others/Help.svelte";
-  import { ArrowLeft, HomeIcon } from "lucide-svelte";
+  import { ArrowLeft } from "lucide-svelte";
   import { openURL } from "src/ts/storage/globalApi";
   import { language } from "src/lang";
-  import { getRisuHub, hubURL } from "src/ts/characterCards";
+  import { getRisuHub } from "src/ts/characterCards";
   import RisuHubIcon from "./RisuHubIcon.svelte";
   let openHub = false
 </script>

src/ts/characterCards.ts

@@ -663,6 +663,7 @@ export type hubType = {
     tags: string[],
     viewScreen: "none" | "emotion" | "imggen"
     hasLore:boolean
+    creator?:string
 }
 
 export async function getRisuHub(arg?:{