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

Style/Revamp #4

Merged
me merged 12 commits from feature/home_revamp into main 2026-05-08 03:16:16 +00:00
Conversation 0 Commits 12 Files Changed 20
+392 -403
12 changed files with 392 additions and 403 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b29218b6e6 - Show all commits
frontend/src/components/RouteGuards.test.tsx
+18 -18
View File
@@ -9,8 +9,8 @@ function renderGuard(ui: React.ReactNode, mountPath: "/protected" | "/public") {
return render( return render(
<MemoryRouter initialEntries={[mountPath]}> <MemoryRouter initialEntries={[mountPath]}>
<Routes> <Routes>
<Route path="/login" element={<div>Login Page</div>} /> <Route path="/login" element={<div data-testid="login-page">Login Page</div>} />
<Route path="/drawer" element={<div>Drawer Page</div>} /> <Route path="/drawer" element={<div data-testid="drawer-page">Drawer Page</div>} />
<Route path="/protected" element={ui} /> <Route path="/protected" element={ui} />
<Route path="/public" element={ui} /> <Route path="/public" element={ui} />
</Routes> </Routes>
@@ -35,13 +35,13 @@ describe("ProtectedRoute", () => {
}); });
renderGuard( renderGuard(
<ProtectedRoute> <ProtectedRoute>
<div>Secret</div> <div data-testid="secret-page">Secret</div>
</ProtectedRoute>, </ProtectedRoute>,
"/protected", "/protected",
); );
expect(screen.getByText(/Unsealing/i)).toBeInTheDocument(); expect(screen.getByTestId("splash-screen")).toBeInTheDocument();
expect(screen.queryByText("Secret")).not.toBeInTheDocument(); expect(screen.queryByTestId("secret-page")).not.toBeInTheDocument();
}); });
it("should redirect unauthenticated users to /login", () => { it("should redirect unauthenticated users to /login", () => {
@@ -52,12 +52,12 @@ describe("ProtectedRoute", () => {
}); });
renderGuard( renderGuard(
<ProtectedRoute> <ProtectedRoute>
<div>Secret</div> <div data-testid="secret-page">Secret</div>
</ProtectedRoute>, </ProtectedRoute>,
"/protected", "/protected",
); );
expect(screen.getByText("Login Page")).toBeInTheDocument(); expect(screen.getByTestId("login-page")).toBeInTheDocument();
expect(screen.queryByText("Secret")).not.toBeInTheDocument(); expect(screen.queryByTestId("secret-page")).not.toBeInTheDocument();
}); });
it("should render page for authenticated users", () => { it("should render page for authenticated users", () => {
@@ -68,12 +68,12 @@ describe("ProtectedRoute", () => {
}); });
renderGuard( renderGuard(
<ProtectedRoute> <ProtectedRoute>
<div>Secret</div> <div data-testid="secret-page">Secret</div>
</ProtectedRoute>, </ProtectedRoute>,
"/protected", "/protected",
); );
expect(screen.getByText("Secret")).toBeInTheDocument(); expect(screen.getByTestId("secret-page")).toBeInTheDocument();
}); });
}); });
@@ -86,12 +86,12 @@ describe("PublicRoute", () => {
}); });
renderGuard( renderGuard(
<AutoRedirectRoute> <AutoRedirectRoute>
<div>Login Page</div> <div data-testid="mock-login-page">Login Page</div>
</AutoRedirectRoute>, </AutoRedirectRoute>,
"/public", "/public",
); );
expect(screen.getByText(/Unsealing/i)).toBeInTheDocument(); expect(screen.getByTestId("splash-screen")).toBeInTheDocument();
expect(screen.queryByText("Login Page")).not.toBeInTheDocument(); expect(screen.queryByTestId("mock-login-page")).not.toBeInTheDocument();
}); });
it("should redirect authenticated users to /drawer", () => { it("should redirect authenticated users to /drawer", () => {
@@ -102,12 +102,12 @@ describe("PublicRoute", () => {
}); });
renderGuard( renderGuard(
<AutoRedirectRoute> <AutoRedirectRoute>
<div>Login Form</div> <div data-testid="login-form">Login Form</div>
</AutoRedirectRoute>, </AutoRedirectRoute>,
"/public", "/public",
); );
expect(screen.getByText("Drawer Page")).toBeInTheDocument(); expect(screen.getByTestId("drawer-page")).toBeInTheDocument();
expect(screen.queryByText("Login Form")).not.toBeInTheDocument(); expect(screen.queryByTestId("login-form")).not.toBeInTheDocument();
}); });
it("should render page for unauthenticated users", () => { it("should render page for unauthenticated users", () => {
@@ -118,10 +118,10 @@ describe("PublicRoute", () => {
}); });
renderGuard( renderGuard(
<AutoRedirectRoute> <AutoRedirectRoute>
<div>Login Form</div> <div data-testid="login-form">Login Form</div>
</AutoRedirectRoute>, </AutoRedirectRoute>,
"/public", "/public",
); );
expect(screen.getByText("Login Form")).toBeInTheDocument(); expect(screen.getByTestId("login-form")).toBeInTheDocument();
}); });
}); });
frontend/src/components/SplashScreen.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import Logo from "./Logo";
export default function SplashScreen() { export default function SplashScreen() {
return ( return (
<div className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')"> <div data-testid="splash-screen" className="fixed w-screen h-screen inset-0 flex flex-col items-center justify-center z-9999 before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')">
<div className="flex flex-col items-center gap-6 animate-pulse"> <div className="flex flex-col items-center gap-6 animate-pulse">
<Logo /> <Logo />
frontend/src/components/drawer/DrawerSection.tsx
+82 -84
View File
@@ -1,97 +1,95 @@
import { GearFineIcon } from "@phosphor-icons/react"; import { GearFineIcon } from "@phosphor-icons/react";
interface DrawerSectionProps { interface DrawerSectionProps {
id: string; id: string;
title: string; title: string;
count: number; count: number;
subtext: string; subtext: string;
isOpen: boolean; isOpen: boolean;
onClick: () => void; onClick: () => void;
children: React.ReactNode; children: React.ReactNode;
icon: React.ReactNode; icon: React.ReactNode;
} }
export function DrawerSection({ export function DrawerSection({
id, id,
title, title,
count, count,
subtext, subtext,
isOpen, isOpen,
onClick, onClick,
children, children,
icon, icon,
}: DrawerSectionProps) { }: DrawerSectionProps) {
return ( return (
<div
id={id}
className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
>
<div
className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
>
<div <div
className={`transition-opacity ease-in-out ${ id={id}
isOpen className={`join-item group flex flex-col transition-colors duration-3000 ease-in-out ${isOpen ? "bg-base-300/30" : ""}`}
? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
: "opacity-0 duration-100"
}`}
> >
{children} <div
{count === 0 && ( className={`bg-neutral/10 transition-all duration-1000 ease-in-out overflow-visible ${isOpen ? "max-h-125" : "max-h-0 pointer-events-none"}`}
<div className="text-sm text-center text-neutral"> >
This drawer remains silent... <div
className={`transition-opacity ease-in-out ${isOpen
? "opacity-100 py-3 border-b border-base-content/5 duration-700 delay-500"
: "opacity-0 duration-100"
}`}
>
{children}
{count === 0 && (
<p data-testid={`empty-drawer-message-${id}`} className="text-center text-base-content/20 mt-4">
This drawer remains silent
</p>
)}
</div>
</div> </div>
)}
</div>
</div>
<button <button
type="button" type="button"
onClick={onClick} onClick={onClick}
data-testid={`drawer-section-${id}`} data-testid={`drawer-section-${id}`}
className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40" className="w-full relative p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 overflow-hidden focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40"
> >
<div className="flex-1"> <div className="flex-1">
<div <div
className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${ data-testid="drawer-section-title"
isOpen className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${isOpen
? "text-base-content" ? "text-base-content"
: "text-base-content/40 group-hover:text-base-content/80" : "text-base-content/40 group-hover:text-base-content/80"
}`} }`}
> >
{title} {title}
</div> </div>
<div className="font-sans text-xs text-base-content/20 mt-1"> <div className="font-sans text-xs text-base-content/20 mt-1">
<span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30"> <span className="font-mono text-xs md:text-base -mt-1 absolute text-primary/30">
{count} {count}
</span>{" "} </span>{" "}
<span className="ml-3">{subtext}</span> <span className="ml-3">{subtext}</span>
</div> </div>
<div className="absolute right-5 -translate-y-15 text-base-content/4"> <div className="absolute right-5 -translate-y-15 text-base-content/4">
{icon} {icon}
</div> </div>
</div> </div>
{id === "vault" ? ( {id === "vault" ? (
<GearFineIcon <GearFineIcon
className={ className={
"-mt-3 group-hover:animate-[spin_8s_ease-in-out_1] group-hover:text-neutral-content text-neutral" "-mt-3 group-hover:animate-[spin_8s_ease-in-out_1] group-hover:text-neutral-content text-neutral"
} }
weight={"duotone"} weight={"duotone"}
size={30} size={30}
/> />
) : ( ) : (
<div <div
className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${ className={`w-8 h-1 rounded-sm transition-all duration-300 bg-neutral ${isOpen
isOpen ? "bg-primary/80! opacity-80 scale-110"
? "bg-primary/80! opacity-80 scale-110" : "group-hover:bg-primary"
: "group-hover:bg-primary" }`}
}`} >
> <div className="absolute -top-1 left-1.75 w-5 h-px bg-base-content/5" />
<div className="absolute -top-1 left-1.75 w-5 h-px bg-base-content/5" /> </div>
</div> )}
)} </button>
</button> </div>
</div> );
);
} }
frontend/src/components/drawer/PasskeyModal.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export function PasskeyModal() {
className="text-primary mx-auto mb-8 animate-pulse" className="text-primary mx-auto mb-8 animate-pulse"
weight="duotone" weight="duotone"
/> />
<h3 className="font-bold text-lg font-display text-primary"> <h3 data-testid="passkey-modal-title" className="font-bold text-lg font-display text-primary">
You've been away a while. You've been away a while.
</h3> </h3>
<p className="py-4 font-sans"> <p className="py-4 font-sans">
frontend/src/components/reader/EnvelopeReveal.tsx
+1 -1
View File
@@ -123,7 +123,7 @@ export function EnvelopeReveal({
<span className={"text-neutral-content/60 font-xs font-display"}> <span className={"text-neutral-content/60 font-xs font-display"}>
to to
</span> </span>
<h1 className="text-3xl font-bold text-base-content">{recipient}</h1> <h1 data-testid="envelope-recipient" className="text-3xl font-bold text-base-content">{recipient}</h1>
<p className="text-base-content/60 font-display mt-8">{date}</p> <p className="text-base-content/60 font-display mt-8">{date}</p>
<img <img
src={stamp} src={stamp}
frontend/src/components/ui/LogModal.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const LogModal = ({
{status === "WARN" && ( {status === "WARN" && (
<WarningIcon className="text-warning" size={16} weight="duotone" /> <WarningIcon className="text-warning" size={16} weight="duotone" />
)} )}
{message} <span data-testid="log-modal-message">{message}</span>
{log && ( {log && (
<> <>
<div className="divider text-primary-content text-xs uppercase tracking-widest"> <div className="divider text-primary-content text-xs uppercase tracking-widest">
frontend/src/pages/Drawer.test.tsx
+94 -94
View File
@@ -9,116 +9,116 @@ import Drawer from "./Drawer";
vi.mock("../hooks/useLetters"); vi.mock("../hooks/useLetters");
vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({ vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => ( WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
<div data-testid="welcome-letter-overlay"> <div data-testid="welcome-letter-overlay">
<button <button
type="button" type="button"
data-testid="overlay-exit-button" data-testid="overlay-exit-button"
onClick={onComplete} onClick={onComplete}
> >
I'll see you I'll see you
</button> </button>
</div> </div>
), ),
})); }));
describe("Drawer Page", () => { describe("Drawer Page", () => {
beforeEach(() => { beforeEach(() => {
// Setup authenticated state for the test // Setup authenticated state for the test
useAuthStore.setState({ useAuthStore.setState({
user: mockUser, user: mockUser,
accessToken: "fake-token", accessToken: "fake-token",
isInitializing: false, isInitializing: false,
});
vi.mocked(useLetters).mockReturnValue({
drafts: [],
kept: [],
sent: [],
vault: [],
loading: false,
isAuthRequired: false,
});
}); });
vi.mocked(useLetters).mockReturnValue({ it("renders the drawer sections and empty state message", () => {
drafts: [], render(
kept: [], <MemoryRouter>
sent: [], <Drawer />
vault: [], </MemoryRouter>,
loading: false, );
isAuthRequired: false,
});
});
it("renders the cabinet sections and empty state message", () => { expect(screen.getByTestId("drawer-section-drafts")).toBeInTheDocument();
render( expect(screen.getAllByTestId("drawer-section-title").length).toBeGreaterThanOrEqual(1);
<MemoryRouter> expect(screen.getByTestId("drawer-section-vault")).toBeInTheDocument();
<Drawer /> expect(screen.getByTestId("empty-drawer-message-drafts")).toBeInTheDocument();
</MemoryRouter>,
);
expect(screen.getByText(/Drafts/i)).toBeInTheDocument();
expect(screen.getAllByText(/Kept/i).length).toBeGreaterThanOrEqual(1);
expect(screen.getByText(/Vault/i)).toBeInTheDocument();
expect(screen.getByText(/This drawer remains silent/i)).toBeInTheDocument();
});
it("renders the loading state", () => {
vi.mocked(useLetters).mockReturnValue({
drafts: [],
kept: [],
sent: [],
vault: [],
loading: true,
isAuthRequired: false,
}); });
render( it("renders the loading state", () => {
<MemoryRouter> vi.mocked(useLetters).mockReturnValue({
<Drawer /> drafts: [],
</MemoryRouter>, kept: [],
); sent: [],
vault: [],
loading: true,
isAuthRequired: false,
});
expect(screen.getByText(/Opening your cabinet/i)).toBeInTheDocument(); render(
}); <MemoryRouter>
<Drawer />
</MemoryRouter>,
);
it("renders the authentication required modal when api requires auth", () => { expect(screen.getByTestId("drawer-loading-state")).toBeInTheDocument();
vi.mocked(useLetters).mockReturnValue({
drafts: [],
kept: [],
sent: [],
vault: [],
loading: false,
isAuthRequired: true,
}); });
render( it("renders the authentication required modal when api requires auth", () => {
<MemoryRouter> vi.mocked(useLetters).mockReturnValue({
<Drawer /> drafts: [],
</MemoryRouter>, kept: [],
); sent: [],
vault: [],
loading: false,
isAuthRequired: true,
});
expect(screen.getByText(/You've been away a while./i)).toBeInTheDocument(); render(
expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument(); <MemoryRouter>
}); <Drawer />
</MemoryRouter>,
);
it("renders the welcome letter when firstTime state is present", () => { expect(screen.getByTestId("passkey-modal-title")).toBeInTheDocument();
render( expect(screen.getByPlaceholderText(/password/i)).toBeInTheDocument();
<MemoryRouter });
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
>
<Drawer />
</MemoryRouter>,
);
expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument(); it("renders the welcome letter when firstTime state is present", () => {
}); render(
<MemoryRouter
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
>
<Drawer />
</MemoryRouter>,
);
it("renders the drawer content when the letter is closed", () => { expect(screen.getByTestId("welcome-letter-overlay")).toBeInTheDocument();
render( });
<MemoryRouter
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
>
<Drawer />
</MemoryRouter>,
);
const completeButton = screen.getByTestId("overlay-exit-button"); it("renders the drawer content when the letter is closed", () => {
fireEvent.click(completeButton); render(
<MemoryRouter
initialEntries={[{ pathname: "/drawer", state: { firstTime: true } }]}
>
<Drawer />
</MemoryRouter>,
);
expect( const completeButton = screen.getByTestId("overlay-exit-button");
screen.queryByTestId("welcome-letter-overlay"), fireEvent.click(completeButton);
).not.toBeInTheDocument();
}); expect(
screen.queryByTestId("welcome-letter-overlay"),
).not.toBeInTheDocument();
});
}); });
frontend/src/pages/Drawer.tsx
+179 -179
View File
@@ -1,9 +1,9 @@
import { import {
ArchiveIcon, ArchiveIcon,
FeatherIcon, FeatherIcon,
FileDashedIcon, FileDashedIcon,
PaperPlaneTiltIcon, PaperPlaneTiltIcon,
VaultIcon, VaultIcon,
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import { useState } from "react"; import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
@@ -17,188 +17,188 @@ import { PATHS } from "../config/routes";
import { useAuth } from "../hooks/useAuth"; import { useAuth } from "../hooks/useAuth";
import { useLetters } from "../hooks/useLetters"; import { useLetters } from "../hooks/useLetters";
import { import {
formatRelativeDate, formatRelativeDate,
formatRelativeDateWithoutTime, formatRelativeDateWithoutTime,
} from "../utils/dateFormat.ts"; } from "../utils/dateFormat.ts";
export default function Drawer() { export default function Drawer() {
const { user, logout } = useAuth(); const { user, logout } = useAuth();
const [openSection, setOpenSection] = useState<string | null>(null); const [openSection, setOpenSection] = useState<string | null>(null);
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const [showWelcomeLetter, setShowWelcomeLetter] = useState( const [showWelcomeLetter, setShowWelcomeLetter] = useState(
!!location.state?.firstTime, !!location.state?.firstTime,
); );
const { drafts, kept, sent, vault, loading, isAuthRequired } = useLetters(); const { drafts, kept, sent, vault, loading, isAuthRequired } = useLetters();
if (!user) return null; if (!user) return null;
const toggleSection = (id: string) => const toggleSection = (id: string) =>
setOpenSection(openSection === id ? null : id); setOpenSection(openSection === id ? null : id);
return ( return (
<div className="min-h-screen w-full bg-base-100 text-base-content flex flex-col items-center py-12 px-5 pb-32 font-serif transition-colors"> <div className="min-h-screen w-full bg-base-100 text-base-content flex flex-col items-center py-12 px-5 pb-32 font-serif transition-colors">
<div className="fixed inset-0 bg-vig pointer-events-none z-0" /> <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
{showWelcomeLetter && ( {showWelcomeLetter && (
<WelcomeLetterOverlay <WelcomeLetterOverlay
userName={user.full_name} userName={user.full_name}
onComplete={() => { onComplete={() => {
setShowWelcomeLetter(false); setShowWelcomeLetter(false);
navigate(location.pathname, { replace: true, state: {} }); navigate(location.pathname, { replace: true, state: {} });
}} }}
/> />
)} )}
{isAuthRequired && <PasskeyModal />} {isAuthRequired && <PasskeyModal />}
<header className="text-center mb-12 z-10 animate-in fade-in slide-in-from-top-4 duration-500"> <header className="text-center mb-12 z-10 animate-in fade-in slide-in-from-top-4 duration-500">
<Logo type="logo" /> <Logo />
<div className="font-sans text-xs tracking-widester uppercase text-base-content/40 mt-2"> <div className="font-sans text-xs tracking-widester uppercase text-base-content/40 mt-2">
Personal Archive Personal Archive
</div>
<div className="mt-6 font-sans text-sm text-base-content flex items-center justify-center gap-2 opacity-60 hover:opacity-100 transition-opacity">
Welcome Back{" "}
<span className="font-semibold text-primary">{user.full_name}</span>
<button
type="button"
onClick={logout}
className="ml-3 cursor-pointer underline underline-offset-4 text-xs hover:text-primary transition-colors"
>
Sign Out
</button>
</div>
</header>
<div className="join join-vertical w-full max-w-120 bg-base-200 border border-base-content/10 shadow-2xl z-10 rounded-sm duration-500 delay-200 min-h-64 flex flex-col">
{loading ? (
<div className="flex-1 flex flex-col items-center justify-center p-12 gap-4">
<span className="loading loading-ring loading-lg text-primary opacity-20"></span>
<span data-testid="drawer-loading-state" className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse">
Opening your cabinet...
</span>
</div>
) : (
<>
<DrawerSection
id="drafts"
title="Drafts"
count={drafts.length}
subtext="unfinished whispers"
isOpen={openSection === "drafts"}
onClick={() => toggleSection("drafts")}
icon={<FileDashedIcon weight="thin" size={128} />}
>
{drafts.map((draft) => (
<LetterItem
id={draft.public_id}
status={draft.status}
key={draft.public_id}
preview={draft.metadata?.recipient || "Untitled Draft"}
timestamp={formatRelativeDate(draft.updated_at)}
/>
))}
</DrawerSection>
<DrawerSection
id="kept"
title="Kept"
count={kept.length}
subtext="private letters"
isOpen={openSection === "kept"}
onClick={() => toggleSection("kept")}
icon={<ArchiveIcon weight="thin" size={128} />}
>
{kept.map((letter) => (
<LetterItem
id={letter.public_id}
status={letter.status}
key={letter.public_id}
preview={letter.metadata?.recipient || "Someone dear..."}
timestamp={formatRelativeDate(letter.updated_at)}
/>
))}
</DrawerSection>
<DrawerSection
id="sent"
title="Sent"
count={sent.length}
subtext="shared truths"
isOpen={openSection === "sent"}
onClick={() => toggleSection("sent")}
icon={<PaperPlaneTiltIcon weight="thin" size={128} />}
>
{sent.map((letter) => (
<LetterItem
key={letter.public_id}
status={letter.status}
id={letter.public_id}
preview={letter.metadata?.recipient || "Someone dear..."}
timestamp={formatRelativeDate(letter.updated_at)}
/>
))}
</DrawerSection>
<DrawerSection
id="vault"
title="Vault"
count={vault.length}
subtext="things locked—not lost—in time"
isOpen={openSection === "vault"}
onClick={() => toggleSection("vault")}
icon={<VaultIcon weight="thin" size={128} />}
>
{vault.map((letter) => (
<LetterItem
key={letter.public_id}
status={letter.status}
id={letter.public_id}
preview={letter.metadata?.recipient || "Future Self"}
timestamp={formatRelativeDate(letter.updated_at)}
unlock_at={formatRelativeDateWithoutTime(
letter.unlock_at || "",
)}
isLocked={letter.unlock_at > new Date().toISOString()}
/>
))}
</DrawerSection>
</>
)}
</div>
<button
type="button"
id="write-letter-btn"
data-testid="write-letter-btn"
className="group mt-15 z-10 bg-transparent border border-dashed border-base-content/10 px-8 py-4 text-base-content/40 italic cursor-pointer transition-all hover:border-primary/40 hover:text-base-content/60 hover:bg-primary/5 hover:-translate-y-0.5 flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-primary/50 duration-500"
onClick={() => navigate(PATHS.write(""))}
>
<FeatherIcon
size={18}
weight="duotone"
className="text-primary/30 transition-all duration-300 group-hover:text-primary"
/>
Write something{" "}
<span className="relative inline-flex">
<span className="transition-opacity duration-500 opacity-80 group-hover:opacity-0">
. . . . . .
</span>
<span className="absolute inset-0 text-primary transition-opacity duration-300 opacity-0 group-hover:opacity-100">
unsaid
</span>
</span>
</button>
<footer className="mt-25 font-sans text-[0.6rem] tracking-widester uppercase text-base-content/10 z-10">
For your unsaid.
</footer>
{!showWelcomeLetter && (
<div className="absolute bottom-0 z-50 font-sans">
<Saajan
message={`Good to see you again, ${user.full_name}.\nWhat's on your mind today?`}
position="top"
/>
</div>
)}
</div> </div>
<div className="mt-6 font-sans text-sm text-base-content flex items-center justify-center gap-2 opacity-60 hover:opacity-100 transition-opacity"> );
Welcome Back{" "}
<span className="font-semibold text-primary">{user.full_name}</span>
<button
type="button"
onClick={logout}
className="ml-3 cursor-pointer underline underline-offset-4 text-xs hover:text-primary transition-colors"
>
Sign Out
</button>
</div>
</header>
<div className="join join-vertical w-full max-w-120 bg-base-200 border border-base-content/10 shadow-2xl z-10 rounded-sm duration-500 delay-200 min-h-64 flex flex-col">
{loading ? (
<div className="flex-1 flex flex-col items-center justify-center p-12 gap-4">
<span className="loading loading-ring loading-lg text-primary opacity-20"></span>
<span className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse">
Opening your cabinet...
</span>
</div>
) : (
<>
<DrawerSection
id="drafts"
title="Drafts"
count={drafts.length}
subtext="unfinished whispers"
isOpen={openSection === "drafts"}
onClick={() => toggleSection("drafts")}
icon={<FileDashedIcon weight="thin" size={128} />}
>
{drafts.map((draft) => (
<LetterItem
id={draft.public_id}
status={draft.status}
key={draft.public_id}
preview={draft.metadata?.recipient || "Untitled Draft"}
timestamp={formatRelativeDate(draft.updated_at)}
/>
))}
</DrawerSection>
<DrawerSection
id="kept"
title="Kept"
count={kept.length}
subtext="private letters"
isOpen={openSection === "kept"}
onClick={() => toggleSection("kept")}
icon={<ArchiveIcon weight="thin" size={128} />}
>
{kept.map((letter) => (
<LetterItem
id={letter.public_id}
status={letter.status}
key={letter.public_id}
preview={letter.metadata?.recipient || "Someone dear..."}
timestamp={formatRelativeDate(letter.updated_at)}
/>
))}
</DrawerSection>
<DrawerSection
id="sent"
title="Sent"
count={sent.length}
subtext="shared truths"
isOpen={openSection === "sent"}
onClick={() => toggleSection("sent")}
icon={<PaperPlaneTiltIcon weight="thin" size={128} />}
>
{sent.map((letter) => (
<LetterItem
key={letter.public_id}
status={letter.status}
id={letter.public_id}
preview={letter.metadata?.recipient || "Someone dear..."}
timestamp={formatRelativeDate(letter.updated_at)}
/>
))}
</DrawerSection>
<DrawerSection
id="vault"
title="Vault"
count={vault.length}
subtext="things locked—not lost—in time"
isOpen={openSection === "vault"}
onClick={() => toggleSection("vault")}
icon={<VaultIcon weight="thin" size={128} />}
>
{vault.map((letter) => (
<LetterItem
key={letter.public_id}
status={letter.status}
id={letter.public_id}
preview={letter.metadata?.recipient || "Future Self"}
timestamp={formatRelativeDate(letter.updated_at)}
unlock_at={formatRelativeDateWithoutTime(
letter.unlock_at || "",
)}
isLocked={letter.unlock_at > new Date().toISOString()}
/>
))}
</DrawerSection>
</>
)}
</div>
<button
type="button"
id="write-letter-btn"
data-testid="write-letter-btn"
className="group mt-15 z-10 bg-transparent border border-dashed border-base-content/10 px-8 py-4 text-base-content/40 italic cursor-pointer transition-all hover:border-primary/40 hover:text-base-content/60 hover:bg-primary/5 hover:-translate-y-0.5 flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-primary/50 duration-500"
onClick={() => navigate(PATHS.write(""))}
>
<FeatherIcon
size={18}
weight="duotone"
className="text-primary/30 transition-all duration-300 group-hover:text-primary"
/>
Write something{" "}
<span className="relative inline-flex">
<span className="transition-opacity duration-500 opacity-80 group-hover:opacity-0">
. . . . . .
</span>
<span className="absolute inset-0 text-primary transition-opacity duration-300 opacity-0 group-hover:opacity-100">
unsaid
</span>
</span>
</button>
<footer className="mt-25 font-sans text-xs tracking-widester uppercase text-base-content/10 z-10">
For your unsaid.
</footer>
{!showWelcomeLetter && (
<div className="absolute bottom-0 z-50 font-sans">
<Saajan
message={`Good to see you again, ${user.full_name}.\nWhat's on your mind today?`}
position="top"
/>
</div>
)}
</div>
);
} }
frontend/src/pages/Editor.test.tsx
+5 -13
View File
@@ -1,4 +1,4 @@
import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import { fireEvent, render, screen, waitForElementToBeRemoved } from "@testing-library/react";
import { HttpResponse, http } from "msw"; import { HttpResponse, http } from "msw";
import { MemoryRouter, Route, Routes } from "react-router-dom"; import { MemoryRouter, Route, Routes } from "react-router-dom";
import { beforeEach, describe, expect, it, vi } from "vitest"; import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -79,9 +79,7 @@ describe("Editor Page", () => {
); );
// Wait for initial load to complete // Wait for initial load to complete
await waitFor(() => { await waitForElementToBeRemoved(() => screen.queryByTestId("opening-draft-overlay"));
expect(screen.queryByText(/Opening your draft/i)).not.toBeInTheDocument();
});
const canvas = screen.getByTestId("canvas"); const canvas = screen.getByTestId("canvas");
expect(canvas.getAttribute("data-readonly")).toBe("false"); expect(canvas.getAttribute("data-readonly")).toBe("false");
@@ -107,9 +105,7 @@ describe("Editor Page", () => {
fireEvent.click(confirmVaultBtn); fireEvent.click(confirmVaultBtn);
// Wait for save to complete and check readOnly // Wait for save to complete and check readOnly
await waitFor(() => { expect(await screen.findByTestId("save-success-toast")).toBeInTheDocument();
expect(screen.getByText(/Your letter is saved/i)).toBeInTheDocument();
});
expect(canvas.getAttribute("data-readonly")).toBe("true"); expect(canvas.getAttribute("data-readonly")).toBe("true");
expect(screen.getByLabelText(/recipient/i)).toBeDisabled(); expect(screen.getByLabelText(/recipient/i)).toBeDisabled();
@@ -140,9 +136,7 @@ describe("Editor Page", () => {
</MemoryRouter>, </MemoryRouter>,
); );
await waitFor(() => { await waitForElementToBeRemoved(() => screen.queryByTestId("opening-draft-overlay"));
expect(screen.queryByText(/Opening your draft/i)).not.toBeInTheDocument();
});
const canvas = screen.getByTestId("canvas"); const canvas = screen.getByTestId("canvas");
@@ -156,9 +150,7 @@ describe("Editor Page", () => {
if (!secondarySealBtn) throw new Error("Secondary seal button not found"); if (!secondarySealBtn) throw new Error("Secondary seal button not found");
fireEvent.click(secondarySealBtn); fireEvent.click(secondarySealBtn);
await waitFor(() => { expect(await screen.findByTestId("save-success-toast")).toBeInTheDocument();
expect(screen.getByText(/Your letter is saved/i)).toBeInTheDocument();
});
expect(canvas.getAttribute("data-readonly")).toBe("true"); expect(canvas.getAttribute("data-readonly")).toBe("true");
expect(screen.getByLabelText(/recipient/i)).toBeDisabled(); expect(screen.getByLabelText(/recipient/i)).toBeDisabled();
frontend/src/pages/Login.test.tsx
+5 -4
View File
@@ -31,7 +31,7 @@ describe("Login Page", () => {
await userEvent.type(screen.getByLabelText(/password/i), "password123"); await userEvent.type(screen.getByLabelText(/password/i), "password123");
await userEvent.click(screen.getByRole("button", { name: /sign in/i })); await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
expect(await screen.findByText(/technical issues/i)).toBeInTheDocument(); expect(await screen.findByTestId("login-error-message")).toHaveTextContent(/technical issues/i);
}); });
it.each([ it.each([
@@ -73,8 +73,8 @@ describe("Login Page", () => {
> >
<Routes> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/login" element={<Login />} />
<Route path="/drawer" element={<div>Drawer</div>} /> <Route path="/drawer" element={<div data-testid="drawer-page">Drawer</div>} />
<Route path="/read/:publicId" element={<div>Reader</div>} /> <Route path="/read/:publicId" element={<div data-testid="reader-page">Reader</div>} />
</Routes> </Routes>
</MemoryRouter>, </MemoryRouter>,
); );
@@ -83,6 +83,7 @@ describe("Login Page", () => {
await userEvent.type(screen.getByLabelText(/password/i), "password123"); await userEvent.type(screen.getByLabelText(/password/i), "password123");
await userEvent.click(screen.getByRole("button", { name: /sign in/i })); await userEvent.click(screen.getByRole("button", { name: /sign in/i }));
expect(await screen.findByText(nextRoute)).toBeInTheDocument(); const expectedTestId = nextRoute.toLowerCase() === "drawer" ? "drawer-page" : "reader-page";
expect(await screen.findByTestId(expectedTestId)).toBeInTheDocument();
}); });
}); });
frontend/src/pages/Login.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export default function Login() {
{apiError && ( {apiError && (
<div className="alert alert-error text-xs py-2 rounded-md"> <div className="alert alert-error text-xs py-2 rounded-md">
<span>{apiError}</span> <span data-testid="login-error-message">{apiError}</span>
</div> </div>
)} )}
frontend/src/pages/Reader.test.tsx
+4 -6
View File
@@ -1,4 +1,4 @@
import { render, screen, waitFor } from "@testing-library/react"; import { render, screen } from "@testing-library/react";
import { HttpResponse, http } from "msw"; import { HttpResponse, http } from "msw";
import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom"; import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
import { beforeEach, describe, expect, it, vi } from "vitest"; import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -76,9 +76,7 @@ describe("Reader Page", () => {
</Routes> </Routes>
</MemoryRouter>, </MemoryRouter>,
); );
await waitFor(() => { expect(await screen.findByTestId("envelope-recipient")).toHaveTextContent(/Guest/i);
expect(screen.getByText(/Guest/i)).toBeInTheDocument();
});
}); });
it("should display an error message if the server request fails", async () => { it("should display an error message if the server request fails", async () => {
@@ -100,8 +98,8 @@ describe("Reader Page", () => {
); );
expect( expect(
await screen.findByText(/Failed to load letter/i), await screen.findByTestId("log-modal-message"),
).toBeInTheDocument(); ).toHaveTextContent(/Failed to load letter/i);
}); });
it("should navigate to the login page with redirect url when the letter has no sharing key and the user is not logged in", async () => { it("should navigate to the login page with redirect url when the letter has no sharing key and the user is not logged in", async () => {