[feat] folder custom

src/lang/en.ts

@@ -353,4 +353,8 @@ export const languageEnglish = {
     inputBotGenerationPrompt: "Input Bot Generation Prompt",
     createBotAI: "Create OC Bot from AI",
     createBotwithAI: "Create Bot from AI",
+    changeFolderName: "Input the new folder name (blank to cancel)",
+    cancel: "Cancel",
+    renameFolder: "Rename Folder",
+    changeFolderColor: "Change Folder Color",
 }

src/lib/SideBars/Sidebar.svelte

@@ -40,6 +40,7 @@
   import { BotCreator } from "src/ts/creation/creator";
   import Button from "../UI/GUI/Button.svelte";
   import { fly } from "svelte/transition";
+  import { alertInput, alertSelect } from "src/ts/alert";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -90,7 +91,7 @@
   }
 
   type sortTypeNormal = { type:'normal',img: string, index: number, name:string }
-  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string, name:string}
+  type sortType =  sortTypeNormal|{type:'folder',folder:sortTypeNormal[],id:string, name:string, color:string}
   let charImages: sortType[] = [];
   let IconRounded = false
   let openFolders:string[] = []
@@ -132,7 +133,8 @@
           folder: folderCharImages,
           type: "folder",
           id: folder.id,
-          name: folder.name
+          name: folder.name,
+          color: folder.color
         });
       }
     }
@@ -407,30 +409,73 @@
           {#if char.type === 'normal'}
             <SidebarAvatar src={char.img ? getCharImage(char.img, "plain") : "/none.webp"} size="56" rounded={IconRounded} name={char.name} />
           {:else if char.type === "folder"}
-            <SidebarAvatar src="slot" size="56" rounded={IconRounded} bordered name={char.name} onClick={() => {
+            {#key char.color}
-              if(char.type !== 'folder'){
+            {#key char.name}
-                return
+              <SidebarAvatar src="slot" size="56" rounded={IconRounded} bordered name={char.name} color={char.color}
-              }
+              on:contextmenu={async (e) => {
-              if(openFolders.includes(char.id)){
+                e.preventDefault()
-                openFolders.splice(openFolders.indexOf(char.id), 1)
+                const sel = parseInt(await alertSelect([language.renameFolder,language.changeFolderColor,language.cancel]))
-              }
+                if(sel === 0){
-              else{
+                  const v = await alertInput(language.changeFolderName)
-                openFolders.push(char.id)
+                  const db = get(DataBase)
-              }
+                  if(v){
-              openFolders = openFolders
+                    const oder = db.characterOrder[ind]
-            }}>
+                    if(typeof(oder) === 'string'){
-              {#if openFolders.includes(char.id)}
+                      return
-                <FolderOpenIcon />
+                    }
-              {:else}
+                    oder.name = v
-                <FolderIcon />
+                    db.characterOrder[ind] = oder
-              {/if}
+                    setDatabase(db)
-            </SidebarAvatar>
+                  }
+                }
+                else if(sel === 1){
+                  const colors = ["red","green","blue","yellow","indigo","purple","pink","default"]
+                  const sel = parseInt(await alertSelect(colors))
+                  const db = get(DataBase)
+                  const oder = db.characterOrder[ind]
+                  if(typeof(oder) === 'string'){
+                    return
+                  }
+                  oder.color = colors[sel].toLocaleLowerCase()
+                  db.characterOrder[ind] = oder
+                  setDatabase(db)
+                }
+              }}
+              onClick={() => {
+                if(char.type !== 'folder'){
+                  return
+                }
+                if(openFolders.includes(char.id)){
+                  openFolders.splice(openFolders.indexOf(char.id), 1)
+                }
+                else{
+                  openFolders.push(char.id)
+                }
+                openFolders = openFolders
+              }}>
+                {#if openFolders.includes(char.id)}
+                  <FolderOpenIcon />
+                {:else}
+                  <FolderIcon />
+                {/if}
+              </SidebarAvatar>
+            {/key}
+            {/key}
           {/if}
         </div>
       </div>
       {#if char.type === 'folder' && openFolders.includes(char.id)}
+        {#key char.color}
         <div class="p-1 flex flex-col items-center py-1 mt-1 rounded-lg relative">
-          <div class="absolute top-0 left-1 bg-darkbg border border-selected w-full h-full rounded-lg z-0"></div>
+          <div class="absolute top-0 left-1  border border-selected w-full h-full rounded-lg z-0 bg-opacity-20"
+          class:bg-darkbg={char.color === 'default' || char.color === ''}
+          class:bg-red-700={char.color === 'red'}
+          class:bg-yellow-700={char.color === 'yellow'}
+          class:bg-green-700={char.color === 'green'}
+          class:bg-blue-700={char.color === 'blue'}
+          class:bg-indigo-700={char.color === 'indigo'}
+          class:bg-purple-700={char.color === 'purple'}
+          class:bg-pink-700={char.color === 'pink'}></div>
           <div class="h-4 min-h-4 w-14 relative z-10" on:dragover={(e) => {
             e.preventDefault()
             e.dataTransfer.dropEffect = 'move'
@@ -491,6 +536,7 @@
             }} on:dragenter={preventAll}/>
           {/each}
         </div>
+        {/key}
       {/if}
       <div class="h-4 min-h-4 w-14" on:dragover|preventDefault={(e) => {
         e.dataTransfer.dropEffect = 'move'

src/lib/SideBars/SidebarAvatar.svelte

@@ -7,6 +7,7 @@
   export let size = "22";
   export let onClick = () => {}
   export let bordered = false
+  export let color:string = ''
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -14,11 +15,22 @@
       class:border = {bordered}
       class:border-selected={bordered}
       class:rounded-md={bordered}
+      on:contextmenu
       on:click={onClick} use:tooltipRight={name}>
   {#if src}
     {#if src === "slot"}
       <div
-        class="bg-skin-border sidebar-avatar rounded-md bg-top bg-darkbg flex items-center justify-center"
+        class="bg-skin-border sidebar-avatar rounded-md bg-top flex items-center justify-center bg-opacity-50"
+        class:bg-darkbg={color === 'default' || color === ''}
+        class:bg-red-700={color === 'red'}
+        class:bg-yellow-700={color === 'yellow'}
+        class:bg-green-700={color === 'green'}
+        class:bg-blue-700={color === 'blue'}
+        class:bg-indigo-700={color === 'indigo'}
+        class:bg-purple-700={color === 'purple'}
+        class:bg-pink-700={color === 'pink'}
+
+
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}