Add show folder name option

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/lib/SideBars/Toggles.svelte

@@ -5,9 +5,9 @@
     import CheckInput from "../UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import type { character, groupChat } from "src/ts/storage/database.svelte";
-  import SelectInput from "../UI/GUI/SelectInput.svelte";
-  import OptionInput from "../UI/GUI/OptionInput.svelte";
-  import TextInput from "../UI/GUI/TextInput.svelte";
+    import SelectInput from "../UI/GUI/SelectInput.svelte";
+    import OptionInput from "../UI/GUI/OptionInput.svelte";
+    import TextInput from "../UI/GUI/TextInput.svelte";
 
     interface Props {
         chara?: character|groupChat