Rework catalog and add trash

src/lang/en.ts

@@ -595,4 +595,8 @@ export const languageEnglish = {
     dynamicAssets: "Dynamic Assets",
     dynamicAssetsEditDisplay: "Use Dynamic Assets in Display",
     longTermMemory: "Long Term Memory",
+    grid: "Grid",
+    list: "List",
+    trash: "Trash",
+    trashDesc: "Deleted characters are moved to trash. you can restore or delete them permanently. deleted characters are automatically purged after 3 days.",
 }

src/lib/Others/GridCatalog.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-    import { characterFormatUpdate, getCharImage } from "../../ts/characters";
-    import { DataBase } from "../../ts/storage/database";
+    import { characterFormatUpdate, getCharImage, removeChar } from "../../ts/characters";
+    import { DataBase, type Database } from "../../ts/storage/database";
     import BarIcon from "../SideBars/BarIcon.svelte";
-    import { User, Users } from "lucide-svelte";
+    import { ArrowLeft, User, Users, Inspect, TrashIcon, Undo2Icon } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
     import TextInput from "../UI/GUI/TextInput.svelte";
+    import Button from "../UI/GUI/Button.svelte";
+    import { language } from "src/lang";
+    import { parseMultilangString } from "src/ts/util";
+  import { checkCharOrder } from "src/ts/storage/globalApi";
     export let endGrid = () => {}
     let search = ''
+    let selected = 0
 
     function changeChar(index = -1){
         characterFormatUpdate(index)
@@ -14,35 +19,61 @@
         endGrid()
     }
 
-    function formatChars(search:string){
+    function formatChars(search:string, db:Database, trash = false){
         let charas:{
             image:string
             index:number
-            type:string
+            type:string,
+            name:string
+            desc:string
         }[] = []
 
-        for(let i=0;i<$DataBase.characters.length;i++){
-            const c = $DataBase.characters[i]
+        for(let i=0;i<db.characters.length;i++){
+            const c = db.characters[i]
+            if(c.trashTime && !trash){
+                continue
+            }
+            if(!c.trashTime && trash){
+                continue
+            }
             if(c.name.replace(/ /g,"").toLocaleLowerCase().includes(search.toLocaleLowerCase().replace(/ /g,""))){
                 charas.push({
                     image: c.image,
                     index: i,
-                    type: c.type
+                    type: c.type,
+                    name: c.name,
+                    desc: c.creatorNotes ?? 'No description'
                 })
             }
         }
         return charas
-        
     }
 </script>
 
 <div class="h-full w-full flex justify-center">
-    <div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
-        <h1 class="text-textcolor text-2xl font-bold mt-2">Catalog</h1>
-        <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
+    <div class="h-full p-6 bg-darkbg max-w-full w-2xl flex flex-col overflow-y-auto">
+        <h1 class="text-textcolor text-2xl font-bold mt-2 flex items-center mx-4 mb-2">
+            <button class="mr-2 hover:text-textcolor text-textcolor2"><ArrowLeft /></button>
+            <span>Catalog</span>
+        </h1>
+        <div class="mx-4 mb-6 flex flex-col">
+            <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off"/>
+            <div class="flex flex-wrap gap-2 mt-2">
+                <Button selected={selected === 0} size="sm" on:click={() => {selected = 0}}>
+                    {language.grid}
+                </Button>
+                <Button selected={selected === 1} size="sm" on:click={() => {selected = 1}}>
+                    {language.list}
+                </Button>
+                <Button selected={selected === 2} size="sm" on:click={() => {selected = 2}}>
+                    {language.trash}
+                </Button>
+            </div>
+        </div>
+        {#if selected === 0}
             <div class="w-full flex justify-center">
-            <div class="flex flex-wrap gap-2 mx-auto container">
-                {#each formatChars(search) as char}
+                <div class="flex flex-wrap gap-2 w-full justify-center">
+                    {#each formatChars(search, $DataBase) as char}
                         <div class="flex items-center text-textcolor">
                             {#if char.image}
                                 <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
@@ -59,14 +90,52 @@
                     {/each}
                 </div>
             </div>
+        {:else if selected === 1}
+            {#each formatChars(search, $DataBase) as char}
+                <div class="flex p-2 border border-darkborderc rounded-md mb-2">
+                    <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
+                    <div class="flex-1 flex flex-col ml-2">
+                        <h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
+                        <span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
+                        <div class="flex gap-2 justify-end">
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                changeChar(char.index)
+                            }}>
+                                <Inspect />
+                            </button>
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                removeChar(char.index, char.name)
+                            }}>
+                                <TrashIcon />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+        {:else if selected === 2}
+            <span class="text-textcolor2 text-sm mb-2">{language.trashDesc}</span>
+            {#each formatChars(search, $DataBase, true) as char}
+                <div class="flex p-2 border border-darkborderc rounded-md mb-2">
+                    <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
+                    <div class="flex-1 flex flex-col ml-2">
+                        <h4 class="text-textcolor font-bold text-lg mb-1">{char.name || "Unnamed"}</h4>
+                        <span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
+                        <div class="flex gap-2 justify-end">
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                $DataBase.characters[char.index].trashTime = undefined
+                                checkCharOrder()
+                            }}>
+                                <Undo2Icon />
+                            </button>
+                            <button class="hover:text-textcolor text-textcolor2" on:click={() => {
+                                removeChar(char.index, char.name, 'permanent')
+                            }}>
+                                <TrashIcon />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+        {/if}
     </div>
 </div>
-
-<style>
-    @media (max-width: 640px) {
-        .container {
-            justify-content: center;
-            width: fit-content;
-        }
-    }
-</style>

src/lib/SideBars/CharConfig.svelte

@@ -5,7 +5,7 @@
     import { selectedCharID } from "../../ts/stores";
     import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, User, CurlyBraces, Volume2Icon } from 'lucide-svelte'
     import Check from "../UI/GUI/CheckInput.svelte";
-    import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
+    import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage, removeChar } from "../../ts/characters";
     import LoreBook from "./LoreBook/LoreBookSetting.svelte";
     import { alertConfirm, alertNormal, alertSelectChar, alertTOS, showHypaV2Alert } from "../../ts/alert";
     import BarIcon from "./BarIcon.svelte";
