components 디렉터리 밖에 있던 molecule/organism 컴포넌트들을 해당 디렉터리 내부로 이동

src/lib/components/molecules/Categories/Categories.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { untrack, type Component } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+  import { get, type Writable } from "svelte/store";
+  import type { CategoryInfo } from "$lib/modules/filesystem";
+  import { SortBy, sortEntries } from "$lib/modules/util";
+  import Category from "./Category.svelte";
+  import type { SelectedCategory } from "./service";
+
+  interface Props {
+    categories: Writable<CategoryInfo | null>[];
+    categoryMenuIcon?: Component<SvelteHTMLElements["svg"]>;
+    onCategoryClick: (category: SelectedCategory) => void;
+    onCategoryMenuClick?: (category: SelectedCategory) => void;
+    sortBy?: SortBy;
+  }
+
+  let {
+    categories,
+    categoryMenuIcon,
+    onCategoryClick,
+    onCategoryMenuClick,
+    sortBy = SortBy.NAME_ASC,
+  }: Props = $props();
+
+  let categoriesWithName: { name?: string; info: Writable<CategoryInfo | null> }[] = $state([]);
+
+  $effect(() => {
+    categoriesWithName = categories.map((category) => ({
+      name: get(category)?.name,
+      info: category,
+    }));
+
+    const sort = () => {
+      sortEntries(categoriesWithName, sortBy);
+    };
+    return untrack(() => {
+      sort();
+
+      const unsubscribes = categoriesWithName.map((category) =>
+        category.info.subscribe((value) => {
+          if (category.name === value?.name) return;
+          category.name = value?.name;
+          sort();
+        }),
+      );
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    });
+  });
+</script>
+
+{#if categoriesWithName.length > 0}
+  <div class="space-y-1">
+    {#each categoriesWithName as { info }}
+      <Category
+        {info}
+        menuIcon={categoryMenuIcon}
+        onclick={onCategoryClick}
+        onMenuClick={onCategoryMenuClick}
+      />
+    {/each}
+  </div>
+{/if}

src/lib/components/molecules/Categories/Category.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+  import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { CategoryLabel } from "$lib/components/molecules";
+  import type { CategoryInfo } from "$lib/modules/filesystem";
+  import type { SelectedCategory } from "./service";
+
+  interface Props {
+    info: Writable<CategoryInfo | null>;
+    menuIcon?: Component<SvelteHTMLElements["svg"]>;
+    onclick: (category: SelectedCategory) => void;
+    onMenuClick?: (category: SelectedCategory) => void;
+  }
+
+  let { info, menuIcon, onclick, onMenuClick }: Props = $props();
+
+  const openCategory = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    onclick({ id, dataKey, dataKeyVersion, name });
+  };
+
+  const openMenu = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as CategoryInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    onMenuClick!({ id, dataKey, dataKeyVersion, name });
+  };
+</script>
+
+{#if $info}
+  <ActionEntryButton
+    class="h-12"
+    onclick={openCategory}
+    actionButtonIcon={menuIcon}
+    onActionButtonClick={openMenu}
+  >
+    <CategoryLabel name={$info.name!} />
+  </ActionEntryButton>
+{/if}

src/lib/components/molecules/Categories/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Categories.svelte";
+export * from "./service";

src/lib/components/molecules/Categories/service.ts

@@ -0,0 +1,6 @@
+export interface SelectedCategory {
+  id: number;
+  dataKey: CryptoKey;
+  dataKeyVersion: Date;
+  name: string;
+}

src/lib/components/molecules/SubCategories.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+  import type { Writable } from "svelte/store";
+  import { Categories, IconEntryButton, type SelectedCategory } from "$lib/components/molecules";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { masterKeyStore } from "$lib/stores";
+
+  import IconAddCircle from "~icons/material-symbols/add-circle";
+
+  interface Props {
+    class?: ClassValue;
+    info: CategoryInfo;
+    onSubCategoryClick: (subCategory: SelectedCategory) => void;
+    onSubCategoryCreateClick: () => void;
+    onSubCategoryMenuClick?: (category: SelectedCategory) => void;
+    subCategoryCreatePosition?: "top" | "bottom";
+    subCategoryMenuIcon?: Component<SvelteHTMLElements["svg"]>;
+  }
+
+  let {
+    info,
+    onSubCategoryClick,
+    onSubCategoryCreateClick,
+    onSubCategoryMenuClick,
+    subCategoryCreatePosition = "bottom",
+    subCategoryMenuIcon,
+    ...props
+  }: Props = $props();
+
+  let subCategories: Writable<CategoryInfo | null>[] = $state([]);
+
+  $effect(() => {
+    subCategories = info.subCategoryIds.map((id) =>
+      getCategoryInfo(id, $masterKeyStore?.get(1)?.key!),
+    );
+  });
+</script>
+
+<div class={["space-y-1", props.class]}>
+  {#snippet subCategoryCreate()}
+    <IconEntryButton
+      icon={IconAddCircle}
+      onclick={onSubCategoryCreateClick}
+      class="h-12 w-full"
+      iconClass="text-gray-600"
+      textClass="text-gray-700"
+    >
+      카테고리 추가하기
+    </IconEntryButton>
+  {/snippet}
+
+  {#if subCategoryCreatePosition === "top"}
+    {@render subCategoryCreate()}
+  {/if}
+  {#key info}
+    <Categories
+      categories={subCategories}
+      categoryMenuIcon={subCategoryMenuIcon}
+      onCategoryClick={onSubCategoryClick}
+      onCategoryMenuClick={onSubCategoryMenuClick}
+    />
+  {/key}
+  {#if subCategoryCreatePosition === "bottom"}
+    {@render subCategoryCreate()}
+  {/if}
+</div>

src/lib/components/molecules/index.ts

@@ -1,6 +1,9 @@
 export * from "./ActionModal.svelte";
 export { default as ActionModal } from "./ActionModal.svelte";
+export * from "./Categories";
+export { default as Categories } from "./Categories";
 export { default as IconEntryButton } from "./IconEntryButton.svelte";
 export * from "./labels";
+export { default as SubCategories } from "./SubCategories.svelte";
 export { default as TitledDiv } from "./TitledDiv.svelte";
 export { default as TopBar } from "./TopBar.svelte";

src/lib/components/organisms/Category/Category.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import { CheckBox } from "$lib/components/atoms";
+  import { SubCategories, type SelectedCategory } from "$lib/components/molecules";
+  import { getFileInfo, type FileInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import { SortBy, sortEntries } from "$lib/modules/util";
+  import { masterKeyStore } from "$lib/stores";
+  import File from "./File.svelte";
+  import type { SelectedFile } from "./service";
+
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
+  interface Props {
+    info: CategoryInfo;
+    onFileClick: (file: SelectedFile) => void;
+    onFileRemoveClick: (file: SelectedFile) => void;
+    onSubCategoryClick: (subCategory: SelectedCategory) => void;
+    onSubCategoryCreateClick: () => void;
+    onSubCategoryMenuClick: (subCategory: SelectedCategory) => void;
+    sortBy?: SortBy;
+    isFileRecursive: boolean;
+  }
+
+  let {
+    info,
+    onFileClick,
+    onFileRemoveClick,
+    onSubCategoryClick,
+    onSubCategoryCreateClick,
+    onSubCategoryMenuClick,
+    sortBy = SortBy.NAME_ASC,
+    isFileRecursive = $bindable(),
+  }: Props = $props();
+
+  let files: { name?: string; info: Writable<FileInfo | null>; isRecursive: boolean }[] = $state(
+    [],
+  );
+
+  $effect(() => {
+    files =
+      info.files
+        ?.filter(({ isRecursive }) => isFileRecursive || !isRecursive)
+        .map(({ id, isRecursive }) => {
+          const info = getFileInfo(id, $masterKeyStore?.get(1)?.key!);
+          return {
+            name: get(info)?.name,
+            info,
+            isRecursive,
+          };
+        }) ?? [];
+
+    const sort = () => {
+      sortEntries(files, sortBy);
+    };
+    return untrack(() => {
+      sort();
+
+      const unsubscribes = files.map((file) =>
+        file.info.subscribe((value) => {
+          if (file.name === value?.name) return;
+          file.name = value?.name;
+          sort();
+        }),
+      );
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    });
+  });
+</script>
+
+<div class="space-y-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}
+    <SubCategories
+      {info}
+      {onSubCategoryClick}
+      {onSubCategoryCreateClick}
+      {onSubCategoryMenuClick}
+      subCategoryMenuIcon={IconMoreVert}
+    />
+  </div>
+  {#if info.id !== "root"}
+    <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={isFileRecursive}>
+          <p class="font-medium">하위 카테고리의 파일</p>
+        </CheckBox>
+      </div>
+      <div class="space-y-1">
+        {#key info}
+          {#each files as { info, isRecursive }}
+            <File
+              {info}
+              onclick={onFileClick}
+              onRemoveClick={!isRecursive ? onFileRemoveClick : undefined}
+            />
+          {:else}
+            <p class="text-gray-500 text-center">이 카테고리에 추가된 파일이 없어요.</p>
+          {/each}
+        {/key}
+      </div>
+    </div>
+  {/if}
+</div>

src/lib/components/organisms/Category/File.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { ActionEntryButton } from "$lib/components/atoms";
+  import { DirectoryEntryLabel } from "$lib/components/molecules";
+  import type { FileInfo } from "$lib/modules/filesystem";
+  import type { SelectedFile } from "./service";
+
+  import IconClose from "~icons/material-symbols/close";
+
+  interface Props {
+    info: Writable<FileInfo | null>;
+    onclick: (selectedFile: SelectedFile) => void;
+    onRemoveClick?: (selectedFile: SelectedFile) => void;
+  }
+
+  let { info, onclick, onRemoveClick }: Props = $props();
+
+  const openFile = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    onclick({ id, dataKey, dataKeyVersion, name });
+  };
+
+  const removeFile = () => {
+    const { id, dataKey, dataKeyVersion, name } = $info as FileInfo;
+    if (!dataKey || !dataKeyVersion) return; // TODO: Error handling
+
+    onRemoveClick!({ id, dataKey, dataKeyVersion, name });
+  };
+</script>
+
+{#if $info}
+  <ActionEntryButton
+    class="h-12"
+    onclick={openFile}
+    actionButtonIcon={onRemoveClick && IconClose}
+    onActionButtonClick={removeFile}
+  >
+    <DirectoryEntryLabel type="file" name={$info.name} />
+  </ActionEntryButton>
+{/if}

src/lib/components/organisms/Category/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Category.svelte";
+export * from "./service";

src/lib/components/organisms/Category/service.ts

@@ -0,0 +1,6 @@
+export interface SelectedFile {
+  id: number;
+  dataKey: CryptoKey;
+  dataKeyVersion: Date;
+  name: string;
+}

src/lib/components/organisms/index.ts

@@ -1 +1,3 @@
+export * from "./Category";
+export { default as Category } from "./Category";
 export * from "./modals";