From 877cf9c42ee4546d95e4bae69c89f5faae956577 Mon Sep 17 00:00:00 2001
From: static <kmc7468@naver.com>
Date: Mon, 12 Oct 2026 00:30:10 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC?=
 =?UTF-8?q?=20=EB=8F=84=EB=A9=94=EC=9D=B8=EA=B3=BC=20=EB=AC=B4=EA=B4=80?=
 =?UTF-8?q?=ED=95=9C=20UI=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=99=80?=
 =?UTF-8?q?=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EC=9E=AC=EA=B5=AC=EC=84=B1=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20=EC=A4=91=EB=B3=B5=EB=90=9C=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=ED=86=B5=ED=95=A9=20=EB=B0=8F=20=EB=AA=A8=EB=93=88=20=EA=B0=84?=
 =?UTF-8?q?=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B0=A9=ED=96=A5=EC=9D=84=20?=
 =?UTF-8?q?ESLint=EB=A1=9C=20=EA=B0=95=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 eslint.config.js                              | 25 ++++++++
 src/lib/client/cache/thumbnailCache.svelte.ts |  7 ++-
 src/lib/components/atoms/buttons/index.ts     |  6 --
 src/lib/components/atoms/divs/index.ts        |  3 -
 src/lib/components/atoms/index.ts             |  8 ---
 src/lib/components/atoms/inputs/index.ts      |  2 -
 src/lib/components/molecules/index.ts         |  9 ---
 src/lib/components/molecules/labels/index.ts  |  4 --
 src/lib/components/organisms/index.ts         |  1 -
 src/lib/components/organisms/modals/index.ts  |  4 --
 .../auth/components}/ForceLoginModal.svelte   |  2 +-
 src/lib/features/auth/components/index.ts     |  1 +
 .../toast.svelte.ts => features/errors.ts}    | 21 +------
 .../filesystem/components}/Categories.svelte  |  6 +-
 .../components}/CategoryCreateModal.svelte    |  2 +-
 .../components/DirectoryEntry.svelte          | 25 ++++++++
 .../filesystem/components/FileEntry.svelte    | 40 ++++++++++++
 .../components}/FileThumbnailButton.svelte    |  0
 .../components}/SubCategories.svelte          |  7 +--
 .../features/filesystem/components/index.ts   |  7 +++
 .../atoms => ui}/RowVirtualizer.svelte        |  0
 .../buttons/ActionEntryButton.svelte          |  2 +-
 .../atoms => ui}/buttons/Button.svelte        |  0
 .../atoms => ui}/buttons/EntryButton.svelte   |  0
 .../buttons/FloatingButton.svelte             |  2 +-
 .../buttons}/IconEntryButton.svelte           |  3 +-
 .../atoms => ui}/buttons/TextButton.svelte    |  0
 src/lib/ui/index.ts                           | 28 +++++++++
 .../atoms => ui}/inputs/CheckBox.svelte       |  0
 .../atoms => ui/inputs}/Chip.svelte           |  0
 .../atoms => ui}/inputs/TextInput.svelte      |  2 +-
 .../labels/CategoryLabel.svelte               |  2 +-
 .../labels/DirectoryEntryLabel.svelte         |  2 +-
 .../molecules => ui}/labels/IconLabel.svelte  |  0
 .../molecules => ui}/labels/TitleLabel.svelte |  0
 .../divs => ui/layout}/AdaptiveDiv.svelte     |  0
 .../atoms/divs => ui/layout}/BottomDiv.svelte |  0
 .../divs => ui/layout}/FullscreenDiv.svelte   |  0
 .../molecules => ui/layout}/TitledDiv.svelte  |  2 +-
 .../molecules => ui/layout}/TopBar.svelte     |  0
 .../overlays}/ActionModal.svelte              |  2 +-
 .../atoms => ui/overlays}/BottomSheet.svelte  |  2 +-
 .../atoms => ui/overlays}/Modal.svelte        |  2 +-
 .../modals => ui/overlays}/RenameModal.svelte |  2 +-
 .../overlays}/TextInputModal.svelte           |  3 +-
 .../atoms => ui/overlays}/Toasts.svelte       |  2 +-
 src/lib/ui/overlays/overlayGroup.svelte.ts    | 27 ++++++++
 src/lib/ui/overlays/toast.svelte.ts           | 19 ++++++
 src/routes/(fullscreen)/+layout.svelte        |  2 +-
 .../auth/changePassword/+page.svelte          | 13 +++-
 .../(fullscreen)/auth/login/+page.svelte      | 23 +++----
 .../(fullscreen)/client/pending/+page.svelte  |  3 +-
 .../(fullscreen)/file/[id]/+page.svelte       |  6 +-
 .../file/[id]/AddToCategoryBottomSheet.svelte |  7 +--
 .../(fullscreen)/file/downloads/+page.svelte  |  3 +-
 .../(fullscreen)/file/uploads/+page.svelte    |  3 +-
 src/routes/(fullscreen)/gallery/+page.svelte  |  8 +--
 .../(fullscreen)/key/export/+page.svelte      | 11 +++-
 .../export/BeforeContinueBottomSheet.svelte   |  2 +-
 .../key/export/BeforeContinueModal.svelte     |  2 +-
 .../(fullscreen)/key/generate/+page.svelte    | 13 ++--
 src/routes/(fullscreen)/search/+page.svelte   | 11 ++--
 .../(fullscreen)/search/Directory.svelte      | 16 -----
 src/routes/(fullscreen)/search/File.svelte    | 26 --------
 .../search/SelectCategoryBottomSheet.svelte   |  4 +-
 .../(fullscreen)/settings/cache/+page.svelte  |  5 +-
 .../settings/thumbnail/+page.svelte           | 29 ++++++---
 .../settings/thumbnail/File.svelte            | 41 -------------
 src/routes/(main)/+layout.svelte              |  2 +-
 src/routes/(main)/BottomBar.svelte            |  2 +-
 .../(main)/category/[[id]]/+page.svelte       | 61 +++++++++----------
 .../[[id]]/CategoryDeleteModal.svelte         |  2 +-
 .../[[id]]/CategoryMenuBottomSheet.svelte     |  3 +-
 .../[[id]]/CategoryRenameModal.svelte         |  2 +-
 src/routes/(main)/category/[[id]]/File.svelte | 35 -----------
 .../(main)/category/[[id]]/service.svelte.ts  | 20 +++---
 .../(main)/directory/[[id]]/+page.svelte      | 48 ++++++---------
 .../[[id]]/DirectoryCreateModal.svelte        |  2 +-
 .../DirectoryEntries/DirectoryEntries.svelte  | 33 +++++++---
 .../[[id]]/DirectoryEntries/File.svelte       | 46 --------------
 .../DirectoryEntries/SubDirectory.svelte      | 36 -----------
 .../[[id]]/DuplicateFileModal.svelte          |  2 +-
 .../[[id]]/EntryCreateBottomSheet.svelte      |  3 +-
 .../directory/[[id]]/EntryDeleteModal.svelte  |  2 +-
 .../[[id]]/EntryMenuBottomSheet.svelte        |  3 +-
 .../directory/[[id]]/EntryRenameModal.svelte  |  2 +-
 .../(main)/directory/[[id]]/service.svelte.ts | 18 +++---
 src/routes/(main)/favorites/+page.svelte      | 17 +++---
 src/routes/(main)/favorites/Directory.svelte  | 24 --------
 src/routes/(main)/favorites/File.svelte       | 34 -----------
 src/routes/(main)/home/+page.svelte           |  3 +-
 src/routes/(main)/menu/+page.svelte           |  2 +-
 src/routes/(main)/menu/MenuEntryButton.svelte |  2 +-
 src/routes/+layout.svelte                     |  2 +-
 94 files changed, 398 insertions(+), 518 deletions(-)
 delete mode 100644 src/lib/components/atoms/buttons/index.ts
 delete mode 100644 src/lib/components/atoms/divs/index.ts
 delete mode 100644 src/lib/components/atoms/index.ts
 delete mode 100644 src/lib/components/atoms/inputs/index.ts
 delete mode 100644 src/lib/components/molecules/index.ts
 delete mode 100644 src/lib/components/molecules/labels/index.ts
 delete mode 100644 src/lib/components/organisms/index.ts
 delete mode 100644 src/lib/components/organisms/modals/index.ts
 rename src/lib/{components/organisms/modals => features/auth/components}/ForceLoginModal.svelte (88%)
 create mode 100644 src/lib/features/auth/components/index.ts
 rename src/lib/{client/toast.svelte.ts => features/errors.ts} (68%)
 rename src/lib/{components/molecules => features/filesystem/components}/Categories.svelte (80%)
 rename src/lib/{components/organisms/modals => features/filesystem/components}/CategoryCreateModal.svelte (83%)
 create mode 100644 src/lib/features/filesystem/components/DirectoryEntry.svelte
 create mode 100644 src/lib/features/filesystem/components/FileEntry.svelte
 rename src/lib/{components/atoms/buttons => features/filesystem/components}/FileThumbnailButton.svelte (100%)
 rename src/lib/{components/molecules => features/filesystem/components}/SubCategories.svelte (91%)
 create mode 100644 src/lib/features/filesystem/components/index.ts
 rename src/lib/{components/atoms => ui}/RowVirtualizer.svelte (100%)
 rename src/lib/{components/atoms => ui}/buttons/ActionEntryButton.svelte (97%)
 rename src/lib/{components/atoms => ui}/buttons/Button.svelte (100%)
 rename src/lib/{components/atoms => ui}/buttons/EntryButton.svelte (100%)
 rename src/lib/{components/atoms => ui}/buttons/FloatingButton.svelte (92%)
 rename src/lib/{components/molecules => ui/buttons}/IconEntryButton.svelte (84%)
 rename src/lib/{components/atoms => ui}/buttons/TextButton.svelte (100%)
 create mode 100644 src/lib/ui/index.ts
 rename src/lib/{components/atoms => ui}/inputs/CheckBox.svelte (100%)
 rename src/lib/{components/atoms => ui/inputs}/Chip.svelte (100%)
 rename src/lib/{components/atoms => ui}/inputs/TextInput.svelte (96%)
 rename src/lib/{components/molecules => ui}/labels/CategoryLabel.svelte (89%)
 rename src/lib/{components/molecules => ui}/labels/DirectoryEntryLabel.svelte (96%)
 rename src/lib/{components/molecules => ui}/labels/IconLabel.svelte (100%)
 rename src/lib/{components/molecules => ui}/labels/TitleLabel.svelte (100%)
 rename src/lib/{components/atoms/divs => ui/layout}/AdaptiveDiv.svelte (100%)
 rename src/lib/{components/atoms/divs => ui/layout}/BottomDiv.svelte (100%)
 rename src/lib/{components/atoms/divs => ui/layout}/FullscreenDiv.svelte (100%)
 rename src/lib/{components/molecules => ui/layout}/TitledDiv.svelte (93%)
 rename src/lib/{components/molecules => ui/layout}/TopBar.svelte (100%)
 rename src/lib/{components/molecules => ui/overlays}/ActionModal.svelte (95%)
 rename src/lib/{components/atoms => ui/overlays}/BottomSheet.svelte (94%)
 rename src/lib/{components/atoms => ui/overlays}/Modal.svelte (93%)
 rename src/lib/{components/organisms/modals => ui/overlays}/RenameModal.svelte (87%)
 rename src/lib/{components/organisms/modals => ui/overlays}/TextInputModal.svelte (83%)
 rename src/lib/{components/atoms => ui/overlays}/Toasts.svelte (88%)
 create mode 100644 src/lib/ui/overlays/overlayGroup.svelte.ts
 create mode 100644 src/lib/ui/overlays/toast.svelte.ts
 delete mode 100644 src/routes/(fullscreen)/search/Directory.svelte
 delete mode 100644 src/routes/(fullscreen)/search/File.svelte
 delete mode 100644 src/routes/(fullscreen)/settings/thumbnail/File.svelte
 delete mode 100644 src/routes/(main)/category/[[id]]/File.svelte
 delete mode 100644 src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
 delete mode 100644 src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
 delete mode 100644 src/routes/(main)/favorites/Directory.svelte
 delete mode 100644 src/routes/(main)/favorites/File.svelte

