Merge pull request #17 from kmc7468/dev

v0.7.0

src/lib/components/atoms/RowVirtualizer.svelte

@@ -54,7 +54,7 @@
       </div>
     {/each}
   </div>
-  {#if placeholder && $virtualizer.getVirtualItems().length === 0}
+  {#if placeholder && count === 0}
     {@render placeholder()}
   {/if}
 </div>

src/lib/components/organisms/Category/Category.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-  import { CheckBox, RowVirtualizer } from "$lib/components/atoms";
-  import { SubCategories, type SelectedCategory } from "$lib/components/molecules";
-  import { updateCategoryInfo } from "$lib/indexedDB";
-  import type { CategoryInfo } from "$lib/modules/filesystem";
-  import { sortEntries } from "$lib/utils";
-  import File from "./File.svelte";
-  import type { SelectedFile } from "./service";
-
-  import IconMoreVert from "~icons/material-symbols/more-vert";
-
-  interface Props {
-    info: CategoryInfo;
-    isFileRecursive: boolean | undefined;
-    onFileClick: (file: SelectedFile) => void;
-    onFileRemoveClick: (file: SelectedFile) => void;
-    onSubCategoryClick: (subCategory: SelectedCategory) => void;
-    onSubCategoryCreateClick: () => void;
-    onSubCategoryMenuClick: (subCategory: SelectedCategory) => void;
-  }
-
-  let {
-    info,
-    onFileClick,
-    onFileRemoveClick,
-    onSubCategoryClick,
-    onSubCategoryCreateClick,
-    onSubCategoryMenuClick,
-    isFileRecursive = $bindable(),
-  }: Props = $props();
-
-  let lastCategoryId = $state<CategoryInfo["id"] | undefined>();
-  let lastIsFileRecursive = $state<boolean | undefined>();
-
-  let files = $derived(
-    sortEntries(
-      info.files
-        ?.map((file) => ({ name: file.name, details: file }))
-        .filter(({ details }) => isFileRecursive || !details.isRecursive) ?? [],
-    ),
-  );
-
-  $effect(() => {
-    if (info.id === "root" || isFileRecursive === undefined) return;
-    if (lastCategoryId !== info.id) {
-      lastCategoryId = info.id;
-      lastIsFileRecursive = isFileRecursive;
-      return;
-    }
-    if (lastIsFileRecursive === isFileRecursive) return;
-
-    lastIsFileRecursive = isFileRecursive;
-    void updateCategoryInfo(info.id, { isFileRecursive });
-  });
-</script>
-
-<div class="space-y-4">
-  <div class="space-y-4 bg-white p-4">
-    {#if info.id !== "root"}
-      <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
-    {/if}
-    <SubCategories
-      {info}
-      {onSubCategoryClick}
-      {onSubCategoryCreateClick}
-      {onSubCategoryMenuClick}
-      subCategoryMenuIcon={IconMoreVert}
-    />
-  </div>
-  {#if info.id !== "root"}
-    <div class="space-y-4 bg-white p-4">
-      <div class="flex items-center justify-between">
-        <p class="text-lg font-bold text-gray-800">파일</p>
-        <CheckBox bind:checked={isFileRecursive}>
-          <p class="font-medium">하위 카테고리의 파일</p>
-        </CheckBox>
-      </div>
-      <RowVirtualizer count={files.length} itemHeight={() => 48} itemGap={4}>
-        {#snippet item(index)}
-          {@const { details } = files[index]!}
-          <File
-            info={details}
-            onclick={onFileClick}
-            onRemoveClick={!details.isRecursive ? onFileRemoveClick : undefined}
-          />
-        {/snippet}
-        {#snippet placeholder()}
-          <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
-        {/snippet}
-      </RowVirtualizer>
-    </div>
-  {/if}
-</div>

src/lib/components/organisms/Category/index.ts

@@ -1,2 +0,0 @@
-export { default } from "./Category.svelte";
-export * from "./service";

src/lib/components/organisms/Category/service.ts

@@ -1,4 +0,0 @@
-export interface SelectedFile {
-  id: number;
-  name: string;
-}

src/lib/components/organisms/Gallery.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  import { FileThumbnailButton, RowVirtualizer } from "$lib/components/atoms";
-  import type { SummarizedFileInfo } from "$lib/modules/filesystem";
-  import { formatDate, formatDateSortable, SortBy, sortEntries } from "$lib/utils";
-
-  interface Props {
-    files: SummarizedFileInfo[];
-    onFileClick?: (file: SummarizedFileInfo) => void;
-  }
-
-  let { files, onFileClick }: Props = $props();
-
-  type Row =
-    | { type: "header"; label: string }
-    | { type: "items"; files: SummarizedFileInfo[]; isLast: boolean };
-
-  let rows = $derived.by(() => {
-    const groups = Map.groupBy(
-      files.filter(
-        (file) => file.contentType.startsWith("image/") || file.contentType.startsWith("video/"),
-      ),
-      (file) => formatDateSortable(file.createdAt ?? file.lastModifiedAt),
-    );
-    return Array.from(groups.entries())
-      .sort(([dateA], [dateB]) => dateB.localeCompare(dateA))
-      .flatMap(([, entries]) => {
-        const sortedEntries = [...entries];
-        sortEntries(sortedEntries, SortBy.DATE_DESC);
-
-        return [
-          {
-            type: "header",
-            label: formatDate(sortedEntries[0]!.createdAt ?? sortedEntries[0]!.lastModifiedAt),
-          },
-          ...Array.from({ length: Math.ceil(sortedEntries.length / 4) }, (_, i) => {
-            const start = i * 4;
-            const end = start + 4;
-            return {
-              type: "items" as const,
-              files: sortedEntries.slice(start, end),
-              isLast: end >= sortedEntries.length,
-            };
-          }),
-        ] satisfies Row[];
-      });
-  });
-</script>
-
-<RowVirtualizer
-  count={rows.length}
-  itemHeight={(index) =>
-    rows[index]!.type === "header" ? 28 : 181 + (rows[index]!.isLast ? 16 : 4)}
-  class="flex flex-grow flex-col"
->
-  {#snippet item(index)}
-    {@const row = rows[index]!}
-    {#if row.type === "header"}
-      <p class="pb-2 text-sm font-medium">{row.label}</p>
-    {:else}
-      <div class={["grid grid-cols-4 gap-x-1", row.isLast ? "pb-4" : "pb-1"]}>
-        {#each row.files as file (file.id)}
-          <FileThumbnailButton info={file} onclick={onFileClick} />
-        {/each}
-      </div>
-    {/if}
-  {/snippet}
-  {#snippet placeholder()}
-    <div class="flex h-full flex-grow items-center justify-center">
-      <p class="text-gray-500">
-        {#if files.length === 0}
-          업로드된 파일이 없어요.
-        {:else}
-          사진 또는 동영상이 없어요.
-        {/if}
-      </p>
-    </div>
-  {/snippet}
-</RowVirtualizer>

src/lib/components/organisms/index.ts

@@ -1,4 +1 @@
-export * from "./Category";
-export { default as Category } from "./Category";
-export { default as Gallery } from "./Gallery.svelte";
 export * from "./modals";

src/lib/indexedDB/filesystem.ts

@@ -96,6 +96,10 @@ export const deleteFileInfo = async (id: number) => {
   await filesystem.file.delete(id);
 };
 
+export const bulkDeleteFileInfos = async (ids: number[]) => {
+  await filesystem.file.bulkDelete(ids);
+};
+
 export const deleteDanglingFileInfos = async (parentId: DirectoryId, validIds: Set<number>) => {
   await filesystem.file
     .where({ parentId })

src/lib/modules/filesystem/category.ts

@@ -116,6 +116,6 @@ const storeToIndexedDB = (info: CategoryInfo) => {
   return { ...info, exists: true as const };
 };
 
-export const getCategoryInfo = async (id: CategoryId, masterKey: CryptoKey) => {
+export const getCategoryInfo = (id: CategoryId, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+  return cache.get(id, masterKey);
 };

src/lib/modules/filesystem/directory.ts

@@ -97,6 +97,6 @@ const storeToIndexedDB = (info: DirectoryInfo) => {
   return { ...info, exists: true as const };
 };
 
-export const getDirectoryInfo = async (id: DirectoryId, masterKey: CryptoKey) => {
+export const getDirectoryInfo = (id: DirectoryId, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+  return cache.get(id, masterKey);
 };

src/lib/modules/filesystem/file.ts

@@ -126,12 +126,12 @@ const cache = new FilesystemCache<number, MaybeFileInfo>({
     );
 
     const existingIds = new Set(filesRaw.map(({ id }) => id));
+    const deletedIds = idsArray.filter((id) => !existingIds.has(id));
 
+    void IndexedDB.bulkDeleteFileInfos(deletedIds);
     return new Map<number, MaybeFileInfo>([
       ...bulkStoreToIndexedDB(files),
-      ...idsArray
+      ...deletedIds.map((id) => [id, { id, exists: false }] as const),
-        .filter((id) => !existingIds.has(id))
-        .map((id) => [id, { id, exists: false }] as const),
     ]);
   },
 });
@@ -168,10 +168,10 @@ const bulkStoreToIndexedDB = (infos: FileInfo[]) => {
   return infos.map((info) => [info.id, { ...info, exists: true }] as const);
 };
 
-export const getFileInfo = async (id: number, masterKey: CryptoKey) => {
+export const getFileInfo = (id: number, masterKey: CryptoKey) => {
-  return await cache.get(id, masterKey);
+  return cache.get(id, masterKey);
 };
 
-export const bulkGetFileInfo = async (ids: number[], masterKey: CryptoKey) => {
+export const bulkGetFileInfo = (ids: number[], masterKey: CryptoKey) => {
-  return await cache.bulkGet(new Set(ids), masterKey);
+  return cache.bulkGet(new Set(ids), masterKey);
 };

src/lib/modules/filesystem/internal.svelte.ts

@@ -29,8 +29,6 @@ export class FilesystemCache<K, V extends object> {
         this.map.set(key, newState);
       }
 
-      state.promise = newPromise;
-
       (state.value
         ? Promise.resolve(state.value)
         : this.options.fetchFromIndexedDB(key).then((loadedInfo) => {
@@ -54,7 +52,8 @@ export class FilesystemCache<K, V extends object> {
           state.promise = undefined;
         });
 
-      return newPromise;
+      state.promise = newPromise;
+      return state.value ?? newPromise;
     });
   }
 
@@ -108,12 +107,17 @@ export class FilesystemCache<K, V extends object> {
           });
         });
 
-      return Promise.all(
+      const bottleneckPromises = Array.from(
         keys
           .keys()
           .filter((key) => this.map.get(key)!.value === undefined)
           .map((key) => this.map.get(key)!.promise!),
-      ).then(() => new Map(keys.keys().map((key) => [key, this.map.get(key)!.value!] as const)));
+      );
+      const makeResult = () =>
+        new Map(keys.keys().map((key) => [key, this.map.get(key)!.value!] as const));
+      return bottleneckPromises.length > 0
+        ? Promise.all(bottleneckPromises).then(makeResult)
+        : makeResult();
     });
   }
 }

src/lib/utils/HybridPromise.ts

@@ -0,0 +1,93 @@
+type MaybePromise<T> = T | Promise<T> | HybridPromise<T>;
+
+type HybridPromiseState<T> =
+  | { mode: "sync"; status: "fulfilled"; value: T }
+  | { mode: "sync"; status: "rejected"; reason: unknown }
+  | { mode: "async"; promise: Promise<T> };
+
+export class HybridPromise<T> implements PromiseLike<T> {
+  private isConsumed = false;
+
+  private constructor(private readonly state: HybridPromiseState<T>) {
+    if (state.mode === "sync" && state.status === "rejected") {
+      queueMicrotask(() => {
+        if (!this.isConsumed) {
+          throw state.reason;
+        }
+      });
+    }
+  }
+
+  isSync(): boolean {
+    return this.state.mode === "sync";
+  }
+
+  toPromise(): Promise<T> {
+    this.isConsumed = true;
+
+    if (this.state.mode === "async") return this.state.promise;
+    return this.state.status === "fulfilled"
+      ? Promise.resolve(this.state.value)
+      : Promise.reject(this.state.reason);
+  }
+
+  static resolve<T>(value: MaybePromise<T>): HybridPromise<T> {
+    if (value instanceof HybridPromise) return value;
+    return new HybridPromise(
+      value instanceof Promise
+        ? { mode: "async", promise: value }
+        : { mode: "sync", status: "fulfilled", value },
+    );
+  }
+
+  static reject<T = never>(reason?: unknown): HybridPromise<T> {
+    return new HybridPromise({ mode: "sync", status: "rejected", reason });
+  }
+
+  then<TResult1 = T, TResult2 = never>(
+    onfulfilled?: ((value: T) => MaybePromise<TResult1>) | null | undefined,
+    onrejected?: ((reason: unknown) => MaybePromise<TResult2>) | null | undefined,
+  ): HybridPromise<TResult1 | TResult2> {
+    this.isConsumed = true;
+
+    if (this.state.mode === "async") {
+      return new HybridPromise({
+        mode: "async",
+        promise: this.state.promise.then(onfulfilled, onrejected) as any,
+      });
+    }
+
+    try {
+      if (this.state.status === "fulfilled") {
+        if (!onfulfilled) return HybridPromise.resolve(this.state.value as any);
+        return HybridPromise.resolve(onfulfilled(this.state.value));
+      } else {
+        if (!onrejected) return HybridPromise.reject(this.state.reason);
+        return HybridPromise.resolve(onrejected(this.state.reason));
+      }
+    } catch (e) {
+      return HybridPromise.reject(e);
+    }
+  }
+
+  catch<TResult = never>(
+    onrejected?: ((reason: unknown) => MaybePromise<TResult>) | null | undefined,
+  ): HybridPromise<T | TResult> {
+    return this.then<T, TResult>(null, onrejected);
+  }
+
+  finally(onfinally?: (() => void) | null | undefined): HybridPromise<T> {
+    this.isConsumed = true;
+
+    if (this.state.mode === "async") {
+      return new HybridPromise({ mode: "async", promise: this.state.promise.finally(onfinally) });
+    }
+
+    try {
+      onfinally?.();
+      return new HybridPromise(this.state);
+    } catch (e) {
+      return HybridPromise.reject(e);
+    }
+  }
+}

src/lib/utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./format";
 export * from "./gotoStateful";
+export * from "./HybridPromise";
 export * from "./sort";

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -9,6 +9,7 @@
   import { captureVideoThumbnail } from "$lib/modules/thumbnail";
   import { getFileDownloadState } from "$lib/modules/file";
   import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
   import {
@@ -26,8 +27,7 @@
 
   let { data } = $props();
 
-  let infoPromise: Promise<MaybeFileInfo> | undefined = $state();
+  let info: MaybeFileInfo | undefined = $state();
-  let info: FileInfo | null = $state(null);
   let downloadState = $derived(getFileDownloadState(data.id));
 
   let isMenuOpen = $state(false);
@@ -65,22 +65,20 @@
   const addToCategory = async (categoryId: number) => {
     await requestFileAdditionToCategory(data.id, categoryId);
     isAddToCategoryBottomSheetOpen = false;
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
   const removeFromCategory = async (categoryId: number) => {
     await requestFileRemovalFromCategory(data.id, categoryId);
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+    void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
   };
 
   $effect(() => {
-    infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!).then((fileInfo) => {
+    HybridPromise.resolve(getFileInfo(data.id, $masterKeyStore?.get(1)?.key!)).then((result) => {
-      if (fileInfo.exists) {
+      if (data.id === result.id) {
-        info = fileInfo;
+        info = result;
       }
-      return fileInfo;
     });
-    info = null;
     isDownloadRequested = false;
     viewerType = undefined;
   });
@@ -111,8 +109,8 @@
   });
 
   $effect(() => {
-    if (info && downloadState?.status === "decrypted") {
+    if (info?.exists && downloadState?.status === "decrypted") {
-      untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentType));
+      untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentIv!));
     }
   });
 
@@ -123,8 +121,7 @@
   <title>파일</title>
 </svelte:head>
 
-{#if info}
+<TopBar title={info?.name}>
-  <TopBar title={info.name}>
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <div onclick={(e) => e.stopPropagation()}>
@@ -137,10 +134,10 @@
     <TopBarMenu
       bind:isOpen={isMenuOpen}
       directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
-          ? info.parentId
+        ? info?.parentId
         : undefined}
       {fileBlob}
-        filename={info.name}
+      filename={info?.name}
     />
   </div>
 </TopBar>
@@ -149,7 +146,7 @@
     {#if downloadState}
       <DownloadStatus state={downloadState} />
     {/if}
-      {#if viewerType}
+    {#if info && viewerType}
       <div class="flex w-full justify-center">
         {#snippet viewerLoading(message: string)}
           <p class="text-gray-500">{message}</p>
@@ -183,7 +180,7 @@
       <p class="text-lg font-bold">카테고리</p>
       <div class="space-y-1">
         <Categories
-            categories={info.categories}
+          categories={info?.categories ?? []}
           categoryMenuIcon={IconClose}
           onCategoryClick={({ id }) => goto(`/category/${id}`)}
           onCategoryMenuClick={({ id }) => removeFromCategory(id)}
@@ -206,4 +203,3 @@
   bind:isOpen={isAddToCategoryBottomSheetOpen}
   onAddToCategoryClick={addToCategory}
 />
-{/if}

src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte

@@ -4,6 +4,7 @@
   import { CategoryCreateModal } from "$lib/components/organisms";
   import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
   import { requestCategoryCreation } from "./service";
 
   interface Props {
@@ -13,18 +14,19 @@
 
   let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();
 
-  let categoryInfoPromise: Promise<MaybeCategoryInfo> | undefined = $state();
+  let categoryInfo: MaybeCategoryInfo | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
 
   $effect(() => {
     if (isOpen) {
-      categoryInfoPromise = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!);
+      HybridPromise.resolve(getCategoryInfo("root", $masterKeyStore?.get(1)?.key!)).then(
+        (result) => (categoryInfo = result),
+      );
     }
   });
 </script>
 
-{#await categoryInfoPromise then categoryInfo}
 {#if categoryInfo?.exists}
   <BottomSheet bind:isOpen class="flex flex-col">
     <FullscreenDiv>
@@ -32,29 +34,30 @@
         class="py-4"
         info={categoryInfo}
         onSubCategoryClick={({ id }) =>
-            (categoryInfoPromise = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))}
+          HybridPromise.resolve(getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)).then(
+            (result) => (categoryInfo = result),
+          )}
         onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
         subCategoryCreatePosition="top"
       />
       {#if categoryInfo.id !== "root"}
         <BottomDiv>
-            <Button onclick={() => onAddToCategoryClick(categoryInfo.id)} class="w-full">
+          <Button onclick={() => onAddToCategoryClick(categoryInfo!.id as number)} class="w-full">
-              이 카테고리에 추가하기
+            {categoryInfo!.name} 카테고리에 추가하기
           </Button>
         </BottomDiv>
       {/if}
     </FullscreenDiv>
   </BottomSheet>
+{/if}
 
 <CategoryCreateModal
   bind:isOpen={isCategoryCreateModalOpen}
   onCreateClick={async (name: string) => {
-        if (await requestCategoryCreation(name, categoryInfo.id, $masterKeyStore?.get(1)!)) {
+    if (await requestCategoryCreation(name, categoryInfo!.id, $masterKeyStore?.get(1)!)) {
-          categoryInfoPromise = getCategoryInfo(categoryInfo.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getCategoryInfo(categoryInfo!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
 />
-  {/if}
-{/await}

src/routes/(fullscreen)/gallery/+page.svelte

@@ -1,15 +1,54 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { FullscreenDiv } from "$lib/components/atoms";
+  import { FileThumbnailButton, FullscreenDiv, RowVirtualizer } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { Gallery } from "$lib/components/organisms";
+  import {
-  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
+    bulkGetFileInfo,
+    type MaybeFileInfo,
+    type SummarizedFileInfo,
+  } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
+  import { formatDate, formatDateSortable, SortBy, sortEntries } from "$lib/utils";
 
   let { data } = $props();
 
+  type Row =
+    | { type: "header"; label: string }
+    | { type: "items"; files: SummarizedFileInfo[]; isLast: boolean };
+
   let files: MaybeFileInfo[] = $state([]);
+  let rows: Row[] = $derived.by(() => {
+    const groups = Map.groupBy(
+      files
+        .filter((file) => file.exists)
+        .filter(
+          (file) => file.contentType.startsWith("image/") || file.contentType.startsWith("video/"),
+        )
+        .map((file) => ({ ...file, date: file.createdAt ?? file.lastModifiedAt })),
+      (file) => formatDateSortable(file.date),
+    );
+    return Array.from(groups.entries())
+      .sort(([dateA], [dateB]) => dateB.localeCompare(dateA))
+      .flatMap(([, entries]) => {
+        const sortedEntries = sortEntries([...entries], SortBy.DATE_DESC);
+        return [
+          {
+            type: "header",
+            label: formatDate(sortedEntries[0]!.date),
+          },
+          ...Array.from({ length: Math.ceil(sortedEntries.length / 4) }, (_, i) => {
+            const start = i * 4;
+            const end = start + 4;
+            return {
+              type: "items" as const,
+              files: sortedEntries.slice(start, end),
+              isLast: end >= sortedEntries.length,
+            };
+          }),
+        ];
+      });
+  });
 
   onMount(async () => {
     files = Array.from((await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!)).values());
@@ -22,8 +61,37 @@
 
 <TopBar title="사진 및 동영상" />
 <FullscreenDiv>
-  <Gallery
+  <RowVirtualizer
-    files={files.filter((file) => file?.exists)}
+    count={rows.length}
-    onFileClick={({ id }) => goto(`/file/${id}?from=gallery`)}
+    itemHeight={(index) =>
+      rows[index]!.type === "header" ? 28 : 181 + (rows[index]!.isLast ? 16 : 4)}
+    class="flex flex-grow flex-col"
+  >
+    {#snippet item(index)}
+      {@const row = rows[index]!}
+      {#if row.type === "header"}
+        <p class="pb-2 text-sm font-medium">{row.label}</p>
+      {:else}
+        <div class={["grid grid-cols-4 gap-x-1", row.isLast ? "pb-4" : "pb-1"]}>
+          {#each row.files as file (file.id)}
+            <FileThumbnailButton
+              info={file}
+              onclick={() => goto(`/file/${file.id}?from=gallery`)}
             />
+          {/each}
+        </div>
+      {/if}
+    {/snippet}
+    {#snippet placeholder()}
+      <div class="flex h-full flex-grow items-center justify-center">
+        <p class="text-gray-500">
+          {#if files.length === 0}
+            업로드된 파일이 없어요.
+          {:else}
+            사진 또는 동영상이 없어요.
+          {/if}
+        </p>
+      </div>
+    {/snippet}
+  </RowVirtualizer>
 </FullscreenDiv>

src/routes/(main)/category/[[id]]/+page.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { TopBar } from "$lib/components/molecules";
+  import { CheckBox, RowVirtualizer } from "$lib/components/atoms";
-  import { Category, CategoryCreateModal } from "$lib/components/organisms";
+  import { SubCategories, TopBar } from "$lib/components/molecules";
+  import { CategoryCreateModal } from "$lib/components/organisms";
+  import { updateCategoryInfo } from "$lib/indexedDB";
   import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
+  import { HybridPromise, sortEntries } from "$lib/utils";
   import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
   import CategoryRenameModal from "./CategoryRenameModal.svelte";
+  import File from "./File.svelte";
   import {
     createContext,
     requestCategoryCreation,
@@ -15,18 +19,50 @@
     requestCategoryDeletion,
   } from "./service.svelte";
 
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
   let { data } = $props();
   let context = createContext();
 
-  let infoPromise: Promise<MaybeCategoryInfo> | undefined = $state();
+  let info: MaybeCategoryInfo | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
   let isCategoryMenuBottomSheetOpen = $state(false);
   let isCategoryRenameModalOpen = $state(false);
   let isCategoryDeleteModalOpen = $state(false);
 
+  let lastCategoryId: CategoryId | undefined = $state();
+  let lastIsFileRecursive: boolean | undefined = $state();
+
+  let files = $derived(
+    sortEntries(
+      info?.files
+        ?.map((file) => ({ name: file.name, details: file }))
+        .filter(({ details }) => info?.isFileRecursive || !details.isRecursive) ?? [],
+    ),
+  );
+
   $effect(() => {
-    infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    if (!info || info.id === "root" || info.isFileRecursive === undefined) return;
+    if (lastCategoryId !== info.id) {
+      lastCategoryId = info.id;
+      lastIsFileRecursive = info.isFileRecursive;
+      return;
+    }
+    if (lastIsFileRecursive === info.isFileRecursive) return;
+
+    lastIsFileRecursive = info.isFileRecursive;
+    void updateCategoryInfo(info.id, { isFileRecursive: info.isFileRecursive });
+  });
+
+  $effect(() => {
+    HybridPromise.resolve(getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!)).then(
+      (result) => {
+        if (data.id === result.id) {
+          info = result;
+        }
+      },
+    );
   });
 </script>
 
@@ -34,34 +70,64 @@
   <title>카테고리</title>
 </svelte:head>
 
-{#await infoPromise then info}
+{#if info?.id !== "root"}
-  {#if info?.exists}
+  <TopBar title={info?.name} />
-    {#if info.id !== "root"}
-      <TopBar title={info.name} />
 {/if}
 <div class="min-h-full bg-gray-100 pb-[5.5em]">
-      <Category
+  {#if info?.exists}
-        bind:isFileRecursive={info.isFileRecursive}
+    <div class="space-y-4">
+      <div class="space-y-4 bg-white p-4">
+        {#if info.id !== "root"}
+          <p class="text-lg font-bold text-gray-800">하위 카테고리</p>
+        {/if}
+        <SubCategories
           {info}
-        onFileClick={({ id }) => goto(`/file/${id}?from=category`)}
-        onFileRemoveClick={async ({ id }) => {
-          await requestFileRemovalFromCategory(id, data.id as number);
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-        }}
           onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
           onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
           onSubCategoryMenuClick={(subCategory) => {
             context.selectedCategory = subCategory;
             isCategoryMenuBottomSheetOpen = true;
           }}
+          subCategoryMenuIcon={IconMoreVert}
         />
       </div>
+      {#if info.id !== "root"}
+        <div class="space-y-4 bg-white p-4">
+          <div class="flex items-center justify-between">
+            <p class="text-lg font-bold text-gray-800">파일</p>
+            <CheckBox bind:checked={info.isFileRecursive}>
+              <p class="font-medium">하위 카테고리의 파일</p>
+            </CheckBox>
+          </div>
+          <RowVirtualizer count={files.length} itemHeight={() => 48} itemGap={4}>
+            {#snippet item(index)}
+              {@const { details } = files[index]!}
+              <File
+                info={details}
+                onclick={({ id }) => goto(`/file/${id}?from=category`)}
+                onRemoveClick={!details.isRecursive
+                  ? async ({ id }) => {
+                      await requestFileRemovalFromCategory(id, data.id as number);
+                      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+                    }
+                  : undefined}
+              />
+            {/snippet}
+            {#snippet placeholder()}
+              <p class="text-center text-gray-500">이 카테고리에 추가된 파일이 없어요.</p>
+            {/snippet}
+          </RowVirtualizer>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
 
 <CategoryCreateModal
   bind:isOpen={isCategoryCreateModalOpen}
   onCreateClick={async (name: string) => {
     if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
@@ -83,7 +149,7 @@
   bind:isOpen={isCategoryRenameModalOpen}
   onRenameClick={async (newName: string) => {
     if (await requestCategoryRename(context.selectedCategory!, newName)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
@@ -93,11 +159,9 @@
   bind:isOpen={isCategoryDeleteModalOpen}
   onDeleteClick={async () => {
     if (await requestCategoryDeletion(context.selectedCategory!)) {
-          infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
 />
-  {/if}
-{/await}

src/routes/(main)/category/[[id]]/File.svelte

@@ -3,7 +3,7 @@
   import { DirectoryEntryLabel } from "$lib/components/molecules";
   import { getFileThumbnail } from "$lib/modules/file";
   import type { CategoryFileInfo } from "$lib/modules/filesystem";
-  import type { SelectedFile } from "./service";
+  import type { SelectedFile } from "./service.svelte";
 
   import IconClose from "~icons/material-symbols/close";
 

src/routes/(main)/category/[[id]]/service.svelte.ts

@@ -5,6 +5,11 @@ import { trpc } from "$trpc/client";
 
 export { requestCategoryCreation, requestFileRemovalFromCategory } from "$lib/services/category";
 
+export interface SelectedFile {
+  id: number;
+  name: string;
+}
+
 export const createContext = () => {
   const context = $state({
     selectedCategory: undefined as SelectedCategory | undefined,

src/routes/(main)/directory/[[id]]/+page.svelte

@@ -6,6 +6,7 @@
   import { TopBar } from "$lib/components/molecules";
   import { getDirectoryInfo, type MaybeDirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
+  import { HybridPromise } from "$lib/utils";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
   import DownloadStatusCard from "./DownloadStatusCard.svelte";
@@ -29,7 +30,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let infoPromise: Promise<MaybeDirectoryInfo> | undefined = $state();
+  let info: MaybeDirectoryInfo | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
   let duplicatedFile: File | undefined = $state();
   let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
@@ -60,7 +61,7 @@
         .then((res) => {
           if (!res) return;
           // TODO: FIXME
-          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+          void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
         })
         .catch((e: Error) => {
           // TODO: FIXME
@@ -78,7 +79,13 @@
   });
 
   $effect(() => {
-    infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    HybridPromise.resolve(getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!)).then(
+      (result) => {
+        if (data.id === result.id) {
+          info = result;
+        }
+      },
+    );
   });
 </script>
 
@@ -88,17 +95,17 @@
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
-{#await infoPromise then info}
-  {#if info?.exists}
 <div class="flex h-full flex-col">
   {#if showTopBar}
-        <TopBar title={info.name} class="flex-shrink-0" />
+    <TopBar title={info?.name} class="flex-shrink-0" />
   {/if}
+  {#if info?.exists}
     <div class={["flex flex-grow flex-col px-4 pb-4", !showTopBar && "pt-4"]}>
       <div class="flex gap-x-2">
         <UploadStatusCard onclick={() => goto("/file/uploads")} />
         <DownloadStatusCard onclick={() => goto("/file/downloads")} />
       </div>
+      {#key info.id}
         <DirectoryEntries
           {info}
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
@@ -109,12 +116,14 @@
           showParentEntry={isFromFilePage && info.parentId !== undefined}
           onParentClick={() =>
             goto(
-              info.parentId === "root"
+              info!.parentId === "root"
                 ? "/directory?from=file"
-                : `/directory/${info.parentId}?from=file`,
+                : `/directory/${info!.parentId}?from=file`,
             )}
         />
+      {/key}
     </div>
+  {/if}
 </div>
 
 <FloatingButton
@@ -139,7 +148,7 @@
   bind:isOpen={isDirectoryCreateModalOpen}
   onCreateClick={async (name) => {
     if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
-          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
@@ -173,7 +182,7 @@
   bind:isOpen={isEntryRenameModalOpen}
   onRenameClick={async (newName: string) => {
     if (await requestEntryRename(context.selectedEntry!, newName)) {
-          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
@@ -183,11 +192,9 @@
   bind:isOpen={isEntryDeleteModalOpen}
   onDeleteClick={async () => {
     if (await requestEntryDeletion(context.selectedEntry!)) {
-          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
 />
-  {/if}
-{/await}

src/routes/(main)/home/+page.svelte

@@ -2,22 +2,13 @@
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
   import { EntryButton, FileThumbnailButton } from "$lib/components/atoms";
-  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
+  import { type SummarizedFileInfo } from "$lib/modules/filesystem";
-  import { masterKeyStore } from "$lib/stores";
   import { requestFreshMediaFilesRetrieval } from "./service";
 
-  let mediaFiles: MaybeFileInfo[] = $state([]);
+  let mediaFiles: SummarizedFileInfo[] = $state([]);
 
   onMount(async () => {
-    const files = await requestFreshMediaFilesRetrieval();
+    mediaFiles = await requestFreshMediaFilesRetrieval();
-    mediaFiles = Array.from(
-      (
-        await bulkGetFileInfo(
-          files.map(({ id }) => id),
-          $masterKeyStore?.get(1)?.key!,
-        )
-      ).values(),
-    );
   });
 </script>
 
@@ -34,9 +25,7 @@
     {#if mediaFiles.length > 0}
       <div class="grid grid-cols-4 gap-2 p-2">
         {#each mediaFiles as file (file.id)}
-          {#if file.exists}
           <FileThumbnailButton info={file} onclick={({ id }) => goto(`/file/${id}`)} />
-          {/if}
         {/each}
       </div>
     {/if}