기존에 제작된 모달들을 ActionModal 컴포넌트 기반으로 재구성

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

@@ -4,49 +4,43 @@
   import { goto } from "$app/navigation";
   import { TopBar } from "$lib/components";
   import { FloatingButton } from "$lib/components/atoms";
-  import { RenameModal } from "$lib/components/organisms";
   import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
   import { masterKeyStore, hmacSecretStore } from "$lib/stores";
-  import CreateBottomSheet from "./CreateBottomSheet.svelte";
-  import CreateDirectoryModal from "./CreateDirectoryModal.svelte";
-  import DeleteDirectoryEntryModal from "./DeleteDirectoryEntryModal.svelte";
+  import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
-  import DirectoryEntryMenuBottomSheet from "./DirectoryEntryMenuBottomSheet.svelte";
   import DownloadStatusCard from "./DownloadStatusCard.svelte";
   import DuplicateFileModal from "./DuplicateFileModal.svelte";
+  import EntryCreateBottomSheet from "./EntryCreateBottomSheet.svelte";
+  import EntryDeleteModal from "./EntryDeleteModal.svelte";
+  import EntryMenuBottomSheet from "./EntryMenuBottomSheet.svelte";
+  import EntryRenameModal from "./EntryRenameModal.svelte";
   import UploadStatusCard from "./UploadStatusCard.svelte";
   import {
+    createContext,
     requestHmacSecretDownload,
     requestDirectoryCreation,
     requestFileUpload,
-    requestDirectoryEntryRename,
-    requestDirectoryEntryDeletion,
-    type SelectedDirectoryEntry,
-  } from "./service";
+    requestEntryRename,
+    requestEntryDeletion,
+  } from "./service.svelte";
 
   import IconAdd from "~icons/material-symbols/add";
 
   let { data } = $props();
+  let context = createContext();
 
   let info: Writable<DirectoryInfo | null> | undefined = $state();
   let fileInput: HTMLInputElement | undefined = $state();
-  let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
   let duplicatedFile: File | undefined = $state();
-  let selectedEntry: SelectedDirectoryEntry | undefined = $state();
+  let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
 
-  let isCreateBottomSheetOpen = $state(false);
-  let isCreateDirectoryModalOpen = $state(false);
+  let isEntryCreateBottomSheetOpen = $state(false);
+  let isDirectoryCreateModalOpen = $state(false);
   let isDuplicateFileModalOpen = $state(false);
 
