캐시 목록 페이지 추가

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { TopBar } from "$lib/components";
+  import type { FileCacheIndex } from "$lib/indexedDB";
+  import { getFileCacheIndex } from "$lib/modules/cache";
+  import { getFileInfo } from "$lib/modules/file";
+  import { masterKeyStore, type FileInfo } from "$lib/stores";
+  import File from "./File.svelte";
+  import { formatFileSize } from "./service";
+
+  interface FileCache {
+    index: FileCacheIndex;
+    fileInfo: Writable<FileInfo | null>;
+  }
+
+  let fileCache: FileCache[] | undefined = $state();
+  let fileCacheTotalSize = $state(0);
+
+  onMount(() => {
+    fileCache = getFileCacheIndex()
+      .map((index) => ({
+        index,
+        fileInfo: getFileInfo(index.fileId, $masterKeyStore?.get(1)?.key!),
+      }))
+      .sort((a, b) => a.index.lastRetrievedAt.getTime() - b.index.lastRetrievedAt.getTime());
+    fileCacheTotalSize = fileCache.reduce((acc, { index }) => acc + index.size, 0);
+  });
+</script>
+
+<svelte:head>
+  <title>캐시 설정</title>
+</svelte:head>
+
+<div class="flex h-full flex-col">
+  <TopBar title="캐시" />
+  {#if fileCache}
+    <div class="space-y-4 pb-4">
+      <div class="space-y-1 break-keep text-gray-800">
+        <p>
+          {fileCache.length}개 파일이 캐시되어 {formatFileSize(fileCacheTotalSize)}를 사용하고
+          있어요.
+        </p>
+        <p>캐시를 삭제하더라도 원본 파일은 삭제되지 않아요.</p>
+      </div>
+      <div class="space-y-2">
+        {#each fileCache as { index, fileInfo }}
+          <File {index} info={fileInfo} />
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">캐시 목록을 불러오고 있어요.</p>
+    </div>
+  {/if}
+</div>