Add functionality to update char folder images

src/lang/en.ts

@@ -490,6 +490,7 @@ export const languageEnglish = {
     cancel: "Cancel",
     renameFolder: "Rename Folder",
     changeFolderColor: "Change Folder Color",
+    changeFolderImage: "Change Folder Image",
     fullWordMatching: "Full Word Matching",
     botSettingAtStart: "Bot Menu when Launch",
     triggerStart: "On chat Send",

src/lang/ko.ts

@@ -441,6 +441,7 @@ export const languageKorean = {
     "cancel": "취소",
     "renameFolder": "폴더 이름 변경하기",
     "changeFolderColor": "폴더 색상 변경하기",
+    "changeFolderImage": "폴더 이미지 변경하기",
     "fullWordMatching": "단어 단위 매칭",
     "botSettingAtStart": "실행 시 봇 설정으로 시작하기",
     "triggerStart": "채팅 보낼 시",

src/lib/SideBars/Sidebar.svelte

@@ -39,12 +39,13 @@
     import { get } from "svelte/store";
     import { getCharacterIndexObject } from "src/ts/util";
     import { v4 } from "uuid";
-    import { checkCharOrder } from "src/ts/globalApi.svelte";
+    import { checkCharOrder, getFileSrc } from "src/ts/globalApi.svelte";
     import { alertInput, alertSelect } from "src/ts/alert";
     import SideChatList from "./SideChatList.svelte";
     import { ConnectionIsHost, ConnectionOpenStore, RoomIdStore } from "src/ts/sync/multiuser";
   import { sideBarSize } from "src/ts/gui/guisize";
   import DevTool from "./DevTool.svelte";
+  import { getModuleAssets } from 'src/ts/process/modules';
   let sideBarMode = $state(0);
   let editMode = $state(false);
   let menuMode = $state(0);
@@ -59,7 +60,7 @@
   }
 
   type sortTypeNormal = { type:'normal',img: string, index: number, name:string }
-  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string, name:string, color:string}
+  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string, name:string, color:string, img?:string}
   let charImages: sortType[] = $state([]);
   let IconRounded = $state(false)
   let openFolders:string[] = $state([])
@@ -109,7 +110,8 @@
           type: "folder",
           id: folder.id,
           name: folder.name,
-          color: folder.color
+          color: folder.color,
+          img: folder.img,
         });
       }
     }
@@ -472,10 +474,10 @@
           {:else if char.type === "folder"}
             {#key char.color}
             {#key char.name}
-              <SidebarAvatar src="slot" size="56" rounded={IconRounded} bordered name={char.name} color={char.color}
+              <SidebarAvatar src="slot" size="56" rounded={IconRounded} bordered name={char.name} color={char.color} backgroundimg={char.img}
               oncontextmenu={async (e) => {
                 e.preventDefault()
-                const sel = parseInt(await alertSelect([language.renameFolder,language.changeFolderColor,language.cancel]))
+                const sel = parseInt(await alertSelect([language.renameFolder,language.changeFolderColor,language.changeFolderImage,language.cancel]))
                 if(sel === 0){
                   const v = await alertInput(language.changeFolderName)
                   const db = DBState.db
@@ -501,6 +503,36 @@
                   db.characterOrder[ind] = oder
                   setDatabase(db)
                 }
+                else if(sel === 2) {
+                  let assetPaths:{[key:string]:{
+                      path:string
+                  }} = {}
+
+                  assetPaths["Default"] = {
+                    path: "",
+                  }
+
+                  const moduleAssets = getModuleAssets()
+                  if(moduleAssets.length > 0){
+                      for(const asset of moduleAssets){
+                          const assetPath = await getFileSrc(asset[1])
+                          assetPaths[asset[0].toLocaleLowerCase()] = {
+                              path: assetPath,
+                          }
+                      }
+                  }
+                  
+                  const assetNames = Object.keys(assetPaths)
+                  const sel = parseInt(await alertSelect(assetNames))
+                  const db = DBState.db
+                  const oder = db.characterOrder[ind]
+                  if(typeof(oder) === 'string'){
+                    return
+                  }
+                  oder.img = assetPaths[assetNames[sel]].path
+                  db.characterOrder[ind] = oder
+                  setDatabase(db)
+                }
               }}
               onClick={() => {
                 if(char.type !== 'folder'){

src/lib/SideBars/SidebarAvatar.svelte

@@ -9,6 +9,7 @@
     onClick?: any;
     bordered?: boolean;
     color?: string;
+    backgroundimg?: string;
     children?: import('svelte').Snippet;
     oncontextmenu?: (event: MouseEvent & {
         currentTarget: EventTarget & HTMLDivElement;
@@ -23,6 +24,7 @@
     onClick = () => {},
     bordered = false,
     color = '',
+    backgroundimg = '',
     children,
     oncontextmenu
   }: Props = $props();
@@ -55,8 +57,15 @@
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}
+        style:background-image={backgroundimg ? `url('${backgroundimg}')` : undefined}
+        style:background-size={backgroundimg ? "cover" : undefined}
+        style:background-position={backgroundimg ? "center" : undefined}
         class:rounded-md={!rounded} class:rounded-full={rounded} 
-      >{@render children?.()}</div>
+      >
+      {#if !backgroundimg}
+        {@render children?.()}
+      {/if}
+    </div>
     {:else}
       {#await src}
         <div

src/ts/storage/database.svelte.ts

@@ -1203,6 +1203,7 @@ export interface folder{
     data:string[]
     color:string
     id:string
+    img?:string
 }