Add show folder name option

src/lang/en.ts

@@ -1064,4 +1064,5 @@ export const languageEnglish = {
     localActivationInGlobalLorebook: "Local Activation in Global Lorebook",
     cachePoint: "Cache Point",
     all: "All",
+    showFolderNameInIcon: "Show Folder Name in Icon",
 }

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -246,6 +246,10 @@
         <Check bind:check={DBState.db.hideRealm} name={language.hideRealm}/>
     </div>
 
+    <div class="flex items-center mt-2">
+        <Check bind:check={DBState.db.showFolderName} name={language.showFolderNameInIcon}/>
+    </div>
+
     <div class="flex items-center mt-2">
         <Check check={DBState.db.customBackground !== ''} onChange={async (check) => {
             if(check){

src/lib/SideBars/Sidebar.svelte

@@ -549,7 +549,11 @@
                 }
                 openFolders = openFolders
               }}>
-                {#if openFolders.includes(char.id)}
+                {#if DBState.db.showFolderName}
+                  <div class="h-full w-full flex justify-center items-center">
+                    <span class="hyphens-auto truncate font-bold">{char.name}</span>
+                  </div>
+                {:else if openFolders.includes(char.id)}
                   <FolderOpenIcon />
                 {:else}
                   <FolderIcon />

src/ts/storage/database.svelte.ts

@@ -924,6 +924,7 @@ export interface Database{
         model: string,       
     },
     localActivationInGlobalLorebook: boolean
+    showFolderName: boolean
 }
 
 interface SeparateParameters{