Add new character addition screen

src/lang/en.ts

@@ -567,4 +567,7 @@ export const languageEnglish = {
     antiClaudeOverload: "Anti-Claude Overload",
     activeTabChange: "Current tab is inactivated since other tab is active. to activate this tab, click OK",
     maxSupaChunkSize: "Max SupaMemory Chunk Size",
+    addCharacter: "Add Character",
+    importFromRealm: "Choose from RisuRealm",
+    importFromRealmDesc: "Choose over 1000 characters in RisuRealm",
 }

src/lib/Others/AlertComp.svelte

@@ -4,7 +4,7 @@
     import { getCharImage } from '../../ts/characters';
     import { ParseMarkdown } from '../../ts/parser';
     import BarIcon from '../SideBars/BarIcon.svelte';
-    import { User } from 'lucide-svelte';
+    import { ChevronRightIcon, User } from 'lucide-svelte';
     import { hubURL } from 'src/ts/characterCards';
     import TextInput from '../UI/GUI/TextInput.svelte';
     import { openURL } from 'src/ts/storage/globalApi';
@@ -75,7 +75,7 @@
                 <div class="text-textcolor">You should accept RisuRealm's <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
                     openURL('https://sv.risuai.xyz/hub/tos')
                 }}>Terms of Service</a> to continue</div>
-            {:else if $alertStore.type !== 'select' && $alertStore.type !== 'requestdata'}
+            {:else if $alertStore.type !== 'select' && $alertStore.type !== 'requestdata' && $alertStore.type !== 'addchar'}
                 <span class="text-gray-300">{$alertStore.msg}</span>
                 {#if $alertStore.submsg}
                     <span class="text-gray-500 text-sm">{$alertStore.submsg}</span>
@@ -225,6 +225,73 @@
                         {/if}
                     {/await}
                 {/if}
+            {:else if $alertStore.type === 'addchar'}
+                <div class="w-2xl flex flex-col max-w-full">
+
+                    <button class="border-darkborderc border py-12 px-8 flex rounded-md hover:ring-2 justify-center items-center" on:click={() => {
+                        alertStore.set({
+                            type: 'none',
+                            msg: 'importFromRealm'
+                        })
+                    }}>
+                        <div class="flex flex-col justify-start items-start">
+                            <span class="text-2xl font-bold">{language.importFromRealm}</span>
+                            <span class="text-textcolor2">{language.importFromRealmDesc}</span>
+                        </div>
+                        <div class="ml-9 float-right flex-1 flex justify-end">
+                            <ChevronRightIcon />
+                        </div>
+                    </button>
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                        alertStore.set({
+                            type: 'none',
+                            msg: 'importCharacter'
+                        })
+                    }}>
+                        <div class="flex flex-col justify-start items-start">
+                            <span>{language.importCharacter}</span>
+                        </div>
+                        <div class="ml-9 float-right flex-1 flex justify-end">
+                            <ChevronRightIcon />
+                        </div>
+                    </button>
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                        alertStore.set({
+                            type: 'none',
+                            msg: 'createfromScratch'
+                        })
+                    }}>
+                        <div class="flex flex-col justify-start items-start">
+                            <span>{language.createfromScratch}</span>
+                        </div>
+                        <div class="ml-9 float-right flex-1 flex justify-end">
+                            <ChevronRightIcon />
+                        </div>
+                    </button>
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                        alertStore.set({
+                            type: 'none',
+                            msg: 'createGroup'
+                        })
+                    }}>
+                        <div class="flex flex-col justify-start items-start">
+                            <span>{language.createGroup}</span>
+                        </div>
+                        <div class="ml-9 float-right flex-1 flex justify-end">
+                            <ChevronRightIcon />
+                        </div>
+                    </button>
+                    <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" on:click={() => {
+                        alertStore.set({
+                            type: 'none',
+                            msg: 'cancel'
+                        })
+                    }}>
+                        <div class="flex flex-col justify-start items-start">
+                            <span>{language.cancel}</span>
+                        </div>
+                    </button>
+                </div>
             {/if}
         </div>
     </div>

src/lib/SideBars/Sidebar.svelte

@@ -7,7 +7,10 @@
     settingsOpen,
     sideBarClosing,
     sideBarStore,
-    CurrentCharacter
+    CurrentCharacter,
+
+    OpenRealmStore
+
   } from "../../ts/stores";
   import { DataBase, setDatabase, type folder } from "../../ts/storage/database";
   import BarIcon from "./BarIcon.svelte";
@@ -44,7 +47,7 @@
   import { BotCreator } from "src/ts/creation/creator";
   import Button from "../UI/GUI/Button.svelte";
   import { fly } from "svelte/transition";
-  import { alertInput, alertSelect } from "src/ts/alert";
+  import { alertAddCharacter, alertInput, alertSelect } from "src/ts/alert";
   import SideChatList from "./SideChatList.svelte";
   import { joinMultiuserRoom } from "src/ts/sync/multiuser";
   let openPresetList = false;
