Basic Lite version

.gitignore

@@ -42,3 +42,4 @@ __pycache__/
 .tauri/
 dist.zip
 scripts/
+.env

src/App.svelte

@@ -13,6 +13,8 @@
     import RealmFrame from './lib/UI/Realm/RealmFrame.svelte';
     import { AccountWarning } from './ts/storage/accountStorage';
     import AccountWarningComp from './lib/Others/AccountWarningComp.svelte';
+  import { isLite } from './ts/lite';
+  import LiteMain from './LiteMain.svelte';
 
     let didFirstSetup: boolean  = false
     let gridOpen = false
@@ -36,8 +38,11 @@
         </div>
     {:else if !didFirstSetup}
         <WelcomeRisu />
+    {:else if $isLite}
+        <LiteMain />
     {:else if $settingsOpen}
         <Settings />
+        
     {:else}
         {#if gridOpen}
             <GridChars endGrid={() => {gridOpen = false}} />

src/LiteMain.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { downloadRisuHub, getRisuHub } from "src/ts/characterCards";
+    import LiteCardIcon from "./lib/LiteUI/LiteCardIcon.svelte";
+  import { selectedCharID } from "./ts/stores";
+  import DefaultChatScreen from "./lib/ChatScreens/DefaultChatScreen.svelte";
+</script>
+
+<div class="w-full h-full bg-white text-black flex flex-col overflow-y-auto">
+    <div class="bg-blue-500 py-4">
+        <div class="container mx-auto flex items-center justify-between">
+            <h1 class="text-white text-2xl font-bold flex justify-center ml-4 sm:ml-0">
+                <a href="/">Lite Test</a>
+            </h1>
+            <nav class="mr-4 sm:mr-0">
+                <ul class="flex space-x-4">
+                    <li><a class="text-white" href="/account">계정</a></li>
+                    <!-- <li><a class="text-white">About</a></li>
+                    <li><a class="text-white">Contact</a></li> -->
+                </ul>
+            </nav>
+        </div>
+    </div>
+    {#if $selectedCharID === -1}
+    <div class="flex w-full mt-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ml-2 mr-2 flex-1">
+            {#await getRisuHub({
+                search: '',
+                page: 0,
+                nsfw: false,
+                sort: ''
+            })}
+                로딩중...
+            {:then cards} 
+                {#each cards as card}
+                    <LiteCardIcon card={card} on:click={async () => {
+                        await downloadRisuHub(card.id, {
+                            forceRedirect: true
+                        })
+                    }} />
+                {/each}
+            {/await}
+        </div>
+    </div>
+    {:else}
+        <div class="w-full flex justify-center flex-1">
+            <div class="h-full max-w-full" style:width="42rem">
+                <DefaultChatScreen customStyle={`backdrop-filter: blur(4px);`}/>
+            </div>
+        </div>
+    {/if}
+</div>

src/lib/ChatScreens/Chat.svelte

@@ -180,7 +180,7 @@
                         }}><ArrowLeftRightIcon size="18" /></button>
                     </span>
                 {:else if !blankMessage && !$HideIconStore}
-                    <span class="chat text-xl unmargin">{name}</span>
+                    <span class="chat text-xl unmargin text-textcolor">{name}</span>
                 {/if}
                 <div class="flex-grow flex items-center justify-end text-textcolor2">
                     <span class="text-xs">{statusMessage}</span>