diff --git a/eslint.config.js b/eslint.config.js
index c052e3e..1994a63 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -13,6 +13,20 @@ const svelteConfig = (await loadConfig("./", { traverse: false }))?.config;
 
 const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));
 
+// Restricts the direction of dependencies between modules
+const defineImportBoundaries = (boundaries) =>
+  Object.entries(boundaries).map(([files, regex]) => ({
+    files: [files],
+    rules: {
+      "no-restricted-imports": [
+        "error",
+        {
+          patterns: [{ regex, message: "Violates the dependency direction between modules." }],
+        },
+      ],
+    },
+  }));
+
 export default defineConfig(
   includeIgnoreFile(gitignorePath),
   js.configs.recommended,
@@ -37,6 +51,17 @@ export default defineConfig(
       "no-undef": "off",
     },
   },
+  ...defineImportBoundaries({
+    // Pure code shared by the server, the client, and the service worker
+    "src/lib/shared/**": "^(#lib/(?!shared/)|#trpc/|#workers/|\\$app/|svelte($|/))",
+    "src/lib/server/**": "^(#lib/(client|features|ui)/|#trpc/)",
+    // Infrastructure of the browser
+    "src/lib/client/**": "^#lib/(server|features|ui)/",
+    // Domain-agnostic components
+    "src/lib/ui/**": "^(#lib/(server|client|features)/|#trpc/)",
+    "src/lib/features/**": "^#lib/server/",
+    "src/service-worker/**": "^(#lib/(?!shared/|client/storage/opfs\\.js$)|#trpc/|#workers/)",
+  }),
   {
     files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
     languageOptions: {
diff --git a/src/lib/client/cache/thumbnailCache.svelte.ts b/src/lib/client/cache/thumbnailCache.svelte.ts
index 5a36e3d..cc45213 100644
--- a/src/lib/client/cache/thumbnailCache.svelte.ts
+++ b/src/lib/client/cache/thumbnailCache.svelte.ts
@@ -1,7 +1,6 @@
 /* eslint-disable svelte/prefer-svelte-reactivity -- Lookup tables of reactive entries */
 import { LRUCache } from "lru-cache";
 import { deleteDirectory, deleteFile, readFile, writeFile } from "#lib/client/storage/opfs.js";
-import type { SummarizedFileInfo } from "#lib/features/filesystem/index.js";
 import { decryptChunk, encodeToBase64 } from "#lib/shared/crypto/index.js";
 
 export interface Thumbnail {
@@ -33,7 +32,11 @@ const fetchFromServer = async (fileId: number, dataKey: CryptoKey) => {
   return getThumbnailUrl(thumbnailBuffer);
 };
 
-export const getFileThumbnail = (file: SummarizedFileInfo) => {
+export const getFileThumbnail = (file: {
+  id: number;
+  contentType: string;
+  dataKey?: { key: CryptoKey };
+}) => {
   if (!(file.contentType.startsWith("image/") || file.contentType.startsWith("video/"))) {
     return undefined;
   }
diff --git a/src/lib/components/atoms/buttons/index.ts b/src/lib/components/atoms/buttons/index.ts
deleted file mode 100644
index 4ed77f2..0000000
--- a/src/lib/components/atoms/buttons/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as ActionEntryButton } from "./ActionEntryButton.svelte";
-export { default as Button } from "./Button.svelte";
-export { default as EntryButton } from "./EntryButton.svelte";
-export { default as FileThumbnailButton } from "./FileThumbnailButton.svelte";
-export { default as FloatingButton } from "./FloatingButton.svelte";
-export { default as TextButton } from "./TextButton.svelte";
diff --git a/src/lib/components/atoms/divs/index.ts b/src/lib/components/atoms/divs/index.ts
deleted file mode 100644
index 561bbde..0000000
--- a/src/lib/components/atoms/divs/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
-export { default as BottomDiv } from "./BottomDiv.svelte";
-export { default as FullscreenDiv } from "./FullscreenDiv.svelte";
diff --git a/src/lib/components/atoms/index.ts b/src/lib/components/atoms/index.ts
deleted file mode 100644
index 1ba53f7..0000000
--- a/src/lib/components/atoms/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export { default as BottomSheet } from "./BottomSheet.svelte";
-export * from "./buttons";
-export { default as Chip } from "./Chip.svelte";
-export * from "./divs";
-export * from "./inputs";
-export { default as Modal } from "./Modal.svelte";
-export { default as RowVirtualizer } from "./RowVirtualizer.svelte";
-export { default as Toasts } from "./Toasts.svelte";
diff --git a/src/lib/components/atoms/inputs/index.ts b/src/lib/components/atoms/inputs/index.ts
deleted file mode 100644
index 47cb929..0000000
--- a/src/lib/components/atoms/inputs/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as CheckBox } from "./CheckBox.svelte";
-export { default as TextInput } from "./TextInput.svelte";
diff --git a/src/lib/components/molecules/index.ts b/src/lib/components/molecules/index.ts
deleted file mode 100644
index a36afcd..0000000
--- a/src/lib/components/molecules/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from "./ActionModal.svelte";
-export { default as ActionModal } from "./ActionModal.svelte";
-export * from "./Categories.svelte";
-export { default as Categories } from "./Categories.svelte";
-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";
diff --git a/src/lib/components/molecules/labels/index.ts b/src/lib/components/molecules/labels/index.ts
deleted file mode 100644
index af8f40b..0000000
--- a/src/lib/components/molecules/labels/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as CategoryLabel } from "./CategoryLabel.svelte";
-export { default as DirectoryEntryLabel } from "./DirectoryEntryLabel.svelte";
-export { default as IconLabel } from "./IconLabel.svelte";
-export { default as TitleLabel } from "./TitleLabel.svelte";
diff --git a/src/lib/components/organisms/index.ts b/src/lib/components/organisms/index.ts
deleted file mode 100644
index fa02317..0000000
--- a/src/lib/components/organisms/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./modals";
diff --git a/src/lib/components/organisms/modals/index.ts b/src/lib/components/organisms/modals/index.ts
deleted file mode 100644
index 56c64a1..0000000
--- a/src/lib/components/organisms/modals/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as CategoryCreateModal } from "./CategoryCreateModal.svelte";
-export { default as ForceLoginModal } from "./ForceLoginModal.svelte";
-export { default as RenameModal } from "./RenameModal.svelte";
-export { default as TextInputModal } from "./TextInputModal.svelte";
diff --git a/src/lib/components/organisms/modals/ForceLoginModal.svelte b/src/lib/features/auth/components/ForceLoginModal.svelte
similarity index 88%
rename from src/lib/components/organisms/modals/ForceLoginModal.svelte
rename to src/lib/features/auth/components/ForceLoginModal.svelte
index 010f5f2..259e9b0 100644
--- a/src/lib/components/organisms/modals/ForceLoginModal.svelte
+++ b/src/lib/features/auth/components/ForceLoginModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionModal } from "#lib/components/molecules/index.js";
+  import { ActionModal } from "#lib/ui/index.js";
 
   interface Props {
     isOpen: boolean;
diff --git a/src/lib/features/auth/components/index.ts b/src/lib/features/auth/components/index.ts
new file mode 100644
index 0000000..27ecfcd
--- /dev/null
+++ b/src/lib/features/auth/components/index.ts
@@ -0,0 +1 @@
+export { default as ForceLoginModal } from "./ForceLoginModal.svelte";
diff --git a/src/lib/client/toast.svelte.ts b/src/lib/features/errors.ts
similarity index 68%
rename from src/lib/client/toast.svelte.ts
rename to src/lib/features/errors.ts
index 0b147ce..f976083 100644
--- a/src/lib/client/toast.svelte.ts
+++ b/src/lib/features/errors.ts
@@ -1,25 +1,6 @@
+import { showToast } from "#lib/ui/index.js";
 import { isTRPCClientError } from "#trpc/client.js";
 
-export interface Toast {
-  id: number;
-  message: string;
-}
-
-const TOAST_DURATION = 3000;
-
-let toasts: Toast[] = $state([]);
-let nextId = 0;
-
-export const getToasts = () => toasts;
-
-export const showToast = (message: string) => {
-  const toast = { id: nextId++, message };
-  toasts.push(toast);
-  setTimeout(() => {
-    toasts = toasts.filter(({ id }) => id !== toast.id);
-  }, TOAST_DURATION);
-};
-
 const getErrorMessage = (e: unknown, fallbackMessage: string) => {
   if (isTRPCClientError(e)) {
     switch (e.data?.code) {
diff --git a/src/lib/components/molecules/Categories.svelte b/src/lib/features/filesystem/components/Categories.svelte
similarity index 80%
rename from src/lib/components/molecules/Categories.svelte
rename to src/lib/features/filesystem/components/Categories.svelte
index 1aa791c..5eaabf0 100644
--- a/src/lib/components/molecules/Categories.svelte
+++ b/src/lib/features/filesystem/components/Categories.svelte
@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import type { DataKey } from "#lib/features/filesystem/index.js";
+  import type { DataKey, SubCategoryInfo } from "#lib/features/filesystem/index.js";
 
   export interface SelectedCategory {
     id: number;
@@ -11,9 +11,7 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { CategoryLabel } from "#lib/components/molecules/index.js";
-  import type { SubCategoryInfo } from "#lib/features/filesystem/index.js";
+  import { ActionEntryButton, CategoryLabel } from "#lib/ui/index.js";
   import { sortEntries } from "#lib/utils/index.js";
 
   interface Props {
diff --git a/src/lib/components/organisms/modals/CategoryCreateModal.svelte b/src/lib/features/filesystem/components/CategoryCreateModal.svelte
similarity index 83%
rename from src/lib/components/organisms/modals/CategoryCreateModal.svelte
rename to src/lib/features/filesystem/components/CategoryCreateModal.svelte
index 377be20..2e7ecc9 100644
--- a/src/lib/components/organisms/modals/CategoryCreateModal.svelte
+++ b/src/lib/features/filesystem/components/CategoryCreateModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TextInputModal } from "#lib/components/organisms/index.js";
+  import { TextInputModal } from "#lib/ui/index.js";
 
   interface Props {
     isOpen: boolean;
diff --git a/src/lib/features/filesystem/components/DirectoryEntry.svelte b/src/lib/features/filesystem/components/DirectoryEntry.svelte
new file mode 100644
index 0000000..6f6bcf5
--- /dev/null
+++ b/src/lib/features/filesystem/components/DirectoryEntry.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import type { SvelteHTMLElements } from "svelte/elements";
+  import { ActionEntryButton, DirectoryEntryLabel } from "#lib/ui/index.js";
+
+  interface Props {
+    action?: {
+      icon: Component<SvelteHTMLElements["svg"]>;
+      onclick: () => void;
+    };
+    info: { name: string; isFavorite?: boolean };
+    onclick?: () => void;
+  }
+
+  let { action, info, onclick }: Props = $props();
+</script>
+
+<ActionEntryButton
+  class="h-14"
+  {onclick}
+  actionButtonIcon={action?.icon}
+  onActionButtonClick={action?.onclick}
+>
+  <DirectoryEntryLabel type="directory" name={info.name} isFavorite={info.isFavorite} />
+</ActionEntryButton>
diff --git a/src/lib/features/filesystem/components/FileEntry.svelte b/src/lib/features/filesystem/components/FileEntry.svelte
new file mode 100644
index 0000000..3af2dca
--- /dev/null
+++ b/src/lib/features/filesystem/components/FileEntry.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Component } from "svelte";
+  import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
+  import { getFileThumbnail } from "#lib/client/cache/index.js";
+  import { ActionEntryButton, DirectoryEntryLabel } from "#lib/ui/index.js";
+  import { formatDateTime } from "#lib/utils/index.js";
+  import type { SummarizedFileInfo } from "../types";
+
+  interface Props {
+    action?: {
+      icon: Component<SvelteHTMLElements["svg"]>;
+      onclick: () => void;
+      class?: ClassValue;
+    };
+    info: SummarizedFileInfo;
+    onclick?: () => void;
+    showThumbnail?: boolean;
+    subtext?: string;
+  }
+
+  let { action, info, onclick, showThumbnail = true, subtext }: Props = $props();
+
+  let thumbnail = $derived(showThumbnail ? getFileThumbnail(info) : undefined);
+</script>
+
+<ActionEntryButton
+  class="h-14"
+  {onclick}
+  actionButtonIcon={action?.icon}
+  actionButtonClass={action?.class}
+  onActionButtonClick={action?.onclick}
+>
+  <DirectoryEntryLabel
+    type="file"
+    thumbnail={thumbnail?.url}
+    name={info.name}
+    subtext={subtext ?? formatDateTime(info.createdAt ?? info.lastModifiedAt)}
+    isFavorite={info.isFavorite}
+  />
+</ActionEntryButton>
diff --git a/src/lib/components/atoms/buttons/FileThumbnailButton.svelte b/src/lib/features/filesystem/components/FileThumbnailButton.svelte
similarity index 100%
rename from src/lib/components/atoms/buttons/FileThumbnailButton.svelte
rename to src/lib/features/filesystem/components/FileThumbnailButton.svelte
diff --git a/src/lib/components/molecules/SubCategories.svelte b/src/lib/features/filesystem/components/SubCategories.svelte
similarity index 91%
rename from src/lib/components/molecules/SubCategories.svelte
rename to src/lib/features/filesystem/components/SubCategories.svelte
index 820f960..243a627 100644
--- a/src/lib/components/molecules/SubCategories.svelte
+++ b/src/lib/features/filesystem/components/SubCategories.svelte
@@ -1,12 +1,9 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import {
-    Categories,
-    IconEntryButton,
-    type SelectedCategory,
-  } from "#lib/components/molecules/index.js";
+  import { Categories, type SelectedCategory } from "#lib/features/filesystem/components/index.js";
   import type { CategoryInfo } from "#lib/features/filesystem/index.js";
+  import { IconEntryButton } from "#lib/ui/index.js";
 
   import IconAddCircle from "~icons/material-symbols/add-circle";
 
diff --git a/src/lib/features/filesystem/components/index.ts b/src/lib/features/filesystem/components/index.ts
new file mode 100644
index 0000000..5067deb
--- /dev/null
+++ b/src/lib/features/filesystem/components/index.ts
@@ -0,0 +1,7 @@
+export * from "./Categories.svelte";
+export { default as Categories } from "./Categories.svelte";
+export { default as CategoryCreateModal } from "./CategoryCreateModal.svelte";
+export { default as DirectoryEntry } from "./DirectoryEntry.svelte";
+export { default as FileEntry } from "./FileEntry.svelte";
+export { default as FileThumbnailButton } from "./FileThumbnailButton.svelte";
+export { default as SubCategories } from "./SubCategories.svelte";
diff --git a/src/lib/components/atoms/RowVirtualizer.svelte b/src/lib/ui/RowVirtualizer.svelte
similarity index 100%
rename from src/lib/components/atoms/RowVirtualizer.svelte
rename to src/lib/ui/RowVirtualizer.svelte
diff --git a/src/lib/components/atoms/buttons/ActionEntryButton.svelte b/src/lib/ui/buttons/ActionEntryButton.svelte
similarity index 97%
rename from src/lib/components/atoms/buttons/ActionEntryButton.svelte
rename to src/lib/ui/buttons/ActionEntryButton.svelte
index bc89f8f..1d3d7a2 100644
--- a/src/lib/components/atoms/buttons/ActionEntryButton.svelte
+++ b/src/lib/ui/buttons/ActionEntryButton.svelte
@@ -50,7 +50,7 @@
 </div>
 
 <style lang="postcss">
-  @reference "../../../../app.css";
+  @reference "../../../app.css";
 
   #container:active:not(:has(#action-button:active)) {
     @apply bg-gray-100;
diff --git a/src/lib/components/atoms/buttons/Button.svelte b/src/lib/ui/buttons/Button.svelte
similarity index 100%
rename from src/lib/components/atoms/buttons/Button.svelte
rename to src/lib/ui/buttons/Button.svelte
diff --git a/src/lib/components/atoms/buttons/EntryButton.svelte b/src/lib/ui/buttons/EntryButton.svelte
similarity index 100%
rename from src/lib/components/atoms/buttons/EntryButton.svelte
rename to src/lib/ui/buttons/EntryButton.svelte
diff --git a/src/lib/components/atoms/buttons/FloatingButton.svelte b/src/lib/ui/buttons/FloatingButton.svelte
similarity index 92%
rename from src/lib/components/atoms/buttons/FloatingButton.svelte
rename to src/lib/ui/buttons/FloatingButton.svelte
index a9bc085..c135460 100644
--- a/src/lib/components/atoms/buttons/FloatingButton.svelte
+++ b/src/lib/ui/buttons/FloatingButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
+  import { AdaptiveDiv } from "#lib/ui/index.js";
 
   interface Props {
     class: ClassValue;
diff --git a/src/lib/components/molecules/IconEntryButton.svelte b/src/lib/ui/buttons/IconEntryButton.svelte
similarity index 84%
rename from src/lib/components/molecules/IconEntryButton.svelte
rename to src/lib/ui/buttons/IconEntryButton.svelte
index ab6c8ab..cf194e6 100644
--- a/src/lib/components/molecules/IconEntryButton.svelte
+++ b/src/lib/ui/buttons/IconEntryButton.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { EntryButton } from "#lib/components/atoms/index.js";
-  import { IconLabel } from "#lib/components/molecules/index.js";
+  import { EntryButton, IconLabel } from "#lib/ui/index.js";
 
   interface Props {
     children: Snippet;
diff --git a/src/lib/components/atoms/buttons/TextButton.svelte b/src/lib/ui/buttons/TextButton.svelte
similarity index 100%
rename from src/lib/components/atoms/buttons/TextButton.svelte
rename to src/lib/ui/buttons/TextButton.svelte
diff --git a/src/lib/ui/index.ts b/src/lib/ui/index.ts
new file mode 100644
index 0000000..7968c56
--- /dev/null
+++ b/src/lib/ui/index.ts
@@ -0,0 +1,28 @@
+export { default as ActionEntryButton } from "./buttons/ActionEntryButton.svelte";
+export { default as Button } from "./buttons/Button.svelte";
+export { default as EntryButton } from "./buttons/EntryButton.svelte";
+export { default as FloatingButton } from "./buttons/FloatingButton.svelte";
+export { default as IconEntryButton } from "./buttons/IconEntryButton.svelte";
+export { default as TextButton } from "./buttons/TextButton.svelte";
+export { default as CheckBox } from "./inputs/CheckBox.svelte";
+export { default as Chip } from "./inputs/Chip.svelte";
+export { default as TextInput } from "./inputs/TextInput.svelte";
+export { default as CategoryLabel } from "./labels/CategoryLabel.svelte";
+export { default as DirectoryEntryLabel } from "./labels/DirectoryEntryLabel.svelte";
+export { default as IconLabel } from "./labels/IconLabel.svelte";
+export { default as TitleLabel } from "./labels/TitleLabel.svelte";
+export { default as AdaptiveDiv } from "./layout/AdaptiveDiv.svelte";
+export { default as BottomDiv } from "./layout/BottomDiv.svelte";
+export { default as FullscreenDiv } from "./layout/FullscreenDiv.svelte";
+export { default as TitledDiv } from "./layout/TitledDiv.svelte";
+export { default as TopBar } from "./layout/TopBar.svelte";
+export * from "./overlays/ActionModal.svelte";
+export { default as ActionModal } from "./overlays/ActionModal.svelte";
+export { default as BottomSheet } from "./overlays/BottomSheet.svelte";
+export { default as Modal } from "./overlays/Modal.svelte";
+export * from "./overlays/overlayGroup.svelte";
+export { default as RenameModal } from "./overlays/RenameModal.svelte";
+export { default as TextInputModal } from "./overlays/TextInputModal.svelte";
+export * from "./overlays/toast.svelte";
+export { default as Toasts } from "./overlays/Toasts.svelte";
+export { default as RowVirtualizer } from "./RowVirtualizer.svelte";
diff --git a/src/lib/components/atoms/inputs/CheckBox.svelte b/src/lib/ui/inputs/CheckBox.svelte
similarity index 100%
rename from src/lib/components/atoms/inputs/CheckBox.svelte
rename to src/lib/ui/inputs/CheckBox.svelte
diff --git a/src/lib/components/atoms/Chip.svelte b/src/lib/ui/inputs/Chip.svelte
similarity index 100%
rename from src/lib/components/atoms/Chip.svelte
rename to src/lib/ui/inputs/Chip.svelte
diff --git a/src/lib/components/atoms/inputs/TextInput.svelte b/src/lib/ui/inputs/TextInput.svelte
similarity index 96%
rename from src/lib/components/atoms/inputs/TextInput.svelte
rename to src/lib/ui/inputs/TextInput.svelte
index 2233edd..e76d04d 100644
--- a/src/lib/components/atoms/inputs/TextInput.svelte
+++ b/src/lib/ui/inputs/TextInput.svelte
@@ -29,7 +29,7 @@
 </div>
 
 <style lang="postcss">
-  @reference "../../../../app.css";
+  @reference "../../../app.css";
 
   input:focus,
   input:not(:placeholder-shown) {
diff --git a/src/lib/components/molecules/labels/CategoryLabel.svelte b/src/lib/ui/labels/CategoryLabel.svelte
similarity index 89%
rename from src/lib/components/molecules/labels/CategoryLabel.svelte
rename to src/lib/ui/labels/CategoryLabel.svelte
index ffdbd1e..b133098 100644
--- a/src/lib/components/molecules/labels/CategoryLabel.svelte
+++ b/src/lib/ui/labels/CategoryLabel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ClassValue } from "svelte/elements";
-  import { IconLabel } from "#lib/components/molecules/index.js";
+  import { IconLabel } from "#lib/ui/index.js";
 
   import IconCategory from "~icons/material-symbols/category";
 
diff --git a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte b/src/lib/ui/labels/DirectoryEntryLabel.svelte
similarity index 96%
rename from src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
rename to src/lib/ui/labels/DirectoryEntryLabel.svelte
index 4e08436..121d9d4 100644
--- a/src/lib/components/molecules/labels/DirectoryEntryLabel.svelte
+++ b/src/lib/ui/labels/DirectoryEntryLabel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ClassValue } from "svelte/elements";
-  import { IconLabel } from "#lib/components/molecules/index.js";
+  import { IconLabel } from "#lib/ui/index.js";
 
   import IconFolder from "~icons/material-symbols/folder";
   import IconDriveFolderUpload from "~icons/material-symbols/drive-folder-upload";
diff --git a/src/lib/components/molecules/labels/IconLabel.svelte b/src/lib/ui/labels/IconLabel.svelte
similarity index 100%
rename from src/lib/components/molecules/labels/IconLabel.svelte
rename to src/lib/ui/labels/IconLabel.svelte
diff --git a/src/lib/components/molecules/labels/TitleLabel.svelte b/src/lib/ui/labels/TitleLabel.svelte
similarity index 100%
rename from src/lib/components/molecules/labels/TitleLabel.svelte
rename to src/lib/ui/labels/TitleLabel.svelte
diff --git a/src/lib/components/atoms/divs/AdaptiveDiv.svelte b/src/lib/ui/layout/AdaptiveDiv.svelte
similarity index 100%
rename from src/lib/components/atoms/divs/AdaptiveDiv.svelte
rename to src/lib/ui/layout/AdaptiveDiv.svelte
diff --git a/src/lib/components/atoms/divs/BottomDiv.svelte b/src/lib/ui/layout/BottomDiv.svelte
similarity index 100%
rename from src/lib/components/atoms/divs/BottomDiv.svelte
rename to src/lib/ui/layout/BottomDiv.svelte
diff --git a/src/lib/components/atoms/divs/FullscreenDiv.svelte b/src/lib/ui/layout/FullscreenDiv.svelte
similarity index 100%
rename from src/lib/components/atoms/divs/FullscreenDiv.svelte
rename to src/lib/ui/layout/FullscreenDiv.svelte
diff --git a/src/lib/components/molecules/TitledDiv.svelte b/src/lib/ui/layout/TitledDiv.svelte
similarity index 93%
rename from src/lib/components/molecules/TitledDiv.svelte
rename to src/lib/ui/layout/TitledDiv.svelte
index 518bb25..2a1ad97 100644
--- a/src/lib/components/molecules/TitledDiv.svelte
+++ b/src/lib/ui/layout/TitledDiv.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { TitleLabel } from "#lib/components/molecules/index.js";
+  import { TitleLabel } from "#lib/ui/index.js";
 
   interface Props {
     children?: Snippet;
diff --git a/src/lib/components/molecules/TopBar.svelte b/src/lib/ui/layout/TopBar.svelte
similarity index 100%
rename from src/lib/components/molecules/TopBar.svelte
rename to src/lib/ui/layout/TopBar.svelte
diff --git a/src/lib/components/molecules/ActionModal.svelte b/src/lib/ui/overlays/ActionModal.svelte
similarity index 95%
rename from src/lib/components/molecules/ActionModal.svelte
rename to src/lib/ui/overlays/ActionModal.svelte
index 71dbbab..ca1ffae 100644
--- a/src/lib/components/molecules/ActionModal.svelte
+++ b/src/lib/ui/overlays/ActionModal.svelte
@@ -4,7 +4,7 @@
 
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import { Button, Modal } from "#lib/components/atoms/index.js";
+  import { Button, Modal } from "#lib/ui/index.js";
 
   interface Props {
     cancelText?: string;
diff --git a/src/lib/components/atoms/BottomSheet.svelte b/src/lib/ui/overlays/BottomSheet.svelte
similarity index 94%
rename from src/lib/components/atoms/BottomSheet.svelte
rename to src/lib/ui/overlays/BottomSheet.svelte
index c2bf150..728ee5b 100644
--- a/src/lib/components/atoms/BottomSheet.svelte
+++ b/src/lib/ui/overlays/BottomSheet.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
   import type { ClassValue } from "svelte/elements";
   import { fade, fly } from "svelte/transition";
-  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
+  import { AdaptiveDiv } from "#lib/ui/index.js";
 
   interface Props {
     children: Snippet;
diff --git a/src/lib/components/atoms/Modal.svelte b/src/lib/ui/overlays/Modal.svelte
similarity index 93%
rename from src/lib/components/atoms/Modal.svelte
rename to src/lib/ui/overlays/Modal.svelte
index 8d4e3de..180be83 100644
--- a/src/lib/components/atoms/Modal.svelte
+++ b/src/lib/ui/overlays/Modal.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
   import type { ClassValue } from "svelte/elements";
   import { fade } from "svelte/transition";
-  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
+  import { AdaptiveDiv } from "#lib/ui/index.js";
 
   interface Props {
     children: Snippet;
diff --git a/src/lib/components/organisms/modals/RenameModal.svelte b/src/lib/ui/overlays/RenameModal.svelte
similarity index 87%
rename from src/lib/components/organisms/modals/RenameModal.svelte
rename to src/lib/ui/overlays/RenameModal.svelte
index 941025e..8d6dfda 100644
--- a/src/lib/components/organisms/modals/RenameModal.svelte
+++ b/src/lib/ui/overlays/RenameModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TextInputModal } from "#lib/components/organisms/index.js";
+  import { TextInputModal } from "#lib/ui/index.js";
 
   interface Props {
     isOpen: boolean;
diff --git a/src/lib/components/organisms/modals/TextInputModal.svelte b/src/lib/ui/overlays/TextInputModal.svelte
similarity index 83%
rename from src/lib/components/organisms/modals/TextInputModal.svelte
rename to src/lib/ui/overlays/TextInputModal.svelte
index f0b0116..0d33fb0 100644
--- a/src/lib/components/organisms/modals/TextInputModal.svelte
+++ b/src/lib/ui/overlays/TextInputModal.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { TextInput } from "#lib/components/atoms/index.js";
-  import { ActionModal, type ConfirmHandler } from "#lib/components/molecules/index.js";
+  import { TextInput, ActionModal, type ConfirmHandler } from "#lib/ui/index.js";
 
   interface Props {
     defaultValue?: string;
diff --git a/src/lib/components/atoms/Toasts.svelte b/src/lib/ui/overlays/Toasts.svelte
similarity index 88%
rename from src/lib/components/atoms/Toasts.svelte
rename to src/lib/ui/overlays/Toasts.svelte
index 66c28a4..500698c 100644
--- a/src/lib/components/atoms/Toasts.svelte
+++ b/src/lib/ui/overlays/Toasts.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { fly } from "svelte/transition";
-  import { getToasts } from "#lib/client/toast.svelte.js";
+  import { getToasts } from "./toast.svelte";
 </script>
 
 <div class="pointer-events-none fixed inset-x-0 top-4 z-50 flex flex-col items-center gap-y-2 px-4">
diff --git a/src/lib/ui/overlays/overlayGroup.svelte.ts b/src/lib/ui/overlays/overlayGroup.svelte.ts
new file mode 100644
index 0000000..35ee002
--- /dev/null
+++ b/src/lib/ui/overlays/overlayGroup.svelte.ts
@@ -0,0 +1,27 @@
+// Manages overlays (modals and bottom sheets) of which at most one is open at a time
+export class OverlayGroup<T extends string> {
+  current: T | undefined = $state();
+
+  open(name: T) {
+    this.current = name;
+  }
+
+  close() {
+    this.current = undefined;
+  }
+
+  // Getter and setter for `bind:isOpen={getter, setter}`
+  getter(name: T) {
+    return () => this.current === name;
+  }
+
+  setter(name: T) {
+    return (isOpen: boolean) => {
+      if (isOpen) {
+        this.current = name;
+      } else if (this.current === name) {
+        this.current = undefined;
+      }
+    };
+  }
+}
diff --git a/src/lib/ui/overlays/toast.svelte.ts b/src/lib/ui/overlays/toast.svelte.ts
new file mode 100644
index 0000000..9fe4fbd
--- /dev/null
+++ b/src/lib/ui/overlays/toast.svelte.ts
@@ -0,0 +1,19 @@
+export interface Toast {
+  id: number;
+  message: string;
+}
+
+const TOAST_DURATION = 3000;
+
+let toasts: Toast[] = $state([]);
+let nextId = 0;
+
+export const getToasts = () => toasts;
+
+export const showToast = (message: string) => {
+  const toast = { id: nextId++, message };
+  toasts.push(toast);
+  setTimeout(() => {
+    toasts = toasts.filter(({ id }) => id !== toast.id);
+  }, TOAST_DURATION);
+};
diff --git a/src/routes/(fullscreen)/+layout.svelte b/src/routes/(fullscreen)/+layout.svelte
index 78ad275..13711d7 100644
--- a/src/routes/(fullscreen)/+layout.svelte
+++ b/src/routes/(fullscreen)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
+  import { AdaptiveDiv } from "#lib/ui/index.js";
 
   let { children } = $props();
 </script>
diff --git a/src/routes/(fullscreen)/auth/changePassword/+page.svelte b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
index bd5e43f..be11553 100644
--- a/src/routes/(fullscreen)/auth/changePassword/+page.svelte
+++ b/src/routes/(fullscreen)/auth/changePassword/+page.svelte
@@ -1,9 +1,16 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { BottomDiv, Button, FullscreenDiv, TextInput } from "#lib/components/atoms/index.js";
-  import { TitledDiv, TopBar } from "#lib/components/molecules/index.js";
-  import { showToast, tryAction } from "#lib/client/toast.svelte.js";
   import { changePassword as requestPasswordChange } from "#lib/features/auth/index.js";
+  import { tryAction } from "#lib/features/errors.js";
+  import {
+    BottomDiv,
+    Button,
+    FullscreenDiv,
+    TextInput,
+    TitledDiv,
+    TopBar,
+    showToast,
+  } from "#lib/ui/index.js";
 
   let oldPassword = $state("");
   let newPassword = $state("");
diff --git a/src/routes/(fullscreen)/auth/login/+page.svelte b/src/routes/(fullscreen)/auth/login/+page.svelte
index 98dbfc4..360f69b 100644
--- a/src/routes/(fullscreen)/auth/login/+page.svelte
+++ b/src/routes/(fullscreen)/auth/login/+page.svelte
@@ -1,22 +1,23 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
+  import {
+    downloadMasterKeys,
+    keyring,
+    requestClientRegistrationAndSessionUpgrade,
+  } from "#lib/client/keys/index.js";
+  import { ForceLoginModal } from "#lib/features/auth/components/index.js";
+  import { login as requestLogin, logout as requestLogout } from "#lib/features/auth/index.js";
+  import { showErrorToast } from "#lib/features/errors.js";
+  import { cleanupDeletedFileCaches } from "#lib/features/filesystem/index.js";
   import {
     BottomDiv,
     Button,
     FullscreenDiv,
     TextButton,
     TextInput,
-  } from "#lib/components/atoms/index.js";
-  import { TitledDiv } from "#lib/components/molecules/index.js";
-  import { ForceLoginModal } from "#lib/components/organisms/index.js";
-  import {
-    downloadMasterKeys,
-    keyring,
-    requestClientRegistrationAndSessionUpgrade,
-  } from "#lib/client/keys/index.js";
-  import { showErrorToast, showToast } from "#lib/client/toast.svelte.js";
-  import { login as requestLogin, logout as requestLogout } from "#lib/features/auth/index.js";
-  import { cleanupDeletedFileCaches } from "#lib/features/filesystem/index.js";
+    TitledDiv,
+    showToast,
+  } from "#lib/ui/index.js";
   import { isTRPCClientError } from "#trpc/client.js";
 
   let { data } = $props();
diff --git a/src/routes/(fullscreen)/client/pending/+page.svelte b/src/routes/(fullscreen)/client/pending/+page.svelte
index eef8a35..725de27 100644
--- a/src/routes/(fullscreen)/client/pending/+page.svelte
+++ b/src/routes/(fullscreen)/client/pending/+page.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { TitledDiv } from "#lib/components/molecules/index.js";
   import {
     downloadMasterKeys,
     generatePublicKeyFingerprint,
     keyring,
   } from "#lib/client/keys/index.js";
+  import { FullscreenDiv, TitledDiv } from "#lib/ui/index.js";
 
   import IconFingerprint from "~icons/material-symbols/fingerprint";
 
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte
index 3562b0b..1afd429 100644
--- a/src/routes/(fullscreen)/file/[id]/+page.svelte
+++ b/src/routes/(fullscreen)/file/[id]/+page.svelte
@@ -3,11 +3,10 @@
   import { untrack } from "svelte";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import { FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { Categories, IconEntryButton, TopBar } from "#lib/components/molecules/index.js";
   import { captureVideoThumbnail } from "#lib/client/media/thumbnail.js";
   import { getFileDownloadState } from "#lib/client/transfer/index.js";
-  import { showErrorToast, tryAction } from "#lib/client/toast.svelte.js";
+  import { showErrorToast, tryAction } from "#lib/features/errors.js";
+  import { Categories } from "#lib/features/filesystem/components/index.js";
   import {
     addFileToCategory,
     getFileContent,
@@ -19,6 +18,7 @@
     type DataKey,
     type FileInfo,
   } from "#lib/features/filesystem/index.js";
+  import { FullscreenDiv, IconEntryButton, TopBar } from "#lib/ui/index.js";
   import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
   import DownloadStatus from "./DownloadStatus.svelte";
   import TopBarMenu from "./TopBarMenu.svelte";
diff --git a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
index b2bb9c0..7e3400c 100644
--- a/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { SubCategories } from "#lib/components/molecules/index.js";
-  import { CategoryCreateModal } from "#lib/components/organisms/index.js";
-  import { tryAction } from "#lib/client/toast.svelte.js";
+  import { tryAction } from "#lib/features/errors.js";
+  import { SubCategories, CategoryCreateModal } from "#lib/features/filesystem/components/index.js";
   import { createCategory, useCategory } from "#lib/features/filesystem/index.js";
+  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "#lib/ui/index.js";
 
   interface Props {
     onAddToCategoryClick: (categoryId: number) => void;
diff --git a/src/routes/(fullscreen)/file/downloads/+page.svelte b/src/routes/(fullscreen)/file/downloads/+page.svelte
index 4a3833b..3c6a15c 100644
--- a/src/routes/(fullscreen)/file/downloads/+page.svelte
+++ b/src/routes/(fullscreen)/file/downloads/+page.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { TopBar } from "#lib/components/molecules/index.js";
   import {
     getDownloadingFiles,
     clearDownloadedFiles,
     type FileDownloadState,
   } from "#lib/client/transfer/index.js";
   import { bulkGetFileInfo, type MaybeFileInfo } from "#lib/features/filesystem/index.js";
+  import { FullscreenDiv, TopBar } from "#lib/ui/index.js";
   import File from "./File.svelte";
 
   let downloadingFiles: { info: MaybeFileInfo; state: FileDownloadState }[] = $state([]);
diff --git a/src/routes/(fullscreen)/file/uploads/+page.svelte b/src/routes/(fullscreen)/file/uploads/+page.svelte
index 04810a0..10574ce 100644
--- a/src/routes/(fullscreen)/file/uploads/+page.svelte
+++ b/src/routes/(fullscreen)/file/uploads/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { TopBar } from "#lib/components/molecules/index.js";
   import { getUploadingFiles, clearUploadedFiles } from "#lib/client/transfer/index.js";
+  import { FullscreenDiv, TopBar } from "#lib/ui/index.js";
   import File from "./File.svelte";
 
   const uploadingFiles = getUploadingFiles();
diff --git a/src/routes/(fullscreen)/gallery/+page.svelte b/src/routes/(fullscreen)/gallery/+page.svelte
index f654918..0952609 100644
--- a/src/routes/(fullscreen)/gallery/+page.svelte
+++ b/src/routes/(fullscreen)/gallery/+page.svelte
@@ -1,17 +1,13 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import {
-    FileThumbnailButton,
-    FullscreenDiv,
-    RowVirtualizer,
-  } from "#lib/components/atoms/index.js";
-  import { TopBar } from "#lib/components/molecules/index.js";
+  import { FileThumbnailButton } from "#lib/features/filesystem/components/index.js";
   import {
     bulkGetFileInfo,
     type MaybeFileInfo,
     type SummarizedFileInfo,
   } from "#lib/features/filesystem/index.js";
+  import { FullscreenDiv, RowVirtualizer, TopBar } from "#lib/ui/index.js";
   import { formatDate, formatDateSortable, SortBy, sortEntries } from "#lib/utils/index.js";
 
   let { data } = $props();
diff --git a/src/routes/(fullscreen)/key/export/+page.svelte b/src/routes/(fullscreen)/key/export/+page.svelte
index ec357a4..a27ec4d 100644
--- a/src/routes/(fullscreen)/key/export/+page.svelte
+++ b/src/routes/(fullscreen)/key/export/+page.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import FileSaver from "file-saver";
   import { goto } from "$app/navigation";
-  import { BottomDiv, Button, FullscreenDiv, TextButton } from "#lib/components/atoms/index.js";
-  import { TitledDiv } from "#lib/components/molecules/index.js";
   import {
     keyring,
     registerInitialMasterKeyAndHmacSecret,
@@ -10,7 +8,14 @@
     requestSessionUpgrade,
     serializeClientKeys,
   } from "#lib/client/keys/index.js";
-  import { showToast } from "#lib/client/toast.svelte.js";
+  import {
+    BottomDiv,
+    Button,
+    FullscreenDiv,
+    TextButton,
+    TitledDiv,
+    showToast,
+  } from "#lib/ui/index.js";
   import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
   import BeforeContinueModal from "./BeforeContinueModal.svelte";
 
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
index 2e7b9df..c2a5547 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueBottomSheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "#lib/components/atoms/index.js";
+  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "#lib/ui/index.js";
 
   interface Props {
     onRetryClick: () => void;
diff --git a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
index 18db892..6f29023 100644
--- a/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
+++ b/src/routes/(fullscreen)/key/export/BeforeContinueModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionModal } from "#lib/components/molecules/index.js";
+  import { ActionModal } from "#lib/ui/index.js";
 
   interface Props {
     isOpen: boolean;
diff --git a/src/routes/(fullscreen)/key/generate/+page.svelte b/src/routes/(fullscreen)/key/generate/+page.svelte
index e7624bf..76f9af4 100644
--- a/src/routes/(fullscreen)/key/generate/+page.svelte
+++ b/src/routes/(fullscreen)/key/generate/+page.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { BottomDiv, Button, FullscreenDiv, TextButton } from "#lib/components/atoms/index.js";
-  import { TitledDiv } from "#lib/components/molecules/index.js";
-  import { ForceLoginModal } from "#lib/components/organisms/index.js";
   import {
     generateClientKeys,
     generateInitialHmacSecret,
@@ -13,8 +10,16 @@
     registerInitialMasterKeyAndHmacSecret,
     requestClientRegistrationAndSessionUpgrade,
   } from "#lib/client/keys/index.js";
-  import { showToast } from "#lib/client/toast.svelte.js";
+  import { ForceLoginModal } from "#lib/features/auth/components/index.js";
   import { cleanupDeletedFileCaches } from "#lib/features/filesystem/index.js";
+  import {
+    BottomDiv,
+    Button,
+    FullscreenDiv,
+    TextButton,
+    TitledDiv,
+    showToast,
+  } from "#lib/ui/index.js";
   import { gotoStateful } from "#lib/utils/index.js";
   import Order from "./Order.svelte";
 
diff --git a/src/routes/(fullscreen)/search/+page.svelte b/src/routes/(fullscreen)/search/+page.svelte
index e45440a..66542cd 100644
--- a/src/routes/(fullscreen)/search/+page.svelte
+++ b/src/routes/(fullscreen)/search/+page.svelte
@@ -4,17 +4,16 @@
   import { untrack } from "svelte";
   import { slide } from "svelte/transition";
   import { goto } from "$app/navigation";
-  import { Chip, FullscreenDiv, RowVirtualizer } from "#lib/components/atoms/index.js";
-  import { showErrorToast } from "#lib/client/toast.svelte.js";
+  import { showErrorToast } from "#lib/features/errors.js";
+  import { DirectoryEntry, FileEntry } from "#lib/features/filesystem/components/index.js";
   import {
     getDirectoryInfo,
     type LocalCategoryInfo,
     type MaybeDirectoryInfo,
   } from "#lib/features/filesystem/index.js";
   import { search, type SearchFilter, type SearchResult } from "#lib/features/search/index.js";
+  import { Chip, FullscreenDiv, RowVirtualizer } from "#lib/ui/index.js";
   import { searchString, sortEntries } from "#lib/utils/index.js";
-  import Directory from "./Directory.svelte";
-  import File from "./File.svelte";
   import SearchBar from "./SearchBar.svelte";
   import SelectCategoryBottomSheet from "./SelectCategoryBottomSheet.svelte";
 
@@ -236,9 +235,9 @@
             {#snippet item(index)}
               {@const info = result[index]!}
               {#if info.type === "directory"}
-                <Directory {info} onclick={() => goto(`/directory/${info.id}?from=search`)} />
+                <DirectoryEntry {info} onclick={() => goto(`/directory/${info.id}?from=search`)} />
               {:else}
-                <File {info} onclick={() => goto(`/file/${info.id}?from=search`)} />
+                <FileEntry {info} onclick={() => goto(`/file/${info.id}?from=search`)} />
               {/if}
             {/snippet}
           </RowVirtualizer>
diff --git a/src/routes/(fullscreen)/search/Directory.svelte b/src/routes/(fullscreen)/search/Directory.svelte
deleted file mode 100644
index 09fd876..0000000
--- a/src/routes/(fullscreen)/search/Directory.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import type { SubDirectoryInfo } from "#lib/features/filesystem/index.js";
-
-  interface Props {
-    info: SubDirectoryInfo;
-    onclick: () => void;
-  }
-
-  let { info, onclick }: Props = $props();
-</script>
-
-<ActionEntryButton class="h-14" {onclick}>
-  <DirectoryEntryLabel type="directory" name={info.name} isFavorite={info.isFavorite} />
-</ActionEntryButton>
diff --git a/src/routes/(fullscreen)/search/File.svelte b/src/routes/(fullscreen)/search/File.svelte
deleted file mode 100644
index d87b708..0000000
--- a/src/routes/(fullscreen)/search/File.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import { getFileThumbnail } from "#lib/client/cache/index.js";
-  import type { SummarizedFileInfo } from "#lib/features/filesystem/index.js";
-  import { formatDateTime } from "#lib/utils/index.js";
-
-  interface Props {
-    info: SummarizedFileInfo;
-    onclick: () => void;
-  }
-
-  let { info, onclick }: Props = $props();
-
-  let thumbnail = $derived(getFileThumbnail(info));
-</script>
-
-<ActionEntryButton class="h-14" {onclick}>
-  <DirectoryEntryLabel
-    type="file"
-    thumbnail={thumbnail?.url}
-    name={info.name}
-    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
-    isFavorite={info.isFavorite}
-  />
-</ActionEntryButton>
diff --git a/src/routes/(fullscreen)/search/SelectCategoryBottomSheet.svelte b/src/routes/(fullscreen)/search/SelectCategoryBottomSheet.svelte
index d07aa84..4c237ff 100644
--- a/src/routes/(fullscreen)/search/SelectCategoryBottomSheet.svelte
+++ b/src/routes/(fullscreen)/search/SelectCategoryBottomSheet.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { SubCategories } from "#lib/components/molecules/index.js";
+  import { SubCategories } from "#lib/features/filesystem/components/index.js";
   import { useCategory, type LocalCategoryInfo } from "#lib/features/filesystem/index.js";
+  import { BottomDiv, BottomSheet, Button, FullscreenDiv } from "#lib/ui/index.js";
 
   interface Props {
     isOpen: boolean;
diff --git a/src/routes/(fullscreen)/settings/cache/+page.svelte b/src/routes/(fullscreen)/settings/cache/+page.svelte
index c24d936..13db941 100644
--- a/src/routes/(fullscreen)/settings/cache/+page.svelte
+++ b/src/routes/(fullscreen)/settings/cache/+page.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { TopBar } from "#lib/components/molecules/index.js";
-  import type { FileCacheIndex } from "#lib/client/storage/indexedDB/index.js";
   import {
     getFileCacheIndex,
     deleteFileCache as doDeleteFileCache,
   } from "#lib/client/cache/index.js";
+  import type { FileCacheIndex } from "#lib/client/storage/indexedDB/index.js";
   import { bulkGetFileInfo, type MaybeFileInfo } from "#lib/features/filesystem/index.js";
+  import { FullscreenDiv, TopBar } from "#lib/ui/index.js";
   import { formatFileSize } from "#lib/utils/index.js";
   import File from "./File.svelte";
 
diff --git a/src/routes/(fullscreen)/settings/thumbnail/+page.svelte b/src/routes/(fullscreen)/settings/thumbnail/+page.svelte
index 5b92194..e508d89 100644
--- a/src/routes/(fullscreen)/settings/thumbnail/+page.svelte
+++ b/src/routes/(fullscreen)/settings/thumbnail/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { BottomDiv, Button, FullscreenDiv } from "#lib/components/atoms/index.js";
-  import { IconEntryButton, TopBar } from "#lib/components/molecules/index.js";
   import { deleteAllFileThumbnailCaches } from "#lib/client/cache/index.js";
+  import { FileEntry } from "#lib/features/filesystem/components/index.js";
   import type { MaybeFileInfo } from "#lib/features/filesystem/index.js";
+  import { BottomDiv, Button, FullscreenDiv, IconEntryButton, TopBar } from "#lib/ui/index.js";
   import { sortEntries } from "#lib/utils/index.js";
-  import File from "./File.svelte";
   import {
     getThumbnailGenerationStatus,
     clearThumbnailGenerationStatuses,
@@ -15,10 +14,19 @@
     type GenerationStatus,
   } from "./service";
 
+  import IconCamera from "~icons/material-symbols/camera";
   import IconDelete from "~icons/material-symbols/delete";
 
   let { data } = $props();
 
+  const statusTexts = {
+    queued: "대기 중",
+    "generation-pending": "준비 중",
+    generating: "생성하는 중",
+    uploading: "업로드하는 중",
+    error: "실패",
+  } as const;
+
   let fileInfos: MaybeFileInfo[] = $state([]);
   let files = $derived(
     fileInfos
@@ -69,11 +77,18 @@
           <div class="space-y-2">
             {#each files as { info, status } (info.id)}
               {#if info.exists}
-                <File
+                <FileEntry
                   {info}
-                  {status}
-                  onclick={({ id }) => goto(`/file/${id}`)}
-                  onGenerateThumbnailClick={requestThumbnailGeneration}
+                  showThumbnail={false}
+                  subtext={status && statusTexts[status]}
+                  onclick={() => goto(`/file/${info.id}`)}
+                  action={!status || status === "error"
+                    ? {
+                        icon: IconCamera,
+                        onclick: () => requestThumbnailGeneration(info),
+                        class: "text-gray-800",
+                      }
+                    : undefined}
                 />
               {/if}
             {/each}
diff --git a/src/routes/(fullscreen)/settings/thumbnail/File.svelte b/src/routes/(fullscreen)/settings/thumbnail/File.svelte
deleted file mode 100644
index 0e65d2e..0000000
--- a/src/routes/(fullscreen)/settings/thumbnail/File.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script module lang="ts">
-  const subtexts = {
-    queued: "대기 중",
-    "generation-pending": "준비 중",
-    generating: "생성하는 중",
-    uploading: "업로드하는 중",
-    error: "실패",
-  } as const;
-</script>
-
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import type { FileInfo } from "#lib/features/filesystem/index.js";
-  import { formatDateTime } from "#lib/utils/index.js";
-  import type { GenerationStatus } from "./service";
-
-  import IconCamera from "~icons/material-symbols/camera";
-
-  interface Props {
-    info: FileInfo;
-    onclick: (file: FileInfo) => void;
-    onGenerateThumbnailClick: (file: FileInfo) => void;
-    status: Exclude<GenerationStatus, "uploaded"> | undefined;
-  }
-
-  let { info, onclick, onGenerateThumbnailClick, status }: Props = $props();
-</script>
-
-<ActionEntryButton
-  class="h-14"
-  onclick={() => onclick(info)}
-  actionButtonIcon={!status || status === "error" ? IconCamera : undefined}
-  onActionButtonClick={() => onGenerateThumbnailClick(info)}
-  actionButtonClass="text-gray-800"
->
-  {@const subtext = status
-    ? subtexts[status]
-    : formatDateTime(info.createdAt ?? info.lastModifiedAt)}
-  <DirectoryEntryLabel type="file" name={info.name} {subtext} />
-</ActionEntryButton>
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index 8a4e406..c81c8ce 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
+  import { AdaptiveDiv } from "#lib/ui/index.js";
   import BottomBar from "./BottomBar.svelte";
 
   let { children } = $props();
diff --git a/src/routes/(main)/BottomBar.svelte b/src/routes/(main)/BottomBar.svelte
index 7fa7e59..494edd9 100644
--- a/src/routes/(main)/BottomBar.svelte
+++ b/src/routes/(main)/BottomBar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import { AdaptiveDiv } from "#lib/components/atoms/index.js";
+  import { AdaptiveDiv } from "#lib/ui/index.js";
 
   import IconHome from "~icons/material-symbols/home";
   import IconFolder from "~icons/material-symbols/folder";
diff --git a/src/routes/(main)/category/[[id]]/+page.svelte b/src/routes/(main)/category/[[id]]/+page.svelte
index f4c970d..c814250 100644
--- a/src/routes/(main)/category/[[id]]/+page.svelte
+++ b/src/routes/(main)/category/[[id]]/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import { CheckBox, RowVirtualizer } from "#lib/components/atoms/index.js";
-  import { SubCategories, TopBar } from "#lib/components/molecules/index.js";
-  import { CategoryCreateModal } from "#lib/components/organisms/index.js";
-  import { tryAction } from "#lib/client/toast.svelte.js";
+  import { tryAction } from "#lib/features/errors.js";
+  import {
+    FileEntry,
+    SubCategories,
+    CategoryCreateModal,
+  } from "#lib/features/filesystem/components/index.js";
   import {
     createCategory,
     deleteCategory,
@@ -13,13 +15,14 @@
     useCategory,
     type LocalCategoryInfo,
   } from "#lib/features/filesystem/index.js";
+  import { CheckBox, OverlayGroup, RowVirtualizer, TopBar } from "#lib/ui/index.js";
   import { sortEntries } from "#lib/utils/index.js";
   import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
   import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
   import CategoryRenameModal from "./CategoryRenameModal.svelte";
-  import File from "./File.svelte";
   import { createContext } from "./service.svelte";
 
+  import IconClose from "~icons/material-symbols/close";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   let { data } = $props();
@@ -28,10 +31,9 @@
   const category = useCategory(() => data.id);
   let info = $derived(category.current);
 
-  let isCategoryCreateModalOpen = $state(false);
-  let isCategoryMenuBottomSheetOpen = $state(false);
-  let isCategoryRenameModalOpen = $state(false);
-  let isCategoryDeleteModalOpen = $state(false);
+  const overlays = new OverlayGroup<
+    "categoryCreate" | "categoryMenu" | "categoryRename" | "categoryDelete"
+  >();
 
   let files = $derived(
     sortEntries(
@@ -59,11 +61,11 @@
         <SubCategories
           {info}
           onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
-          onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
+          onSubCategoryCreateClick={() => overlays.open("categoryCreate")}
           subCategoryCreatePosition="bottom"
           onSubCategoryMenuClick={(subCategory) => {
             context.selectedCategory = subCategory;
-            isCategoryMenuBottomSheetOpen = true;
+            overlays.open("categoryMenu");
           }}
           subCategoryMenuIcon={IconMoreVert}
         />
@@ -89,15 +91,18 @@
           >
             {#snippet item(index)}
               {@const { details } = files[index]!}
-              <File
+              <FileEntry
                 info={details}
-                onclick={({ id }) => goto(`/file/${id}?from=category`)}
-                onRemoveClick={!details.isRecursive
-                  ? ({ id }) =>
-                      tryAction(
-                        () => removeFileFromCategory(id, data.id as number),
-                        "카테고리에서 파일을 제거하지 못했어요.",
-                      )
+                onclick={() => goto(`/file/${details.id}?from=category`)}
+                action={!details.isRecursive
+                  ? {
+                      icon: IconClose,
+                      onclick: () =>
+                        tryAction(
+                          () => removeFileFromCategory(details.id, data.id as number),
+                          "카테고리에서 파일을 제거하지 못했어요.",
+                        ),
+                    }
                   : undefined}
               />
             {/snippet}
@@ -112,24 +117,18 @@
 </div>
 
 <CategoryCreateModal
-  bind:isOpen={isCategoryCreateModalOpen}
+  bind:isOpen={overlays.getter("categoryCreate"), overlays.setter("categoryCreate")}
   onCreateClick={(name: string) =>
     tryAction(() => createCategory(data.id, name), "카테고리를 만들지 못했어요.")}
 />
 
 <CategoryMenuBottomSheet
-  bind:isOpen={isCategoryMenuBottomSheetOpen}
-  onRenameClick={() => {
-    isCategoryMenuBottomSheetOpen = false;
-    isCategoryRenameModalOpen = true;
-  }}
-  onDeleteClick={() => {
-    isCategoryMenuBottomSheetOpen = false;
-    isCategoryDeleteModalOpen = true;
-  }}
+  bind:isOpen={overlays.getter("categoryMenu"), overlays.setter("categoryMenu")}
+  onRenameClick={() => overlays.open("categoryRename")}
+  onDeleteClick={() => overlays.open("categoryDelete")}
 />
 <CategoryRenameModal
-  bind:isOpen={isCategoryRenameModalOpen}
+  bind:isOpen={overlays.getter("categoryRename"), overlays.setter("categoryRename")}
   onRenameClick={(newName: string) =>
     tryAction(
       () => renameCategory({ ...context.selectedCategory!, parentId: data.id }, newName),
@@ -137,7 +136,7 @@
     )}
 />
 <CategoryDeleteModal
-  bind:isOpen={isCategoryDeleteModalOpen}
+  bind:isOpen={overlays.getter("categoryDelete"), overlays.setter("categoryDelete")}
   onDeleteClick={() =>
     tryAction(
       () => deleteCategory({ ...context.selectedCategory!, parentId: data.id }),
diff --git a/src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte b/src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte
index cd47ab8..db0a309 100644
--- a/src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryDeleteModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionModal } from "#lib/components/molecules/index.js";
+  import { ActionModal } from "#lib/ui/index.js";
   import { truncateString } from "#lib/utils/index.js";
   import { useContext } from "./service.svelte";
 
diff --git a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
index 0df81dc..95e9f22 100644
--- a/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryMenuBottomSheet.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "#lib/components/atoms/index.js";
-  import { CategoryLabel, IconEntryButton } from "#lib/components/molecules/index.js";
+  import { BottomSheet, CategoryLabel, IconEntryButton } from "#lib/ui/index.js";
   import { useContext } from "./service.svelte";
 
   import IconEdit from "~icons/material-symbols/edit";
diff --git a/src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte b/src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte
index bf4b9ee..3b1b229 100644
--- a/src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte
+++ b/src/routes/(main)/category/[[id]]/CategoryRenameModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { RenameModal } from "#lib/components/organisms/index.js";
+  import { RenameModal } from "#lib/ui/index.js";
   import { useContext } from "./service.svelte";
 
   interface Props {
diff --git a/src/routes/(main)/category/[[id]]/File.svelte b/src/routes/(main)/category/[[id]]/File.svelte
deleted file mode 100644
index 02906b8..0000000
--- a/src/routes/(main)/category/[[id]]/File.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import { getFileThumbnail } from "#lib/client/cache/index.js";
-  import type { CategoryFileInfo } from "#lib/features/filesystem/index.js";
-  import { formatDateTime } from "#lib/utils/index.js";
-  import type { SelectedFile } from "./service.svelte";
-
-  import IconClose from "~icons/material-symbols/close";
-
-  interface Props {
-    info: CategoryFileInfo;
-    onclick: (file: SelectedFile) => void;
-    onRemoveClick?: (file: SelectedFile) => void;
-  }
-
-  let { info, onclick, onRemoveClick }: Props = $props();
-
-  let thumbnail = $derived(getFileThumbnail(info));
-</script>
-
-<ActionEntryButton
-  class="h-14"
-  onclick={() => onclick(info)}
-  actionButtonIcon={onRemoveClick && IconClose}
-  onActionButtonClick={() => onRemoveClick?.(info)}
->
-  <DirectoryEntryLabel
-    type="file"
-    thumbnail={thumbnail?.url}
-    name={info.name}
-    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
-    isFavorite={info.isFavorite}
-  />
-</ActionEntryButton>
diff --git a/src/routes/(main)/category/[[id]]/service.svelte.ts b/src/routes/(main)/category/[[id]]/service.svelte.ts
index 7b3d105..3a9c3ad 100644
--- a/src/routes/(main)/category/[[id]]/service.svelte.ts
+++ b/src/routes/(main)/category/[[id]]/service.svelte.ts
@@ -1,18 +1,20 @@
-import { getContext, setContext } from "svelte";
-import type { SelectedCategory } from "#lib/components/molecules/index.js";
+import { createContext as createSvelteContext } from "svelte";
+import type { SelectedCategory } from "#lib/features/filesystem/components/index.js";
 
 export interface SelectedFile {
   id: number;
   name: string;
 }
 
+interface Context {
+  selectedCategory?: SelectedCategory;
+}
+
+const [getContext, setContext] = createSvelteContext<Context>();
+
 export const createContext = () => {
-  const context = $state({
-    selectedCategory: undefined as SelectedCategory | undefined,
-  });
-  return setContext("context", context);
+  const context: Context = $state({});
+  return setContext(context);
 };
 
-export const useContext = () => {
-  return getContext<ReturnType<typeof createContext>>("context");
-};
+export const useContext = getContext;
diff --git a/src/routes/(main)/directory/[[id]]/+page.svelte b/src/routes/(main)/directory/[[id]]/+page.svelte
index 1a0c95a..8787785 100644
--- a/src/routes/(main)/directory/[[id]]/+page.svelte
+++ b/src/routes/(main)/directory/[[id]]/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
-  import { FloatingButton } from "#lib/components/atoms/index.js";
-  import { TopBar } from "#lib/components/molecules/index.js";
-  import { tryAction } from "#lib/client/toast.svelte.js";
+  import { tryAction } from "#lib/features/errors.js";
   import { createDirectory, uploadFile, useDirectory } from "#lib/features/filesystem/index.js";
+  import { FloatingButton, OverlayGroup, TopBar } from "#lib/ui/index.js";
   import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
   import DownloadStatusCard from "./DownloadStatusCard.svelte";
@@ -28,14 +27,12 @@
   let duplicatedFile: File | undefined = $state();
   let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
 
-  let isEntryCreateBottomSheetOpen = $state(false);
-  let isDirectoryCreateModalOpen = $state(false);
+  const overlays = new OverlayGroup<
+    "entryCreate" | "directoryCreate" | "entryMenu" | "entryRename" | "entryDelete"
+  >();
+  // Shown independently as it is requested while uploading in the background
   let isDuplicateFileModalOpen = $state(false);
 
-  let isEntryMenuBottomSheetOpen = $state(false);
-  let isEntryRenameModalOpen = $state(false);
-  let isEntryDeleteModalOpen = $state(false);
-
   let showParentEntry = $derived(
     ["file", "search", "favorite"].includes(page.url.searchParams.get("from") ?? ""),
   );
@@ -96,7 +93,7 @@
           onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
           onEntryMenuClick={(entry) => {
             context.selectedEntry = entry;
-            isEntryMenuBottomSheetOpen = true;
+            overlays.open("entryMenu");
           }}
           showParentEntry={showParentEntry && data.id !== "root"}
           onParentClick={() =>
@@ -114,23 +111,20 @@
 <FloatingButton
   icon={IconAdd}
   onclick={() => {
-    isEntryCreateBottomSheetOpen = true;
+    overlays.open("entryCreate");
   }}
   class="right-4 bottom-24"
 />
 <EntryCreateBottomSheet
-  bind:isOpen={isEntryCreateBottomSheetOpen}
-  onDirectoryCreateClick={() => {
-    isEntryCreateBottomSheetOpen = false;
-    isDirectoryCreateModalOpen = true;
-  }}
+  bind:isOpen={overlays.getter("entryCreate"), overlays.setter("entryCreate")}
+  onDirectoryCreateClick={() => overlays.open("directoryCreate")}
   onFileUploadClick={() => {
-    isEntryCreateBottomSheetOpen = false;
+    overlays.close();
     fileInput?.click();
   }}
 />
 <DirectoryCreateModal
-  bind:isOpen={isDirectoryCreateModalOpen}
+  bind:isOpen={overlays.getter("directoryCreate"), overlays.setter("directoryCreate")}
   onCreateClick={(name) =>
     tryAction(() => createDirectory(data.id, name), "폴더를 만들지 못했어요.")}
 />
@@ -148,15 +142,9 @@
 />
 
 <EntryMenuBottomSheet
-  bind:isOpen={isEntryMenuBottomSheetOpen}
-  onRenameClick={() => {
-    isEntryMenuBottomSheetOpen = false;
-    isEntryRenameModalOpen = true;
-  }}
-  onDeleteClick={() => {
-    isEntryMenuBottomSheetOpen = false;
-    isEntryDeleteModalOpen = true;
-  }}
+  bind:isOpen={overlays.getter("entryMenu"), overlays.setter("entryMenu")}
+  onRenameClick={() => overlays.open("entryRename")}
+  onDeleteClick={() => overlays.open("entryDelete")}
   onFavoriteClick={async () => {
     if (
       await tryAction(
@@ -164,16 +152,16 @@
         "즐겨찾기를 변경하지 못했어요.",
       )
     ) {
-      isEntryMenuBottomSheetOpen = false;
+      overlays.close();
     }
   }}
 />
 <EntryRenameModal
-  bind:isOpen={isEntryRenameModalOpen}
+  bind:isOpen={overlays.getter("entryRename"), overlays.setter("entryRename")}
   onRenameClick={(newName: string) =>
     tryAction(() => renameEntry(context.selectedEntry!, newName), "이름을 바꾸지 못했어요.")}
 />
 <EntryDeleteModal
-  bind:isOpen={isEntryDeleteModalOpen}
+  bind:isOpen={overlays.getter("entryDelete"), overlays.setter("entryDelete")}
   onDeleteClick={() => tryAction(() => deleteEntry(context.selectedEntry!), "삭제하지 못했어요.")}
 />
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte b/src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte
index 28a0b57..f981658 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryCreateModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TextInputModal } from "#lib/components/organisms/index.js";
+  import { TextInputModal } from "#lib/ui/index.js";
 
   interface Props {
     isOpen: boolean;
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
index 9f522da..63cbb36 100644
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
+++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-  import { ActionEntryButton, RowVirtualizer } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
   import { getUploadingFiles, type LiveFileUploadState } from "#lib/client/transfer/index.js";
-  import type { DirectoryInfo } from "#lib/features/filesystem/index.js";
+  import { DirectoryEntry, FileEntry } from "#lib/features/filesystem/components/index.js";
+  import type {
+    DirectoryInfo,
+    SubDirectoryInfo,
+    SummarizedFileInfo,
+  } from "#lib/features/filesystem/index.js";
+  import { ActionEntryButton, RowVirtualizer, DirectoryEntryLabel } from "#lib/ui/index.js";
   import { sortEntries } from "#lib/utils/index.js";
-  import File from "./File.svelte";
-  import SubDirectory from "./SubDirectory.svelte";
   import UploadingFile from "./UploadingFile.svelte";
   import type { SelectedEntry } from "../service.svelte";
 
+  import IconMoreVert from "~icons/material-symbols/more-vert";
+
   interface Props {
     info: DirectoryInfo;
     onEntryClick: (entry: SelectedEntry) => void;
@@ -35,6 +39,11 @@
     <T extends Exclude<Entry["type"], "parent">>(type: T) =>
     (details: Extract<Entry, { type: T }>["details"]) => ({ type, name: details.name, details });
 
+  const toSelectedEntry = (
+    type: SelectedEntry["type"],
+    { id, parentId, dataKey, name, isFavorite }: SubDirectoryInfo | SummarizedFileInfo,
+  ): SelectedEntry => ({ type, id, parentId, dataKey, name, isFavorite });
+
   let entries = $derived([
     ...(showParentEntry ? ([{ type: "parent" }] as const) : []),
     ...sortEntries(info.subDirectories.map(toEntry("directory"))),
@@ -63,13 +72,19 @@
           <DirectoryEntryLabel type="parent-directory" name=".." />
         </ActionEntryButton>
       {:else if entry.type === "directory"}
-        <SubDirectory
+        {@const selected = toSelectedEntry("directory", entry.details)}
+        <DirectoryEntry
           info={entry.details}
-          onclick={onEntryClick}
-          onOpenMenuClick={onEntryMenuClick}
+          onclick={() => onEntryClick(selected)}
+          action={{ icon: IconMoreVert, onclick: () => onEntryMenuClick(selected) }}
         />
       {:else if entry.type === "file"}
-        <File info={entry.details} onclick={onEntryClick} onOpenMenuClick={onEntryMenuClick} />
+        {@const selected = toSelectedEntry("file", entry.details)}
+        <FileEntry
+          info={entry.details}
+          onclick={() => onEntryClick(selected)}
+          action={{ icon: IconMoreVert, onclick: () => onEntryMenuClick(selected) }}
+        />
       {:else}
         <UploadingFile state={entry.details} />
       {/if}
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
deleted file mode 100644
index 46f271c..0000000
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import { getFileThumbnail } from "#lib/client/cache/index.js";
-  import type { SummarizedFileInfo } from "#lib/features/filesystem/index.js";
-  import { formatDateTime } from "#lib/utils/index.js";
-  import type { SelectedEntry } from "../service.svelte";
-
-  import IconMoreVert from "~icons/material-symbols/more-vert";
-
-  interface Props {
-    info: SummarizedFileInfo;
-    onclick: (entry: SelectedEntry) => void;
-    onOpenMenuClick: (entry: SelectedEntry) => void;
-  }
-
-  let { info, onclick, onOpenMenuClick }: Props = $props();
-
-  let thumbnail = $derived(getFileThumbnail(info));
-
-  const action = (callback: typeof onclick) => {
-    callback({
-      type: "file",
-      id: info.id,
-      parentId: info.parentId,
-      dataKey: info.dataKey,
-      name: info.name,
-      isFavorite: info.isFavorite,
-    });
-  };
-</script>
-
-<ActionEntryButton
-  class="h-14"
-  onclick={() => action(onclick)}
-  actionButtonIcon={IconMoreVert}
-  onActionButtonClick={() => action(onOpenMenuClick)}
->
-  <DirectoryEntryLabel
-    type="file"
-    thumbnail={thumbnail?.url}
-    name={info.name}
-    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
-    isFavorite={info.isFavorite}
-  />
-</ActionEntryButton>
diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
deleted file mode 100644
index 5f5ff0e..0000000
--- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/SubDirectory.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import type { SubDirectoryInfo } from "#lib/features/filesystem/index.js";
-  import type { SelectedEntry } from "../service.svelte";
-
-  import IconMoreVert from "~icons/material-symbols/more-vert";
-
-  interface Props {
-    info: SubDirectoryInfo;
-    onclick: (entry: SelectedEntry) => void;
-    onOpenMenuClick: (entry: SelectedEntry) => void;
-  }
-
-  let { info, onclick, onOpenMenuClick }: Props = $props();
-
-  const action = (callback: typeof onclick) => {
-    callback({
-      type: "directory",
-      id: info.id,
-      parentId: info.parentId,
-      dataKey: info.dataKey,
-      name: info.name,
-      isFavorite: info.isFavorite,
-    });
-  };
-</script>
-
-<ActionEntryButton
-  class="h-14"
-  onclick={() => action(onclick)}
-  actionButtonIcon={IconMoreVert}
-  onActionButtonClick={() => action(onOpenMenuClick)}
->
-  <DirectoryEntryLabel type="directory" name={info.name} isFavorite={info.isFavorite} />
-</ActionEntryButton>
diff --git a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
index e535dcc..9912944 100644
--- a/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/DuplicateFileModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionModal } from "#lib/components/molecules/index.js";
+  import { ActionModal } from "#lib/ui/index.js";
   import { truncateString } from "#lib/utils/index.js";
 
   interface Props {
diff --git a/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
index 1367268..eb16dc7 100644
--- a/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryCreateBottomSheet.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "#lib/components/atoms/index.js";
-  import { IconEntryButton } from "#lib/components/molecules/index.js";
+  import { BottomSheet, IconEntryButton } from "#lib/ui/index.js";
 
   import IconCreateNewFolder from "~icons/material-symbols/create-new-folder";
   import IconUploadFile from "~icons/material-symbols/upload-file";
diff --git a/src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte b/src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte
index d13d824..fba0b0f 100644
--- a/src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryDeleteModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ActionModal } from "#lib/components/molecules/index.js";
+  import { ActionModal } from "#lib/ui/index.js";
   import { truncateString } from "#lib/utils/index.js";
   import { useContext } from "./service.svelte";
 
diff --git a/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
index 8c77e06..1e2bb6f 100644
--- a/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryMenuBottomSheet.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { BottomSheet } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel, IconEntryButton } from "#lib/components/molecules/index.js";
+  import { BottomSheet, DirectoryEntryLabel, IconEntryButton } from "#lib/ui/index.js";
   import { useContext } from "./service.svelte";
 
   import IconFavorite from "~icons/material-symbols/favorite";
diff --git a/src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte b/src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte
index 91843d6..e50e0b4 100644
--- a/src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte
+++ b/src/routes/(main)/directory/[[id]]/EntryRenameModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { RenameModal } from "#lib/components/organisms/index.js";
+  import { RenameModal } from "#lib/ui/index.js";
   import { useContext } from "./service.svelte";
 
   interface Props {
diff --git a/src/routes/(main)/directory/[[id]]/service.svelte.ts b/src/routes/(main)/directory/[[id]]/service.svelte.ts
index e2934e3..1a5a51c 100644
--- a/src/routes/(main)/directory/[[id]]/service.svelte.ts
+++ b/src/routes/(main)/directory/[[id]]/service.svelte.ts
@@ -1,4 +1,4 @@
-import { getContext, setContext } from "svelte";
+import { createContext as createSvelteContext } from "svelte";
 import {
   deleteDirectory,
   deleteFile,
@@ -18,16 +18,18 @@ export interface SelectedEntry {
   isFavorite: boolean;
 }
 
+interface Context {
+  selectedEntry?: SelectedEntry;
+}
+
+const [getContext, setContext] = createSvelteContext<Context>();
+
 export const createContext = () => {
-  const context = $state({
-    selectedEntry: undefined as SelectedEntry | undefined,
-  });
-  return setContext("context", context);
+  const context: Context = $state({});
+  return setContext(context);
 };
 
-export const useContext = () => {
-  return getContext<ReturnType<typeof createContext>>("context");
-};
+export const useContext = getContext;
 
 export const renameEntry = async (entry: SelectedEntry, newName: string) => {
   if (entry.type === "directory") {
diff --git a/src/routes/(main)/favorites/+page.svelte b/src/routes/(main)/favorites/+page.svelte
index a219141..94e8c51 100644
--- a/src/routes/(main)/favorites/+page.svelte
+++ b/src/routes/(main)/favorites/+page.svelte
@@ -1,17 +1,16 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { RowVirtualizer } from "#lib/components/atoms/index.js";
-  import { TopBar } from "#lib/components/molecules/index.js";
-  import Directory from "./Directory.svelte";
-  import File from "./File.svelte";
-  import { showErrorToast, tryAction } from "#lib/client/toast.svelte.js";
+  import { showErrorToast, tryAction } from "#lib/features/errors.js";
   import {
     getFavoriteEntries,
     removeFavorite,
     type FavoriteEntry,
   } from "#lib/features/favorites/index.js";
+  import { DirectoryEntry, FileEntry } from "#lib/features/filesystem/components/index.js";
+  import { RowVirtualizer, TopBar } from "#lib/ui/index.js";
 
+  import IconClose from "~icons/material-symbols/close";
   import IconSearch from "~icons/material-symbols/search";
 
   let entries: FavoriteEntry[] = $state([]);
@@ -68,16 +67,16 @@
         {#snippet item(index)}
           {@const entry = entries[index]!}
           {#if entry.type === "directory"}
-            <Directory
+            <DirectoryEntry
               info={entry.details}
               onclick={() => handleClick(entry)}
-              onRemoveClick={() => handleRemove(entry)}
+              action={{ icon: IconClose, onclick: () => handleRemove(entry) }}
             />
           {:else}
-            <File
+            <FileEntry
               info={entry.details}
               onclick={() => handleClick(entry)}
-              onRemoveClick={() => handleRemove(entry)}
+              action={{ icon: IconClose, onclick: () => handleRemove(entry) }}
             />
           {/if}
         {/snippet}
diff --git a/src/routes/(main)/favorites/Directory.svelte b/src/routes/(main)/favorites/Directory.svelte
deleted file mode 100644
index 2ebd51b..0000000
--- a/src/routes/(main)/favorites/Directory.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import type { SubDirectoryInfo } from "#lib/features/filesystem/index.js";
-
-  import IconClose from "~icons/material-symbols/close";
-
-  interface Props {
-    info: SubDirectoryInfo;
-    onclick: () => void;
-    onRemoveClick: () => void;
-  }
-
-  let { info, onclick, onRemoveClick }: Props = $props();
-</script>
-
-<ActionEntryButton
-  class="h-14"
-  {onclick}
-  actionButtonIcon={IconClose}
-  onActionButtonClick={onRemoveClick}
->
-  <DirectoryEntryLabel type="directory" name={info.name} isFavorite />
-</ActionEntryButton>
diff --git a/src/routes/(main)/favorites/File.svelte b/src/routes/(main)/favorites/File.svelte
deleted file mode 100644
index cb4a1e4..0000000
--- a/src/routes/(main)/favorites/File.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-  import { ActionEntryButton } from "#lib/components/atoms/index.js";
-  import { DirectoryEntryLabel } from "#lib/components/molecules/index.js";
-  import { getFileThumbnail } from "#lib/client/cache/index.js";
-  import type { SummarizedFileInfo } from "#lib/features/filesystem/index.js";
-  import { formatDateTime } from "#lib/utils/index.js";
-
-  import IconClose from "~icons/material-symbols/close";
-
-  interface Props {
-    info: SummarizedFileInfo;
-    onclick: () => void;
-    onRemoveClick: () => void;
-  }
-
-  let { info, onclick, onRemoveClick }: Props = $props();
-
-  let thumbnail = $derived(getFileThumbnail(info));
-</script>
-
-<ActionEntryButton
-  class="h-14"
-  {onclick}
-  actionButtonIcon={IconClose}
-  onActionButtonClick={onRemoveClick}
->
-  <DirectoryEntryLabel
-    type="file"
-    thumbnail={thumbnail?.url}
-    name={info.name}
-    subtext={formatDateTime(info.createdAt ?? info.lastModifiedAt)}
-    isFavorite
-  />
-</ActionEntryButton>
diff --git a/src/routes/(main)/home/+page.svelte b/src/routes/(main)/home/+page.svelte
index b441377..3d6be43 100644
--- a/src/routes/(main)/home/+page.svelte
+++ b/src/routes/(main)/home/+page.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { goto } from "$app/navigation";
-  import { EntryButton, FileThumbnailButton } from "#lib/components/atoms/index.js";
+  import { FileThumbnailButton } from "#lib/features/filesystem/components/index.js";
   import { type SummarizedFileInfo } from "#lib/features/filesystem/index.js";
+  import { EntryButton } from "#lib/ui/index.js";
   import { requestFreshMediaFilesRetrieval } from "./service";
 
   let mediaFiles: SummarizedFileInfo[] = $state([]);
diff --git a/src/routes/(main)/menu/+page.svelte b/src/routes/(main)/menu/+page.svelte
index ace7d69..2bb191f 100644
--- a/src/routes/(main)/menu/+page.svelte
+++ b/src/routes/(main)/menu/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import MenuEntryButton from "./MenuEntryButton.svelte";
-  import { tryAction } from "#lib/client/toast.svelte.js";
   import { logout as requestLogout } from "#lib/features/auth/index.js";
+  import { tryAction } from "#lib/features/errors.js";
 
   import IconStorage from "~icons/material-symbols/storage";
   import IconImage from "~icons/material-symbols/image";
diff --git a/src/routes/(main)/menu/MenuEntryButton.svelte b/src/routes/(main)/menu/MenuEntryButton.svelte
index feb20e7..245c6cb 100644
--- a/src/routes/(main)/menu/MenuEntryButton.svelte
+++ b/src/routes/(main)/menu/MenuEntryButton.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Component, Snippet } from "svelte";
   import type { ClassValue, SvelteHTMLElements } from "svelte/elements";
-  import { IconEntryButton } from "#lib/components/molecules/index.js";
+  import { IconEntryButton } from "#lib/ui/index.js";
 
   interface Props {
     children: Snippet;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5777c83..19fe3fa 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getDownloadingFiles, getUploadingFiles } from "#lib/client/transfer/index.js";
-  import { Toasts } from "#lib/components/atoms/index.js";
+  import { Toasts } from "#lib/ui/index.js";
   import "../app.css";
 
   let { children } = $props();