검색 기능 구현

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

@@ -150,7 +150,9 @@
     </button>
     <TopBarMenu
       bind:isOpen={isMenuOpen}
-      directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
+      directoryId={["category", "gallery", "search"].includes(
+        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}
+    {#each uploadingFiles as file (file.id)}
       <File state={file} />
     {/each}
   </div>

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

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

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

@@ -0,0 +1,193 @@
+<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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,16 @@
+<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

@@ -0,0 +1,25 @@
+<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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,54 @@
+<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

@@ -0,0 +1,95 @@
+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 };
+};