Merge pull request #19 from kmc7468/dev

v0.8.0

.github/workflows/docker.yaml

@@ -31,7 +31,7 @@ jobs:
         with:
           images: ghcr.io/${{ github.repository }}
           tags: |
-            type=semver,pattern={{version}}
+            type=semver,value={{version}}
             type=raw,value=latest
             type=sha
 

package.json

@@ -32,7 +32,6 @@
     "autoprefixer": "^10.4.23",
     "axios": "^1.13.2",
     "dexie": "^4.2.1",
-    "es-hangul": "^2.3.8",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.14.0",

pnpm-lock.yaml

@@ -84,9 +84,6 @@ importers:
       dexie:
         specifier: ^4.2.1
         version: 4.2.1
-      es-hangul:
-        specifier: ^2.3.8
-        version: 2.3.8
       eslint:
         specifier: ^9.39.2
         version: 9.39.2(jiti@1.21.7)
@@ -992,9 +989,6 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-hangul@2.3.8:
-    resolution: {integrity: sha512-VrJuqYBC7W04aKYjCnswomuJNXQRc0q33SG1IltVrRofi2YEE6FwVDPlsEJIdKbHwsOpbBL/mk9sUaBxVpbd+w==}
-
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
     engines: {node: '>= 0.4'}
@@ -2787,8 +2781,6 @@ snapshots:
 
   es-errors@1.3.0: {}
 
-  es-hangul@2.3.8: {}
-
   es-object-atoms@1.1.1:
     dependencies:
       es-errors: 1.3.0

src/lib/components/atoms/Chip.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import type { ClassValue } from "svelte/elements";
-
-  import IconClose from "~icons/material-symbols/close";
-
-  interface Props {
-    children: Snippet;
-    class?: ClassValue;
-    onclick?: () => void;
-    onRemoveClick?: () => void;
-    selected?: boolean;
-    removable?: boolean;
-  }
-
-  let {
-    children,
-    class: className,
-    onclick = () => (selected = !selected),
-    onRemoveClick,
-    removable = false,
-    selected = $bindable(false),
-  }: Props = $props();
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-  onclick={onclick && (() => setTimeout(onclick, 100))}
-  class={[
-    "inline-flex cursor-pointer items-center gap-x-1 rounded-lg px-3 py-1.5 text-sm font-medium transition active:scale-95",
-    selected
-      ? "bg-primary-500 text-white active:bg-primary-400"
-      : "bg-gray-100 text-gray-700 active:bg-gray-200",
-    className,
-  ]}
->
-  <span>
-    {@render children()}
-  </span>
-  {#if selected && removable}
-    <button
-      onclick={(e) => {
-        e.stopPropagation();
-        if (onRemoveClick) {
-          setTimeout(onRemoveClick, 100);
-        }
-      }}
-    >
-      <IconClose />
-    </button>
-  {/if}
-</div>

src/lib/components/atoms/RowVirtualizer.svelte

@@ -6,22 +6,13 @@
   interface Props {
     class?: ClassValue;
     count: number;
-    estimateItemHeight: (index: number) => number;
-    getItemKey?: (index: number) => string | number;
     item: Snippet<[index: number]>;
+    itemHeight: (index: number) => number;
     itemGap?: number;
     placeholder?: Snippet;
   }
 
-  let {
+  let { class: className, count, item, itemHeight, itemGap, placeholder }: Props = $props();
-    class: className,
-    count,
-    estimateItemHeight,
-    getItemKey,
-    item,
-    itemGap,
-    placeholder,
-  }: Props = $props();
 
   let element: HTMLElement | undefined = $state();
   let scrollMargin = $state(0);
@@ -29,9 +20,8 @@
   let virtualizer = $derived(
     createWindowVirtualizer({
       count,
-      estimateSize: estimateItemHeight,
+      estimateSize: itemHeight,
       gap: itemGap,
-      getItemKey: getItemKey,
       scrollMargin,
     }),
   );

src/lib/components/atoms/buttons/ActionEntryButton.svelte

@@ -49,7 +49,7 @@
   </div>
 </div>
 
-<style lang="postcss">
+<style>
   #container:active:not(:has(#action-button:active)) {
     @apply bg-gray-100;
   }

src/lib/components/atoms/index.ts

@@ -1,6 +1,5 @@
 export { default as BottomSheet } from "./BottomSheet.svelte";
 export * from "./buttons";
-export { default as Chip } from "./Chip.svelte";
 export * from "./divs";
 export * from "./inputs";
 export { default as Modal } from "./Modal.svelte";

src/lib/components/atoms/inputs/TextInput.svelte

@@ -28,7 +28,7 @@
   </div>
 </div>
 
-<style lang="postcss">
+<style>
   input:focus,
   input:not(:placeholder-shown) {
     @apply border-primary-300;

src/lib/components/molecules/SubCategories.svelte

@@ -10,9 +10,9 @@
     class?: ClassValue;
     info: CategoryInfo;
     onSubCategoryClick: (subCategory: SelectedCategory) => void;
-    onSubCategoryCreateClick?: () => void;
+    onSubCategoryCreateClick: () => void;
     onSubCategoryMenuClick?: (category: SelectedCategory) => void;
-    subCategoryCreatePosition?: "top" | "bottom" | "none";
+    subCategoryCreatePosition?: "top" | "bottom";
     subCategoryMenuIcon?: Component<SvelteHTMLElements["svg"]>;
   }
 
@@ -22,7 +22,7 @@
     onSubCategoryClick,
     onSubCategoryCreateClick,
     onSubCategoryMenuClick,
-    subCategoryCreatePosition = "none",
+    subCategoryCreatePosition = "bottom",
     subCategoryMenuIcon,
   }: Props = $props();
 </script>

src/lib/components/molecules/TopBar.svelte

@@ -8,11 +8,10 @@
     children?: Snippet;
     class?: ClassValue;
     onBackClick?: () => void;
-    showBackButton?: boolean;
     title?: string;
   }
 
-  let { children, class: className, onBackClick, showBackButton = true, title }: Props = $props();
+  let { children, class: className, onBackClick, title }: Props = $props();
 </script>
 
 <div
@@ -21,16 +20,12 @@
     className,
   ]}
 >
