[feat] basic mainmenu

src/lang/en.ts

@@ -297,5 +297,7 @@ export const languageEnglish = {
     talkness: "Talkativeness",
     active: "Active",
     loreRandomActivation: "Use Probability Condition",
-    activationProbability: "Probability"
+    activationProbability: "Probability",
+    shareCloud: "Share to RisuRealm",
+    hub: "RisuRealm"
 }

src/lib/SideBars/CharConfig.svelte

@@ -670,7 +670,7 @@
             if(cha.type !== 'group'){
                 shareRisuHub(cha)
             }
-        }} 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">Upload Hub (experimental)</button>
+        }} 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}
     {:else}
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}

src/lib/SideBars/Sidebar.svelte

@@ -518,8 +518,8 @@
 </div>
 <div
   class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"
-  class:flex-grow={$SizeStore.w <= 1000}
+  class:flex-grow={$SizeStore.w <= 1028}
-  class:minw96={$SizeStore.w > 1000}
+  class:minw96={$SizeStore.w > 1028}
 >
   <button
     class="flex w-full justify-end text-gray-200"

src/lib/UI/Hub.svelte

@@ -12,7 +12,6 @@
     } = null
 
 </script>
-<h1 class="text-3xl font-bold mt-4">Shared Characters <Help key="experimental" /> </h1>
 <div class="w-full flex gap-4 p-2 flex-wrap">
     {#await getRisuHub() then charas}
         {#each charas as chara}

src/lib/UI/MainMenu.svelte

@@ -2,15 +2,58 @@
   import { DataBase, 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 { openURL } from "src/ts/storage/globalApi";
+  import { language } from "src/lang";
+  let openHub = false
 </script>
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
-    <h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
+    {#if !openHub}
-    <h3 class="text-gray-500 mt-1">Version {appVer}</h3>
+      <h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
-    <GithubStars />
+      <h3 class="text-gray-500 mt-1">Version {appVer}</h3>
-  <div class="w-full flex p-4 flex-col text-2xl text-white">
+      <GithubStars />
-    {#if $DataBase.useExperimental}
-      <Hub />
     {/if}
+    <div class="w-full flex p-4 flex-col text-white max-w-4xl">
+      {#if !openHub}
+      <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/RisuAI-Quick-Start")
+        }}>
+          <h1 class="text-2xl font-bold text-start">Quick Start</h1>
+          <span class="mt-2 text-gray-400 text-start">Simple Guide to start RisuAI</span>
+        </button>
+        <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")
+        }}>
+          <h1 class="text-2xl font-bold text-start">Official Wiki</h1>
+          <span class="mt-2 text-gray-400 text-start">Official Wiki for RisuAI. anyone can see and anyone who has github account can edit.</span>
+        </button>
+        <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {sideBarStore.set(true)}}>
+          <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">
+            <h1 class="text-2xl font-bold text-start">Comming soon</h1>
+            <span class="mt-2 text-gray-400 text-start">More options comming soon</span>
+          </button>
+        {/if}
+      </div>
+      {:else}
+        <div class="flex items-center mt-4">
+          <button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>
+            <ArrowLeft/>
+          </button>
+          <h1 class="text-3xl font-bold">{language.hub} <Help key="experimental" /> </h1>
+        </div>
+        <Hub />
+      {/if}
   </div>
 </div>

src/ts/stores.ts

@@ -11,7 +11,7 @@ export const SizeStore = writable({
     w: 0,
     h: 0
 })
-export const sideBarStore = writable(true)
+export const sideBarStore = writable(false)
 export const selectedCharID = writable(-1)
 export const CharEmotion = writable({} as {[key:string]: [string, string, number][]})
 export const ViewBoxsize = writable({ width: 12 * 16, height: 12 * 16 }); // Default width and height in pixels