@@ -564,13 +567,22 @@
     {/each}
     <div class="flex flex-col items-center space-y-2 px-2">
       <BaseRoundedButton
-        onClick={() => {
+        onClick={async () => {
-          if (sideBarMode === 1) {
+          const r = await alertAddCharacter()
-            reseter();
+          switch(r){
-            sideBarMode = 0;
+            case 'createfromScratch':
-          } else {
+              createScratch()
-            reseter();
+              break
-            sideBarMode = 1;
+            case 'importCharacter':
+              createImport()
+              break
+            case 'createGroup':
+              createGroup()
+              break
+            case 'importFromRealm':
+              selectedCharID.set(-1)
+              OpenRealmStore.set(true)
+              break
           }
         }}
         ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"

src/lib/UI/MainMenu.svelte

@@ -2,7 +2,7 @@
   import { DataBase, appVer, webAppSubVer } from "src/ts/storage/database";
   import GithubStars from "../Others/GithubStars.svelte";
   import Hub from "./Realm/RealmMain.svelte";
-  import { sideBarStore } from "src/ts/stores";
+  import { OpenRealmStore } from "src/ts/stores";
   import { ArrowLeft } from "lucide-svelte";
   import { isNodeServer, isTauri, openURL } from "src/ts/storage/globalApi";
   import { language } from "src/lang";
@@ -11,13 +11,12 @@
   import Title from "./Title.svelte";
   import { getPatchNote } from "src/etc/patchNote";
   import { parseMarkdownSafe } from "src/ts/parser";
-  let openHub = false
   const patch = getPatchNote(appVer)
   let patchNodeHidden = true
 
 </script>
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
-    {#if !openHub}
+    {#if !$OpenRealmStore}
       <Title />
       {#if (!isTauri) && (!isNodeServer)}
         <h3 class="text-textcolor2 mt-1">Version {appVer}{webAppSubVer}</h3>
@@ -46,7 +45,7 @@
       {/if}
     {/if}
     <div class="w-full flex p-4 flex-col text-textcolor max-w-4xl">
-      {#if !openHub}
+      {#if !$OpenRealmStore}
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
           openURL("https://github.com/kwaroran/RisuAI/wiki")
@@ -61,7 +60,7 @@
       </div>
       <div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
       <h1 class="text-2xl font-bold">Recently Uploaded<button class="text-base font-medium float-right p-1 bg-darkbg rounded-md hover:ring" on:click={() => {
-        openHub = true
+        $OpenRealmStore = true
       }}>Get More</button></h1>
           {#if !$DataBase.hideRealm}
             {#await getRisuHub({
@@ -73,7 +72,7 @@
             {#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} />
+                      <RisuHubIcon onClick={() => {$OpenRealmStore = true}} chara={chara} />
                   {/each}
               </div>
             {:else}
@@ -85,7 +84,7 @@
         {/if}
       {:else}
         <div class="flex items-center mt-4">
-          <button class="mr-2 text-textcolor2 hover:text-green-500" on:click={() => (openHub = false)}>
+          <button class="mr-2 text-textcolor2 hover:text-green-500" on:click={() => ($OpenRealmStore = false)}>
             <ArrowLeft/>
           </button>
         </div>

src/ts/alert.ts

@@ -6,7 +6,7 @@ import { Capacitor } from "@capacitor/core"
 import { DataBase, type MessageGenerationInfo } from "./storage/database"
 
 interface alertData{
-    type: 'error'| 'normal'|'none'|'ask'|'wait'|'selectChar'|'input'|'toast'|'wait2'|'markdown'|'select'|'login'|'tos'|'cardexport'|'requestdata'
+    type: 'error'| 'normal'|'none'|'ask'|'wait'|'selectChar'|'input'|'toast'|'wait2'|'markdown'|'select'|'login'|'tos'|'cardexport'|'requestdata'|'addchar'
     msg: string,
     submsg?: string
 }
@@ -57,6 +57,21 @@ export async function alertNormalWait(msg:string){
     }
 }
 
+export async function alertAddCharacter() {
+    alertStore.set({
+        'type': 'addchar',
+        'msg': language.addCharacter
+    })
+    while(true){
+        if (get(alertStore).type === 'none'){
+            break
+        }
+        await sleep(10)
+    }
+
+    return get(alertStore).msg
+}
+
 export async function alertLogin(){
     alertStore.set({
         'type': 'login',

src/ts/stores.ts

@@ -39,6 +39,7 @@ export const CurrentShowMemoryLimit = writable(db.showMemoryLimit)
 export const ShowVN = writable(false)
 export const SettingsMenuIndex = writable(-1)
 export const CurrentVariablePointer = writable({} as {[key:string]: string|number|boolean})
+export const OpenRealmStore = writable(false)
 
 function createSimpleCharacter(char:character|groupChat){
     if((!char) || char.type === 'group'){