파일 업로드/다운로드 현황을 모두 볼 수 있는 페이지 구현

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import type { FileCacheIndex } from "$lib/indexedDB";
+  import type { FileInfo } from "$lib/modules/filesystem";
+  import { formatDate, formatFileSize } from "$lib/modules/util";
+
+  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>;
+    onDeleteClick: (fileId: number) => void;
+  }
+
+  let { index, info, onDeleteClick }: 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
+    onclick={() => setTimeout(() => onDeleteClick(index.fileId), 100)}
+    class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
+  >
+    <IconDelete class="text-lg text-gray-600" />
+  </button>
+</div>