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
 

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/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")
@@ -467,105 +434,6 @@ export const getFilesWithCategories = async (userId: number, fileIds: number[])
   );
 };
 
-export const searchFiles = async (
-  userId: number,
-  filters: {
-    parentId: DirectoryId;
-    includeCategoryIds: number[];
-    excludeCategoryIds: number[];
-  },
-) => {
-  const ctes: string[] = [];
-  const conditions: string[] = [];
-
-  if (filters.parentId === "root") {
-    conditions.push(`user_id = ${userId}`);
-  } else {
-    ctes.push(`
-      directory_tree AS (
-        SELECT id FROM directory WHERE user_id = ${userId} AND id = ${filters.parentId}
-        UNION ALL
-        SELECT d.id FROM directory d INNER JOIN directory_tree dt ON d.parent_id = dt.id
-      )`);
-    conditions.push(`parent_id IN (SELECT id FROM directory_tree)`);
-  }
-
-  filters.includeCategoryIds.forEach((categoryId, index) => {
-    ctes.push(`
-      include_category_tree_${index} AS (
-        SELECT id FROM category WHERE user_id = ${userId} AND id = ${categoryId}
-        UNION ALL
-        SELECT c.id FROM category c INNER JOIN include_category_tree_${index} ct ON c.parent_id = ct.id
-      )`);
-    conditions.push(`
-      EXISTS(
-        SELECT 1 FROM file_category
-        WHERE file_id = file.id
-        AND EXISTS (SELECT 1 FROM include_category_tree_${index} ct WHERE ct.id = category_id)
-      )`);
-  });
-
-  if (filters.excludeCategoryIds.length > 0) {
-    ctes.push(`
-      exclude_category_tree AS (
-        SELECT id FROM category WHERE user_id = ${userId} AND id IN (${filters.excludeCategoryIds.join(",")})
-        UNION ALL
-        SELECT c.id FROM category c INNER JOIN exclude_category_tree ct ON c.parent_id = ct.id
-      )`);
-    conditions.push(`
-      NOT EXISTS(
-        SELECT 1 FROM file_category
-        WHERE file_id = id
-        AND EXISTS (SELECT 1 FROM exclude_category_tree ct WHERE ct.id = category_id)
-      )`);
-  }
-
-  const query = `
-    ${ctes.length > 0 ? `WITH RECURSIVE ${ctes.join(",")}` : ""}
-    SELECT * FROM file
-    WHERE ${conditions.join(" AND ")}
-  `;
-  const { rows } = await sql
-    .raw<{
-      id: number;
-      parent_id: number | null;
-      user_id: number;
-      path: string;
-      master_encryption_key_version: number;
-      encrypted_data_encryption_key: string;
-      data_encryption_key_version: Date;
-      hmac_secret_key_version: number;
-      content_hmac: string;
-      content_type: string;
-      encrypted_content_iv: string;
-      encrypted_content_hash: string;
-      encrypted_name: Ciphertext;
-      encrypted_created_at: Ciphertext | null;
-      encrypted_last_modified_at: Ciphertext;
-    }>(query)
-    .execute(db);
-  return rows.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 setFileEncName = async (
   userId: number,
   fileId: number,

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,193 +0,0 @@
-<script lang="ts">
-  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, 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();
-
-  let directoryInfo: MaybeDirectoryInfo | undefined = $state();
-
-  let filters = $state({
-    name: "",
-    includeImages: false,
-    includeVideos: false,
-    includeDirectories: false,
-    searchInDirectory: false,
-    categories: [] as SearchFilter["categories"],
-  });
-  let hasCategoryFilter = $derived(filters.categories.length > 0);
-  let hasAnyFilter = $derived(
-    hasCategoryFilter ||
-      filters.includeImages ||
-      filters.includeVideos ||
-      filters.includeDirectories ||
-      filters.name.trim().length > 0,
-  );
-
-  let serverResult: SearchResult | undefined = $state();
-  let result = $derived.by(() => {
-    if (!serverResult) return [];
-
-    const nameFilter = filters.name.trim().toLowerCase();
-    const hasTypeFilter =
-      filters.includeImages || filters.includeVideos || filters.includeDirectories;
-
-    const directories =
-      !hasTypeFilter || filters.includeDirectories ? serverResult.directories : [];
-    const files =
-      !hasTypeFilter || filters.includeImages || filters.includeVideos
-        ? serverResult.files.filter(
-            ({ contentType }) =>
-              !hasTypeFilter ||
-              (filters.includeImages && contentType.startsWith("image/")) ||
-              (filters.includeVideos && contentType.startsWith("video/")),
-          )
-        : [];
-
-    return sortEntries(
-      [...directories, ...files].filter(
-        ({ name }) => !nameFilter || name.toLowerCase().includes(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;
-    }
-  };
-
-  $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(() => {
-    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,95 +0,0 @@
-import type { DataKey, LocalCategoryInfo } from "$lib/modules/filesystem";
-import {
-  decryptDirectoryMetadata,
-  decryptFileMetadata,
-} from "$lib/modules/filesystem/internal.svelte";
-import { trpc } from "$trpc/client";
-
-export interface SearchFilter {
-  ancestorId: DirectoryId;
-  categories: { info: LocalCategoryInfo; type: "include" | "exclude" }[];
-}
-
-interface SearchedDirectory {
-  type: "directory";
-  id: number;
-  parentId: DirectoryId;
-  dataKey?: DataKey;
-  name: string;
-}
-
-interface SearchedFile {
-  type: "file";
-  id: number;
-  parentId: DirectoryId;
-  dataKey?: DataKey;
-  contentType: string;
-  name: string;
-  createdAt?: Date;
-  lastModifiedAt: Date;
-}
-
-export interface SearchResult {
-  directories: SearchedDirectory[];
-  files: SearchedFile[];
-}
-
-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),
-  });
-
-  // TODO: FIXME
-  const [directories, files] = await Promise.all([
-    Promise.all(
-      directoriesRaw.map(async (dir) => {
-        const metadata = await decryptDirectoryMetadata(
-          { dek: dir.dek, dekVersion: dir.dekVersion, name: dir.name, nameIv: dir.nameIv },
-          masterKey,
-        );
-        return {
-          type: "directory" as const,
-          id: dir.id,
-          parentId: dir.parent,
-          dataKey: metadata.dataKey,
-          name: metadata.name,
-        };
-      }),
-    ),
-    Promise.all(
-      filesRaw.map(async (file) => {
-        const metadata = await decryptFileMetadata(
-          {
-            dek: file.dek,
-            dekVersion: file.dekVersion,
-            name: file.name,
-            nameIv: file.nameIv,
-            createdAt: file.createdAt,
-            createdAtIv: file.createdAtIv,
-            lastModifiedAt: file.lastModifiedAt,
-            lastModifiedAtIv: file.lastModifiedAtIv,
-          },
-          masterKey,
-        );
-        return {
-          type: "file" as const,
-          id: file.id,
-          parentId: file.parent,
-          dataKey: metadata.dataKey,
-          contentType: file.contentType,
-          name: metadata.name,
-          createdAt: metadata.createdAt,
-          lastModifiedAt: metadata.lastModifiedAt,
-        };
-      }),
-    ),
-  ]);
-
-  return { directories, files };
-};

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/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;