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

<script lang="ts">
  import { onMount } from "svelte";
  import { goto } from "$app/navigation";
  import { deleteAllFileThumbnailCaches } from "#lib/client/cache/index.js";
  import { FileEntry } from "#lib/features/filesystem/components/index.js";
  import type { MaybeFileInfo } from "#lib/features/filesystem/index.js";
  import { BottomDiv, Button, FullscreenDiv, IconEntryButton, TopBar } from "#lib/ui/index.js";
  import { sortEntries } from "#lib/utils/index.js";
  import {
    getThumbnailGenerationStatus,
    clearThumbnailGenerationStatuses,
    requestMissingThumbnailFiles,
    requestThumbnailGeneration,
    type GenerationStatus,
  } from "./service";

  import IconCamera from "~icons/material-symbols/camera";
  import IconDelete from "~icons/material-symbols/delete";

  let { data } = $props();

  const statusTexts = {
    queued: "대기 중",
    "generation-pending": "준비 중",
    generating: "생성하는 중",
    uploading: "업로드하는 중",
    error: "실패",
  } as const;

  let fileInfos: MaybeFileInfo[] = $state([]);
  let files = $derived(
    fileInfos
      .map((info) => ({
        info,
        status: getThumbnailGenerationStatus(info.id),
      }))
      .filter(
        (file): file is { info: MaybeFileInfo; status: Exclude<GenerationStatus, "uploaded"> } =>
          file.status !== "uploaded",
      ),
  );

  const generateAllThumbnails = () => {
    files.forEach(({ info }) => {
      if (info.exists) {
        requestThumbnailGeneration(info);
      }
    });
  };

  onMount(async () => {
    fileInfos = sortEntries(await requestMissingThumbnailFiles(data.files));
  });

  $effect(() => clearThumbnailGenerationStatuses);
</script>

<svelte:head>
  <title>썸네일 설정</title>
</svelte:head>

<TopBar title="썸네일" />
<FullscreenDiv class="bg-gray-100 px-0!">
  <div class="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 files.length > 0}
      <div class="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">
            {files.length}개 파일의 썸네일이 존재하지 않아요.
          </p>
          <div class="space-y-2">
            {#each files as { info, status } (info.id)}
              {#if info.exists}
                <FileEntry
                  {info}
                  showThumbnail={false}
                  subtext={status && statusTexts[status]}
                  onclick={() => goto(`/file/${info.id}`)}
                  action={!status || status === "error"
                    ? {
                        icon: IconCamera,
                        onclick: () => requestThumbnailGeneration(info),
                        class: "text-gray-800",
                      }
                    : undefined}
                />
              {/if}
            {/each}
          </div>
        </div>
      </div>
    {/if}
  </div>
  {#if files.length > 0}
    <BottomDiv class="px-4">
      <Button onclick={generateAllThumbnails} class="w-full">모두 썸네일 생성하기</Button>
    </BottomDiv>
  {/if}
</FullscreenDiv>