me/pi-ku
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ramvignesh-b
2026-04-24 17:01:35 +05:30
parent c562c99d3a
commit db31be4ec8
11 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Drawer.tsx
+3 -3
View File
@@ -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
+11 -11
View File
@@ -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
+4 -4
View File
@@ -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
+52 -52
View File
@@ -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
+3 -3
View File
@@ -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";