[feat] realm enchanments

src/lib/UI/Hub.svelte

@@ -1,27 +1,14 @@
 <script lang="ts">
-    import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
-    import { ArrowLeft, ArrowRight, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
+    import { downloadRisuHub, getRisuHub, hubURL, type hubType } from "src/ts/characterCards";
+    import { ArrowLeft, ArrowRight, BookIcon, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, SmileIcon, 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";
 
-    let openedData:null|{
-        name:string
-        desc: string
-        download: number,
-        id: string,
-        img: string,
-        tags: string[]
-    } = null
+    let openedData:null|hubType = null
 
-    let charas:{
-        name:string
-        desc: string
-        download: number,
-        id: string,
-        img: string
-        tags: string[]
-    }[] = []
+    let charas:hubType[] = []
 
     let page = 0
     let sort = ''
@@ -89,26 +76,7 @@
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
     {#key charas}
         {#each charas as chara}
-            <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={() => {
-                openedData = chara
-            }}>
-                <div class="flex gap-2 w-full">
-                    <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
-                    <div class="flex flex-col flex-grow min-w-0">
-                        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
-                        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
-                        <div class="flex flex-wrap">
-                            {#each chara.tags as tag, i}
-                                {#if i < 4}
-                                    <div class="text-xs p-1 text-blue-400">{tag}</div>
-                                {:else if i === 4}
-                                    <div class="text-xs p-1 text-blue-400">...</div>
-                                {/if}
-                            {/each}
-                        </div>
-                    </div>
-                </div>
-            </button>
+            <RisuHubIcon onClick={() =>{openedData = chara}} chara={chara} />
         {/each}
     {/key}
 </div>
@@ -141,9 +109,9 @@
         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 gap-4 flex-col">
+            <div class="w-full flex flex-col">
                 <h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis">{openedData.name}</h1>
-                <div class="flex justify-start gap-4">
+                <div class="flex justify-start gap-4 mt-4">
                     <img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
                     <span class="text-gray-400 break-words text-base chattext prose prose-invert">
                         {#await parseMarkdownSafe(openedData.desc) then msg}
@@ -151,11 +119,19 @@
                         {/await}
                     </span>
                 </div>
-                <div class="flex justify-start gap-2">
+                <div class="flex justify-start gap-2  mt-4">
                     {#each openedData.tags as tag, i}
                         <div class="text-xs p-1 text-blue-400">{tag}</div>
                     {/each}
                 </div>
+                <div class="flex flex-wrap w-full flex-row gap-1 mt-2">
+                    {#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}
+                    {#if openedData.hasLore}
+                        <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+                    {/if}
+                </div>
             </div>
             <div class="flex flex-row-reverse gap-2">
                 <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
@@ -174,11 +150,11 @@
                 }}>
                     <FlagIcon />
                 </button>
-                <button class="text-gray-400 hover:text-green-500" on:click={() => {
+                <button class="bg-selected hover:ring flex-grow p-2 font-bold rounded-md mr-2" on:click={() => {
                     downloadRisuHub(openedData.id)
                     openedData = null
                 }}>
-                    <DownloadIcon />
+                    Download
                 </button>
             </div>
         </div>
@@ -203,10 +179,10 @@
             <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')
+                const id = await alertInput('Input URL or ID')
                 downloadRisuHub(id)
 
-            }}>Import Character from ID</button>
+            }}>Import Character from URL or ID</button>
         </div>
     </div>
 {/if}

src/lib/UI/MainMenu.svelte

@@ -7,6 +7,8 @@
   import { ArrowLeft, HomeIcon } from "lucide-svelte";
   import { openURL } from "src/ts/storage/globalApi";
   import { language } from "src/lang";
+  import { getRisuHub, hubURL } from "src/ts/characterCards";
+  import RisuHubIcon from "./RisuHubIcon.svelte";
   let openHub = false
 </script>
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
@@ -34,18 +36,31 @@
           <h1 class="text-2xl font-bold text-start">Your Characters</h1>
           <span class="mt-2 text-gray-400 text-start">Opens your character list. you can open with pressing arrow button in top left corner too.</span>
         </button>
-        {#if $DataBase.useExperimental}
-          <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => (openHub = true)}>
-            <h1 class="text-2xl font-bold text-start">{language.hub} <Help key="experimental" /></h1>
-            <span class="mt-2 text-gray-400 text-start">Characters made and shared by the community</span>
-          </button>
-        {:else}
-          <button class="bg-darkbg rounded-md p-6 flex flex-col" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
-            <h1 class="text-2xl font-bold text-start">Official Discord</h1>
-            <span class="mt-2 text-gray-400 text-start">Offical Discord to talk about RisuAI</span>
-          </button>
-        {/if}
+        <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
+          <h1 class="text-2xl font-bold text-start">Official Discord</h1>
+          <span class="mt-2 text-gray-400 text-start">Official Discord to talk about RisuAI</span>
+        </button>
       </div>
+      {#await getRisuHub({
+          search: '',
+          page: -10,
+          nsfw: false,
+          sort: ''
+      }) then charas}
+          <div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
+          <h1 class="text-2xl font-bold">Recent Characters from {language.hub} <button class="text-base font-medium float-right p-1 bg-darkbg rounded-md hover:ring" on:click={() => {
+            openHub = true
+          }}>Get More</button></h1>
+          {#if charas.length > 0}
+          <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
+              {#each charas as chara}
+                  <RisuHubIcon onClick={() => {openHub = true}} chara={chara} />
+              {/each}
+          </div>
+          {:else}
+          <div class="text-gray-500">Failed to load {language.hub}...</div>
+          {/if}
+      {/await}
       {:else}
         <div class="flex items-center mt-4">
           <button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>

src/lib/UI/RisuHubIcon.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { BookIcon, SmileIcon } from "lucide-svelte";
+  import { alertNormal } from "src/ts/alert";
+    import { hubURL, type hubType } from "src/ts/characterCards";
+
+    export let onClick = () => {}
+    export let chara:hubType
+
+</script>
+
+
+<button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={onClick}>                <div class="flex gap-2 w-full">
+    <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+    <div class="flex flex-col flex-grow min-w-0">
+        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
+        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+        <div class="flex flex-wrap">
+            {#each chara.tags as tag, i}
+                {#if i < 4}
+                    <div class="text-xs p-1 text-blue-400">{tag}</div>
+                {:else if i === 4}
+                    <div class="text-xs p-1 text-blue-400">...</div>
+                {/if}
+            {/each}
+        </div>
+        <div class="flex-grow"></div>
+        <div class="flex flex-wrap w-full flex-row-reverse gap-1">
+            {#if chara.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}
+            {#if chara.hasLore}
+                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+            {/if}
+        </div>
+    </div>
+</div></button>