-  let isDirectoryEntryMenuBottomSheetOpen = $state(false);
-  let isDirectoryEntryRenameModalOpen = $state(false);
-  let isDeleteDirectoryEntryModalOpen = $state(false);
-
-  const createDirectory = async (name: string) => {
-    await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!);
-    isCreateDirectoryModalOpen = false;
-    info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-  };
+  let isEntryMenuBottomSheetOpen = $state(false);
+  let isEntryRenameModalOpen = $state(false);
+  let isEntryDeleteModalOpen = $state(false);
 
   const uploadFile = () => {
     const files = fileInput?.files;
@@ -55,22 +49,19 @@
     for (const file of files) {
       requestFileUpload(file, data.id, $hmacSecretStore?.get(1)!, $masterKeyStore?.get(1)!, () => {
         return new Promise((resolve) => {
-          resolveForDuplicateFileModal = resolve;
           duplicatedFile = file;
+          resolveForDuplicateFileModal = resolve;
           isDuplicateFileModalOpen = true;
         });
       })
         .then((res) => {
           if (!res) return;
-
           // TODO: FIXME
           info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
-          window.alert(`'${file.name}' 파일이 업로드되었어요.`);
         })
         .catch((e: Error) => {
           // TODO: FIXME
           console.error(e);
-          window.alert(`'${file.name}' 파일 업로드에 실패했어요.\n${e.message}`);
         });
     }
 
@@ -110,8 +101,8 @@
           info={$info}
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
           onEntryMenuClick={(entry) => {
-            selectedEntry = entry;
-            isDirectoryEntryMenuBottomSheetOpen = true;
+            context.selectedEntry = entry;
+            isEntryMenuBottomSheetOpen = true;
           }}
         />
       {/key}
@@ -122,68 +113,71 @@
 <FloatingButton
   icon={IconAdd}
   onclick={() => {
-    isCreateBottomSheetOpen = true;
+    isEntryCreateBottomSheetOpen = true;
   }}
 />
-<CreateBottomSheet
-  bind:isOpen={isCreateBottomSheetOpen}
+<EntryCreateBottomSheet
+  bind:isOpen={isEntryCreateBottomSheetOpen}
   onDirectoryCreateClick={() => {
-    isCreateBottomSheetOpen = false;
-    isCreateDirectoryModalOpen = true;
+    isEntryCreateBottomSheetOpen = false;
+    isDirectoryCreateModalOpen = true;
   }}
   onFileUploadClick={() => {
-    isCreateBottomSheetOpen = false;
+    isEntryCreateBottomSheetOpen = false;
     fileInput?.click();
   }}
 />
-<CreateDirectoryModal bind:isOpen={isCreateDirectoryModalOpen} onCreateClick={createDirectory} />
-<DuplicateFileModal
-  bind:isOpen={isDuplicateFileModalOpen}
-  file={duplicatedFile}
-  onclose={() => {
-    resolveForDuplicateFileModal?.(false);
-    resolveForDuplicateFileModal = undefined;
-    duplicatedFile = undefined;
-    isDuplicateFileModalOpen = false;
-  }}
-  onDuplicateClick={() => {
-    resolveForDuplicateFileModal?.(true);
-    resolveForDuplicateFileModal = undefined;
-    duplicatedFile = undefined;
-    isDuplicateFileModalOpen = false;
-  }}
-/>
-
-<DirectoryEntryMenuBottomSheet
-  bind:isOpen={isDirectoryEntryMenuBottomSheetOpen}
-  bind:selectedEntry
-  onRenameClick={() => {
-    isDirectoryEntryMenuBottomSheetOpen = false;
-    isDirectoryEntryRenameModalOpen = true;
-  }}
-  onDeleteClick={() => {
-    isDirectoryEntryMenuBottomSheetOpen = false;
-    isDeleteDirectoryEntryModalOpen = true;
-  }}
-/>
-<RenameModal
-  bind:isOpen={isDirectoryEntryRenameModalOpen}
-  onbeforeclose={() => (selectedEntry = undefined)}
-  originalName={selectedEntry?.name}
-  onRenameClick={async (newName: string) => {
-    if (await requestDirectoryEntryRename(selectedEntry!, newName)) {
+<DirectoryCreateModal
+  bind:isOpen={isDirectoryCreateModalOpen}
+  onCreateClick={async (name) => {
+    if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
       info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
       return true;
     }
     return false;
   }}
 />
-<DeleteDirectoryEntryModal
-  bind:isOpen={isDeleteDirectoryEntryModalOpen}
-  bind:selectedEntry
-  onDeleteClick={async () => {
-    await requestDirectoryEntryDeletion(selectedEntry!);
-    info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
-    return true;
+<DuplicateFileModal
+  bind:isOpen={isDuplicateFileModalOpen}
+  file={duplicatedFile}
+  onbeforeclose={() => {
+    resolveForDuplicateFileModal?.(false);
+    isDuplicateFileModalOpen = false;
+  }}
+  onUploadClick={() => {
+    resolveForDuplicateFileModal?.(true);
+    isDuplicateFileModalOpen = false;
+  }}
+/>
+
+<EntryMenuBottomSheet
+  bind:isOpen={isEntryMenuBottomSheetOpen}
+  onRenameClick={() => {
+    isEntryMenuBottomSheetOpen = false;
+    isEntryRenameModalOpen = true;
+  }}
+  onDeleteClick={() => {
+    isEntryMenuBottomSheetOpen = false;
+    isEntryDeleteModalOpen = true;
+  }}
+/>
+<EntryRenameModal
+  bind:isOpen={isEntryRenameModalOpen}
+  onRenameClick={async (newName: string) => {
+    if (await requestEntryRename(context.selectedEntry!, newName)) {
+      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
+  }}
+/>
+<EntryDeleteModal
+  bind:isOpen={isEntryDeleteModalOpen}
+  onDeleteClick={async () => {
+    if (await requestEntryDeletion(context.selectedEntry!)) {
+      info = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
+      return true;
+    }
+    return false;
   }}
 />

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

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import { Button, Modal, TextInput } from "$lib/components/atoms";
-
-  interface Props {
-    onCreateClick: (name: string) => void;
-    isOpen: boolean;
-  }
-
-  let { onCreateClick, isOpen = $bindable() }: Props = $props();
-
-  let name = $state("");
-
-  const closeModal = () => {
-    name = "";
-    isOpen = false;
-  };
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  <p class="text-xl font-bold">새 폴더</p>
-  <div class="mt-2 flex w-full">
-    <TextInput bind:value={name} placeholder="폴더 이름" />
-  </div>
-  <div class="mt-7 flex gap-x-2">
-    <Button color="gray" onclick={closeModal} class="flex-1">닫기</Button>
-    <Button onclick={() => onCreateClick(name)} class="flex-1">만들기</Button>
-  </div>
-</Modal>

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

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import { Button, Modal } from "$lib/components/atoms";
-  import type { SelectedDirectoryEntry } from "./service";
-
-  interface Props {
-    onDeleteClick: () => Promise<boolean>;
-    isOpen: boolean;
-    selectedEntry: SelectedDirectoryEntry | undefined;
-  }
-
-  let { onDeleteClick, isOpen = $bindable(), selectedEntry = $bindable() }: Props = $props();
-
-  const closeModal = () => {
-    isOpen = false;
-    selectedEntry = undefined;
-  };
-
-  const deleteEntry = async () => {
-    // TODO: Validation
-
-    if (await onDeleteClick()) {
-      closeModal();
-    }
-  };
-</script>
-
-<Modal bind:isOpen onclose={closeModal}>
-  {#if selectedEntry}
-    {@const { type, name } = selectedEntry}
-    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
-    <div class="space-y-4">
-      <div class="space-y-2 break-keep">
-        <p class="text-xl font-bold">
-          {#if type === "directory"}
-            '{nameShort}' 폴더를 삭제할까요?
-          {:else}
-            '{nameShort}' 파일을 삭제할까요?
-          {/if}
-        </p>
-        <p>
-          {#if type === "directory"}
-            삭제한 폴더는 복구할 수 없어요. <br />
-            폴더 안의 모든 파일과 폴더도 함께 삭제돼요.
-          {:else}
-            삭제한 파일은 복구할 수 없어요.
-          {/if}
-        </p>
-      </div>
-      <div class="flex gap-x-2">
-        <Button color="gray" onclick={closeModal} class="flex-1">아니요</Button>
-        <Button onclick={deleteEntry} class="flex-1">삭제할게요</Button>
-      </div>
-    </div>
-  {/if}
-</Modal>

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { TextInputModal } from "$lib/components/organisms";
+
+  interface Props {
+    isOpen: boolean;
+    onCreateClick: (name: string) => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onCreateClick }: Props = $props();
+</script>
+
+<TextInputModal
+  bind:isOpen
+  title="새 폴더"
+  placeholder="폴더 이름"
+  submitText="만들기"
+  onSubmitClick={onCreateClick}
+/>

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

@@ -17,12 +17,12 @@
   import File from "./File.svelte";
   import SubDirectory from "./SubDirectory.svelte";
   import UploadingFile from "./UploadingFile.svelte";
-  import type { SelectedDirectoryEntry } from "../service";
+  import type { SelectedEntry } from "../service.svelte";
 
   interface Props {
     info: DirectoryInfo;
-    onEntryClick: (entry: SelectedDirectoryEntry) => void;
-    onEntryMenuClick: (entry: SelectedDirectoryEntry) => void;
+    onEntryClick: (entry: SelectedEntry) => void;
+    onEntryMenuClick: (entry: SelectedEntry) => void;
     sortBy?: SortBy;
   }
 

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

@@ -2,15 +2,15 @@
   import type { Writable } from "svelte/store";
   import type { FileInfo } from "$lib/modules/filesystem";
   import { formatDateTime } from "$lib/modules/util";
-  import type { SelectedDirectoryEntry } from "../service";
+  import type { SelectedEntry } from "../service.svelte";
 
   import IconDraft from "~icons/material-symbols/draft";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
     info: Writable<FileInfo | null>;
-    onclick: (selectedEntry: SelectedDirectoryEntry) => void;
-    onOpenMenuClick: (selectedEntry: SelectedDirectoryEntry) => void;
+    onclick: (selectedEntry: SelectedEntry) => void;
+    onOpenMenuClick: (selectedEntry: SelectedEntry) => void;
   }
 
   let { info, onclick, onOpenMenuClick }: Props = $props();

src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { DirectoryInfo } from "$lib/modules/filesystem";
-  import type { SelectedDirectoryEntry } from "../service";
+  import type { SelectedEntry } from "../service.svelte";
 
   import IconFolder from "~icons/material-symbols/folder";
   import IconMoreVert from "~icons/material-symbols/more-vert";
@@ -10,8 +10,8 @@
 
   interface Props {
     info: Writable<DirectoryInfo | null>;
-    onclick: (selectedEntry: SelectedDirectoryEntry) => void;
-    onOpenMenuClick: (selectedEntry: SelectedDirectoryEntry) => void;
+    onclick: (selectedEntry: SelectedEntry) => void;
+    onOpenMenuClick: (selectedEntry: SelectedEntry) => void;
   }
 
   let { info, onclick, onOpenMenuClick }: Props = $props();

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

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import { BottomSheet } from "$lib/components";
-  import { EntryButton } from "$lib/components/atoms";
-  import type { SelectedDirectoryEntry } from "./service";
-
-  import IconFolder from "~icons/material-symbols/folder";
-  import IconDraft from "~icons/material-symbols/draft";
-  import IconEdit from "~icons/material-symbols/edit";
-  import IconDelete from "~icons/material-symbols/delete";
-
-  interface Props {
-    onRenameClick: () => void;
-    onDeleteClick: () => void;
-    isOpen: boolean;
-    selectedEntry: SelectedDirectoryEntry | undefined;
-  }
-
-  let {
-    onRenameClick,
-    onDeleteClick,
-    isOpen = $bindable(),
-    selectedEntry = $bindable(),
-  }: Props = $props();
-
-  const closeBottomSheet = () => {
-    isOpen = false;
-    selectedEntry = undefined;
-  };
-</script>
-
-<BottomSheet bind:isOpen onclose={closeBottomSheet}>
-  <div class="w-full py-4">
-    {#if selectedEntry}
-      {@const { type, name } = selectedEntry}
-      <div class="flex h-12 items-center gap-x-4 p-2">
-        <div class="flex-shrink-0 text-lg">
-          {#if type === "directory"}
-            <IconFolder />
-          {:else}
-            <IconDraft class="text-blue-400" />
-          {/if}
-        </div>
-        <p title={name} class="flex-grow truncate font-semibold">
-          {name}
-        </p>
-      </div>
-      <div class="my-2 h-px w-full bg-gray-200"></div>
-    {/if}
-    <EntryButton onclick={onRenameClick} class="w-full">
-      <div class="flex h-8 items-center gap-x-4">
-        <IconEdit class="text-lg" />
-        <p class="font-medium">이름 바꾸기</p>
-      </div>
-    </EntryButton>
-    <EntryButton onclick={onDeleteClick} class="w-full">
-      <div class="flex h-8 items-center gap-x-4 text-red-500">
-        <IconDelete class="text-lg" />
-        <p class="font-medium">삭제하기</p>
-      </div>
-    </EntryButton>
-  </div>
-</BottomSheet>

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

@@ -1,29 +1,27 @@
 <script lang="ts">
-  import { Button, Modal } from "$lib/components/atoms";
+  import { ActionModal } from "$lib/components/molecules";
+  import { truncateString } from "$lib/modules/util";
 
   interface Props {
     file: File | undefined;
-    onclose: () => void;
-    onDuplicateClick: () => void;
     isOpen: boolean;
+    onbeforeclose: () => void;
+    onUploadClick: () => void;
   }
 
-  let { file, onclose, onDuplicateClick, isOpen = $bindable() }: Props = $props();
+  let { file, isOpen = $bindable(), onbeforeclose, onUploadClick }: Props = $props();
 </script>
 
-<Modal bind:isOpen {onclose}>
-  {#if file}
-    {@const { name } = file}
-    {@const nameShort = name.length > 20 ? `${name.slice(0, 20)}...` : name}
-    <div class="space-y-4">
-      <div class="space-y-2 break-keep">
-        <p class="text-xl font-bold">'{nameShort}' 파일이 있어요.</p>
-        <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
-      </div>
-      <div class="flex gap-x-2">
-        <Button color="gray" onclick={onclose} class="flex-1">아니요</Button>
-        <Button onclick={onDuplicateClick} class="flex-1">업로드할게요</Button>
-      </div>
-    </div>
-  {/if}
-</Modal>
+{#if file}
+  {@const { name } = file}
+  <ActionModal
+    bind:isOpen
+    {onbeforeclose}
+    title="'{truncateString(name)}' 파일이 있어요."
+    cancelText="아니요"
+    confirmText="업로드할게요"
+    onConfirmClick={onUploadClick}
+  >
+    <p>예전에 이미 업로드된 파일이에요. 그래도 업로드할까요?</p>
+  </ActionModal>
+{/if}

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

@@ -6,12 +6,12 @@
   import IconUploadFile from "~icons/material-symbols/upload-file";
 
   interface Props {
+    isOpen: boolean;
     onDirectoryCreateClick: () => void;
     onFileUploadClick: () => void;
-    isOpen: boolean;
   }
 
-  let { onDirectoryCreateClick, onFileUploadClick, isOpen = $bindable() }: Props = $props();
+  let { isOpen = $bindable(), onDirectoryCreateClick, onFileUploadClick }: Props = $props();
 </script>
 
 <BottomSheet bind:isOpen>

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { ActionModal } from "$lib/components/molecules";
+  import { truncateString } from "$lib/modules/util";
+  import { useContext } from "./service.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    onDeleteClick: () => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onDeleteClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedEntry}
+  {@const { name, type } = context.selectedEntry}
+  <ActionModal
+    bind:isOpen
+    title="'{truncateString(name)}' {type === 'directory' ? '폴더를' : '파일을'} 삭제할까요?"
+    cancelText="아니요"
+    confirmText="삭제할게요"
+    onConfirmClick={onDeleteClick}
+  >
+    <p>
+      {#if type === "directory"}
+        삭제한 폴더는 복구할 수 없어요. <br />
+        폴더 안의 모든 파일과 폴더도 함께 삭제돼요.
+      {:else}
+        삭제한 파일은 복구할 수 없어요.
+      {/if}
+    </p>
+  </ActionModal>
+{/if}

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { BottomSheet } from "$lib/components";
+  import { EntryButton } from "$lib/components/atoms";
+  import { useContext } from "./service.svelte";
+
+  import IconFolder from "~icons/material-symbols/folder";
+  import IconDraft from "~icons/material-symbols/draft";
+  import IconEdit from "~icons/material-symbols/edit";
+  import IconDelete from "~icons/material-symbols/delete";
+
+  interface Props {
+    isOpen: boolean;
+    onDeleteClick: () => void;
+    onRenameClick: () => void;
+  }
+
+  let { isOpen = $bindable(), onDeleteClick, onRenameClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedEntry}
+  {@const { name, type } = context.selectedEntry}
+  <BottomSheet bind:isOpen>
+    <div class="w-full py-4">
+      <div class="flex h-12 items-center gap-x-4 p-2">
+        <div class="flex-shrink-0 text-lg">
+          {#if type === "directory"}
+            <IconFolder />
+          {:else}
+            <IconDraft class="text-blue-400" />
+          {/if}
+        </div>
+        <p title={name} class="flex-grow truncate font-semibold">
+          {name}
+        </p>
+      </div>
+      <div class="my-2 h-px w-full bg-gray-200"></div>
+      <EntryButton onclick={onRenameClick} class="w-full">
+        <div class="flex h-8 items-center gap-x-4">
+          <IconEdit class="text-lg" />
+          <p class="font-medium">이름 바꾸기</p>
+        </div>
+      </EntryButton>
+      <EntryButton onclick={onDeleteClick} class="w-full">
+        <div class="flex h-8 items-center gap-x-4 text-red-500">
+          <IconDelete class="text-lg" />
+          <p class="font-medium">삭제하기</p>
+        </div>
+      </EntryButton>
+    </div>
+  </BottomSheet>
+{/if}

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { RenameModal } from "$lib/components/organisms";
+  import { useContext } from "./service.svelte";
+
+  interface Props {
+    isOpen: boolean;
+    onRenameClick: (newName: string) => Promise<boolean>;
+  }
+
+  let { isOpen = $bindable(), onRenameClick }: Props = $props();
+  let context = useContext();
+</script>
+
+{#if context.selectedEntry}
+  {@const { name } = context.selectedEntry}
+  <RenameModal bind:isOpen originalName={name} {onRenameClick} />
+{/if}

src/routes/(main)/directory/[[id]]/service.svelte.ts

@@ -1,3 +1,4 @@
+import { getContext, setContext } from "svelte";
 import { callGetApi, callPostApi } from "$lib/hooks";
 import { storeHmacSecrets } from "$lib/indexedDB";
 import { generateDataKey, wrapDataKey, unwrapHmacSecret, encryptString } from "$lib/modules/crypto";
@@ -11,7 +12,7 @@ import type {
 } from "$lib/server/schemas";
 import { hmacSecretStore, type MasterKey, type HmacSecret } from "$lib/stores";
 
-export interface SelectedDirectoryEntry {
+export interface SelectedEntry {
   type: "directory" | "file";
   id: number;
   dataKey: CryptoKey;
@@ -19,6 +20,17 @@ export interface SelectedDirectoryEntry {
   name: string;
 }
 
+export const createContext = () => {
+  const context = $state({
+    selectedEntry: undefined as SelectedEntry | undefined,
+  });
+  return setContext("context", context);
+};
+
+export const useContext = () => {
+  return getContext<ReturnType<typeof createContext>>("context");
+};
+
 export const requestHmacSecretDownload = async (masterKey: CryptoKey) => {
   // TODO: MEK rotation
 
@@ -46,7 +58,8 @@ export const requestDirectoryCreation = async (
 ) => {
   const { dataKey, dataKeyVersion } = await generateDataKey();
   const nameEncrypted = await encryptString(name, dataKey);
-  await callPostApi<DirectoryCreateRequest>("/api/directory/create", {
+
+  const res = await callPostApi<DirectoryCreateRequest>("/api/directory/create", {
     parent: parentId,
     mekVersion: masterKey.version,
     dek: await wrapDataKey(dataKey, masterKey.key),
@@ -54,6 +67,7 @@ export const requestDirectoryCreation = async (
     name: nameEncrypted.ciphertext,
     nameIv: nameEncrypted.iv,
   });
+  return res.ok;
 };
 
 export const requestFileUpload = async (
@@ -66,10 +80,7 @@ export const requestFileUpload = async (
   return await uploadFile(file, parentId, hmacSecret, masterKey, onDuplicate);
 };
 
-export const requestDirectoryEntryRename = async (
-  entry: SelectedDirectoryEntry,
-  newName: string,
-) => {
+export const requestEntryRename = async (entry: SelectedEntry, newName: string) => {
   const newNameEncrypted = await encryptString(newName, entry.dataKey);
 
   let res;
@@ -89,7 +100,7 @@ export const requestDirectoryEntryRename = async (
   return res.ok;
 };
 
-export const requestDirectoryEntryDeletion = async (entry: SelectedDirectoryEntry) => {
+export const requestEntryDeletion = async (entry: SelectedEntry) => {
   const res = await callPostApi(`/api/${entry.type}/${entry.id}/delete`);
   if (!res.ok) return false;