카테고리에 파일을 추가할 수 있는 BottomSheet 구현 (WiP)

src/lib/molecules/SubCategories.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { ClassValue } from "svelte/elements";
+  import type { Writable } from "svelte/store";
+  import { EntryButton } from "$lib/components/buttons";
+  import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
+  import Categories, { type SelectedCategory } from "$lib/molecules/Categories";
+  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;
+    subCategoryCreatePosition?: "top" | "bottom";
+  }
+
+  let {
+    info,
+    onSubCategoryClick,
+    onSubCategoryCreateClick,
+    subCategoryCreatePosition = "bottom",
+    ...props
+  }: Props = $props();
+
+  let subCategories: Writable<CategoryInfo | null>[] = $state([]);
+
+  $effect(() => {
+    subCategories = info.subCategoryIds.map((id) =>
+      getCategoryInfo(id, $masterKeyStore?.get(1)?.key!),
+    );
+
+    // TODO: Sorting
+  });
+</script>
+
+<div class={["space-y-1", props.class]}>
+  {#snippet subCategoryCreate()}
+    <EntryButton onclick={onSubCategoryCreateClick}>
+      <div class="flex h-8 items-center gap-x-4">
+        <IconAddCircle class="text-lg text-gray-600" />
+        <p class="font-medium text-gray-700">카테고리 추가하기</p>
+      </div>
+    </EntryButton>
+  {/snippet}
+
+  {#if subCategoryCreatePosition === "top"}
+    {@render subCategoryCreate()}
+  {/if}
+  {#key info}
+    <Categories categories={subCategories} onCategoryClick={onSubCategoryClick} />
+  {/key}
+  {#if subCategoryCreatePosition === "bottom"}
+    {@render subCategoryCreate()}
+  {/if}
+</div>