-  <div class="w-[2.3rem] flex-shrink-0">
+  <button
-    {#if showBackButton}
+    onclick={onBackClick || (() => history.back())}
-      <button
+    class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
-        onclick={onBackClick ?? (() => history.back())}
+  >
-        class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
+    <IconArrowBack class="text-2xl" />
-      >
+  </button>
-        <IconArrowBack class="text-2xl" />
-      </button>
-    {/if}
-  </div>
   {#if title}
     <p class="flex-grow truncate text-center text-lg font-semibold">{title}</p>
   {/if}

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

@@ -10,7 +10,6 @@ import { Scheduler } from "$lib/utils";
 import { trpc } from "$trpc/client";
 
 export interface FileUploadState {
-  id: string;
   name: string;
   parentId: DirectoryId;
   status:
@@ -209,7 +208,6 @@ export const uploadFile = async (
   onDuplicate: () => Promise<boolean>,
 ) => {
   uploadingFiles.push({
-    id: crypto.randomUUID(),
     name: file.name,
     parentId,
     status: "queued",

src/lib/modules/filesystem/category.ts

@@ -1,7 +1,6 @@
 import * as IndexedDB from "$lib/indexedDB";
 import { trpc, isTRPCClientError } from "$trpc/client";
-import { decryptFileMetadata, decryptCategoryMetadata } from "./common";
+import { FilesystemCache, decryptFileMetadata, decryptCategoryMetadata } from "./internal.svelte";
-import { FilesystemCache } from "./FilesystemCache.svelte";
 import type { CategoryInfo, MaybeCategoryInfo } from "./types";
 
 const cache = new FilesystemCache<CategoryId, MaybeCategoryInfo>({

src/lib/modules/filesystem/common.ts

@@ -1,50 +0,0 @@
-import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
-
-export const decryptDirectoryMetadata = async (
-  metadata: { dek: string; dekVersion: Date; name: string; nameIv: string },
-  masterKey: CryptoKey,
-) => {
-  const { dataKey } = await unwrapDataKey(metadata.dek, masterKey);
-  const name = await decryptString(metadata.name, metadata.nameIv, dataKey);
-
-  return {
-    dataKey: { key: dataKey, version: metadata.dekVersion },
-    name,
-  };
-};
-
-const decryptDate = async (ciphertext: string, iv: string, dataKey: CryptoKey) => {
-  return new Date(parseInt(await decryptString(ciphertext, iv, dataKey), 10));
-};
-
-export const decryptFileMetadata = async (
-  metadata: {
-    dek: string;
-    dekVersion: Date;
-    name: string;
-    nameIv: string;
-    createdAt?: string;
-    createdAtIv?: string;
-    lastModifiedAt: string;
-    lastModifiedAtIv: string;
-  },
-  masterKey: CryptoKey,
-) => {
-  const { dataKey } = await unwrapDataKey(metadata.dek, masterKey);
-  const [name, createdAt, lastModifiedAt] = await Promise.all([
-    decryptString(metadata.name, metadata.nameIv, dataKey),
-    metadata.createdAt
-      ? decryptDate(metadata.createdAt, metadata.createdAtIv!, dataKey)
-      : undefined,
-    decryptDate(metadata.lastModifiedAt, metadata.lastModifiedAtIv, dataKey),
-  ]);
-
-  return {
-    dataKey: { key: dataKey, version: metadata.dekVersion },
-    name,
-    createdAt,
-    lastModifiedAt,
-  };
-};
-
-export const decryptCategoryMetadata = decryptDirectoryMetadata;

src/lib/modules/filesystem/directory.ts

@@ -1,7 +1,6 @@
 import * as IndexedDB from "$lib/indexedDB";
 import { trpc, isTRPCClientError } from "$trpc/client";
-import { decryptDirectoryMetadata, decryptFileMetadata } from "./common";
+import { FilesystemCache, decryptDirectoryMetadata, decryptFileMetadata } from "./internal.svelte";
-import { FilesystemCache, type FilesystemCacheOptions } from "./FilesystemCache.svelte";
 import type { DirectoryInfo, MaybeDirectoryInfo } from "./types";
 
 const cache = new FilesystemCache<DirectoryId, MaybeDirectoryInfo>({
@@ -98,12 +97,6 @@ const storeToIndexedDB = (info: DirectoryInfo) => {
   return { ...info, exists: true as const };
 };
 
-export const getDirectoryInfo = (
+export const getDirectoryInfo = (id: DirectoryId, masterKey: CryptoKey) => {
-  id: DirectoryId,
+  return cache.get(id, masterKey);
-  masterKey: CryptoKey,
-  options?: {
-    fetchFromServer?: FilesystemCacheOptions<DirectoryId, MaybeDirectoryInfo>["fetchFromServer"];
-  },
-) => {
-  return cache.get(id, masterKey, options);
 };

src/lib/modules/filesystem/file.ts

@@ -1,7 +1,6 @@
 import * as IndexedDB from "$lib/indexedDB";
 import { trpc, isTRPCClientError } from "$trpc/client";
-import { decryptFileMetadata, decryptCategoryMetadata } from "./common";
+import { FilesystemCache, decryptFileMetadata, decryptCategoryMetadata } from "./internal.svelte";
-import { FilesystemCache, type FilesystemCacheOptions } from "./FilesystemCache.svelte";
 import type { FileInfo, MaybeFileInfo } from "./types";
 
 const cache = new FilesystemCache<number, MaybeFileInfo>({
@@ -169,12 +168,8 @@ const bulkStoreToIndexedDB = (infos: FileInfo[]) => {
   return infos.map((info) => [info.id, { ...info, exists: true }] as const);
 };
 
-export const getFileInfo = (
+export const getFileInfo = (id: number, masterKey: CryptoKey) => {
-  id: number,
+  return cache.get(id, masterKey);
-  masterKey: CryptoKey,
-  options?: { fetchFromServer?: FilesystemCacheOptions<number, MaybeFileInfo>["fetchFromServer"] },
-) => {
-  return cache.get(id, masterKey, options);
 };
 
 export const bulkGetFileInfo = (ids: number[], masterKey: CryptoKey) => {

src/lib/modules/filesystem/index.ts

@@ -1,5 +1,4 @@
 export * from "./category";
-export * from "./common";
 export * from "./directory";
 export * from "./file";
 export * from "./types";

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

@@ -1,6 +1,7 @@
 import { untrack } from "svelte";
+import { unwrapDataKey, decryptString } from "$lib/modules/crypto";
 
-export interface FilesystemCacheOptions<K, V> {
+interface FilesystemCacheOptions<K, V> {
   fetchFromIndexedDB: (key: K) => Promise<V | undefined>;
   fetchFromServer: (key: K, cachedValue: V | undefined, masterKey: CryptoKey) => Promise<V>;
   bulkFetchFromIndexedDB?: (keys: Set<K>) => Promise<Map<K, V>>;
@@ -15,11 +16,7 @@ export class FilesystemCache<K, V extends object> {
 
   constructor(private readonly options: FilesystemCacheOptions<K, V>) {}
 
-  get(
+  get(key: K, masterKey: CryptoKey) {
-    key: K,
-    masterKey: CryptoKey,
-    options?: { fetchFromServer?: FilesystemCacheOptions<K, V>["fetchFromServer"] },
-  ) {
     return untrack(() => {
       let state = this.map.get(key);
       if (state?.promise) return state.value ?? state.promise;
@@ -42,9 +39,7 @@ export class FilesystemCache<K, V extends object> {
             return loadedInfo;
           })
       )
-        .then((cachedInfo) =>
+        .then((cachedInfo) => this.options.fetchFromServer(key, cachedInfo, masterKey))
-          (options?.fetchFromServer ?? this.options.fetchFromServer)(key, cachedInfo, masterKey),
-        )
         .then((loadedInfo) => {
           if (state.value) {
             Object.assign(state.value, loadedInfo);
@@ -126,3 +121,52 @@ export class FilesystemCache<K, V extends object> {
     });
   }
 }
+
+export const decryptDirectoryMetadata = async (
+  metadata: { dek: string; dekVersion: Date; name: string; nameIv: string },
+  masterKey: CryptoKey,
+) => {
+  const { dataKey } = await unwrapDataKey(metadata.dek, masterKey);
+  const name = await decryptString(metadata.name, metadata.nameIv, dataKey);
+
+  return {
+    dataKey: { key: dataKey, version: metadata.dekVersion },
+    name,
+  };
+};
+
+const decryptDate = async (ciphertext: string, iv: string, dataKey: CryptoKey) => {
+  return new Date(parseInt(await decryptString(ciphertext, iv, dataKey), 10));
+};
+
+export const decryptFileMetadata = async (
+  metadata: {
+    dek: string;
+    dekVersion: Date;
+    name: string;
+    nameIv: string;
+    createdAt?: string;
+    createdAtIv?: string;
+    lastModifiedAt: string;
+    lastModifiedAtIv: string;
+  },
+  masterKey: CryptoKey,
+) => {
+  const { dataKey } = await unwrapDataKey(metadata.dek, masterKey);
+  const [name, createdAt, lastModifiedAt] = await Promise.all([
+    decryptString(metadata.name, metadata.nameIv, dataKey),
+    metadata.createdAt
+      ? decryptDate(metadata.createdAt, metadata.createdAtIv!, dataKey)
+      : undefined,
+    decryptDate(metadata.lastModifiedAt, metadata.lastModifiedAtIv, dataKey),
+  ]);
+
+  return {
+    dataKey: { key: dataKey, version: metadata.dekVersion },
+    name,
+    createdAt,
+    lastModifiedAt,
+  };
+};
+
+export const decryptCategoryMetadata = decryptDirectoryMetadata;

src/lib/modules/filesystem/types.ts

@@ -1,7 +1,7 @@
 export type DataKey = { key: CryptoKey; version: Date };
 type AllUndefined<T> = { [K in keyof T]?: undefined };
 
-export interface LocalDirectoryInfo {
+interface LocalDirectoryInfo {
   id: number;
   parentId: DirectoryId;
   dataKey?: DataKey;
@@ -10,7 +10,7 @@ export interface LocalDirectoryInfo {
   files: SummarizedFileInfo[];
 }
 
-export interface RootDirectoryInfo {
+interface RootDirectoryInfo {
   id: "root";
   parentId?: undefined;
   dataKey?: undefined;
@@ -45,7 +45,7 @@ export type MaybeFileInfo =
 export type SummarizedFileInfo = Omit<FileInfo, "categories">;
 export type CategoryFileInfo = SummarizedFileInfo & { isRecursive: boolean };
 
-export interface LocalCategoryInfo {
+interface LocalCategoryInfo {
   id: number;
   parentId: DirectoryId;
   dataKey?: DataKey;
@@ -55,7 +55,7 @@ export interface LocalCategoryInfo {
   isFileRecursive: boolean;
 }
 
-export interface RootCategoryInfo {
+interface RootCategoryInfo {
   id: "root";
   parentId?: undefined;
   dataKey?: undefined;

src/lib/server/db/file.ts

@@ -101,39 +101,6 @@ export const getAllDirectoriesByParent = async (userId: number, parentId: Direct
   );
 };
 
-export const getAllRecursiveDirectoriesByParent = async (userId: number, parentId: DirectoryId) => {
-  const directories = await db
-    .withRecursive("directory_tree", (db) =>
-      db
-        .selectFrom("directory")
-        .selectAll()
-        .$if(parentId === "root", (qb) => qb.where("parent_id", "is", null))
-        .$if(parentId !== "root", (qb) => qb.where("parent_id", "=", parentId as number))
-        .where("user_id", "=", userId)
-        .unionAll((db) =>
-          db
-            .selectFrom("directory")
-            .innerJoin("directory_tree", "directory.parent_id", "directory_tree.id")
-            .selectAll("directory"),
-        ),
-    )
-    .selectFrom("directory_tree")
-    .selectAll()
-    .execute();
-  return directories.map(
-    (directory) =>
-      ({
-        id: directory.id,
-        parentId: directory.parent_id ?? "root",
-        userId: directory.user_id,
-        mekVersion: directory.master_encryption_key_version,
-        encDek: directory.encrypted_data_encryption_key,
-        dekVersion: directory.data_encryption_key_version,
-        encName: directory.encrypted_name,
-      }) satisfies Directory,
-  );
-};
-
 export const getDirectory = async (userId: number, directoryId: number) => {
   const directory = await db
     .selectFrom("directory")
@@ -367,77 +334,14 @@ export const getAllFileIds = async (userId: number) => {
   return files.map(({ id }) => id);
 };
 
-export const getLegacyFiles = async (userId: number, limit: number = 100) => {
+export const getLegacyFileIds = async (userId: number) => {
   const files = await db
     .selectFrom("file")
-    .selectAll()
+    .select("id")
     .where("user_id", "=", userId)
     .where("encrypted_content_iv", "is not", null)
-    .limit(limit)
     .execute();
-  return files.map(
+  return files.map(({ id }) => id);
-    (file) =>
-      ({
-        id: file.id,
-        parentId: file.parent_id ?? "root",
-        userId: file.user_id,
-        path: file.path,
-        mekVersion: file.master_encryption_key_version,
-        encDek: file.encrypted_data_encryption_key,
-        dekVersion: file.data_encryption_key_version,
-        hskVersion: file.hmac_secret_key_version,
-        contentHmac: file.content_hmac,
-        contentType: file.content_type,
-        encContentIv: file.encrypted_content_iv,
-        encContentHash: file.encrypted_content_hash,
-        encName: file.encrypted_name,
-        encCreatedAt: file.encrypted_created_at,
-        encLastModifiedAt: file.encrypted_last_modified_at,
-      }) satisfies File,
-  );
-};
-
-export const getFilesWithoutThumbnail = async (userId: number, limit: number = 100) => {
-  const files = await db
-    .selectFrom("file")
-    .selectAll()
-    .where("user_id", "=", userId)
-    .where((eb) =>
-      eb.or([eb("content_type", "like", "image/%"), eb("content_type", "like", "video/%")]),
-    )
-    .where((eb) =>
-      eb.not(
-        eb.exists(
-          eb
-            .selectFrom("thumbnail")
-            .select("thumbnail.id")
-            .whereRef("thumbnail.file_id", "=", "file.id")
-            .limit(1),
-        ),
-      ),
-    )
-    .limit(limit)
-    .execute();
-  return files.map(
-    (file) =>
-      ({
-        id: file.id,
-        parentId: file.parent_id ?? "root",
-        userId: file.user_id,
-        path: file.path,
-        mekVersion: file.master_encryption_key_version,
-        encDek: file.encrypted_data_encryption_key,
-        dekVersion: file.data_encryption_key_version,
-        hskVersion: file.hmac_secret_key_version,
-        contentHmac: file.content_hmac,
-        contentType: file.content_type,
-        encContentIv: file.encrypted_content_iv,
-        encContentHash: file.encrypted_content_hash,
-        encName: file.encrypted_name,
-        encCreatedAt: file.encrypted_created_at,
-        encLastModifiedAt: file.encrypted_last_modified_at,
-      }) satisfies File,
-  );
 };
 
 export const getAllFileIdsByContentHmac = async (
@@ -530,109 +434,6 @@ export const getFilesWithCategories = async (userId: number, fileIds: number[])
   );
 };
 
-export const searchFiles = async (
-  userId: number,
-  filters: {
-    parentId: DirectoryId;
-    includeCategoryIds: number[];
-    excludeCategoryIds: number[];
-  },
-) => {
-  const baseQuery = db
-    .withRecursive("directory_tree", (db) =>
-      db
-        .selectFrom("directory")
-        .select("id")
-        .where("user_id", "=", userId)
-        .where((eb) => eb.val(filters.parentId !== "root")) // directory_tree will be empty if parentId is "root"
-        .$if(filters.parentId !== "root", (qb) => qb.where("id", "=", filters.parentId as number))
-        .unionAll(
-          db
-            .selectFrom("directory as d")
-            .innerJoin("directory_tree as dt", "d.parent_id", "dt.id")
-            .select("d.id"),
-        ),
-    )
-    .withRecursive("include_category_tree", (db) =>
-      db
-        .selectFrom("category")
-        .select(["id", "id as root_id"])
-        .where("id", "=", (eb) => eb.fn.any(eb.val(filters.includeCategoryIds)))
-        .where("user_id", "=", userId)
-        .unionAll(
-          db
-            .selectFrom("category as c")
-            .innerJoin("include_category_tree as ct", "c.parent_id", "ct.id")
-            .select(["c.id", "ct.root_id"]),
-        ),
-    )
-    .withRecursive("exclude_category_tree", (db) =>
-      db
-        .selectFrom("category")
-        .select("id")
-        .where("id", "=", (eb) => eb.fn.any(eb.val(filters.excludeCategoryIds)))
-        .where("user_id", "=", userId)
-        .unionAll((db) =>
-          db
-            .selectFrom("category as c")
-            .innerJoin("exclude_category_tree as ct", "c.parent_id", "ct.id")
-            .select("c.id"),
-        ),
-    )
-    .selectFrom("file")
-    .selectAll("file")
-    .$if(filters.parentId === "root", (qb) => qb.where("user_id", "=", userId)) // directory_tree isn't used if parentId is "root"
-    .$if(filters.parentId !== "root", (qb) =>
-      qb.where("parent_id", "in", (eb) => eb.selectFrom("directory_tree").select("id")),
-    )
-    .where((eb) =>
-      eb.not(
-        eb.exists(
-          eb
-            .selectFrom("file_category")
-            .whereRef("file_id", "=", "file.id")
-            .where("category_id", "in", (eb) =>
-              eb.selectFrom("exclude_category_tree").select("id"),
-            ),
-        ),
-      ),
-    );
-  const files =
-    filters.includeCategoryIds.length > 0
-      ? await baseQuery
-          .innerJoin("file_category", "file.id", "file_category.file_id")
-          .innerJoin(
-            "include_category_tree",
-            "file_category.category_id",
-            "include_category_tree.id",
-          )
-          .groupBy("file.id")
-          .having(
-            (eb) => eb.fn.count("include_category_tree.root_id").distinct(),
-            "=",
-            filters.includeCategoryIds.length,
-          )
-          .execute()
-      : await baseQuery.execute();
-  return files.map((file) => ({
-    id: file.id,
-    parentId: file.parent_id ?? ("root" as const),
-    userId: file.user_id,
-    path: file.path,
-    mekVersion: file.master_encryption_key_version,
-    encDek: file.encrypted_data_encryption_key,
-    dekVersion: file.data_encryption_key_version,
-    hskVersion: file.hmac_secret_key_version,
-    contentHmac: file.content_hmac,
-    contentType: file.content_type,
-    encContentIv: file.encrypted_content_iv,
-    encContentHash: file.encrypted_content_hash,
-    encName: file.encrypted_name,
-    encCreatedAt: file.encrypted_created_at,
-    encLastModifiedAt: file.encrypted_last_modified_at,
-  }));
-};
-
 export const setFileEncName = async (
   userId: number,
   fileId: number,

src/lib/server/db/media.ts

@@ -83,3 +83,27 @@ export const getFileThumbnail = async (userId: number, fileId: number) => {
       } satisfies FileThumbnail)
     : null;
 };
+
+export const getMissingFileThumbnails = async (userId: number, limit: number = 100) => {
+  const files = await db
+    .selectFrom("file")
+    .select("id")
+    .where("user_id", "=", userId)
+    .where((eb) =>
+      eb.or([eb("content_type", "like", "image/%"), eb("content_type", "like", "video/%")]),
+    )
+    .where((eb) =>
+      eb.not(
+        eb.exists(
+          eb
+            .selectFrom("thumbnail")
+            .select("thumbnail.id")
+            .whereRef("thumbnail.file_id", "=", "file.id")
+            .limit(1),
+        ),
+      ),
+    )
+    .limit(limit)
+    .execute();
+  return files.map(({ id }) => id);
+};

src/lib/utils/concurrency/HybridPromise.ts

@@ -90,42 +90,4 @@ export class HybridPromise<T> implements PromiseLike<T> {
       return HybridPromise.reject(e);
     }
   }
-
-  static all<T extends readonly unknown[] | []>(
-    maybePromises: T,
-  ): HybridPromise<{ -readonly [P in keyof T]: HybridAwaited<T[P]> }> {
-    const length = maybePromises.length;
-    if (length === 0) {
-      return HybridPromise.resolve([] as any);
-    }
-
-    const hps = Array.from(maybePromises).map((p) => HybridPromise.resolve(p));
-    if (hps.some((hp) => !hp.isSync())) {
-      return new HybridPromise({
-        mode: "async",
-        promise: Promise.all(hps.map((hp) => hp.toPromise())) as any,
-      });
-    }
-
-    try {
-      return HybridPromise.resolve(
-        Array.from(
-          hps.map((hp) => {
-            if (hp.state.mode === "sync") {
-              if (hp.state.status === "fulfilled") {
-                return hp.state.value;
-              } else {
-                throw hp.state.reason;
-              }
-            }
-          }),
-        ) as any,
-      );
-    } catch (e) {
-      return HybridPromise.reject(e);
-    }
-  }
 }
-
-export type HybridAwaited<T> =
-  T extends HybridPromise<infer U> ? U : T extends Promise<infer U> ? U : T;

src/lib/utils/index.ts

@@ -1,5 +1,4 @@
 export * from "./concurrency";
 export * from "./format";
 export * from "./gotoStateful";
-export * from "./search";
 export * from "./sort";

src/lib/utils/search.ts

@@ -1,28 +0,0 @@
-import { disassemble, getChoseong } from "es-hangul";
-
-const normalize = (s: string) => {
-  return s.normalize("NFC").toLowerCase().replace(/\s/g, "");
-};
-
-const extractHangul = (s: string) => {
-  return s.replace(/[^가-힣ㄱ-ㅎㅏ-ㅣ]/g, "");
-};
-
-const hangulSearch = (original: string, query: string) => {
-  original = extractHangul(original);
-  query = extractHangul(query);
-  if (!original || !query) return false;
-
-  return (
-    disassemble(original).includes(disassemble(query)) ||
-    getChoseong(original).includes(getChoseong(query))
-  );
-};
-
-export const searchString = (original: string, query: string) => {
-  original = normalize(original);
-  query = normalize(query);
-  if (!original || !query) return false;
-
-  return original.includes(query) || hangulSearch(original, query);
-};

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

@@ -150,9 +150,7 @@
     </button>
     <TopBarMenu
       bind:isOpen={isMenuOpen}
-      directoryId={["category", "gallery", "search"].includes(
+      directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
-        page.url.searchParams.get("from") ?? "",
-      )
         ? info?.parentId
         : undefined}
       {fileBlob}

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

@@ -16,7 +16,7 @@
 <TopBar />
 <FullscreenDiv>
   <div class="space-y-2 pb-4">
-    {#each uploadingFiles as file (file.id)}
+    {#each uploadingFiles as file}
       <File state={file} />
     {/each}
   </div>

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

@@ -63,7 +63,7 @@
 <FullscreenDiv>
   <RowVirtualizer
     count={rows.length}
-    estimateItemHeight={(index) =>
+    itemHeight={(index) =>
       rows[index]!.type === "header" ? 28 : 181 + (rows[index]!.isLast ? 16 : 4)}
     class="flex flex-grow flex-col"
   >

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

@@ -1,240 +0,0 @@
-<script lang="ts">
-  import type { Snapshot } from "@sveltejs/kit";
-  import superjson, { type SuperJSONResult } from "superjson";
-  import { untrack } from "svelte";
-  import { slide } from "svelte/transition";
-  import { goto } from "$app/navigation";
-  import { Chip, FullscreenDiv, RowVirtualizer } from "$lib/components/atoms";
-  import {
-    getDirectoryInfo,
-    type LocalCategoryInfo,
-    type MaybeDirectoryInfo,
-  } from "$lib/modules/filesystem";
-  import { masterKeyStore } from "$lib/stores";
-  import { HybridPromise, searchString, sortEntries } from "$lib/utils";
-  import Directory from "./Directory.svelte";
-  import File from "./File.svelte";
-  import SearchBar from "./SearchBar.svelte";
-  import SelectCategoryBottomSheet from "./SelectCategoryBottomSheet.svelte";
-  import { requestSearch, type SearchFilter, type SearchResult } from "./service";
-
-  let { data } = $props();
-
-  interface SearchFilters {
-    name: string;
-    includeImages: boolean;
-    includeVideos: boolean;
-    includeDirectories: boolean;
-    searchInDirectory: boolean;
-    categories: SearchFilter["categories"];
-  }
-
-  let directoryInfo: MaybeDirectoryInfo | undefined = $state();
-
-  let filters: SearchFilters = $state({
-    name: "",
-    includeImages: false,
-    includeVideos: false,
-    includeDirectories: false,
-    searchInDirectory: false,
-    categories: [],
-  });
-  let hasCategoryFilter = $derived(filters.categories.length > 0);
-  let hasAnyFilter = $derived(
-    hasCategoryFilter ||
-      filters.includeImages ||
-      filters.includeVideos ||
-      filters.includeDirectories ||
-      filters.name.trim().length > 0,
-  );
-
-  let isRestoredFromSnapshot = $state(false);
-  let serverResult: SearchResult | undefined = $state();
-  let result = $derived.by(() => {
-    if (!serverResult) return [];
-
-    const nameFilter = filters.name.trim();
-    const hasTypeFilter =
-      filters.includeImages || filters.includeVideos || filters.includeDirectories;
-
-    const directories =
-      !hasTypeFilter || filters.includeDirectories
-        ? serverResult.directories.map((directory) => ({
-            type: "directory" as const,
-            ...directory,
-          }))
-        : [];
-    const files =
-      !hasTypeFilter || filters.includeImages || filters.includeVideos
-        ? serverResult.files
-            .filter(
-              ({ contentType }) =>
-                !hasTypeFilter ||
-                (filters.includeImages && contentType.startsWith("image/")) ||
-                (filters.includeVideos && contentType.startsWith("video/")),
-            )
-            .map((file) => ({
-              type: "file" as const,
-              ...file,
-            }))
-        : [];
-
-    return sortEntries(
-      [...directories, ...files].filter(
-        ({ name }) => !nameFilter || searchString(name, nameFilter),
-      ),
-    );
-  });
-
-  let isSelectCategoryBottomSheetOpen = $state(false);
-  let categorySelectMode: "include" | "exclude" = $state("include");
-
-  const openSelectCategoryBottomSheet = (mode: "include" | "exclude") => {
-    categorySelectMode = mode;
-    isSelectCategoryBottomSheetOpen = true;
-  };
-
-  const addCategoryFilter = (category: LocalCategoryInfo) => {
-    if (!filters.categories.some(({ info }) => info.id === category.id)) {
-      filters.categories.push({
-        info: category,
-        type: categorySelectMode,
-      });
-      isSelectCategoryBottomSheetOpen = false;
-    }
-  };
-
-  export const snapshot: Snapshot<{
-    filters: SearchFilters;
-    serverResult: SuperJSONResult;
-  }> = {
-    capture() {
-      return { filters, serverResult: superjson.serialize(serverResult) };
-    },
-    restore(value) {
-      filters = value.filters;
-      serverResult = superjson.deserialize(value.serverResult, { inPlace: true });
-      isRestoredFromSnapshot = true;
-    },
-  };
-
-  $effect(() => {
-    if (data.directoryId) {
-      HybridPromise.resolve(getDirectoryInfo(data.directoryId, $masterKeyStore?.get(1)?.key!)).then(
-        (res) => {
-          directoryInfo = res;
-          filters.searchInDirectory = res.exists;
-        },
-      );
-    } else {
-      directoryInfo = undefined;
-      filters.searchInDirectory = false;
-    }
-  });
-
-  $effect(() => {
-    // Svelte sucks
-    hasAnyFilter;
-    filters.searchInDirectory;
-    filters.categories.length;
-
-    if (untrack(() => isRestoredFromSnapshot)) {
-      isRestoredFromSnapshot = false;
-      return;
-    }
-
-    if (hasAnyFilter) {
-      requestSearch(
-        {
-          ancestorId: filters.searchInDirectory ? data.directoryId! : "root",
-          categories: filters.categories,
-        },
-        $masterKeyStore?.get(1)?.key!,
-      ).then((res) => {
-        serverResult = res;
-      });
-    }
-  });
-</script>
-
-<svelte:head>
-  <title>검색</title>
-</svelte:head>
-
-<SearchBar bind:value={filters.name} />
-<FullscreenDiv class="bg-gray-100 !px-0">
-  <div class="flex flex-grow flex-col space-y-4">
-    <div class="space-y-2 bg-white p-4 !pt-0">
-      <div class="space-y-3">
-        <div class="flex flex-wrap gap-2">
-          <Chip bind:selected={filters.includeImages}>사진</Chip>
-          <Chip bind:selected={filters.includeVideos}>동영상</Chip>
-          {#if !hasCategoryFilter}
-            <Chip bind:selected={filters.includeDirectories}>폴더</Chip>
-          {/if}
-          {#if directoryInfo?.exists}
-            <Chip bind:selected={filters.searchInDirectory}>
-              위치: {directoryInfo.name}
-            </Chip>
-          {/if}
-        </div>
-        {#if !filters.includeDirectories}
-          <div class="space-y-2" transition:slide={{ duration: 300 }}>
-            <p class="text-sm font-medium text-gray-600">카테고리</p>
-            <div class="flex flex-wrap gap-2">
-              {#each filters.categories as { info, type }, i (info.id)}
-                <Chip
-                  selected
-                  removable
-                  onclick={() => {}}
-                  onRemoveClick={() => filters.categories.splice(i, 1)}
-                >
-                  {#if type === "include"}
-                    포함:
-                  {:else}
-                    제외:
-                  {/if}
-                  {info.name}
-                </Chip>
-              {/each}
-              <Chip onclick={() => openSelectCategoryBottomSheet("include")}>+ 포함</Chip>
-              <Chip onclick={() => openSelectCategoryBottomSheet("exclude")}>- 제외</Chip>
-            </div>
-          </div>
-        {/if}
-      </div>
-    </div>
-    {#if hasAnyFilter}
-      <div class="flex flex-grow flex-col space-y-2 bg-white p-4">
-        <p class="text-lg font-bold text-gray-800">검색 결과</p>
-        {#if result.length > 0}
-          <RowVirtualizer
-            count={result.length}
-            getItemKey={(index) => `${result[index]!.type}-${result[index]!.id}`}
-            estimateItemHeight={() => 56}
-            itemGap={4}
-          >
-            {#snippet item(index)}
-              {@const info = result[index]!}
-              {#if info.type === "directory"}
-                <Directory {info} onclick={() => goto(`/directory/${info.id}?from=search`)} />
-              {:else}
-                <File {info} onclick={() => goto(`/file/${info.id}?from=search`)} />
-              {/if}
-            {/snippet}
-          </RowVirtualizer>
-        {:else}
-          <div class="flex flex-grow items-center justify-center py-8">
-            <p class="text-gray-500">검색 결과가 없어요.</p>
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</FullscreenDiv>
-
-<SelectCategoryBottomSheet
-  bind:isOpen={isSelectCategoryBottomSheetOpen}
-  mode={categorySelectMode}
-  onSelectCategoryClick={addCategoryFilter}
-/>

src/routes/(fullscreen)/search/+page.ts

@@ -1,18 +0,0 @@
-import { error } from "@sveltejs/kit";
-import { z } from "zod";
-import type { PageLoad } from "./$types";
-
-export const load: PageLoad = ({ url }) => {
-  const directoryId = url.searchParams.get("directoryId");
-
-  const zodRes = z
-    .object({
-      directoryId: z.coerce.number().int().positive().nullable(),
-    })
-    .safeParse({ directoryId });
-  if (!zodRes.success) error(400, "Invalid query parameters");
-
-  return {
-    directoryId: zodRes.data.directoryId,
-  };
-};

src/routes/(fullscreen)/search/Directory.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "$lib/components/atoms";
-  import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import type { SubDirectoryInfo } from "$lib/modules/filesystem";
-
-  interface Props {
-    info: SubDirectoryInfo;
-    onclick: () => void;
-  }
-
-  let { info, onclick }: Props = $props();
-</script>
-
-<ActionEntryButton class="h-14" {onclick}>
-  <DirectoryEntryLabel type="directory" name={info.name} />
-</ActionEntryButton>

src/routes/(fullscreen)/search/File.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "$lib/components/atoms";
-  import { DirectoryEntryLabel } from "$lib/components/molecules";
-  import { getFileThumbnail } from "$lib/modules/file";
-  import type { SummarizedFileInfo } from "$lib/modules/filesystem";
-  import { formatDateTime } from "$lib/utils";
-
-  interface Props {
-    info: SummarizedFileInfo;
-    onclick: () => void;
-  }
-
-  let { info, onclick }: Props = $props();
-
-  let thumbnail = $derived(getFileThumbnail(info));
-</script>
-
-<ActionEntryButton class="h-14" {onclick}>
-  <DirectoryEntryLabel
-    type="file"
-    thumbnail={$thumbnail}
-    name={info.name}
-    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
-  />
-</ActionEntryButton>

src/routes/(fullscreen)/search/SearchBar.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import type { ClassValue } from "svelte/elements";
-
-  import IconArrowBack from "~icons/material-symbols/arrow-back";
-
-  interface Props {
-    class?: ClassValue;
-    value: string;
-  }
-
-  let { class: className, value = $bindable() }: Props = $props();
-</script>
-
-<div class={["sticky top-0 z-10 flex items-center gap-x-2 px-2 py-3 backdrop-blur-2xl", className]}>
-  <button
-    onclick={() => history.back()}
-    class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
-  >
-    <IconArrowBack class="text-2xl" />
-  </button>
-  <input
-    bind:value
-    type="text"
-    placeholder="검색"
-    class="mr-1 h-[2.3rem] flex-grow rounded-lg bg-gray-100 px-3 py-1.5 placeholder-gray-600 focus:outline-none"
-  />
-</div>

src/routes/(fullscreen)/search/SelectCategoryBottomSheet.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "$lib/components/atoms";
-  import { SubCategories } from "$lib/components/molecules";
-  import {
-    getCategoryInfo,
-    type LocalCategoryInfo,
-    type MaybeCategoryInfo,
-  } from "$lib/modules/filesystem";
-  import { masterKeyStore } from "$lib/stores";
-  import { HybridPromise } from "$lib/utils";
-
-  interface Props {
-    isOpen: boolean;
-    mode: "include" | "exclude";
-    onSelectCategoryClick: (category: LocalCategoryInfo) => void;
-  }
-
-  let { isOpen = $bindable(), mode, onSelectCategoryClick }: Props = $props();
-
-  let categoryInfo: MaybeCategoryInfo | undefined = $state();
-
-  $effect(() => {
-    if (isOpen) {
-      HybridPromise.resolve(getCategoryInfo("root", $masterKeyStore?.get(1)?.key!)).then(
-        (result) => (categoryInfo = result),
-      );
-    }
-  });
-</script>
-
-{#if categoryInfo?.exists}
-  <BottomSheet bind:isOpen class="flex flex-col">
-    <FullscreenDiv>
-      <SubCategories
-        class="py-4"
-        info={categoryInfo}
-        onSubCategoryClick={({ id }) =>
-          HybridPromise.resolve(getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)).then(
-            (result) => (categoryInfo = result),
-          )}
-      />
-      {#if categoryInfo.id !== "root"}
-        <BottomDiv>
-          <Button
-            onclick={() => onSelectCategoryClick(categoryInfo as LocalCategoryInfo)}
-            class="w-full"
-          >
-            {categoryInfo.name} 카테고리 {mode === "include" ? "꼭 포함하기" : "제외하기"}
-          </Button>
-        </BottomDiv>
-      {/if}
-    </FullscreenDiv>
-  </BottomSheet>
-{/if}

src/routes/(fullscreen)/search/service.ts

@@ -1,77 +0,0 @@
-import {
-  decryptDirectoryMetadata,
-  decryptFileMetadata,
-  getDirectoryInfo,
-  getFileInfo,
-  type LocalDirectoryInfo,
-  type FileInfo,
-  type LocalCategoryInfo,
-} from "$lib/modules/filesystem";
-import { HybridPromise } from "$lib/utils";
-import { trpc } from "$trpc/client";
-
-export interface SearchFilter {
-  ancestorId: DirectoryId;
-  categories: { info: LocalCategoryInfo; type: "include" | "exclude" }[];
-}
-
-export interface SearchResult {
-  directories: LocalDirectoryInfo[];
-  files: FileInfo[];
-}
-
-export const requestSearch = async (filter: SearchFilter, masterKey: CryptoKey) => {
-  const { directories: directoriesRaw, files: filesRaw } = await trpc().search.search.query({
-    ancestor: filter.ancestorId,
-    includeCategories: filter.categories
-      .filter(({ type }) => type === "include")
-      .map(({ info }) => info.id),
-    excludeCategories: filter.categories
-      .filter(({ type }) => type === "exclude")
-      .map(({ info }) => info.id),
-  });
-
-  const [directories, files] = await HybridPromise.all([
-    HybridPromise.all(
-      directoriesRaw.map((directory) =>
-        HybridPromise.resolve(
-          getDirectoryInfo(directory.id, masterKey, {
-            async fetchFromServer(id, cachedInfo, masterKey) {
-              const metadata = await decryptDirectoryMetadata(directory, masterKey);
-              return {
-                subDirectories: [],
-                files: [],
-                ...cachedInfo,
-                id: id as number,
-                exists: true,
-                parentId: directory.parent,
-                ...metadata,
-              };
-            },
-          }),
-        ),
-      ),
-    ),
-    HybridPromise.all(
-      filesRaw.map((file) =>
-        HybridPromise.resolve(
-          getFileInfo(file.id, masterKey, {
-            async fetchFromServer(id, cachedInfo, masterKey) {
-              const metadata = await decryptFileMetadata(file, masterKey);
-              return {
-                categories: [],
-                ...cachedInfo,
-                id: id as number,
-                exists: true,
-                parentId: file.parent,
-                contentType: file.contentType,
-                ...metadata,
-              };
-            },
-          }),
-        ),
-      ),
-    ),
-  ]);
-  return { directories, files } as SearchResult;
-};

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

@@ -3,16 +3,11 @@
   import { goto } from "$app/navigation";
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
   import { TopBar } from "$lib/components/molecules";
-  import type { MaybeFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import { sortEntries } from "$lib/utils";
   import File from "./File.svelte";
-  import {
+  import { getMigrationState, clearMigrationStates, requestFileMigration } from "./service.svelte";
-    getMigrationState,
-    clearMigrationStates,
-    requestLegacyFiles,
-    requestFileMigration,
-  } from "./service.svelte";
 
   let { data } = $props();
 
@@ -35,7 +30,9 @@
   };
 
   onMount(async () => {
-    fileInfos = sortEntries(await requestLegacyFiles(data.files, $masterKeyStore?.get(1)?.key!));
+    fileInfos = sortEntries(
+      Array.from((await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!)).values()),
+    );
   });
 
   $effect(() => clearMigrationStates);

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

@@ -1,17 +1,11 @@
 import { limitFunction } from "p-limit";
 import { SvelteMap } from "svelte/reactivity";
 import { CHUNK_SIZE } from "$lib/constants";
-import {
+import type { FileInfo } from "$lib/modules/filesystem";
-  decryptFileMetadata,
-  getFileInfo,
-  type FileInfo,
-  type MaybeFileInfo,
-} from "$lib/modules/filesystem";
 import { uploadBlob } from "$lib/modules/upload";
 import { requestFileDownload } from "$lib/services/file";
-import { HybridPromise, Scheduler } from "$lib/utils";
+import { Scheduler } from "$lib/utils";
 import { trpc } from "$trpc/client";
-import type { RouterOutputs } from "$trpc/router.server";
 
 export type MigrationStatus =
   | "queued"
@@ -30,35 +24,6 @@ export interface MigrationState {
 const scheduler = new Scheduler();
 const states = new SvelteMap<number, MigrationState>();
 
-export const requestLegacyFiles = async (
-  filesRaw: RouterOutputs["file"]["listLegacy"],
-  masterKey: CryptoKey,
-) => {
-  const files = await HybridPromise.all(
-    filesRaw.map((file) =>
-      HybridPromise.resolve(
-        getFileInfo(file.id, masterKey, {
-          async fetchFromServer(id, cachedInfo, masterKey) {
-            const metadata = await decryptFileMetadata(file, masterKey);
-            return {
-              categories: [],
-              ...cachedInfo,
-              id: id as number,
-              exists: true,
-              isLegacy: file.isLegacy,
-              parentId: file.parent,
-              contentType: file.contentType,
-              ...metadata,
-            };
-          },
-        }),
-      ),
-    ),
-  );
-
-  return files as MaybeFileInfo[];
-};
-
 const createState = (status: MigrationStatus): MigrationState => {
   const state = $state({ status });
   return state;

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

@@ -4,14 +4,13 @@
   import { BottomDiv, Button, FullscreenDiv } from "$lib/components/atoms";
   import { IconEntryButton, TopBar } from "$lib/components/molecules";
   import { deleteAllFileThumbnailCaches } from "$lib/modules/file";
-  import type { MaybeFileInfo } from "$lib/modules/filesystem";
+  import { bulkGetFileInfo, type MaybeFileInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import { sortEntries } from "$lib/utils";
   import File from "./File.svelte";
   import {
     getThumbnailGenerationStatus,
     clearThumbnailGenerationStatuses,
-    requestMissingThumbnailFiles,
     requestThumbnailGeneration,
     type GenerationStatus,
   } from "./service";
@@ -43,7 +42,7 @@
 
   onMount(async () => {
     fileInfos = sortEntries(
-      await requestMissingThumbnailFiles(data.files, $masterKeyStore?.get(1)?.key!),
+      Array.from((await bulkGetFileInfo(data.files, $masterKeyStore?.get(1)?.key!)).values()),
     );
   });
 

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

@@ -1,16 +1,10 @@
 import { limitFunction } from "p-limit";
 import { SvelteMap } from "svelte/reactivity";
 import { storeFileThumbnailCache } from "$lib/modules/file";
-import {
+import type { FileInfo } from "$lib/modules/filesystem";
-  decryptFileMetadata,
-  getFileInfo,
-  type FileInfo,
-  type MaybeFileInfo,
-} from "$lib/modules/filesystem";
 import { generateThumbnail } from "$lib/modules/thumbnail";
 import { requestFileDownload, requestFileThumbnailUpload } from "$lib/services/file";
-import { HybridPromise, Scheduler } from "$lib/utils";
+import { Scheduler } from "$lib/utils";
-import type { RouterOutputs } from "$trpc/router.server";
 
 export type GenerationStatus =
   | "queued"
@@ -35,35 +29,6 @@ export const clearThumbnailGenerationStatuses = () => {
   }
 };
 
-export const requestMissingThumbnailFiles = async (
-  filesRaw: RouterOutputs["file"]["listWithoutThumbnail"],
-  masterKey: CryptoKey,
-) => {
-  const files = await HybridPromise.all(
-    filesRaw.map((file) =>
-      HybridPromise.resolve(
-        getFileInfo(file.id, masterKey, {
-          async fetchFromServer(id, cachedInfo, masterKey) {
-            const metadata = await decryptFileMetadata(file, masterKey);
-            return {
-              categories: [],
-              ...cachedInfo,
-              id: id as number,
-              exists: true,
-              isLegacy: file.isLegacy,
-              parentId: file.parent,
-              contentType: file.contentType,
-              ...metadata,
-            };
-          },
-        }),
-      ),
-    ),
-  );
-
-  return files as MaybeFileInfo[];
-};
-
 const requestThumbnailUpload = limitFunction(
   async (fileInfo: FileInfo, fileBuffer: ArrayBuffer) => {
     statuses.set(fileInfo.id, "generating");

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

@@ -76,7 +76,7 @@
 <div class="min-h-full bg-gray-100 pb-[5.5em]">
   {#if info?.exists}
     <div class="space-y-4">
-      <div class="space-y-2 bg-white p-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}
@@ -84,7 +84,6 @@
           {info}
           onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
           onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
-          subCategoryCreatePosition="bottom"
           onSubCategoryMenuClick={(subCategory) => {
             context.selectedCategory = subCategory;
             isCategoryMenuBottomSheetOpen = true;
@@ -93,19 +92,14 @@
         />
       </div>
       {#if info.id !== "root"}
-        <div class="space-y-2 bg-white p-4">
+        <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
+          <RowVirtualizer count={files.length} itemHeight={() => 48} itemGap={4}>
-            count={files.length}
-            getItemKey={(index) => files[index]!.details.id}
-            estimateItemHeight={() => 48}
-            itemGap={4}
-          >
             {#snippet item(index)}
               {@const { details } = files[index]!}
               <File

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

@@ -25,7 +25,6 @@
     requestEntryDeletion,
   } from "./service.svelte";
 
-  import IconSearch from "~icons/material-symbols/search";
   import IconAdd from "~icons/material-symbols/add";
 
   let { data } = $props();
@@ -44,19 +43,8 @@
   let isEntryRenameModalOpen = $state(false);
   let isEntryDeleteModalOpen = $state(false);
 
-  let showParentEntry = $derived(
+  let isFromFilePage = $derived(page.url.searchParams.get("from") === "file");
-    ["file", "search"].includes(page.url.searchParams.get("from") ?? ""),
+  let showTopBar = $derived(data.id !== "root" || isFromFilePage);
-  );
-  let showBackButton = $derived(data.id !== "root" || showParentEntry);
-
-  const onSearchClick = async () => {
-    const params = new URLSearchParams();
-    if (data.id !== "root") {
-      params.set("directoryId", data.id.toString());
-    }
-    const query = params.toString();
-    await goto(`/search${query ? `?${query}` : ""}`);
-  };
 
   const uploadFile = () => {
     const files = fileInput?.files;
@@ -108,16 +96,11 @@
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
 
 <div class="flex h-full flex-col">
-  <TopBar title={info?.name ?? "내 파일"} {showBackButton} class="flex-shrink-0">
+  {#if showTopBar}
-    <button
+    <TopBar title={info?.name} class="flex-shrink-0" />
-      onclick={onSearchClick}
+  {/if}
-      class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
-    >
-      <IconSearch class="text-2xl" />
-    </button>
-  </TopBar>
   {#if info?.exists}
-    <div class="flex flex-grow flex-col px-4 pb-4">
+    <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")} />
@@ -130,12 +113,12 @@
             context.selectedEntry = entry;
             isEntryMenuBottomSheetOpen = true;
           }}
-          showParentEntry={showParentEntry && data.id !== "root"}
+          showParentEntry={isFromFilePage && info.parentId !== undefined}
           onParentClick={() =>
             goto(
               info!.parentId === "root"
-                ? `/directory?from=${page.url.searchParams.get("from")}`
+                ? "/directory?from=file"
-                : `/directory/${info!.parentId}?from=${page.url.searchParams.get("from")}`,
+                : `/directory/${info!.parentId}?from=file`,
             )}
         />
       {/key}

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

@@ -46,16 +46,7 @@
 </script>
 
 {#if entries.length > 0}
-  <RowVirtualizer
+  <RowVirtualizer count={entries.length} itemHeight={() => 56} itemGap={4} class="pb-[4.5rem]">
-    count={entries.length}
-    getItemKey={(index) =>
-      entries[index]!.type !== "parent"
-        ? `${entries[index]!.type}-${entries[index]!.details.id}`
-        : entries[index]!.type!}
-    estimateItemHeight={() => 56}
-    itemGap={4}
-    class="pb-[4.5rem]"
-  >
     {#snippet item(index)}
       {@const entry = entries[index]!}
       {#if entry.type === "parent"}

src/trpc/router.server.ts

@@ -9,7 +9,6 @@ import {
   fileRouter,
   hskRouter,
   mekRouter,
-  searchRouter,
   uploadRouter,
   userRouter,
 } from "./routers";
@@ -22,7 +21,6 @@ export const appRouter = router({
   file: fileRouter,
   hsk: hskRouter,
   mek: mekRouter,
-  search: searchRouter,
   upload: uploadRouter,
   user: userRouter,
 });

src/trpc/routers/file.ts

@@ -97,41 +97,11 @@ const fileRouter = router({
     }),
 
   listWithoutThumbnail: roleProcedure["activeClient"].query(async ({ ctx }) => {
-    const files = await FileRepo.getFilesWithoutThumbnail(ctx.session.userId);
+    return await MediaRepo.getMissingFileThumbnails(ctx.session.userId);
-    return files.map((file) => ({
-      id: file.id,
-      isLegacy: !!file.encContentIv,
-      parent: file.parentId,
-      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,
-    }));
   }),
 
   listLegacy: roleProcedure["activeClient"].query(async ({ ctx }) => {
-    const files = await FileRepo.getLegacyFiles(ctx.session.userId);
+    return await FileRepo.getLegacyFileIds(ctx.session.userId);
-    return files.map((file) => ({
-      id: file.id,
-      isLegacy: true,
-      parent: file.parentId,
-      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,
-    }));
   }),
 
   rename: roleProcedure["activeClient"]

src/trpc/routers/index.ts

@@ -5,6 +5,5 @@ export { default as directoryRouter } from "./directory";
 export { default as fileRouter } from "./file";
 export { default as hskRouter } from "./hsk";
 export { default as mekRouter } from "./mek";
-export { default as searchRouter } from "./search";
 export { default as uploadRouter } from "./upload";
 export { default as userRouter } from "./user";

src/trpc/routers/search.ts

@@ -1,54 +0,0 @@
-import { z } from "zod";
-import { DirectoryIdSchema } from "$lib/schemas";
-import { FileRepo } from "$lib/server/db";
-import { router, roleProcedure } from "../init.server";
-
-const searchRouter = router({
-  search: roleProcedure["activeClient"]
-    .input(
-      z.object({
-        ancestor: DirectoryIdSchema.default("root"),
-        includeCategories: z.number().positive().array().default([]),
-        excludeCategories: z.number().positive().array().default([]),
-      }),
-    )
-    .query(async ({ ctx, input }) => {
-      const [directories, files] = await Promise.all([
-        input.includeCategories.length === 0 && input.excludeCategories.length === 0
-          ? FileRepo.getAllRecursiveDirectoriesByParent(ctx.session.userId, input.ancestor)
-          : [],
-        FileRepo.searchFiles(ctx.session.userId, {
-          parentId: input.ancestor,
-          includeCategoryIds: input.includeCategories,
-          excludeCategoryIds: input.excludeCategories,
-        }),
-      ]);
-      return {
-        directories: directories.map((directory) => ({
-          id: directory.id,
-          parent: directory.parentId,
-          mekVersion: directory.mekVersion,
-          dek: directory.encDek,
-          dekVersion: directory.dekVersion,
-          name: directory.encName.ciphertext,
-          nameIv: directory.encName.iv,
-        })),
-        files: files.map((file) => ({
-          id: file.id,
-          parent: file.parentId,
-          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,
-        })),
-      };
-    }),
-});
-
-export default searchRouter;