[refactor] performance improvements

src/lib/SideBars/Sidebar.svelte

@@ -73,6 +73,7 @@
   }
 
   let charImages: string[] = [];
+  let IconRounded = false
 
   const unsub = DataBase.subscribe((db) => {
     let newCharImages: string[] = [];
@@ -82,6 +83,9 @@
     if (!isEqual(charImages, newCharImages)) {
       charImages = newCharImages;
     }
+    if(IconRounded !== db.roundIcons){
+      IconRounded = db.roundIcons
+    }
   });
 
   onDestroy(unsub);
@@ -117,7 +121,7 @@
             }}
             tabindex="0"
           >
-            <SidebarAvatar src={getCharImage($DataBase.characters[i].image, "plain")} size="56" />
+            <SidebarAvatar src={getCharImage($DataBase.characters[i].image, "plain")} size="56" rounded={IconRounded} />
           </div>
         {:else}
           <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -132,7 +136,7 @@
             }}
             tabindex="0"
           >
-            <SidebarAvatar size="56" src="https://via.placeholder.com/150" />
+            <SidebarAvatar size="56" src="https://via.placeholder.com/150" rounded={IconRounded} />
           </div>
         {/if}
         {#if editMode}

src/lib/SideBars/SidebarAvatar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { DataBase } from "src/ts/database";
+  export let rounded:boolean
-
   export let src:string|Promise<string>;
   export let size = "22";
 </script>
@@ -13,7 +12,7 @@
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}
-        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} 
+        class:rounded-md={!rounded} class:rounded-full={rounded} 
       />
     {:then img}
       <img
@@ -22,7 +21,7 @@
         style:width={size + "px"}
         style:height={size + "px"}
         style:minWidth={size + "px"}
-        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} 
+        class:rounded-md={!rounded} class:rounded-full={rounded} 
         alt="avatar"
       />
     {/await}
@@ -32,7 +31,7 @@
       style:width={size + "px"}
       style:height={size + "px"}
       style:minWidth={size + "px"}
-      class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} 
+      class:rounded-md={!rounded} class:rounded-full={rounded} 
     />
   {/if}
 </span>