디렉터리 페이지에서의 네트워크 호출 최적화

src/lib/components/atoms/RowVirtualizer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
-  import { untrack, type Snippet } from "svelte";
+  import type { Snippet } from "svelte";
   import type { ClassValue } from "svelte/elements";
 
   interface Props {
@@ -15,7 +15,7 @@
 
   const virtualizer = $derived(
     createWindowVirtualizer({
-      count: untrack(() => count),
+      count,
       estimateSize: itemHeight,
     }),
   );
@@ -23,8 +23,6 @@
   const measureItem = (node: HTMLElement) => {
     $effect(() => $virtualizer.measureElement(node));
   };
-
-  $effect(() => $virtualizer.setOptions({ count }));
 </script>
 
 <div class={["relative", className]}>

src/lib/indexedDB/filesystem.ts

@@ -1,7 +1,5 @@
 import { Dexie, type EntityTable } from "dexie";
 
-export type DirectoryId = "root" | number;
-
 interface DirectoryInfo {
   id: number;
   parentId: DirectoryId;
@@ -18,8 +16,6 @@ interface FileInfo {
   categoryIds: number[];
 }
 
-export type CategoryId = "root" | number;
-
 interface CategoryInfo {
   id: number;
   parentId: CategoryId;

src/lib/modules/file/index.ts

@@ -1,3 +1,3 @@
 export * from "./cache";
 export * from "./download";
-export * from "./upload";
+export * from "./upload.svelte";

src/lib/modules/file/upload.svelte.ts

@@ -1,7 +1,6 @@
 import axios from "axios";
 import ExifReader from "exifreader";
 import { limitFunction } from "p-limit";
-import { writable, type Writable } from "svelte/store";
 import {
   encodeToBase64,
   generateDataKey,
@@ -17,14 +16,45 @@ import type {
   FileUploadRequest,
   FileUploadResponse,
 } from "$lib/server/schemas";
-import {
-  fileUploadStatusStore,
-  type MasterKey,
-  type HmacSecret,
-  type FileUploadStatus,
-} from "$lib/stores";
+import type { MasterKey, HmacSecret } from "$lib/stores";
 import { trpc } from "$trpc/client";
 
+export interface FileUploadState {
+  name: string;
+  parentId: DirectoryId;
+  status:
+    | "encryption-pending"
+    | "encrypting"
+    | "upload-pending"
+    | "uploading"
+    | "uploaded"
+    | "canceled"
+    | "error";
+  progress?: number;
+  rate?: number;
+  estimated?: number;
+}
+
+export type LiveFileUploadState = FileUploadState & {
+  status: "encryption-pending" | "encrypting" | "upload-pending" | "uploading";
+};
+
+let uploadingFiles: FileUploadState[] = $state([]);
+
+const isFileUploading = (status: FileUploadState["status"]) =>
+  ["encryption-pending", "encrypting", "upload-pending", "uploading"].includes(status);
+
+export const getUploadingFiles = (parentId?: DirectoryId) => {
+  return uploadingFiles.filter(
+    (file): file is LiveFileUploadState =>
+      (parentId === undefined || file.parentId === parentId) && isFileUploading(file.status),
+  );
+};
+
+export const clearUploadedFiles = () => {
+  uploadingFiles = uploadingFiles.filter((file) => isFileUploading(file.status));
+};
+
 const requestDuplicateFileScan = limitFunction(
   async (file: File, hmacSecret: HmacSecret, onDuplicate: () => Promise<boolean>) => {
     const fileBuffer = await file.arrayBuffer();
@@ -76,16 +106,8 @@ const extractExifDateTime = (fileBuffer: ArrayBuffer) => {
 };
 
 const encryptFile = limitFunction(
-  async (
-    status: Writable<FileUploadStatus>,
-    file: File,
-    fileBuffer: ArrayBuffer,
-    masterKey: MasterKey,
-  ) => {
-    status.update((value) => {
-      value.status = "encrypting";
-      return value;
-    });
+  async (state: FileUploadState, file: File, fileBuffer: ArrayBuffer, masterKey: MasterKey) => {
+    state.status = "encrypting";
 
     const fileType = getFileType(file);
 
@@ -109,10 +131,7 @@ const encryptFile = limitFunction(
     const thumbnailBuffer = await thumbnail?.arrayBuffer();
     const thumbnailEncrypted = thumbnailBuffer && (await encryptData(thumbnailBuffer, dataKey));
 
-    status.update((value) => {
-      value.status = "upload-pending";
-      return value;
-    });
+    state.status = "upload-pending";
 
     return {
       dataKeyWrapped,
@@ -130,20 +149,14 @@ const encryptFile = limitFunction(
 );
 
 const requestFileUpload = limitFunction(
-  async (status: Writable<FileUploadStatus>, form: FormData, thumbnailForm: FormData | null) => {
-    status.update((value) => {
-      value.status = "uploading";
-      return value;
-    });
+  async (state: FileUploadState, form: FormData, thumbnailForm: FormData | null) => {
+    state.status = "uploading";
 
     const res = await axios.post("/api/file/upload", form, {
       onUploadProgress: ({ progress, rate, estimated }) => {
-        status.update((value) => {
-          value.progress = progress;
-          value.rate = rate;
-          value.estimated = estimated;
-          return value;
-        });
+        state.progress = progress;
+        state.rate = rate;
+        state.estimated = estimated;
       },
     });
     const { file }: FileUploadResponse = res.data;
@@ -157,10 +170,7 @@ const requestFileUpload = limitFunction(
       }
     }
 
-    status.update((value) => {
-      value.status = "uploaded";
-      return value;
-    });
+    state.status = "uploaded";
 
     return { fileId: file };
   },
@@ -176,15 +186,12 @@ export const uploadFile = async (
 ): Promise<
   { fileId: number; fileBuffer: ArrayBuffer; thumbnailBuffer?: ArrayBuffer } | undefined
 > => {
-  const status = writable<FileUploadStatus>({
+  uploadingFiles.push({
     name: file.name,
     parentId,
     status: "encryption-pending",
   });
-  fileUploadStatusStore.update((value) => {
-    value.push(status);
-    return value;
-  });
+  const state = uploadingFiles.at(-1)!;
 
   try {
     const { fileBuffer, fileSigned } = await requestDuplicateFileScan(
@@ -193,14 +200,8 @@ export const uploadFile = async (
       onDuplicate,
     );
     if (!fileBuffer || !fileSigned) {
-      status.update((value) => {
-        value.status = "canceled";
-        return value;
-      });
-      fileUploadStatusStore.update((value) => {
-        value = value.filter((v) => v !== status);
-        return value;
-      });
+      state.status = "canceled";
+      uploadingFiles = uploadingFiles.filter((file) => file !== state);
       return undefined;
     }
 
@@ -214,7 +215,7 @@ export const uploadFile = async (
       createdAtEncrypted,
       lastModifiedAtEncrypted,
       thumbnail,
-    } = await encryptFile(status, file, fileBuffer, masterKey);
+    } = await encryptFile(state, file, fileBuffer, masterKey);
 
     const form = new FormData();
     form.set(
@@ -252,13 +253,10 @@ export const uploadFile = async (
       thumbnailForm.set("content", new Blob([thumbnail.ciphertext]));
     }
 
-    const { fileId } = await requestFileUpload(status, form, thumbnailForm);
+    const { fileId } = await requestFileUpload(state, form, thumbnailForm);
     return { fileId, fileBuffer, thumbnailBuffer: thumbnail?.plaintext };
   } catch (e) {
-    status.update((value) => {
-      value.status = "error";
-      return value;
-    });
+    state.status = "error";
     throw e;
   }
 };

src/lib/modules/filesystem.ts

@@ -1,10 +1,5 @@
 import { get, writable, type Writable } from "svelte/store";
 import {
-  getDirectoryInfos as getDirectoryInfosFromIndexedDB,
-  getDirectoryInfo as getDirectoryInfoFromIndexedDB,
-  storeDirectoryInfo,
-  deleteDirectoryInfo,
-  getFileInfos as getFileInfosFromIndexedDB,
   getFileInfo as getFileInfoFromIndexedDB,
   storeFileInfo,
   deleteFileInfo,
@@ -13,32 +8,10 @@ import {
   storeCategoryInfo,
   updateCategoryInfo as updateCategoryInfoInIndexedDB,
   deleteCategoryInfo,
-  type DirectoryId,
-  type CategoryId,
 } from "$lib/indexedDB";
 import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
 import { trpc, isTRPCClientError } from "$trpc/client";
 
-export type DirectoryInfo =
-  | {
-      id: "root";
-      parentId?: undefined;
-      dataKey?: undefined;
-      dataKeyVersion?: undefined;
-      name?: undefined;
-      subDirectoryIds: number[];
-      fileIds: number[];
-    }
-  | {
-      id: number;
-      parentId: DirectoryId;
-      dataKey?: CryptoKey;
-      dataKeyVersion?: Date;
-      name: string;
-      subDirectoryIds: number[];
-      fileIds: number[];
-    };
-
 export interface FileInfo {
   id: number;
   parentId: DirectoryId;
@@ -72,98 +45,9 @@ export type CategoryInfo =
       isFileRecursive: boolean;
     };
 
-const directoryInfoStore = new Map<DirectoryId, Writable<DirectoryInfo | null>>();
 const fileInfoStore = new Map<number, Writable<FileInfo | null>>();
 const categoryInfoStore = new Map<CategoryId, Writable<CategoryInfo | null>>();
 
-const fetchDirectoryInfoFromIndexedDB = async (
-  id: DirectoryId,
-  info: Writable<DirectoryInfo | null>,
-) => {
-  if (get(info)) return;
-
-  const [directory, subDirectories, files] = await Promise.all([
-    id !== "root" ? getDirectoryInfoFromIndexedDB(id) : undefined,
-    getDirectoryInfosFromIndexedDB(id),
-    getFileInfosFromIndexedDB(id),
-  ]);
-  const subDirectoryIds = subDirectories.map(({ id }) => id);
-  const fileIds = files.map(({ id }) => id);
-
-  if (id === "root") {
-    info.set({ id, subDirectoryIds, fileIds });
-  } else {
-    if (!directory) return;
-    info.set({
-      id,
-      parentId: directory.parentId,
-      name: directory.name,
-      subDirectoryIds,
-      fileIds,
-    });
-  }
-};
-
-const fetchDirectoryInfoFromServer = async (
-  id: DirectoryId,
-  info: Writable<DirectoryInfo | null>,
-  masterKey: CryptoKey,
-) => {
-  let data;
-  try {
-    data = await trpc().directory.get.query({ id });
-  } catch (e) {
-    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
-      info.set(null);
-      await deleteDirectoryInfo(id as number);
-      return;
-    }
-    throw new Error("Failed to fetch directory information");
-  }
-
-  const { metadata, subDirectories: subDirectoryIds, files: fileIds } = data;
-
-  if (id === "root") {
-    info.set({ id, subDirectoryIds, fileIds });
-  } else {
-    const { dataKey } = await unwrapDataKey(metadata!.dek, masterKey);
-    const name = await decryptString(metadata!.name, metadata!.nameIv, dataKey);
-
-    info.set({
-      id,
-      parentId: metadata!.parent,
-      dataKey,
-      dataKeyVersion: new Date(metadata!.dekVersion),
-      name,
-      subDirectoryIds,
-      fileIds,
-    });
-    await storeDirectoryInfo({ id, parentId: metadata!.parent, name });
-  }
-};
-
-const fetchDirectoryInfo = async (
-  id: DirectoryId,
-  info: Writable<DirectoryInfo | null>,
-  masterKey: CryptoKey,
-) => {
-  await fetchDirectoryInfoFromIndexedDB(id, info);
-  await fetchDirectoryInfoFromServer(id, info, masterKey);
-};
-
-export const getDirectoryInfo = (id: DirectoryId, masterKey: CryptoKey) => {
-  // TODO: MEK rotation
-
-  let info = directoryInfoStore.get(id);
-  if (!info) {
-    info = writable(null);
-    directoryInfoStore.set(id, info);
-  }
-
-  fetchDirectoryInfo(id, info, masterKey); // Intended
-  return info;
-};
-
 const fetchFileInfoFromIndexedDB = async (id: number, info: Writable<FileInfo | null>) => {
   if (get(info)) return;
 

src/lib/modules/filesystem2.svelte.ts

@@ -0,0 +1,191 @@
+import {
+  getDirectoryInfos as getDirectoryInfosFromIndexedDB,
+  getDirectoryInfo as getDirectoryInfoFromIndexedDB,
+  storeDirectoryInfo,
+  deleteDirectoryInfo,
+  getFileInfos as getFileInfosFromIndexedDB,
+  getFileInfo as getFileInfoFromIndexedDB,
+  storeFileInfo,
+  deleteFileInfo,
+  getCategoryInfos as getCategoryInfosFromIndexedDB,
+  getCategoryInfo as getCategoryInfoFromIndexedDB,
+  storeCategoryInfo,
+  updateCategoryInfo as updateCategoryInfoInIndexedDB,
+  deleteCategoryInfo,
+} from "$lib/indexedDB";
+import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
+import { monotonicResolve } from "$lib/utils";
+import { trpc, isTRPCClientError } from "$trpc/client";
+
+type DataKey = { key: CryptoKey; version: Date };
+
+interface LocalDirectoryInfo {
+  id: number;
+  parentId: DirectoryId;
+  dataKey?: DataKey;
+  name: string;
+  subDirectories: SubDirectoryInfo[];
+  files: SummarizedFileInfo[];
+}
+
+interface RootDirectoryInfo {
+  id: "root";
+  parentId?: undefined;
+  dataKey?: undefined;
+  dataKeyVersion?: undefined;
+  name?: undefined;
+  subDirectories: SubDirectoryInfo[];
+  files: SummarizedFileInfo[];
+}
+
+export type DirectoryInfo = LocalDirectoryInfo | RootDirectoryInfo;
+export type SubDirectoryInfo = Omit<LocalDirectoryInfo, "parentId" | "subDirectories" | "files">;
+
+interface FileInfo {
+  id: number;
+  parentId: DirectoryId;
+  dataKey?: DataKey;
+  contentType: string;
+  contentIv: string | undefined;
+  name: string;
+  createdAt?: Date;
+  lastModifiedAt: Date;
+  categories: { id: number; name: string }[];
+}
+
+export type SummarizedFileInfo = Omit<FileInfo, "parentId" | "contentIv" | "categories">;
+
+interface LocalCategoryInfo {
+  id: number;
+  dataKey: DataKey | undefined;
+  name: string;
+  subCategories: Omit<LocalCategoryInfo, "subCategories" | "files" | "isFileRecursive">[];
+  files: { id: number; name: string; isRecursive: boolean }[];
+  isFileRecursive: boolean;
+}
+
+interface RootCategoryInfo {
+  id: "root";
+  dataKey?: undefined;
+  name?: undefined;
+  subCategories: Omit<LocalCategoryInfo, "subCategories" | "files" | "isFileRecursive">[];
+  files?: undefined;
+}
+
+export type CategoryInfo = LocalCategoryInfo | RootCategoryInfo;
+
+const directoryInfoCache = new Map<DirectoryId, DirectoryInfo | Promise<DirectoryInfo>>();
+
+export const getDirectoryInfo = async (id: DirectoryId, masterKey: CryptoKey) => {
+  const info = directoryInfoCache.get(id);
+  if (info instanceof Promise) {
+    return info;
+  }
+
+  const { promise, resolve } = Promise.withResolvers<DirectoryInfo>();
+  if (!info) {
+    directoryInfoCache.set(id, promise);
+  }
+
+  monotonicResolve(
+    [!info && fetchDirectoryInfoFromIndexedDB(id), fetchDirectoryInfoFromServer(id, masterKey)],
+    (directoryInfo) => {
+      let info = directoryInfoCache.get(id);
+      if (info instanceof Promise) {
+        const state = $state(directoryInfo);
+        directoryInfoCache.set(id, state);
+        resolve(state);
+      } else {
+        Object.assign(info!, directoryInfo);
+        resolve(info!);
+      }
+    },
+  );
+  return info ?? promise;
+};
+
+const fetchDirectoryInfoFromIndexedDB = async (
+  id: DirectoryId,
+): Promise<DirectoryInfo | undefined> => {
+  const [directory, subDirectories, files] = await Promise.all([
+    id !== "root" ? getDirectoryInfoFromIndexedDB(id) : undefined,
+    getDirectoryInfosFromIndexedDB(id),
+    getFileInfosFromIndexedDB(id),
+  ]);
+
+  if (id === "root") {
+    return { id, subDirectories, files };
+  } else if (directory) {
+    return { id, parentId: directory.parentId, name: directory.name, subDirectories, files };
+  }
+};
+
+const fetchDirectoryInfoFromServer = async (
+  id: DirectoryId,
+  masterKey: CryptoKey,
+): Promise<DirectoryInfo | undefined> => {
+  try {
+    const {
+      metadata,
+      subDirectories: subDirectoriesRaw,
+      files: filesRaw,
+    } = await trpc().directory.get.query({ id });
+    const [subDirectories, files] = await Promise.all([
+      Promise.all(
+        subDirectoriesRaw.map(async (directory) => {
+          const { dataKey } = await unwrapDataKey(directory.dek, masterKey);
+          const name = await decryptString(directory.name, directory.nameIv, dataKey);
+          return {
+            id: directory.id,
+            dataKey: { key: dataKey, version: directory.dekVersion },
+            name,
+          };
+        }),
+      ),
+      Promise.all(
+        filesRaw.map(async (file) => {
+          const { dataKey } = await unwrapDataKey(file.dek, masterKey);
+          const [name, createdAt, lastModifiedAt] = await Promise.all([
+            decryptString(file.name, file.nameIv, dataKey),
+            file.createdAt ? decryptDate(file.createdAt, file.createdAtIv!, dataKey) : undefined,
+            decryptDate(file.lastModifiedAt, file.lastModifiedAtIv, dataKey),
+          ]);
+          return {
+            id: file.id,
+            dataKey: { key: dataKey, version: file.dekVersion },
+            contentType: file.contentType,
+            name,
+            createdAt,
+            lastModifiedAt,
+          };
+        }),
+      ),
+    ]);
+
+    if (id === "root") {
+      return { id, subDirectories, files };
+    } else {
+      const { dataKey } = await unwrapDataKey(metadata!.dek, masterKey);
+      const name = await decryptString(metadata!.name, metadata!.nameIv, dataKey);
+      return {
+        id,
+        parentId: metadata!.parent,
+        dataKey: { key: dataKey, version: metadata!.dekVersion },
+        name,
+        subDirectories,
+        files,
+      };
+    }
+  } catch (e) {
+    if (isTRPCClientError(e) && e.data?.code === "NOT_FOUND") {
+      directoryInfoCache.delete(id);
+      await deleteDirectoryInfo(id as number);
+      return;
+    }
+    throw new Error("Failed to fetch directory information");
+  }
+};
+
+const decryptDate = async (ciphertext: string, iv: string, dataKey: CryptoKey) => {
+  return new Date(parseInt(await decryptString(ciphertext, iv, dataKey), 10));
+};

src/lib/server/db/category.ts

@@ -2,8 +2,6 @@ import { IntegrityError } from "./error";
 import db from "./kysely";
 import type { Ciphertext } from "./schema";
 
-export type CategoryId = "root" | number;
-
 interface Category {
   id: number;
   parentId: CategoryId;

src/lib/server/db/file.ts

@@ -4,8 +4,6 @@ import { IntegrityError } from "./error";
 import db from "./kysely";
 import type { Ciphertext } from "./schema";
 
-export type DirectoryId = "root" | number;
-
 interface Directory {
   id: number;
   parentId: DirectoryId;

src/lib/stores/file.ts

@@ -1,21 +1,5 @@
 import { writable, type Writable } from "svelte/store";
 
-export interface FileUploadStatus {
-  name: string;
-  parentId: "root" | number;
-  status:
-    | "encryption-pending"
-    | "encrypting"
-    | "upload-pending"
-    | "uploading"
-    | "uploaded"
-    | "canceled"
-    | "error";
-  progress?: number;
-  rate?: number;
-  estimated?: number;
-}
-
 export interface FileDownloadStatus {
   id: number;
   status:
@@ -32,16 +16,8 @@ export interface FileDownloadStatus {
   result?: ArrayBuffer;
 }
 
-export const fileUploadStatusStore = writable<Writable<FileUploadStatus>[]>([]);
-
 export const fileDownloadStatusStore = writable<Writable<FileDownloadStatus>[]>([]);
 
-export const isFileUploading = (
-  status: FileUploadStatus["status"],
-): status is "encryption-pending" | "encrypting" | "upload-pending" | "uploading" => {
-  return ["encryption-pending", "encrypting", "upload-pending", "uploading"].includes(status);
-};
-
 export const isFileDownloading = (
   status: FileDownloadStatus["status"],
 ): status is "download-pending" | "downloading" | "decryption-pending" | "decrypting" => {

src/lib/types/filesystem.d.ts

@@ -0,0 +1,2 @@
+type DirectoryId = "root" | number;
+type CategoryId = "root" | number;

src/lib/utils/index.ts

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

src/lib/utils/promise.ts

@@ -0,0 +1,16 @@
+export const monotonicResolve = <T>(
+  promises: (Promise<T | undefined> | false)[],
+  callback: (value: T) => void,
+) => {
+  let latestResolvedIndex = -1;
+
+  promises.forEach((promise, index) => {
+    if (!promise) return;
+    promise.then((value) => {
+      if (value !== undefined && index > latestResolvedIndex) {
+        latestResolvedIndex = index;
+        callback(value);
+      }
+    });
+  });
+};

src/lib/utils/sort.ts

@@ -32,7 +32,7 @@ const sortByDateAsc: SortFunc = ({ date: a }, { date: b }) => {
 
 const sortByDateDesc: SortFunc = (a, b) => -sortByDateAsc(a, b);
 
-export const sortEntries = <T extends SortEntry>(entries: T[], sortBy: SortBy) => {
+export const sortEntries = <T extends SortEntry>(entries: T[], sortBy = SortBy.NAME_ASC) => {
   let sortFunc: SortFunc;
 
   switch (sortBy) {
@@ -54,4 +54,5 @@ export const sortEntries = <T extends SortEntry>(entries: T[], sortBy: SortBy) =
   }
 
   entries.sort(sortFunc);
+  return entries;
 };

src/routes/(fullscreen)/file/uploads/+page.svelte

@@ -1,19 +1,10 @@
 <script lang="ts">
-  import { get } from "svelte/store";
   import { FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
+  import { getUploadingFiles, clearUploadedFiles } from "$lib/modules/file";
   import File from "./File.svelte";
 
-  let uploadingFiles = $derived(
-    $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status)),
-  );
-
-  $effect(() => () => {
-    $fileUploadStatusStore = $fileUploadStatusStore.filter((status) =>
-      isFileUploading(get(status).status),
-    );
-  });
+  $effect(() => clearUploadedFiles);
 </script>
 
 <svelte:head>
@@ -23,8 +14,8 @@
 <TopBar />
 <FullscreenDiv>
   <div class="space-y-2 pb-4">
-    {#each uploadingFiles as status}
-      <File {status} />
+    {#each getUploadingFiles() as file}
+      <File state={file} />
     {/each}
   </div>
 </FullscreenDiv>

src/routes/(fullscreen)/file/uploads/File.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import type { FileUploadStatus } from "$lib/stores";
+  import type { FileUploadState } from "$lib/modules/file";
   import { formatNetworkSpeed } from "$lib/utils";
 
   import IconPending from "~icons/material-symbols/pending";
@@ -11,45 +10,45 @@
   import IconError from "~icons/material-symbols/error";
 
   interface Props {
-    status: Writable<FileUploadStatus>;
+    state: FileUploadState;
   }
 
-  let { status }: Props = $props();
+  let { state }: Props = $props();
 </script>
 
 <div class="flex h-14 items-center gap-x-4 p-2">
   <div class="flex-shrink-0 text-lg text-gray-600">
-    {#if $status.status === "encryption-pending"}
+    {#if state.status === "encryption-pending"}
       <IconPending />
-    {:else if $status.status === "encrypting"}
+    {:else if state.status === "encrypting"}
       <IconLockClock />
-    {:else if $status.status === "upload-pending"}
+    {:else if state.status === "upload-pending"}
       <IconCloud />
-    {:else if $status.status === "uploading"}
+    {:else if state.status === "uploading"}
       <IconCloudUpload />
-    {:else if $status.status === "uploaded"}
+    {:else if state.status === "uploaded"}
       <IconCloudDone class="text-blue-500" />
-    {:else if $status.status === "error"}
+    {:else if state.status === "error"}
       <IconError class="text-red-500" />
     {/if}
   </div>
   <div class="flex-grow overflow-hidden">
-    <p title={$status.name} class="truncate font-medium">
-      {$status.name}
+    <p title={state.name} class="truncate font-medium">
+      {state.name}
     </p>
     <p class="text-xs text-gray-800">
-      {#if $status.status === "encryption-pending"}
+      {#if state.status === "encryption-pending"}
         준비 중
-      {:else if $status.status === "encrypting"}
+      {:else if state.status === "encrypting"}
         암호화하는 중
-      {:else if $status.status === "upload-pending"}
+      {:else if state.status === "upload-pending"}
         업로드를 기다리는 중
-      {:else if $status.status === "uploading"}
+      {:else if state.status === "uploading"}
         전송됨
-        {Math.floor(($status.progress ?? 0) * 100)}% · {formatNetworkSpeed(($status.rate ?? 0) * 8)}
-      {:else if $status.status === "uploaded"}
+        {Math.floor((state.progress ?? 0) * 100)}% · {formatNetworkSpeed((state.rate ?? 0) * 8)}
+      {:else if state.status === "uploaded"}
         업로드 완료
-      {:else if $status.status === "error"}
+      {:else if state.status === "error"}
         업로드 실패
       {/if}
     </p>

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

@@ -1,11 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import type { Writable } from "svelte/store";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
   import { FloatingButton } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
+  import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem2.svelte";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
@@ -30,7 +29,7 @@
   let { data } = $props();
   let context = createContext();
 
-  let info: Writable<DirectoryInfo | null> | undefined = $state();
+  let infoPromise: Promise<DirectoryInfo> | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
   let duplicatedFile: File | undefined = $state();
   let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
@@ -61,7 +60,7 @@
         .then((res) => {
           if (!res) return;
           // TODO: FIXME
-          info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
         })
         .catch((e: Error) => {
           // TODO: FIXME
@@ -79,7 +78,7 @@
   });
 
   $effect(() => {
-    info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
   });
 </script>
 
@@ -89,35 +88,33 @@
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
+{#await infoPromise then info}
+  {#if info}
     <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}
       <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}
         <DirectoryEntries
-          info={$info}
+          {info}
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
           onEntryMenuClick={(entry) => {
             context.selectedEntry = entry;
             isEntryMenuBottomSheetOpen = true;
           }}
-          showParentEntry={isFromFilePage && $info.parentId !== undefined}
+          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
@@ -142,7 +139,7 @@
       bind:isOpen={isDirectoryCreateModalOpen}
       onCreateClick={async (name) => {
         if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
-      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
           return true;
         }
         return false;
@@ -176,7 +173,7 @@
       bind:isOpen={isEntryRenameModalOpen}
       onRenameClick={async (newName: string) => {
         if (await requestEntryRename(context.selectedEntry!, newName)) {
-      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
           return true;
         }
         return false;
@@ -186,9 +183,11 @@
       bind:isOpen={isEntryDeleteModalOpen}
       onDeleteClick={async () => {
         if (await requestEntryDeletion(context.selectedEntry!)) {
-      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+          infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
           return true;
         }
         return false;
       }}
     />
+  {/if}
+{/await}

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

@@ -1,21 +1,9 @@
 <script lang="ts">
-  import { untrack } from "svelte";
-  import { get, type Writable } from "svelte/store";
   import { ActionEntryButton, RowVirtualizer } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import {
-    getDirectoryInfo,
-    getFileInfo,
-    type DirectoryInfo,
-    type FileInfo,
-  } from "$lib/modules/filesystem";
-  import {
-    fileUploadStatusStore,
-    isFileUploading,
-    masterKeyStore,
-    type FileUploadStatus,
-  } from "$lib/stores";
-  import { SortBy, sortEntries } from "$lib/utils";
+  import { getUploadingFiles, type LiveFileUploadState } from "$lib/modules/file";
+  import type { DirectoryInfo } from "$lib/modules/filesystem2.svelte";
+  import { sortEntries } from "$lib/utils";
   import File from "./File.svelte";
   import SubDirectory from "./SubDirectory.svelte";
   import UploadingFile from "./UploadingFile.svelte";
@@ -27,7 +15,6 @@
     onEntryMenuClick: (entry: SelectedEntry) => void;
     onParentClick?: () => void;
     showParentEntry?: boolean;
-    sortBy?: SortBy;
   }
 
   let {
@@ -36,85 +23,29 @@
     onEntryMenuClick,
     onParentClick,
     showParentEntry = false,
-    sortBy = SortBy.NAME_ASC,
   }: Props = $props();
 
-  interface DirectoryEntry {
-    name?: string;
-    info: Writable<DirectoryInfo | null>;
-  }
-
   type FileEntry =
-    | {
-        type: "file";
-        name?: string;
-        info: Writable<FileInfo | null>;
-      }
-    | {
-        type: "uploading-file";
-        name: string;
-        info: Writable<FileUploadStatus>;
-      };
+    | { type: "file"; name: string; details: (typeof info.files)[number] }
+    | { type: "uploading-file"; name: string; details: LiveFileUploadState };
 
-  let subDirectories: DirectoryEntry[] = $state([]);
-  let files: FileEntry[] = $state([]);
-
-  $effect(() => {
-    // TODO: Fix duplicated requests
-
-    subDirectories = info.subDirectoryIds.map((id) => {
-      const info = getDirectoryInfo(id, $masterKeyStore?.get(1)?.key!);
-      return { name: get(info)?.name, info };
+  const toFileEntry =
+    <T extends FileEntry["type"]>(type: T) =>
+    (details: Extract<FileEntry, { type: T }>["details"]) => ({
+      type,
+      name: details.name,
+      details,
     });
-    files = info.fileIds
-      .map((id): FileEntry => {
-        const info = getFileInfo(id, $masterKeyStore?.get(1)?.key!);
-        return {
-          type: "file",
-          name: get(info)?.name,
-          info,
-        };
-      })
-      .concat(
-        $fileUploadStatusStore
-          .filter((statusStore) => {
-            const { parentId, status } = get(statusStore);
-            return parentId === info.id && isFileUploading(status);
-          })
-          .map((status) => ({
-            type: "uploading-file",
-            name: get(status).name,
-            info: status,
-          })),
+
+  const subDirectories = $derived(
+    sortEntries(structuredClone($state.snapshot(info.subDirectories))),
   );
-
-    const sort = () => {
-      sortEntries(subDirectories, sortBy);
-      sortEntries(files, sortBy);
-    };
-    return untrack(() => {
-      sort();
-
-      const unsubscribes = subDirectories
-        .map((subDirectory) =>
-          subDirectory.info.subscribe((value) => {
-            if (subDirectory.name === value?.name) return;
-            subDirectory.name = value?.name;
-            sort();
-          }),
-        )
-        .concat(
-          files.map((file) =>
-            file.info.subscribe((value) => {
-              if (file.name === value?.name) return;
-              file.name = value?.name;
-              sort();
-            }),
-          ),
+  const files = $derived(
+    sortEntries<FileEntry>([
+      ...info.files.map(toFileEntry("file")),
+      ...getUploadingFiles(info.id).map(toFileEntry("uploading-file")),
+    ]),
   );
-      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
-    });
-  });
 </script>
 
 {#if subDirectories.length + files.length > 0 || showParentEntry}
@@ -124,8 +55,8 @@
         <DirectoryEntryLabel type="parent-directory" name=".." />
       </ActionEntryButton>
     {/if}
-    {#each subDirectories as { info }}
-      <SubDirectory {info} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
+    {#each subDirectories as subDirectory}
+      <SubDirectory info={subDirectory} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
     {/each}
     {#if files.length > 0}
       <RowVirtualizer
@@ -136,9 +67,9 @@
           {@const file = files[index]!}
           <div class={index + 1 < files.length ? "pb-1" : ""}>
             {#if file.type === "file"}
-              <File info={file.info} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
+              <File info={file.details} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
             {:else}
-              <UploadingFile status={file.info} />
+              <UploadingFile state={file.details} />
             {/if}
           </div>
         {/snippet}

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

@@ -1,66 +1,46 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
+  import { browser } from "$app/environment";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SummarizedFileInfo } from "$lib/modules/filesystem2.svelte";
+  import { requestFileThumbnailDownload } from "$lib/services/file";
   import { formatDateTime } from "$lib/utils";
-  import { requestFileThumbnailDownload } from "./service";
   import type { SelectedEntry } from "../service.svelte";
 
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
-    info: Writable<FileInfo | null>;
-    onclick: (selectedEntry: SelectedEntry) => void;
-    onOpenMenuClick: (selectedEntry: SelectedEntry) => void;
+    info: SummarizedFileInfo;
+    onclick: (entry: SelectedEntry) => void;
+    onOpenMenuClick: (entry: SelectedEntry) => void;
   }
 
   let { info, onclick, onOpenMenuClick }: Props = $props();
 
-  let thumbnail: string | undefined = $state();
+  let showThumbnail = $derived(
+    browser && (info.contentType.startsWith("image/") || info.contentType.startsWith("video/")),
+  );
+  let thumbnailPromise = $derived(
+    showThumbnail ? requestFileThumbnailDownload(info.id, info.dataKey?.key) : null,
+  );
 
-  const openFile = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info!;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onclick({ type: "file", id, dataKey, dataKeyVersion, name });
+  const action = (callback: typeof onclick) => {
+    callback({ type: "file", id: info.id, dataKey: info.dataKey, name: info.name });
   };
-
-  const openMenu = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info!;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onOpenMenuClick({ type: "file", id, dataKey, dataKeyVersion, name });
-  };
-
-  $effect(() => {
-    if ($info) {
-      requestFileThumbnailDownload($info.id, $info.dataKey)
-        .then((thumbnailUrl) => {
-          thumbnail = thumbnailUrl ?? undefined;
-        })
-        .catch(() => {
-          // TODO: Error Handling
-          thumbnail = undefined;
-        });
-    } else {
-      thumbnail = undefined;
-    }
-  });
 </script>
 
-{#if $info}
 <ActionEntryButton
   class="h-14"
-    onclick={openFile}
+  onclick={() => action(onclick)}
   actionButtonIcon={IconMoreVert}
-    onActionButtonClick={openMenu}
+  onActionButtonClick={() => action(onOpenMenuClick)}
 >
+  {#await thumbnailPromise then thumbnail}
     <DirectoryEntryLabel
       type="file"
-      {thumbnail}
-      name={$info.name}
-      subtext={formatDateTime($info.createdAt ?? $info.lastModifiedAt)}
+      thumbnail={thumbnail ?? undefined}
+      name={info.name}
+      subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
     />
+  {/await}
 </ActionEntryButton>
-{/if}

src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte

@@ -1,44 +1,29 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
   import { ActionEntryButton } from "$lib/components/atoms";
   import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import type { DirectoryInfo } from "$lib/modules/filesystem";
+  import type { SubDirectoryInfo } from "$lib/modules/filesystem2.svelte";
   import type { SelectedEntry } from "../service.svelte";
 
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
-  type SubDirectoryInfo = DirectoryInfo & { id: number };
-
   interface Props {
-    info: Writable<DirectoryInfo | null>;
-    onclick: (selectedEntry: SelectedEntry) => void;
-    onOpenMenuClick: (selectedEntry: SelectedEntry) => void;
+    info: SubDirectoryInfo;
+    onclick: (entry: SelectedEntry) => void;
+    onOpenMenuClick: (entry: SelectedEntry) => void;
   }
 
   let { info, onclick, onOpenMenuClick }: Props = $props();
 
-  const openDirectory = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onclick({ type: "directory", id, dataKey, dataKeyVersion, name });
-  };
-
-  const openMenu = () => {
-    const { id, dataKey, dataKeyVersion, name } = $info as SubDirectoryInfo;
-    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
-
-    onOpenMenuClick({ type: "directory", id, dataKey, dataKeyVersion, name });
+  const action = (callback: typeof onclick) => {
+    callback({ type: "directory", id: info.id, dataKey: info.dataKey, name: info.name });
   };
 </script>
 
-{#if $info}
 <ActionEntryButton
   class="h-14"
-    onclick={openDirectory}
+  onclick={() => action(onclick)}
   actionButtonIcon={IconMoreVert}
-    onActionButtonClick={openMenu}
+  onActionButtonClick={() => action(onOpenMenuClick)}
 >
-    <DirectoryEntryLabel type="directory" name={$info.name!} />
+  <DirectoryEntryLabel type="directory" name={info.name} />
 </ActionEntryButton>
-{/if}

src/routes/(main)/directory/[[id]]/DirectoryEntries/UploadingFile.svelte

@@ -1,38 +1,35 @@
 <script lang="ts">
-  import type { Writable } from "svelte/store";
-  import { isFileUploading, type FileUploadStatus } from "$lib/stores";
+  import type { LiveFileUploadState } from "$lib/modules/file";
   import { formatNetworkSpeed } from "$lib/utils";
 
   import IconDraft from "~icons/material-symbols/draft";
 
   interface Props {
-    status: Writable<FileUploadStatus>;
+    state: LiveFileUploadState;
   }
 
-  let { status }: Props = $props();
+  let { state }: Props = $props();
 </script>
 
-{#if isFileUploading($status.status)}
 <div class="flex h-14 gap-x-4 p-2">
   <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center text-xl">
     <IconDraft class="text-gray-600" />
   </div>
   <div class="flex flex-grow flex-col overflow-hidden text-gray-800">
-      <p title={$status.name} class="truncate font-medium">
-        {$status.name}
+    <p title={state.name} class="truncate font-medium">
+      {state.name}
     </p>
     <p class="text-xs">
-        {#if $status.status === "encryption-pending"}
+      {#if state.status === "encryption-pending"}
         준비 중
-        {:else if $status.status === "encrypting"}
+      {:else if state.status === "encrypting"}
         암호화하는 중
-        {:else if $status.status === "upload-pending"}
+      {:else if state.status === "upload-pending"}
         업로드를 기다리는 중
-        {:else if $status.status === "uploading"}
-          전송됨 {Math.floor(($status.progress ?? 0) * 100)}% ·
-          {formatNetworkSpeed(($status.rate ?? 0) * 8)}
+      {:else if state.status === "uploading"}
+        전송됨 {Math.floor((state.progress ?? 0) * 100)}% ·
+        {formatNetworkSpeed((state.rate ?? 0) * 8)}
       {/if}
     </p>
   </div>
 </div>
-{/if}

src/routes/(main)/directory/[[id]]/DirectoryEntries/service.ts

@@ -1 +0,0 @@
-export { requestFileThumbnailDownload } from "$lib/services/file";

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

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { untrack } from "svelte";
-  import { get, type Writable } from "svelte/store";
-  import { fileUploadStatusStore, isFileUploading, type FileUploadStatus } from "$lib/stores";
+  import { getUploadingFiles } from "$lib/modules/file";
 
   interface Props {
     onclick: () => void;
@@ -9,21 +7,7 @@
 
   let { onclick }: Props = $props();
 
-  let uploadingFiles: Writable<FileUploadStatus>[] = $state([]);
-
-  $effect(() => {
-    uploadingFiles = $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status));
-    return untrack(() => {
-      const unsubscribes = uploadingFiles.map((uploadingFile) =>
-        uploadingFile.subscribe(({ status }) => {
-          if (!isFileUploading(status)) {
-            uploadingFiles = uploadingFiles.filter((file) => file !== uploadingFile);
-          }
-        }),
-      );
-      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
-    });
-  });
+  let uploadingFiles = $derived(getUploadingFiles());
 </script>
 
 {#if uploadingFiles.length > 0}

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

@@ -14,8 +14,7 @@ import { trpc } from "$trpc/client";
 export interface SelectedEntry {
   type: "directory" | "file";
   id: number;
-  dataKey: CryptoKey;
-  dataKeyVersion: Date;
+  dataKey: { key: CryptoKey; version: Date } | undefined;
   name: string;
 }
 
@@ -97,20 +96,26 @@ export const requestFileUpload = async (
 };
 
 export const requestEntryRename = async (entry: SelectedEntry, newName: string) => {
-  const newNameEncrypted = await encryptString(newName, entry.dataKey);
+  if (!entry.dataKey) {
+    // TODO: Error Handling
+    console.log("hi");
+    return false;
+  }
+
+  const newNameEncrypted = await encryptString(newName, entry.dataKey.key);
 
   try {
     if (entry.type === "directory") {
       await trpc().directory.rename.mutate({
         id: entry.id,
-        dekVersion: entry.dataKeyVersion,
+        dekVersion: entry.dataKey.version,
         name: newNameEncrypted.ciphertext,
         nameIv: newNameEncrypted.iv,
       });
     } else {
       await trpc().file.rename.mutate({
         id: entry.id,
-        dekVersion: entry.dataKeyVersion,
+        dekVersion: entry.dataKey.version,
         name: newNameEncrypted.ciphertext,
         nameIv: newNameEncrypted.iv,
       });

src/routes/+layout.svelte

@@ -2,10 +2,9 @@
   import { onMount } from "svelte";
   import { get } from "svelte/store";
   import { goto as svelteGoto } from "$app/navigation";
+  import { getUploadingFiles } from "$lib/modules/file";
   import {
-    fileUploadStatusStore,
     fileDownloadStatusStore,
-    isFileUploading,
     isFileDownloading,
     clientKeyStore,
     masterKeyStore,
@@ -16,7 +15,7 @@
 
   const protectFileUploadAndDownload = (e: BeforeUnloadEvent) => {
     if (
-      $fileUploadStatusStore.some((status) => isFileUploading(get(status).status)) ||
+      getUploadingFiles().length > 0 ||
       $fileDownloadStatusStore.some((status) => isFileDownloading(get(status).status))
     ) {
       e.preventDefault();

src/trpc/routers/directory.ts

@@ -32,8 +32,27 @@ const directoryRouter = router({
           name: directory.encName.ciphertext,
           nameIv: directory.encName.iv,
         },
-        subDirectories: directories.map(({ id }) => id),
-        files: files.map(({ id }) => id),
+        subDirectories: directories.map((directory) => ({
+          id: directory.id,
+          mekVersion: directory.mekVersion,
+          dek: directory.encDek,
+          dekVersion: directory.dekVersion,
+          name: directory.encName.ciphertext,
+          nameIv: directory.encName.iv,
+        })),
+        files: files.map((file) => ({
+          id: file.id,
+          mekVersion: file.mekVersion,
+          dek: file.encDek,
+          dekVersion: file.dekVersion,
+          contentType: file.contentType,
+          name: file.encName.ciphertext,
+          nameIv: file.encName.iv,
+          createdAt: file.encCreatedAt?.ciphertext,
+          createdAtIv: file.encCreatedAt?.iv,
+          lastModifiedAt: file.encLastModifiedAt.ciphertext,
+          lastModifiedAtIv: file.encLastModifiedAt.iv,
+        })),
       };
     }),