src/lib/LiteUI/LiteCardIcon.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import type { hubType } from "src/ts/characterCards";
+    export let card: hubType
+</script>
+
+<button class="border p-4 flex hover:ring-2 rounded-md transition items-start justify-start" on:click>
+    <div class="bg-white rounded-md shadow-md p-4 relative w-32 h-48 min-w-32 min-h-48">
+        {#key card.img}
+            <img src={"https://sv.risuai.xyz/resource/" + card.img} alt={card.name} class="absolute inset-0 w-full h-full object-cover rounded-md">
+        {/key}
+    </div>
+    <div class="ml-4 mt-4 flex flex-col items-start text-start">
+        <h2 class="text-lg font-semibold break-all line-clamp-1">{card.name}</h2>
+        {#if card.hidden}
+            <span class="text-sm text-red-500 line-clamp-1 text-wrap max-w-full break-all whitespace-pre-wrap">Private</span>
+        {:else if card.authorname}
+            <span class="text-sm text-gray-500 line-clamp-1 text-wrap max-w-full break-all whitespace-pre-wrap">By {card.authorname}</span>
+        {/if}
+        <p class="text-xs text-gray-500 line-clamp-2 text-wrap max-w-full break-words whitespace-pre-wrap mt-2">{card.desc}</p>
+        <div class="mt-2 w-full flex flex-wrap">
+            {#each card.tags as tag}
+                {#if tag}
+                    <button class="bg-gray-200 text-gray-800 text-xs font-semibold rounded-full p-2 mt-2 ml-2">{tag}</button>
+                {/if}
+            {/each}
+        </div>
+    </div>
+</button>

src/ts/alert.ts

@@ -246,9 +246,9 @@ export async function alertCardExport(type:string = ''){
 
 export async function alertTOS(){
 
-    // if(localStorage.getItem('tos') === 'true'){
-    //     return true
-    // }
+    if(localStorage.getItem('tos') === 'true'){
+        return true
+    }
 
     alertStore.set({
         'type': 'tos',

src/ts/characterCards.ts

@@ -1264,6 +1264,7 @@ export type hubType = {
     authorname?:string
     original?:string
     type:string
+    hidden?:boolean
 }
 
 export let hubAdditionalHTML = ''
@@ -1293,8 +1294,11 @@ export async function getRisuHub(arg:{
     }
 }
 
-export async function downloadRisuHub(id:string) {
+export async function downloadRisuHub(id:string, arg:{
+    forceRedirect?: boolean
+} = {}) {
     try {
+        if(!arg.forceRedirect){
             if(!(await alertTOS())){
                 return
             }
@@ -1302,6 +1306,7 @@ export async function downloadRisuHub(id:string) {
                 type: "wait",
                 msg: "Downloading..."
             })
+        }
         const res = await fetch("https://realm.risuai.net/api/v1/download/png-v3/" + id + '?cors=true', {
             headers: {
                 "x-risu-api-version": "4"
@@ -1319,7 +1324,7 @@ export async function downloadRisuHub(id:string) {
             })
             checkCharOrder()
             let db = get(DataBase)
-            if(db.characters[db.characters.length-1] && db.goCharacterOnImport){
+            if(db.characters[db.characters.length-1] && (db.goCharacterOnImport || arg.forceRedirect)){
                 const index = db.characters.length-1
                 characterFormatUpdate(index);
                 selectedCharID.set(index);
@@ -1328,16 +1333,22 @@ export async function downloadRisuHub(id:string) {
         }
     
         const result = await res.json()
-        const data:CharacterCardV2Risu = result.card
+        const data:CharacterCardV3 = result.card
         const img:string = result.img
 
+        data.data.extensions.risuRealmImportId = id
+    
         await importCharacterCardSpec(data, await getHubResources(img), 'hub')
         checkCharOrder()
         let db = get(DataBase)
-        if(db.characters[db.characters.length-1] && db.goCharacterOnImport){
+        if(db.characters[db.characters.length-1] && (db.goCharacterOnImport || arg.forceRedirect)){
             const index = db.characters.length-1
             characterFormatUpdate(index);
             selectedCharID.set(index);
+            alertStore.set({
+                type: 'none',
+                msg: ''
+            })
         }
     } catch (error) {
         console.error(error)

src/ts/gui/colorscheme.ts

@@ -3,6 +3,7 @@ import { DataBase, setDatabase } from "../storage/database";
 import { downloadFile } from "../storage/globalApi";
 import { BufferToText, selectSingleFile } from "../util";
 import { alertError } from "../alert";
+import { isLite } from "../lite";
 
 export interface ColorScheme{
     bgcolor: string;
@@ -119,6 +120,10 @@ export function updateColorScheme(){
         colorScheme = structuredClone(defaultColorScheme)
     }
 
+    if(get(isLite)){
+        colorScheme = structuredClone(colorShemes.light)
+    }
+
     //set css variables
     document.documentElement.style.setProperty("--risu-theme-bgcolor", colorScheme.bgcolor);
     document.documentElement.style.setProperty("--risu-theme-darkbg", colorScheme.darkbg);
@@ -180,9 +185,11 @@ export function updateTextTheme(){
     if(!root){
         return
     }
-    switch(db.textTheme){
+    let textTheme = get(isLite) ? 'standard' : db.textTheme
+    let colorScheme = get(isLite) ? 'light' : db.colorScheme.type
+    switch(textTheme){
         case "standard":{
-            if(db.colorScheme.type === 'dark'){
+            if(colorScheme === 'dark'){
                 root.style.setProperty('--FontColorStandard', '#fafafa');
                 root.style.setProperty('--FontColorItalic', '#8C8D93');
                 root.style.setProperty('--FontColorBold', '#fafafa');
@@ -200,7 +207,7 @@ export function updateTextTheme(){
             break
         }
         case "highcontrast":{
-            if(db.colorScheme.type === 'dark'){
+            if(colorScheme === 'dark'){
                 root.style.setProperty('--FontColorStandard', '#f8f8f2');
                 root.style.setProperty('--FontColorItalic', '#F1FA8C');
                 root.style.setProperty('--FontColorBold', '#8BE9FD');

src/ts/lite.ts

@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+
+if(import.meta.env.DEV){
+    console.log(`Lite Mode: ${import.meta.env.VITE_RISU_LITE}`)
+}
+export const isLite = writable(import.meta.env.VITE_RISU_LITE === 'TRUE')