Merge branch 'main' of https://github.com/kwaroran/RisuAI

src/lib/SideBars/Sidebar.svelte

@@ -37,9 +37,9 @@
     import SidebarAvatar from "./SidebarAvatar.svelte";
     import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
     import { get } from "svelte/store";
-    import { getCharacterIndexObject } from "src/ts/util";
+    import { getCharacterIndexObject, selectSingleFile } from "src/ts/util";
     import { v4 } from "uuid";
-    import { checkCharOrder } from "src/ts/globalApi.svelte";
+    import { checkCharOrder, getFileSrc, saveAsset } 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";
@@ -59,7 +59,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 +109,8 @@
           type: "folder",
           id: folder.id,
           name: folder.name,
-          color: folder.color
+          color: folder.color,
+          img: folder.img,
         });
       }
     }
@@ -472,10 +473,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 +502,40 @@
                   db.characterOrder[ind] = oder
                   setDatabase(db)
                 }
+                else if(sel === 2) {
+                  const sel = parseInt(await alertSelect(['Reset to Default Image', 'Select Image File']))
+                  const db = DBState.db
+                  const oder = db.characterOrder[ind]
+                  if(typeof(oder) === 'string'){
+                    return
+                  }
+
+                  switch (sel) {
+                    case 0:
+                      oder.imgFile = null
+                      oder.img = ''
+                      break;
+                  
+                    case 1:
+                      const folderImage = await selectSingleFile([
+                        'png',
+                        'jpg',
+                        'webp',
+                      ])
+
+                      if(!folderImage) {
+                        return
+                      }
+
+                      const folderImageData = await saveAsset(folderImage.data)
+
+                      oder.imgFile = folderImageData
+                      oder.img = await getFileSrc(folderImageData)
+                      db.characterOrder[ind] = oder
+                      setDatabase(db)
+                      break;
+                  }
+                }
               }}
               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