캐시 목록 페이지 추가

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>

src/routes/(fullscreen)/setting/cache/File.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { FileCacheIndex } from "$lib/indexedDB";
+  import type { FileInfo } from "$lib/stores";
+  import { formatDate, formatFileSize } from "./service";
+
+  import IconDraft from "~icons/material-symbols/draft";
+  import IconScanDelete from "~icons/material-symbols/scan-delete";
+  // import IconDelete from "~icons/material-symbols/delete";
+
+  interface Props {
+    index: FileCacheIndex;
+    info: Writable<FileInfo | null>;
+  }
+
+  let { index, info }: Props = $props();
+</script>
+
+<div class="flex h-14 items-center gap-x-4 p-2">
+  {#if $info}
+    <div class="flex-shrink-0 rounded-full bg-blue-100 p-1 text-xl">
+      <IconDraft class="text-blue-400" />
+    </div>
+  {:else}
+    <div class="flex-shrink-0 rounded-full bg-red-100 p-1 text-xl">
+      <IconScanDelete class="text-red-400" />
+    </div>
+  {/if}
+  <div class="flex flex-grow flex-col overflow-hidden">
+    {#if $info}
+      <p title={$info.name} class="truncate font-medium">{$info.name}</p>
+    {:else}
+      <p class="font-medium">삭제된 파일</p>
+    {/if}
+    <p class="text-xs text-gray-800">
+      읽음 {formatDate(index.lastRetrievedAt)} · {formatFileSize(index.size)}
+    </p>
+  </div>
+  <!-- <button class="flex-shrink-0 rounded-full p-1 active:bg-gray-100">
+    <IconDelete class="text-lg text-gray-600" />
+  </button> -->
+</div>

src/routes/(fullscreen)/setting/cache/service.ts

@@ -0,0 +1 @@
+export { formatDate, formatFileSize } from "$lib/modules/util";