refactor: reorganize directory structure by moving UI components into feature-specific folders

frontend/src/pages/Drawer.tsx

@@ -1,10 +1,10 @@
 import { FeatherIcon } from "@phosphor-icons/react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { DrawerSection } from "../components/drawer/DrawerSection.tsx";
+import { LetterItem } from "../components/drawer/LetterItem.tsx";
+import { PasskeyModal } from "../components/drawer/PasskeyModal.tsx";
 import Logo from "../components/Logo";
-import { DrawerSection } from "../components/ui/DrawerSection";
-import { LetterItem } from "../components/ui/LetterItem";
-import { PasskeyModal } from "../components/ui/PasskeyModal";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";

frontend/src/pages/Editor.test.tsx

@@ -13,7 +13,7 @@ import Editor from "./Editor";
 const API_URL = import.meta.env.VITE_API_URL;
 
 // Mock ComposeCanvas to avoid Fabric.js issues and check readOnly prop
-vi.mock("../components/ui/ComposeCanvas", () => ({
+vi.mock("../components/editor/ComposeCanvas", () => ({
   ComposeCanvas: vi.fn(({ readOnly }) => (
     <div data-testid="canvas" data-readonly={readOnly}>
       Canvas
@@ -24,21 +24,21 @@ vi.mock("../components/ui/ComposeCanvas", () => ({
 // Mock CryptoUtils to avoid real crypto calls in UI tests
 vi.mock("../utils/crypto", () => {
   return {
-    CryptoUtils: () => ({
-      initialize: vi.fn().mockResolvedValue(undefined),
-      encryptLetter: vi.fn().mockResolvedValue({
+    CryptoUtils: class {
+      initialize = vi.fn().mockResolvedValue(undefined);
+      encryptLetter = vi.fn().mockResolvedValue({
         encrypted_content: "enc-content",
         encrypted_dek: "enc-dek",
         sharingKey: "share-key",
-      }),
-      encryptMetadata: vi.fn().mockResolvedValue({
+      });
+      encryptMetadata = vi.fn().mockResolvedValue({
         encrypted_content: "enc-meta",
         encrypted_dek: "enc-dek",
-      }),
-      decryptMetadata: vi.fn().mockResolvedValue({ recipient: "Test User" }),
-      decryptLetter: vi.fn().mockResolvedValue("{}"),
-      extractSharingKey: vi.fn().mockResolvedValue("share-key"),
-    }),
+      });
+      decryptMetadata = vi.fn().mockResolvedValue({ recipient: "Test User" });
+      decryptLetter = vi.fn().mockResolvedValue("{}");
+      extractSharingKey = vi.fn().mockResolvedValue("share-key");
+    },
   };
 });
 

frontend/src/pages/Editor.tsx

@@ -11,16 +11,16 @@ import {
   useParams,
 } from "react-router-dom";
 import { api } from "../api/apiClient";
+import {
+  type CanvasTools,
+  ComposeCanvas,
+} from "../components/editor/ComposeCanvas";
 import { PostSealModal } from "../components/editor/PostSealModal";
 import {
   LetterHead,
   ToolBar,
   VaultConfirmModal,
 } from "../components/editor/ToolBar";
-import {
-  type CanvasTools,
-  ComposeCanvas,
-} from "../components/ui/ComposeCanvas";
 import DateDisplay from "../components/ui/DateDisplay";
 import { LogModal } from "../components/ui/LogModal";
 import { Navbar } from "../components/ui/Navbar";

frontend/src/pages/Login.tsx

@@ -20,6 +20,57 @@ const loginSchema = z.object({
 
 type LoginInputs = z.infer<typeof loginSchema>;
 
+function WelcomeModal({ setShowWelcome }) {
+  return (
+    <div className="modal modal-open backdrop-blur-sm transition-all duration-1000">
+      <div className="modal-box border border-primary/20 shadow-2xl p-8">
+        <div className="flex flex-col items-center text-center gap-4">
+          <div className="bg-primary/10 p-4 rounded-full animate-pulse">
+            <ShieldCheckIcon
+              size={48}
+              weight="duotone"
+              className="text-primary"
+            />
+          </div>
+          <h3 className="font-display text-2xl font-bold text-primary">
+            Welcome to <Logo />!
+          </h3>
+          <p className="text-base-content/80 leading-relaxed">
+            To ensure <span className="font-bold">complete privacy</span>, all
+            your letters are{" "}
+            <span className="font-bold underline">
+              sealed with your password
+            </span>
+            , which only you have access to.
+            <br />
+            <span className="font-bold">
+              The server never sees it, and it's a solemn promise!
+            </span>
+          </p>
+
+          <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
+            <WarningIcon size={24} weight="fill" className="shrink-0 mt-0.5" />
+            <p className="text-sm font-medium text-primary-content">
+              If you ever happen to forget your password, your letters are lost
+              to time, forever.
+            </p>
+          </div>
+
+          <div className="modal-action w-full">
+            <button
+              type="button"
+              onClick={() => setShowWelcome(false)}
+              className="btn btn-primary w-full shadow-lg"
+            >
+              I understand
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function Login() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -74,58 +125,7 @@ export default function Login() {
 
   return (
     <div className="flex flex-col gap-3">
-      {showWelcome && (
-        <div className="modal modal-open backdrop-blur-sm transition-all duration-1000">
-          <div className="modal-box border border-primary/20 shadow-2xl p-8">
-            <div className="flex flex-col items-center text-center gap-4">
-              <div className="bg-primary/10 p-4 rounded-full animate-pulse">
-                <ShieldCheckIcon
-                  size={48}
-                  weight="duotone"
-                  className="text-primary"
-                />
-              </div>
-              <h3 className="font-display text-2xl font-bold text-primary">
-                Welcome to <Logo />!
-              </h3>
-              <p className="text-base-content/80 leading-relaxed">
-                To ensure <span className="font-bold">complete privacy</span>,
-                all your letters are{" "}
-                <span className="font-bold underline">
-                  sealed with your password
-                </span>
-                , which only you have access to.
-                <br />
-                <span className="font-bold">
-                  The server never sees it, and it's a solemn promise!
-                </span>
-              </p>
-
-              <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
-                <WarningIcon
-                  size={24}
-                  weight="fill"
-                  className="shrink-0 mt-0.5"
-                />
-                <p className="text-sm font-medium text-primary-content">
-                  If you ever happen to forget your password, your letters are
-                  lost to time, forever.
-                </p>
-              </div>
-
-              <div className="modal-action w-full">
-                <button
-                  type="button"
-                  onClick={() => setShowWelcome(false)}
-                  className="btn btn-primary w-full shadow-lg"
-                >
-                  I understand
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
+      {showWelcome && <WelcomeModal setShowWelcome={setShowWelcome} />}
       <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
         <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
           <h1 className="card-title font-display text-2xl font-bold justify-center text-primary tracking-tight">

frontend/src/pages/Reader.tsx

@@ -8,13 +8,13 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { api } from "../api/apiClient";
-import Logo from "../components/Logo";
 import {
   type CanvasJSON,
   type CanvasTools,
   ComposeCanvas,
-} from "../components/ui/ComposeCanvas";
-import { EnvelopeReveal } from "../components/ui/EnvelopeReveal";
+} from "../components/editor/ComposeCanvas";
+import Logo from "../components/Logo";
+import { EnvelopeReveal } from "../components/reader/EnvelopeReveal";
 import { LogModal } from "../components/ui/LogModal";
 import { endpoints } from "../config/endpoints";
 import { PATHS, ROUTES } from "../config/routes";

frontend/src/utils/letterLogic.ts

@@ -2,7 +2,7 @@ import { api } from "../api/apiClient";
 import type {
   CanvasJSON,
   FabricImageJSON,
-} from "../components/ui/ComposeCanvas";
+} from "../components/editor/ComposeCanvas";
 import type { CryptoUtils } from "./crypto";
 import { blobUrlToFile } from "./fileUtils";