사소한 리팩토링 2

src/routes/(fullscreen)/settings/cache/+page.svelte

@@ -15,7 +15,9 @@
   }
 
   let fileCache: FileCache[] | undefined = $state();
-  let fileCacheTotalSize = $state(0);
+  let fileCacheTotalSize = $derived(
+    fileCache?.reduce((acc, { index }) => acc + index.size, 0) ?? 0,
+  );
 
   const deleteFileCache = async (fileId: number) => {
     await doDeleteFileCache(fileId);
@@ -29,18 +31,9 @@
       $masterKeyStore?.get(1)?.key!,
     );
     fileCache = indexes
-      .map((index, i) => ({
-        index,
-        info: infos.get(index.fileId)!,
-      }))
+      .map((index) => ({ index, info: infos.get(index.fileId)! }))
       .sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
   });
-
-  $effect(() => {
-    if (fileCache) {
-      fileCacheTotalSize = fileCache.reduce((acc, { index }) => acc + index.size, 0);
-    }
-  });
 </script>
 
 <svelte:head>
@@ -59,7 +52,7 @@
         <p>캐시를 삭제하더라도 원본 파일은 삭제되지 않아요.</p>
       </div>
       <div class="space-y-2">
-        {#each fileCache as { index, info }}
+        {#each fileCache as { index, info } (info.id)}
           <File {index} {info} onDeleteClick={deleteFileCache} />
         {/each}
       </div>

src/routes/(fullscreen)/settings/thumbnail/+page.svelte

@@ -7,11 +7,7 @@
   import { bulkGetFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
-  import {
-    persistentStates,
-    getGenerationStatus,
-    requestThumbnailGeneration,
-  } from "./service.svelte";
+  import { persistentStates, requestThumbnailGeneration } from "./service.svelte";
 
   import IconDelete from "~icons/material-symbols/delete";
 
@@ -55,7 +51,7 @@
             {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
           </p>
           <div class="space-y-2">
-            {#each persistentStates.files as { info, status }}
+            {#each persistentStates.files as { info, status } (info.id)}
               {#if info.exists}
                 <File
                   {info}