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