OPFS에 캐시된 썸네일을 모두 삭제하는 기능 추가

src/lib/components/atoms/divs/FullscreenDiv.svelte

@@ -1,7 +1,15 @@
 <script lang="ts">
-  let { children } = $props();
+  import type { Snippet } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+
+  interface Props {
+    children: Snippet;
+    class?: ClassValue;
+  }
+
+  let { children, class: className }: Props = $props();
 </script>
 
-<div class="flex flex-grow flex-col justify-between px-4">
+<div class={["flex flex-grow flex-col justify-between px-4", className]}>
   {@render children()}
 </div>

src/lib/modules/file/thumbnail.ts

@@ -1,5 +1,5 @@
 import { LRUCache } from "lru-cache";
-import { readFile, writeFile, deleteFile } from "$lib/modules/opfs";
+import { readFile, writeFile, deleteFile, deleteDirectory } from "$lib/modules/opfs";
 import { getThumbnailUrl } from "$lib/modules/thumbnail";
 
 const loadedThumbnails = new LRUCache<number, string>({ max: 100 });
@@ -27,3 +27,8 @@ export const deleteFileThumbnail = async (fileId: number) => {
   loadedThumbnails.delete(fileId);
   await deleteFile(`/thumbnails/${fileId}`);
 };
+
+export const deleteAllFileThumbnails = async () => {
+  loadedThumbnails.clear();
+  await deleteDirectory("/thumbnails");
+};

src/lib/modules/opfs.ts

@@ -59,3 +59,39 @@ export const deleteFile = async (path: string) => {
 
   await parentHandle.removeEntry(filename);
 };
+
+const getDirectoryHandle = async (path: string) => {
+  if (!rootHandle) {
+    throw new Error("OPFS not prepared");
+  } else if (path[0] !== "/") {
+    throw new Error("Path must be absolute");
+  }
+
+  const parts = path.split("/");
+  if (parts.length <= 1) {
+    throw new Error("Invalid path");
+  }
+
+  try {
+    let directoryHandle = rootHandle;
+    let parentHandle;
+    for (const part of parts.slice(1)) {
+      if (!part) continue;
+      parentHandle = directoryHandle;
+      directoryHandle = await directoryHandle.getDirectoryHandle(part);
+    }
+    return { directoryHandle, parentHandle };
+  } catch (e) {
+    if (e instanceof DOMException && e.name === "NotFoundError") {
+      return {};
+    }
+    throw e;
+  }
+};
+
+export const deleteDirectory = async (path: string) => {
+  const { directoryHandle, parentHandle } = await getDirectoryHandle(path);
+  if (!parentHandle) return;
+
+  await parentHandle.removeEntry(directoryHandle.name, { recursive: true });
+};

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

@@ -4,12 +4,11 @@
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
   import type { FileCacheIndex } from "$lib/indexedDB";
-  import { getFileCacheIndex } from "$lib/modules/file";
+  import { getFileCacheIndex, deleteFileCache as doDeleteFileCache } from "$lib/modules/file";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
   import { formatFileSize } from "$lib/modules/util";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
-  import { deleteFileCache as doDeleteFileCache } from "./service";
 
   interface FileCache {
     index: FileCacheIndex;

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

@@ -1,5 +0,0 @@
-import { deleteFileCache as doDeleteFileCache } from "$lib/modules/file";
-
-export const deleteFileCache = async (fileId: number) => {
-  await doDeleteFileCache(fileId);
-};

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

@@ -3,23 +3,26 @@
   import { get } from "svelte/store";
   import { goto } from "$app/navigation";
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
-  import { TopBar } from "$lib/components/molecules";
+  import { IconEntryButton, TopBar } from "$lib/components/molecules";
+  import { deleteAllFileThumbnails } from "$lib/modules/file";
   import { getFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
   import {
     persistentStates,
     getGenerationStatus,
-    requestFileThumbnailGeneration,
+    requestThumbnailGeneration,
   } from "./service.svelte";
 
+  import IconDelete from "~icons/material-symbols/delete";
+
   let { data } = $props();
 
-  const generateAllThumbnails = async () => {
+  const generateAllThumbnails = () => {
     persistentStates.files.forEach(({ info }) => {
       const fileInfo = get(info);
       if (fileInfo) {
-        requestFileThumbnailGeneration(fileInfo);
+        requestThumbnailGeneration(fileInfo);
       }
     });
   };
@@ -38,31 +41,37 @@
 </svelte:head>
 
 <TopBar title="썸네일" />
-<FullscreenDiv>
+<FullscreenDiv class="bg-gray-100 !px-0">
+  <div class="flex flex-grow flex-col space-y-4">
+    <div class="flex-shrink-0 bg-white p-4 !pt-0">
+      <IconEntryButton icon={IconDelete} onclick={deleteAllFileThumbnails} class="w-full">
+        저장된 썸네일 모두 삭제하기
+      </IconEntryButton>
+    </div>
     {#if persistentStates.files.length > 0}
-    <div class="space-y-4 pb-4">
-      <div class="space-y-1 break-keep text-gray-800">
-        <p>
+      <div class="flex-grow space-y-2 bg-white p-4">
+        <p class="text-lg font-bold text-gray-800">썸네일이 누락된 파일</p>
+        <div class="space-y-4">
+          <p class="break-keep text-gray-800">
             {persistentStates.files.length}개 파일의 썸네일이 존재하지 않아요.
           </p>
-      </div>
           <div class="space-y-2">
             {#each persistentStates.files as { info, status }}
               <File
                 {info}
                 generationStatus={status}
                 onclick={({ id }) => goto(`/file/${id}`)}
-            onGenerateThumbnailClick={requestFileThumbnailGeneration}
+                onGenerateThumbnailClick={requestThumbnailGeneration}
               />
             {/each}
           </div>
         </div>
-    <BottomDiv class="flex flex-col items-center gap-y-2">
-      <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
-    </BottomDiv>
-  {:else}
-    <div class="flex flex-grow items-center justify-center">
-      <p class="text-gray-500">모든 파일의 썸네일이 존재해요.</p>
       </div>
     {/if}
+  </div>
+  {#if persistentStates.files.length > 0}
+    <BottomDiv class="flex flex-col items-center gap-y-2 px-4">
+      <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
+    </BottomDiv>
+  {/if}
 </FullscreenDiv>

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

@@ -32,7 +32,7 @@
   <ActionEntryButton
     class="h-14"
     onclick={() => onclick($info)}
-    actionButtonIcon={IconCamera}
+    actionButtonIcon={!$generationStatus || $generationStatus === "error" ? IconCamera : undefined}
     onActionButtonClick={() => onGenerateThumbnailClick($info)}
     actionButtonClass="text-gray-800"
   >

src/routes/(fullscreen)/settings/thumbnails/service.svelte.ts

@@ -110,7 +110,7 @@ const requestThumbnailUpload = limitFunction(
   { concurrency: 4 },
 );
 
-export const requestFileThumbnailGeneration = async (fileInfo: FileInfo) => {
+export const requestThumbnailGeneration = async (fileInfo: FileInfo) => {
   let status = workingFiles.get(fileInfo.id);
   if (status && get(status) !== "error") return;