하위 카테고리의 파일 표시 여부를 기억하도록 개선

src/lib/indexedDB/filesystem.ts

@@ -25,6 +25,7 @@ interface CategoryInfo {
   parentId: CategoryId;
   name: string;
   files: { id: number; isRecursive: boolean }[];
+  isFileRecursive: boolean;
 }
 
 const filesystem = new Dexie("filesystem") as Dexie & {
@@ -33,11 +34,21 @@ const filesystem = new Dexie("filesystem") as Dexie & {
   category: EntityTable<CategoryInfo, "id">;
 };
 
-filesystem.version(2).stores({
+filesystem
-  directory: "id, parentId",
+  .version(3)
-  file: "id, parentId",
+  .stores({
-  category: "id, parentId",
+    directory: "id, parentId",
-});
+    file: "id, parentId",
+    category: "id, parentId",
+  })
+  .upgrade(async (trx) => {
+    await trx
+      .table("category")
+      .toCollection()
+      .modify((category) => {
+        category.isFileRecursive = false;
+      });
+  });
 
 export const getDirectoryInfos = async (parentId: DirectoryId) => {
   return await filesystem.directory.where({ parentId }).toArray();
@@ -87,6 +98,10 @@ export const storeCategoryInfo = async (categoryInfo: CategoryInfo) => {
   await filesystem.category.put(categoryInfo);
 };
 
+export const updateCategoryInfo = async (id: number, changes: { isFileRecursive?: boolean }) => {
+  await filesystem.category.update(id, changes);
+};
+
 export const deleteCategoryInfo = async (id: number) => {
   await filesystem.category.delete(id);
 };

src/lib/modules/filesystem.ts

@@ -12,6 +12,7 @@ import {
   getCategoryInfos as getCategoryInfosFromIndexedDB,
   getCategoryInfo as getCategoryInfoFromIndexedDB,
   storeCategoryInfo,
+  updateCategoryInfo as updateCategoryInfoInIndexedDB,
   deleteCategoryInfo,
   type DirectoryId,
   type CategoryId,
@@ -62,6 +63,7 @@ export type CategoryInfo =
       name?: undefined;
       subCategoryIds: number[];
       files?: undefined;
+      isFileRecursive?: undefined;
     }
   | {
       id: number;
@@ -70,6 +72,7 @@ export type CategoryInfo =
       name: string;
       subCategoryIds: number[];
       files: { id: number; isRecursive: boolean }[];
+      isFileRecursive: boolean;
     };
 
 const directoryInfoStore = new Map<DirectoryId, Writable<DirectoryInfo | null>>();
@@ -255,7 +258,13 @@ const fetchCategoryInfoFromIndexedDB = async (
     info.set({ id, subCategoryIds });
   } else {
     if (!category) return;
-    info.set({ id, name: category.name, subCategoryIds, files: category.files });
+    info.set({
+      id,
+      name: category.name,
+      subCategoryIds,
+      files: category.files,
+      isFileRecursive: category.isFileRecursive,
+    });
   }
 };
 
@@ -288,20 +297,28 @@ const fetchCategoryInfoFromServer = async (
 
     const { files }: CategoryFileListResponse = await res.json();
     const filesMapped = files.map(({ file, isRecursive }) => ({ id: file, isRecursive }));
+    let isFileRecursive: boolean | undefined = undefined;
 
-    info.set({
+    info.update((value) => {
-      id,
+      const newValue = {
-      dataKey,
+        isFileRecursive: false,
-      dataKeyVersion: new Date(metadata!.dekVersion),
+        ...value,
-      name,
+        id,
-      subCategoryIds: subCategories,
+        dataKey,
-      files: filesMapped,
+        dataKeyVersion: new Date(metadata!.dekVersion),
+        name,
+        subCategoryIds: subCategories,
+        files: filesMapped,
+      };
+      isFileRecursive = newValue.isFileRecursive;
+      return newValue;
     });
     await storeCategoryInfo({
       id,
       parentId: metadata!.parent,
       name,
       files: filesMapped,
+      isFileRecursive: isFileRecursive!,
     });
   }
 };
@@ -327,3 +344,17 @@ export const getCategoryInfo = (categoryId: CategoryId, masterKey: CryptoKey) =>
   fetchCategoryInfo(categoryId, info, masterKey); // Intended
   return info;
 };
+
+export const updateCategoryInfo = async (
+  categoryId: number,
+  changes: { isFileRecursive?: boolean },
+) => {
+  await updateCategoryInfoInIndexedDB(categoryId, changes);
+  categoryInfoStore.get(categoryId)?.update((value) => {
+    if (!value) return value;
+    if (changes.isFileRecursive !== undefined) {
+      value.isFileRecursive = changes.isFileRecursive;
+    }
+    return value;
+  });
+};

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

@@ -3,7 +3,7 @@
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components/molecules";
   import { Category, CategoryCreateModal } from "$lib/components/organisms";
-  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { getCategoryInfo, updateCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore } from "$lib/stores";
   import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
@@ -21,7 +21,7 @@
 
   let info: Writable<CategoryInfo | null> | undefined = $state();
 
-  let isFileRecursive = $state(false);
+  let isFileRecursive: boolean | undefined = $state();
 
   let isCategoryCreateModalOpen = $state(false);
   let isCategoryMenuBottomSheetOpen = $state(false);
@@ -30,6 +30,19 @@
 
   $effect(() => {
     info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
+    isFileRecursive = undefined;
+  });
+
+  $effect(() => {
+    if ($info && isFileRecursive === undefined) {
+      isFileRecursive = $info.isFileRecursive ?? false;
+    }
+  });
+
+  $effect(() => {
+    if (data.id !== "root" && $info?.isFileRecursive !== isFileRecursive) {
+      updateCategoryInfo(data.id as number, { isFileRecursive });
+    }
   });
 </script>
 
@@ -41,7 +54,7 @@
   <TopBar title={$info?.name} />
 {/if}
 <div class="min-h-full bg-gray-100 pb-[5.5em]">
-  {#if $info}
+  {#if $info && isFileRecursive !== undefined}
     <Category
       bind:isFileRecursive
       info={$info}