@@ -874,20 +874,7 @@
         {/if}
     {/if}
     <Button on:click={async () => {
-        const conf = await alertConfirm(language.removeConfirm + currentChar.data.name)
-        if(!conf){
-            return
-        }
-        const conf2 = await alertConfirm(language.removeConfirm2 + currentChar.data.name)
-        if(!conf2){
-            return
-        }
-        let chars = $DataBase.characters
-        chars.splice($selectedCharID, 1)
-        checkCharOrder()
-        $selectedCharID = -1
-        $DataBase.characters = chars
-
+        removeChar($selectedCharID, currentChar.data.name)
     }} className="mt-2" size="sm">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</Button>
 {/if}
 

src/ts/characters.ts

@@ -1,6 +1,6 @@
 import { get, writable } from "svelte/store";
 import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc } from "./storage/database";
-import { alertError, alertNormal, alertSelect, alertStore } from "./alert";
+import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert";
 import { language } from "../lang";
 import { decode as decodeMsgpack } from "msgpackr";
 import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util";
@@ -509,3 +509,28 @@ export async function addDefaultCharacters() {
         msg: ''
     })
 }
+
+export async function removeChar(index:number,name:string, type:'normal'|'permanent'|'permanentForce' = 'normal'){
+    const db = get(DataBase)
+    if(type !== 'permanentForce'){
+        const conf = await alertConfirm(language.removeConfirm + name)
+        if(!conf){
+            return
+        }
+        const conf2 = await alertConfirm(language.removeConfirm2 + name)
+        if(!conf2){
+            return
+        }
+    }
+    let chars = db.characters
+    if(type === 'normal'){
+        chars[index].trashTime = Date.now()
+    }
+    else{
+        chars.splice(index, 1)
+    }
+    checkCharOrder()
+    db.characters = chars
+    setDatabase(db)
+    selectedCharID.set(-1)
+}

src/ts/storage/database.ts

@@ -772,6 +772,7 @@ export interface character{
     vits?: OnnxModelFiles
     realmId?:string
     imported?:boolean
+    trashTime?:number
 }
 
 
@@ -815,6 +816,7 @@ export interface groupChat{
     oneAtTime?:boolean
     virtualscript?:string
     lorePlus?:boolean
+    trashTime?:number
 }
 
 export interface botPreset{

src/ts/storage/globalApi.ts

@@ -977,6 +977,14 @@ async function checkNewFormat() {
     if(db.mainPrompt === oldJailbreak){
         db.mainPrompt = defaultJailbreak
     }
+    for(let i=0;i<db.characters.length;i++){
+        const trashTime = db.characters[i].trashTime
+        const targetTrashTime = trashTime ? trashTime + 1000 * 60 * 60 * 24 * 3 : 0
+        if(trashTime && targetTrashTime < Date.now()){
+            db.characters.splice(i,1)
+            i--
+        }
+    }
     setDatabase(db)
     checkCharOrder()
 }
@@ -997,10 +1005,13 @@ export function checkCharOrder() {
     let charIdList:string[] = []
 
     for(let i=0;i<db.characters.length;i++){
-        const charId = db.characters[i].chaId
+        const char = db.characters[i]
+        const charId = char.chaId
+        if(!char.trashTime){
             charIdList.push(charId)
+        }
         if(!ordered.includes(charId)){
-            if(charId !== '§temp' && charId !== '§playground'){
+            if(charId !== '§temp' && charId !== '§playground' && !char.trashTime){
                 db.characterOrder.push(charId)
             }
         }