[feat] realm popup

src/App.svelte

@@ -5,10 +5,12 @@
     import { DataBase, loadedStore } from './ts/storage/database';
     import ChatScreen from './lib/ChatScreens/ChatScreen.svelte';
     import AlertComp from './lib/Others/AlertComp.svelte';
+    import RealmPopUp from './lib/UI/Realm/RealmPopUp.svelte';
     import { alertStore } from './ts/alert';
     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';
 
     let didFirstSetup: boolean  = false
     let gridOpen = false
@@ -49,4 +51,7 @@
     {#if $alertStore.type !== 'none'}
         <AlertComp />
     {/if}
+    {#if $showRealmInfoStore}
+        <RealmPopUp bind:openedData={$showRealmInfoStore} />
+    {/if}
 </main>

src/lib/SideBars/CharConfig.svelte

@@ -7,7 +7,7 @@
     import Check from "../UI/GUI/Check.svelte";
     import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
     import LoreBook from "./LoreBookSetting.svelte";
-    import { alertConfirm, alertError, alertSelectChar } from "../../ts/alert";
+    import { alertConfirm, alertError, alertNormal, alertSelectChar, alertTOS } from "../../ts/alert";
     import BarIcon from "./BarIcon.svelte";
     import { findCharacterbyId, selectMultipleFile } from "../../ts/util";
     import { onDestroy } from "svelte";
@@ -725,7 +725,13 @@
             && currentChar.data.license !== 'CC BY-SA 4.0'
         }
             <Button size="lg" on:click={async () => {
-                openHubUpload = true
+                if(!$DataBase.account){
+                    alertNormal(language.notLoggedIn)
+                    return
+                }
+                if(await alertTOS()){
+                    openHubUpload = true                    
+                }
             }} className="mt-2">{language.shareCloud}</Button>
         {/if}
 

src/lib/UI/Realm/RealmPopUp.svelte

@@ -13,7 +13,7 @@
 
 
 <!-- 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={() => {
+<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-white" on:click={() => {
     openedData = null
 }}>
     <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">

src/ts/characterCards.ts

@@ -1,4 +1,4 @@
-import { get } from "svelte/store"
+import { get, writable, type Writable } from "svelte/store"
 import { alertConfirm, alertError, alertMd, alertNormal, alertSelect, alertStore, alertTOS } from "./alert"
 import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook } from "./storage/database"
 import { checkNullish, selectMultipleFile, selectSingleFile, sleep } from "./util"
@@ -125,6 +125,8 @@ async function importCharacterProcess(f:{
     }
 }
 
+export const showRealmInfoStore:Writable<null|hubType> = writable(null)
+
 export async function characterURLImport() {
     const realmPath = (new URLSearchParams(location.search)).get('realm')
     try {
@@ -132,7 +134,18 @@ export async function characterURLImport() {
             const url = new URL(location.href);
             url.searchParams.delete('realm');
             window.history.pushState(null, '', url.toString());
-            downloadRisuHub(realmPath)
+
+            const res = await fetch(`${hubURL}/hub/info`,{
+                method: "POST",
+                body: JSON.stringify({
+                    id: realmPath
+                })
+            })
+            if(res.status !== 200){
+                alertError(await res.text())
+                return
+            }
+            showRealmInfoStore.set(await res.json())
         }
     } catch (error) {