From db31be4ec86f80c4cc3a2e530727a226c7aae32f Mon Sep 17 00:00:00 2001 From: ramvignesh-b Date: Fri, 24 Apr 2026 17:01:35 +0530 Subject: [PATCH] refactor: reorganize directory structure by moving UI components into feature-specific folders --- .../{ui => drawer}/DrawerSection.tsx | 0 .../components/{ui => drawer}/LetterItem.tsx | 0 .../{ui => drawer}/PasskeyModal.tsx | 0 .../{ui => editor}/ComposeCanvas.tsx | 0 .../{ui => reader}/EnvelopeReveal.tsx | 0 frontend/src/pages/Drawer.tsx | 6 +- frontend/src/pages/Editor.test.tsx | 22 ++-- frontend/src/pages/Editor.tsx | 8 +- frontend/src/pages/Login.tsx | 104 +++++++++--------- frontend/src/pages/Reader.tsx | 6 +- frontend/src/utils/letterLogic.ts | 2 +- 11 files changed, 74 insertions(+), 74 deletions(-) rename frontend/src/components/{ui => drawer}/DrawerSection.tsx (100%) rename frontend/src/components/{ui => drawer}/LetterItem.tsx (100%) rename frontend/src/components/{ui => drawer}/PasskeyModal.tsx (100%) rename frontend/src/components/{ui => editor}/ComposeCanvas.tsx (100%) rename frontend/src/components/{ui => reader}/EnvelopeReveal.tsx (100%) diff --git a/frontend/src/components/ui/DrawerSection.tsx b/frontend/src/components/drawer/DrawerSection.tsx similarity index 100% rename from frontend/src/components/ui/DrawerSection.tsx rename to frontend/src/components/drawer/DrawerSection.tsx diff --git a/frontend/src/components/ui/LetterItem.tsx b/frontend/src/components/drawer/LetterItem.tsx similarity index 100% rename from frontend/src/components/ui/LetterItem.tsx rename to frontend/src/components/drawer/LetterItem.tsx diff --git a/frontend/src/components/ui/PasskeyModal.tsx b/frontend/src/components/drawer/PasskeyModal.tsx similarity index 100% rename from frontend/src/components/ui/PasskeyModal.tsx rename to frontend/src/components/drawer/PasskeyModal.tsx diff --git a/frontend/src/components/ui/ComposeCanvas.tsx b/frontend/src/components/editor/ComposeCanvas.tsx similarity index 100% rename from frontend/src/components/ui/ComposeCanvas.tsx rename to frontend/src/components/editor/ComposeCanvas.tsx diff --git a/frontend/src/components/ui/EnvelopeReveal.tsx b/frontend/src/components/reader/EnvelopeReveal.tsx similarity index 100% rename from frontend/src/components/ui/EnvelopeReveal.tsx rename to frontend/src/components/reader/EnvelopeReveal.tsx diff --git a/frontend/src/pages/Drawer.tsx b/frontend/src/pages/Drawer.tsx index 2efc859..f965478 100644 --- a/frontend/src/pages/Drawer.tsx +++ b/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"; diff --git a/frontend/src/pages/Editor.test.tsx b/frontend/src/pages/Editor.test.tsx index 4f4a8d4..f1dc66e 100644 --- a/frontend/src/pages/Editor.test.tsx +++ b/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 }) => (
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"); + }, }; }); diff --git a/frontend/src/pages/Editor.tsx b/frontend/src/pages/Editor.tsx index 6ca5057..4d81ea6 100644 --- a/frontend/src/pages/Editor.tsx +++ b/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"; diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index 4b69d6b..8897975 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -20,6 +20,57 @@ const loginSchema = z.object({ type LoginInputs = z.infer; +function WelcomeModal({ setShowWelcome }) { + return ( +
+
+
+
+ +
+

+ Welcome to ! +

+

+ To ensure complete privacy, all + your letters are{" "} + + sealed with your password + + , which only you have access to. +
+ + The server never sees it, and it's a solemn promise! + +

+ +
+ +

+ If you ever happen to forget your password, your letters are lost + to time, forever. +

+
+ +
+ +
+
+
+
+ ); +} + export default function Login() { const navigate = useNavigate(); const location = useLocation(); @@ -74,58 +125,7 @@ export default function Login() { return (
- {showWelcome && ( -
-
-
-
- -
-

- Welcome to ! -

-

- To ensure complete privacy, - all your letters are{" "} - - sealed with your password - - , which only you have access to. -
- - The server never sees it, and it's a solemn promise! - -

- -
- -

- If you ever happen to forget your password, your letters are - lost to time, forever. -

-
- -
- -
-
-
-
- )} + {showWelcome && }

diff --git a/frontend/src/pages/Reader.tsx b/frontend/src/pages/Reader.tsx index e1a4fe6..08bb111 100644 --- a/frontend/src/pages/Reader.tsx +++ b/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"; diff --git a/frontend/src/utils/letterLogic.ts b/frontend/src/utils/letterLogic.ts index 0e082a8..30e785e 100644 --- a/frontend/src/utils/letterLogic.ts +++ b/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";