사소한 리팩토링

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { get } from "svelte/store";
+  import { goto } from "$app/navigation";
+  import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
+  import { IconEntryButton, TopBar } from "$lib/components/molecules";
+  import { deleteAllFileThumbnailCaches } from "$lib/modules/file";
+  import { getFileInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import {
+    persistentStates,
+    getGenerationStatus,
+    requestThumbnailGeneration,
+  } from "./service.svelte";
+
+  import IconDelete from "~icons/material-symbols/delete";
+
+  let { data } = $props();
+
+  const generateAllThumbnails = () => {
+    persistentStates.files.forEach(({ info }) => {
+      const fileInfo = get(info);
+      if (fileInfo) {
+        requestThumbnailGeneration(fileInfo);
+      }
+    });
+  };
+
+  onMount(() => {
+    persistentStates.files = data.files.map((fileId) => ({
+      id: fileId,
+      info: getFileInfo(fileId, $masterKeyStore?.get(1)?.key!),
+      status: getGenerationStatus(fileId),
+    }));
+  });
+</script>
+
+<svelte:head>
+  <title>썸네일 설정</title>
+</svelte:head>
+
+<TopBar title="썸네일" />
+<FullscreenDiv class="bg-gray-100 !px-0">
+  <div class="flex flex-grow flex-col space-y-4">
+    <div class="bg-white p-4 !pt-0">
+      <IconEntryButton icon={IconDelete} onclick={deleteAllFileThumbnailCaches} class="w-full">
+        저장된 썸네일 모두 삭제하기
+      </IconEntryButton>
+    </div>
+    {#if persistentStates.files.length > 0}
+      <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 class="space-y-2">
+            {#each persistentStates.files as { info, status }}
+              <File
+                {info}
+                generationStatus={status}
+                onclick={({ id }) => goto(`/file/${id}`)}
+                onGenerateThumbnailClick={requestThumbnailGeneration}
+              />
+            {/each}
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+  {#if persistentStates.files.length > 0}
+    <BottomDiv class="px-4">
+      <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
+    </BottomDiv>
+  {/if}
+</FullscreenDiv>