Merge pull request #20 from kmc7468/dev

v0.9.0

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

@@ -34,7 +34,7 @@ export class FilesystemCache<K, V extends object> {
       }
 
       (state.value
-        ? Promise.resolve($state.snapshot(state.value) as V)
+        ? Promise.resolve(state.value)
         : this.options.fetchFromIndexedDB(key).then((loadedInfo) => {
             if (loadedInfo) {
               state.value = loadedInfo;

src/lib/server/db/directory.ts

@@ -74,6 +74,28 @@ export const getAllDirectoriesByParent = async (userId: number, parentId: Direct
   return directories.map(toDirectory);
 };
 
+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(toDirectory);
+};
+
 export const getAllFavoriteDirectories = async (userId: number) => {
   const directories = await db
     .selectFrom("directory")
@@ -95,61 +117,6 @@ export const getDirectory = async (userId: number, directoryId: number) => {
   return directory ? toDirectory(directory) : null;
 };
 
-export const searchDirectories = async (
-  userId: number,
-  filters: {
-    parentId: DirectoryId;
-    inFavorites: boolean;
-  },
-) => {
-  const directories = await db
-    .withRecursive("directory_tree", (db) =>
-      db
-        .selectFrom("directory")
-        .select("id")
-        .where("user_id", "=", userId)
-        .$if(filters.parentId === "root", (qb) => qb.where((eb) => eb.lit(false))) // 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("favorite_directory_tree", (db) =>
-      db
-        .selectFrom("directory")
-        .select("id")
-        .where("user_id", "=", userId)
-        .$if(!filters.inFavorites, (qb) => qb.where((eb) => eb.lit(false))) // favorite_directory_tree will be empty if inFavorites is false
-        .$if(filters.inFavorites, (qb) => qb.where("is_favorite", "=", true))
-        .unionAll((db) =>
-          db
-            .selectFrom("directory as d")
-            .innerJoin("favorite_directory_tree as dt", "d.parent_id", "dt.id")
-            .select("d.id"),
-        ),
-    )
-    .selectFrom("directory")
-    .selectAll()
-    .where("user_id", "=", userId)
-    .$if(filters.parentId !== "root", (qb) =>
-      qb.where((eb) =>
-        eb.exists(eb.selectFrom("directory_tree as dt").whereRef("dt.id", "=", "parent_id")),
-      ),
-    )
-    .$if(filters.inFavorites, (qb) =>
-      qb.where((eb) =>
-        eb.exists(
-          eb.selectFrom("favorite_directory_tree as dt").whereRef("dt.id", "=", "directory.id"),
-        ),
-      ),
-    )
-    .execute();
-  return directories.map(toDirectory);
-};
-
 export const setDirectoryEncName = async (
   userId: number,
   directoryId: number,

src/lib/server/db/file.ts

@@ -248,7 +248,6 @@ export const searchFiles = async (
   userId: number,
   filters: {
     parentId: DirectoryId;
-    inFavorites: boolean;
     includeCategoryIds: number[];
     excludeCategoryIds: number[];
   },
@@ -259,7 +258,7 @@ export const searchFiles = async (
         .selectFrom("directory")
         .select("id")
         .where("user_id", "=", userId)
-        .$if(filters.parentId === "root", (qb) => qb.where((eb) => eb.lit(false))) // directory_tree will be empty if parentId is "root"
+        .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
@@ -268,20 +267,6 @@ export const searchFiles = async (
             .select("d.id"),
         ),
     )
-    .withRecursive("favorite_directory_tree", (db) =>
-      db
-        .selectFrom("directory")
-        .select("id")
-        .where("user_id", "=", userId)
-        .$if(!filters.inFavorites, (qb) => qb.where((eb) => eb.lit(false))) // favorite_directory_tree will be empty if inFavorites is false
-        .$if(filters.inFavorites, (qb) => qb.where("is_favorite", "=", true))
-        .unionAll((db) =>
-          db
-            .selectFrom("directory as d")
-            .innerJoin("favorite_directory_tree as dt", "d.parent_id", "dt.id")
-            .select("d.id"),
-        ),
-    )
     .withRecursive("include_category_tree", (db) =>
       db
         .selectFrom("category")
@@ -310,31 +295,19 @@ export const searchFiles = async (
     )
     .selectFrom("file")
     .selectAll("file")
-    .where("user_id", "=", userId)
+    .$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((eb) =>
+      qb.where("parent_id", "in", (eb) => eb.selectFrom("directory_tree").select("id")),
-        eb.exists(eb.selectFrom("directory_tree as dt").whereRef("dt.id", "=", "file.parent_id")),
-      ),
     )
-    .$if(filters.inFavorites, (qb) =>
+    .where((eb) =>
-      qb.where((eb) =>
+      eb.not(
-        eb.or([
+        eb.exists(
-          eb("is_favorite", "=", true),
+          eb
-          eb.exists(
+            .selectFrom("file_category")
-            eb.selectFrom("favorite_directory_tree as dt").whereRef("dt.id", "=", "file.parent_id"),
+            .whereRef("file_id", "=", "file.id")
-          ),
+            .where("category_id", "in", (eb) =>
-        ]),
+              eb.selectFrom("exclude_category_tree").select("id"),
-      ),
+            ),
-    )
-    .$if(filters.excludeCategoryIds.length > 0, (qb) =>
-      qb.where((eb) =>
-        eb.not(
-          eb.exists(
-            eb
-              .selectFrom("file_category")
-              .innerJoin("exclude_category_tree", "category_id", "exclude_category_tree.id")
-              .whereRef("file_id", "=", "file.id"),
-          ),
         ),
       ),
     );

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

@@ -46,7 +46,7 @@
 
 {#if isOpen && (directoryId || downloadUrl || fileBlob)}
   <div
-    class="absolute right-2 top-full z-20 min-w-44 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
+    class="absolute right-2 top-full z-20 min-w-40 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
     transition:fly={{ y: -8, duration: 200 }}
   >
     <p class="px-3 pt-2 text-sm font-semibold text-gray-600">더보기</p>
@@ -57,9 +57,7 @@
         onclick: () => void,
       )}
         <button {onclick} class="rounded-xl active:bg-gray-100">
-          <div
+          <div class="flex items-center gap-x-3 px-3 py-2 text-gray-700 transition active:scale-95">
-            class="flex items-center gap-x-3 px-3 py-2 text-lg text-gray-700 transition active:scale-95"
-          >
             <Icon />
             <p class="font-medium">{text}</p>
           </div>

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

@@ -37,8 +37,8 @@
     includeImages: false,
     includeVideos: false,
     includeDirectories: false,
-    searchInDirectory: false,
     searchInFavorites: false,
+    searchInDirectory: false,
     categories: [],
   });
   let hasCategoryFilter = $derived(filters.categories.length > 0);
@@ -47,6 +47,7 @@
       filters.includeImages ||
       filters.includeVideos ||
       filters.includeDirectories ||
+      filters.searchInFavorites ||
       filters.name.trim().length > 0,
   );
 
@@ -83,7 +84,9 @@
 
     return sortEntries(
       [...directories, ...files].filter(
-        (entry) => !nameFilter || searchString(entry.name, nameFilter),
+        (entry) =>
+          (!nameFilter || searchString(entry.name, nameFilter)) &&
+          (!filters.searchInFavorites || entry.isFavorite),
       ),
     );
   });
@@ -142,7 +145,6 @@
     // Svelte sucks
     hasAnyFilter;
     filters.searchInDirectory;
-    filters.searchInFavorites;
     filters.categories.length;
 
     if (untrack(() => isRestoredFromSnapshot)) {
@@ -154,7 +156,6 @@
       requestSearch(
         {
           ancestorId: filters.searchInDirectory ? data.directoryId! : "root",
-          inFavorites: filters.searchInFavorites,
           categories: filters.categories,
         },
         $masterKeyStore?.get(1)?.key!,
@@ -215,12 +216,7 @@
     </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 class="text-lg font-bold text-gray-800">검색 결과</p>
-          검색 결과
-          {#if result.length > 0}
-            {" "}({result.length}개)
-          {/if}
-        </p>
         {#if result.length > 0}
           <RowVirtualizer
             count={result.length}

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

@@ -1,14 +1,17 @@
 <script lang="ts">
+  import type { ClassValue } from "svelte/elements";
+
   import IconArrowBack from "~icons/material-symbols/arrow-back";
 
   interface Props {
+    class?: ClassValue;
     value: string;
   }
 
-  let { value = $bindable() }: Props = $props();
+  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"}>
+<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]"
@@ -19,6 +22,6 @@
     bind:value
     type="text"
     placeholder="검색"
-    class="mr-1 h-[2.3rem] min-w-0 flex-grow rounded-lg bg-gray-100 px-3 py-1.5 placeholder-gray-600 focus:outline-none"
+    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/service.ts

@@ -10,7 +10,6 @@ import { trpc } from "$trpc/client";
 
 export interface SearchFilter {
   ancestorId: DirectoryId;
-  inFavorites: boolean;
   categories: { info: LocalCategoryInfo; type: "include" | "exclude" }[];
 }
 
@@ -22,7 +21,6 @@ export interface SearchResult {
 export const requestSearch = async (filter: SearchFilter, masterKey: CryptoKey) => {
   const { directories: directoriesRaw, files: filesRaw } = await trpc().search.search.query({
     ancestor: filter.ancestorId,
-    inFavorites: filter.inFavorites,
     includeCategories: filter.categories
       .filter(({ type }) => type === "include")
       .map(({ info }) => info.id),

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

@@ -3,7 +3,6 @@
   import { DirectoryEntryLabel } from "$lib/components/molecules";
   import { getFileThumbnail } from "$lib/modules/file";
   import type { CategoryFileInfo } from "$lib/modules/filesystem";
-  import { formatDateTime } from "$lib/utils";
   import type { SelectedFile } from "./service.svelte";
 
   import IconClose from "~icons/material-symbols/close";
@@ -20,7 +19,7 @@
 </script>
 
 <ActionEntryButton
-  class="h-14"
+  class="h-12"
   onclick={() => onclick(info)}
   actionButtonIcon={onRemoveClick && IconClose}
   onActionButtonClick={() => onRemoveClick?.(info)}
@@ -29,7 +28,6 @@
     type="file"
     thumbnail={$thumbnail}
     name={info.name}
-    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
     isFavorite={info.isFavorite}
   />
 </ActionEntryButton>

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

@@ -103,7 +103,7 @@
 </script>
 
 <svelte:head>
-  <title>내 파일</title>
+  <title>파일</title>
 </svelte:head>
 
 <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />

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

@@ -44,50 +44,52 @@
   <title>즐겨찾기</title>
 </svelte:head>
 
-<div class="flex h-full flex-col">
+<TopBar title="즐겨찾기" showBackButton={false}>
-  <TopBar title="즐겨찾기" showBackButton={false}>
+  <button
-    <button
+    onclick={() => goto("/search?from=favorites")}
-      onclick={() => goto("/search?from=favorites")}
+    class="w-full rounded-full p-1 text-2xl active:bg-black active:bg-opacity-[0.04]"
-      class="w-full rounded-full p-1 text-2xl active:bg-black active:bg-opacity-[0.04]"
+  >
+    <IconSearch />
+  </button>
+</TopBar>
+<div class="flex h-full flex-col p-4 !pt-0">
+  {#if isLoading}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">
+        {#if data.favorites.files.length === 0 && data.favorites.directories.length === 0}
+          즐겨찾기한 항목이 없어요.
+        {:else}
+          즐겨찾기 목록을 불러오고 있어요.
+        {/if}
+      </p>
+    </div>
+  {:else if entries.length === 0}
+    <div class="flex flex-grow items-center justify-center">
+      <p class="text-gray-500">즐겨찾기한 항목이 없어요.</p>
+    </div>
+  {:else}
+    <RowVirtualizer
+      count={entries.length}
+      getItemKey={(index) => `${entries[index]!.type}-${entries[index]!.details.id}`}
+      estimateItemHeight={() => 56}
+      itemGap={4}
     >
-      <IconSearch />
+      {#snippet item(index)}
-    </button>
+        {@const entry = entries[index]!}
-  </TopBar>
+        {#if entry.type === "directory"}
-  <div class="flex flex-grow flex-col px-4 pb-4">
+          <Directory
-    {#if entries.length > 0}
+            info={entry.details}
-      <RowVirtualizer
+            onclick={() => handleClick(entry)}
-        count={entries.length}
+            onRemoveClick={() => handleRemove(entry)}
-        getItemKey={(index) => `${entries[index]!.type}-${entries[index]!.details.id}`}
+          />
-        estimateItemHeight={() => 56}
+        {:else}
-        itemGap={4}
+          <File
-      >
+            info={entry.details}
-        {#snippet item(index)}
+            onclick={() => handleClick(entry)}
-          {@const entry = entries[index]!}
+            onRemoveClick={() => handleRemove(entry)}
-          {#if entry.type === "directory"}
+          />
-            <Directory
+        {/if}
-              info={entry.details}
+      {/snippet}
-              onclick={() => handleClick(entry)}
+    </RowVirtualizer>
-              onRemoveClick={() => handleRemove(entry)}
+  {/if}
-            />
-          {:else}
-            <File
-              info={entry.details}
-              onclick={() => handleClick(entry)}
-              onRemoveClick={() => handleRemove(entry)}
-            />
-          {/if}
-        {/snippet}
-      </RowVirtualizer>
-    {:else}
-      <div class="flex flex-grow items-center justify-center">
-        <p class="text-gray-500">
-          {#if isLoading}
-            즐겨찾기 목록을 불러오고 있어요.
-          {:else}
-            즐겨찾기한 항목이 없어요.
-          {/if}
-        </p>
-      </div>
-    {/if}
-  </div>
 </div>

src/routes/(main)/favorites/File.svelte

@@ -3,7 +3,6 @@
   import { DirectoryEntryLabel } from "$lib/components/molecules";
   import { getFileThumbnail } from "$lib/modules/file";
   import type { SummarizedFileInfo } from "$lib/modules/filesystem";
-  import { formatDateTime } from "$lib/utils";
 
   import IconClose from "~icons/material-symbols/close";
 
@@ -24,11 +23,5 @@
   actionButtonIcon={IconClose}
   onActionButtonClick={onRemoveClick}
 >
-  <DirectoryEntryLabel
+  <DirectoryEntryLabel type="file" thumbnail={$thumbnail} name={info.name} isFavorite />
-    type="file"
-    thumbnail={$thumbnail}
-    name={info.name}
-    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
-    isFavorite
-  />
 </ActionEntryButton>

src/trpc/routers/search.ts

@@ -8,7 +8,6 @@ const searchRouter = router({
     .input(
       z.object({
         ancestor: DirectoryIdSchema.default("root"),
-        inFavorites: z.boolean().default(false),
         includeCategories: z.number().positive().array().default([]),
         excludeCategories: z.number().positive().array().default([]),
       }),
@@ -16,14 +15,10 @@ const searchRouter = router({
     .query(async ({ ctx, input }) => {
       const [directories, files] = await Promise.all([
         input.includeCategories.length === 0 && input.excludeCategories.length === 0
-          ? DirectoryRepo.searchDirectories(ctx.session.userId, {
+          ? DirectoryRepo.getAllRecursiveDirectoriesByParent(ctx.session.userId, input.ancestor)
-              parentId: input.ancestor,
-              inFavorites: input.inFavorites,
-            })
           : [],
         FileRepo.searchFiles(ctx.session.userId, {
           parentId: input.ancestor,
-          inFavorites: input.inFavorites,
           includeCategoryIds: input.includeCategories,
           excludeCategoryIds: input.excludeCategories,
         }),