Refactor char folder image upload process to use direct upload method

src/lib/SideBars/Sidebar.svelte

@@ -37,15 +37,14 @@
     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, getFileSrc } 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";
   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);
@@ -504,34 +503,38 @@
                   setDatabase(db)
                 }
                 else if(sel === 2) {
-                  let assetPaths:{[key:string]:{
+                  const sel = parseInt(await alertSelect(['Reset to Default Image', 'Select Image File']))
-                      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
+                  switch (sel) {
-                  setDatabase(db)
+                    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={() => {

src/ts/globalApi.svelte.ts

@@ -1081,6 +1081,14 @@ export function getUnpargeables(db: Database, uptype: 'basename' | 'pure' = 'bas
             addUnparge(v.icon);
         });
     }
+
+    if(db.characterOrder){
+        db.characterOrder.forEach((item) => {
+            if (typeof item === 'object' && 'imgFile' in item) {
+                addUnparge(item.imgFile);
+            }
+        })
+    }
     return unpargeable;
 }
 

src/ts/storage/database.svelte.ts

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