mirror of
https://github.com/ramvignesh-b/pi-ku.git
synced 2026-05-04 19:10:52 +00:00
feat: iadd drawer and editor navigation, and introduce letter management hooks
This commit is contained in:
ramvignesh-b
@@ -0,0 +1,30 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { beforeEach, describe, expect, it } from "vitest";
|
||||
import { mockUser } from "../../test/fixtures/user.fixture";
|
||||
import { useAuthStore } from "../store/useAuthStore";
|
||||
import Drawer from "./Drawer";
|
||||
|
||||
describe("Drawer Page", () => {
|
||||
beforeEach(() => {
|
||||
// Setup authenticated state
|
||||
useAuthStore.setState({
|
||||
user: mockUser,
|
||||
accessToken: "fake-token",
|
||||
isInitializing: false,
|
||||
});
|
||||
});
|
||||
|
||||
it("renders the cabinet sections and empty state message", () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<Drawer />
|
||||
</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();
|
||||
});
|
||||
});
|
||||
+137
-12
@@ -1,28 +1,153 @@
|
||||
import { FeatherIcon } from "@phosphor-icons/react";
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Logo from "../components/Logo";
|
||||
import { DrawerSection } from "../components/ui/Drawer";
|
||||
import { LetterItem } from "../components/ui/LetterItem";
|
||||
import { ROUTES } from "../config/routes";
|
||||
import { useAuth } from "../hooks/useAuth";
|
||||
import { useLetters } from "../hooks/useLetters";
|
||||
|
||||
export default function Drawer() {
|
||||
const { user, logout } = useAuth();
|
||||
const [openSection, setOpenSection] = useState<string | null>("kept");
|
||||
const navigate = useNavigate();
|
||||
const { drafts, kept, sent, vault, loading } = useLetters();
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className="glass-card w-full max-w-sm p-8 text-center flex flex-col gap-6 fade-zoom">
|
||||
<div className="space-y-2">
|
||||
<h1 className="font-display text-2xl font-bold text-primary">
|
||||
Your Drawer
|
||||
</h1>
|
||||
<p className="text-sm opacity-70">Welcome back, {user.full_name}</p>
|
||||
</div>
|
||||
const toggleSection = (id: string) =>
|
||||
setOpenSection(openSection === id ? null : id);
|
||||
|
||||
<div className="divider opacity-10" />
|
||||
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="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
|
||||
|
||||
<header className="text-center mb-12 z-10 animate-in fade-in slide-in-from-top-4 duration-1000">
|
||||
<Logo />
|
||||
<div className="font-sans text-xs tracking-[0.3em] uppercase text-base-content/40 mt-2">
|
||||
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 overflow-hidden animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-200 fill-mode-backwards 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-[10px] uppercase tracking-[0.3em] font-sans text-base-content/20 animate-pulse">
|
||||
Opening your cabinet...
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<DrawerSection
|
||||
id="drafts"
|
||||
title="Drafts"
|
||||
count={`${drafts.length} unfinished whispers`}
|
||||
isOpen={openSection === "drafts"}
|
||||
onClick={() => toggleSection("drafts")}
|
||||
>
|
||||
{drafts.map((draft) => (
|
||||
<LetterItem
|
||||
id={draft.public_id}
|
||||
status={draft.status}
|
||||
key={draft.public_id}
|
||||
preview={draft.metadata?.recipient || "Untitled Draft"}
|
||||
timestamp={draft.updated_at}
|
||||
/>
|
||||
))}
|
||||
</DrawerSection>
|
||||
|
||||
<DrawerSection
|
||||
id="kept"
|
||||
title="Kept"
|
||||
count={`${kept.length} private letters`}
|
||||
isOpen={openSection === "kept"}
|
||||
onClick={() => toggleSection("kept")}
|
||||
>
|
||||
{kept.map((letter) => (
|
||||
<LetterItem
|
||||
id={letter.public_id}
|
||||
status={letter.status}
|
||||
key={letter.public_id}
|
||||
preview={letter.metadata?.recipient || "Someone dear..."}
|
||||
timestamp={letter.updated_at}
|
||||
/>
|
||||
))}
|
||||
</DrawerSection>
|
||||
<DrawerSection
|
||||
id="sent"
|
||||
title="Sent"
|
||||
count={`${sent.length} shared truths`}
|
||||
isOpen={openSection === "sent"}
|
||||
onClick={() => toggleSection("sent")}
|
||||
>
|
||||
{sent.map((letter) => (
|
||||
<LetterItem
|
||||
key={letter.public_id}
|
||||
status={letter.status}
|
||||
id={letter.public_id}
|
||||
preview={letter.metadata?.recipient || "Someone dear..."}
|
||||
timestamp={letter.updated_at}
|
||||
/>
|
||||
))}
|
||||
</DrawerSection>
|
||||
<DrawerSection
|
||||
id="vault"
|
||||
title="Vault"
|
||||
count={`${vault.length} things locked;not lost;in time`}
|
||||
isOpen={openSection === "vault"}
|
||||
onClick={() => toggleSection("vault")}
|
||||
>
|
||||
{vault.map((letter) => (
|
||||
<LetterItem
|
||||
key={letter.public_id}
|
||||
status={letter.status}
|
||||
id={letter.public_id}
|
||||
preview={letter.metadata?.recipient || "Future Self"}
|
||||
timestamp={letter.updated_at}
|
||||
/>
|
||||
))}
|
||||
</DrawerSection>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={logout}
|
||||
className="btn btn-link btn-xs opacity-40 hover:opacity-100 no-underline transition-all"
|
||||
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-1000"
|
||||
onClick={() => navigate(ROUTES.WRITE(""), { replace: true })}
|
||||
>
|
||||
Sign Out
|
||||
<FeatherIcon
|
||||
size={18}
|
||||
weight="duotone"
|
||||
className="text-primary/30 transition-all duration-700 group-hover:text-primary"
|
||||
/>
|
||||
Write something{" "}
|
||||
<span className="relative inline-flex">
|
||||
<span className="transition-opacity duration-1500 opacity-80 group-hover:opacity-0">
|
||||
. . . . . .
|
||||
</span>
|
||||
<span className="absolute inset-0 text-primary transition-opacity duration-1000 opacity-0 group-hover:opacity-100">
|
||||
unsaid
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<footer className="mt-25 font-sans text-[0.6rem] tracking-[0.2em] uppercase text-base-content/10 z-10">
|
||||
Kept. Unsent.
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+173
-58
@@ -2,9 +2,10 @@ import {
|
||||
DownloadSimpleIcon,
|
||||
ImageIcon,
|
||||
LockIcon,
|
||||
SpinnerGapIcon,
|
||||
TrayIcon,
|
||||
} from "@phosphor-icons/react";
|
||||
import { useRef, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { api } from "../api/apiClient";
|
||||
import {
|
||||
@@ -17,20 +18,116 @@ import { ROUTES } from "../config/routes";
|
||||
import { useKeyStore } from "../store/useKeyStore";
|
||||
import { CryptoUtils } from "../utils/crypto";
|
||||
|
||||
// convert blob url to file
|
||||
async function blobUrlToFile(
|
||||
blobUrl: string,
|
||||
fileName: string,
|
||||
mimeType?: string,
|
||||
): Promise<File> {
|
||||
const response = await fetch(blobUrl);
|
||||
const blob = await response.blob();
|
||||
return new File([blob], fileName, { type: mimeType ?? blob.type });
|
||||
}
|
||||
|
||||
export default function Editor() {
|
||||
const navigate = useNavigate();
|
||||
// check for existing letter
|
||||
const { public_id } = useParams();
|
||||
const letterIdRef = useRef<string>(public_id ?? "");
|
||||
|
||||
const [isInitialLoading, setIsInitialLoading] = useState(false);
|
||||
const [isSealing, setIsSealing] = useState(false);
|
||||
const [isSaveSuccess, setIsSaveSuccess] = useState(false);
|
||||
|
||||
const [recipient, setRecipient] = useState("");
|
||||
const masterKey = useKeyStore.getState().masterKey;
|
||||
const { masterKey } = useKeyStore();
|
||||
|
||||
const canvasRef = useRef<CanvasTools>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Initial load: Fetch and decrypt existing letter
|
||||
useEffect(() => {
|
||||
if (!public_id || !masterKey) return;
|
||||
|
||||
const loadExistingLetter = async () => {
|
||||
setIsInitialLoading(true);
|
||||
const cryptoUtils = new CryptoUtils();
|
||||
try {
|
||||
const res = await api.get(`${endpoints.LETTERS}${public_id}/`);
|
||||
const letterData = res.data;
|
||||
|
||||
// metadata for recipient
|
||||
const metadata = await cryptoUtils.decryptMetadata(
|
||||
{
|
||||
encrypted_content: letterData.encrypted_metadata,
|
||||
encrypted_dek: letterData.encrypted_dek,
|
||||
},
|
||||
masterKey,
|
||||
);
|
||||
setRecipient(metadata.recipient || "");
|
||||
|
||||
// decrypt canvas data
|
||||
const decryptedJsonStr = await cryptoUtils.decryptLetter(
|
||||
{
|
||||
encrypted_content: letterData.encrypted_content,
|
||||
encrypted_dek: letterData.encrypted_dek,
|
||||
},
|
||||
masterKey,
|
||||
);
|
||||
const canvasData = JSON.parse(decryptedJsonStr);
|
||||
|
||||
// traverse through canvas images and replace encrypted image with decrypted image
|
||||
if (canvasData.objects) {
|
||||
for (const obj of canvasData.objects) {
|
||||
if (obj.type === "Image" && typeof obj.src === "string") {
|
||||
const filename = obj.src;
|
||||
const remoteImage = letterData.images.find(
|
||||
(img: any) => img.file_name === filename,
|
||||
);
|
||||
|
||||
if (remoteImage) {
|
||||
try {
|
||||
// fetch encrypted image blob using authenticated API
|
||||
const imageRes = await api.get(remoteImage.file, {
|
||||
responseType: "blob",
|
||||
});
|
||||
const encryptedBlob = imageRes.data;
|
||||
|
||||
// decrypt image blob
|
||||
const blobUrl = await cryptoUtils.decryptImage(
|
||||
encryptedBlob,
|
||||
letterData.encrypted_dek,
|
||||
masterKey,
|
||||
);
|
||||
obj.src = blobUrl;
|
||||
obj._customRawFile = await blobUrlToFile(blobUrl, filename);
|
||||
console.log("Decrypted image object:", obj);
|
||||
} catch (imgErr) {
|
||||
console.error(
|
||||
"Failed to decrypt image object:",
|
||||
filename,
|
||||
imgErr,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// load updated data into canvas
|
||||
requestAnimationFrame(() => {
|
||||
canvasRef.current?.loadData(canvasData);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Failed to load existing letter:", err);
|
||||
} finally {
|
||||
setIsInitialLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadExistingLetter();
|
||||
}, [public_id, masterKey]);
|
||||
|
||||
// --------------------------------------------------------------------------------------
|
||||
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]; // pick one file at a time
|
||||
if (file) {
|
||||
@@ -39,11 +136,13 @@ export default function Editor() {
|
||||
}
|
||||
};
|
||||
|
||||
async function handleSeal(): Promise<void> {
|
||||
if (!public_id) {
|
||||
const handleSave = async (status: "SEALED" | "DRAFT"): Promise<void> => {
|
||||
if (!public_id && !letterIdRef.current) {
|
||||
// if no uuid slug, then generate a new one and update params
|
||||
letterIdRef.current = crypto.randomUUID();
|
||||
navigate(ROUTES.WRITE(letterIdRef.current), { replace: true });
|
||||
} else if (public_id) {
|
||||
letterIdRef.current = public_id;
|
||||
}
|
||||
|
||||
if (isSealing) return;
|
||||
@@ -60,27 +159,32 @@ export default function Editor() {
|
||||
}
|
||||
|
||||
for (const image of images) {
|
||||
const encrypted_image = await cryptoUtils.encryptImage(
|
||||
image.file,
|
||||
masterKey,
|
||||
);
|
||||
imageEncMap.set(image.src, encrypted_image.filename);
|
||||
encImageFilesMap.set(
|
||||
encrypted_image.filename,
|
||||
encrypted_image.encryptedBlob,
|
||||
);
|
||||
if (image.src.endsWith(".bin")) continue;
|
||||
try {
|
||||
const encrypted_image = await cryptoUtils.encryptImage(
|
||||
image.file,
|
||||
masterKey,
|
||||
);
|
||||
imageEncMap.set(image.src, encrypted_image.filename);
|
||||
encImageFilesMap.set(
|
||||
encrypted_image.filename,
|
||||
encrypted_image.encryptedBlob,
|
||||
);
|
||||
} catch (err) {
|
||||
console.error("Failed to re-encrypt image:", err);
|
||||
}
|
||||
}
|
||||
|
||||
// replace image src with encrypted image filename
|
||||
const canvasData = canvasRef.current?.getData();
|
||||
canvasData?.objects?.map(
|
||||
(
|
||||
obj: Record<string, unknown>, // fabric is too quirky for any other type
|
||||
) =>
|
||||
obj.type === "Image"
|
||||
? { ...obj, src: imageEncMap.get(obj.src as string) }
|
||||
: obj,
|
||||
);
|
||||
if (canvasData?.objects) {
|
||||
canvasData.objects = canvasData.objects.map((obj: any) => {
|
||||
if (obj.type === "Image" && imageEncMap.has(obj.src)) {
|
||||
return { ...obj, src: imageEncMap.get(obj.src) };
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
}
|
||||
|
||||
const encrypted_letter = await cryptoUtils.encryptLetter(
|
||||
JSON.stringify(canvasData),
|
||||
@@ -88,25 +192,14 @@ export default function Editor() {
|
||||
);
|
||||
|
||||
const encrypted_metadata = await cryptoUtils.encryptMetadata(
|
||||
{ recipient },
|
||||
{ recipient, tags: [] },
|
||||
masterKey,
|
||||
);
|
||||
|
||||
// upload to server
|
||||
/*
|
||||
payload = {
|
||||
"type": "SENT",
|
||||
"status": "SEALED",
|
||||
"encrypted_content": "enc_content==",
|
||||
"encrypted_metadata": "enc_metadata==",
|
||||
"encrypted_dek": "enc_dek==",
|
||||
"image_files": [image1, image2],
|
||||
}
|
||||
*/
|
||||
const formData = new FormData();
|
||||
formData.append("public_id", letterIdRef.current);
|
||||
formData.append("type", "SENT");
|
||||
formData.append("status", "SEALED");
|
||||
formData.append("type", "KEPT");
|
||||
formData.append("status", status);
|
||||
formData.append("encrypted_content", encrypted_letter.encrypted_content);
|
||||
formData.append("encrypted_dek", encrypted_letter.encrypted_dek);
|
||||
formData.append("encrypted_metadata", encrypted_metadata.encrypted_content);
|
||||
@@ -125,30 +218,51 @@ export default function Editor() {
|
||||
} finally {
|
||||
setIsSealing(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="flex-1 overflow-y-auto scrollbar-hide px-2 py-12 bg-base-300">
|
||||
{isSaveSuccess && (
|
||||
<div className="modal modal-open bg-transparent backdrop-blur-md transition-all duration-300 ease-in-out">
|
||||
<div className="modal-box bg-transparent">
|
||||
<div className="alert alert-success">
|
||||
<DownloadSimpleIcon size={18} weight="bold" />
|
||||
<h3 className="font-bold text-lg">Your letter is sealed!</h3>
|
||||
</div>
|
||||
{/* <div className="modal-action">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setIsSaveSuccess(false)}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div> */}
|
||||
<section className="flex-1 overflow-y-auto scrollbar-hide px-2 py-12 bg-base-300 relative">
|
||||
{isInitialLoading && (
|
||||
<div className="absolute inset-0 z-50 flex items-center justify-center bg-base-300/80 backdrop-blur-sm">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<SpinnerGapIcon
|
||||
size={48}
|
||||
weight="bold"
|
||||
className="animate-spin text-primary"
|
||||
/>
|
||||
<p className="text-[10px] uppercase tracking-[0.4em] font-bold text-base-content/40">
|
||||
Opening your draft...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="max-w-[720px] mx-auto px-1 md:px-0">
|
||||
{isSaveSuccess && (
|
||||
<div
|
||||
className="modal modal-open bg-base-100 backdrop-blur-md transition-all duration-2000 ease-in-out
|
||||
animate-fade-in opacity-80"
|
||||
>
|
||||
<div className="alert alert-success opacity-90">
|
||||
<DownloadSimpleIcon size={18} weight="bold" />
|
||||
<h3 className="font-bold text-lg text-success-content">
|
||||
Your letter is saved!
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isSealing && (
|
||||
<div
|
||||
className="modal modal-open bg-base-100 backdrop-blur-md transition-all duration-2000 ease-in-out
|
||||
animate-fade-in opacity-80"
|
||||
>
|
||||
<div className="alert alert-neutral">
|
||||
<SpinnerGapIcon size={18} weight="bold" className="animate-spin" />
|
||||
<h3 className="font-bold text-neutral-content text-lg animate-pulse">
|
||||
Securing your letter...
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="max-w-180 mx-auto px-1 md:px-0">
|
||||
<div className="flex justify-between items-end mb-16 border-b border-base-content/5 pb-8 px-0">
|
||||
<div className="flex flex-col gap-2 flex-1">
|
||||
<label
|
||||
@@ -194,10 +308,11 @@ export default function Editor() {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm text-[10px] tracking-[0.2em] uppercase font-bold text-base-content/60 hover:text-base-content"
|
||||
title="Keep in your private drawer"
|
||||
title="Store in your private drawer"
|
||||
onClick={() => handleSave("DRAFT")}
|
||||
>
|
||||
<TrayIcon size={18} weight="bold" />
|
||||
<span className="hidden md:inline">Keep</span>
|
||||
<span className="hidden md:inline">Store</span>
|
||||
</button>
|
||||
|
||||
<div className="w-px h-4 bg-base-content/10 mx-2" />
|
||||
@@ -205,7 +320,7 @@ export default function Editor() {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm rounded-full px-6"
|
||||
onClick={handleSeal}
|
||||
onClick={() => handleSave("SEALED")}
|
||||
>
|
||||
<LockIcon size={14} weight="fill" className="mr-1" />
|
||||
Seal
|
||||
|
||||
@@ -47,10 +47,10 @@ export default function Login() {
|
||||
navigate(ROUTES.DRAWER);
|
||||
} catch (err) {
|
||||
console.error("Login error:", err);
|
||||
let message = "Invalid email or password";
|
||||
if (axios.isAxiosError(err)) {
|
||||
message =
|
||||
err.response?.data?.detail || err.response?.data?.message || message;
|
||||
let message =
|
||||
"Sorry, we're experiencing technical issues.\nPlease try again later.";
|
||||
if (axios.isAxiosError(err) && err.response?.status !== 500) {
|
||||
message = err.response?.data?.detail || err.response?.data?.message;
|
||||
}
|
||||
setApiError(message);
|
||||
} finally {
|
||||
@@ -90,6 +90,7 @@ export default function Login() {
|
||||
<div className="card-actions mt-4">
|
||||
<button
|
||||
type="submit"
|
||||
name="login"
|
||||
disabled={isLoading}
|
||||
aria-label="Sign In"
|
||||
className="btn btn-primary w-full shadow-lg"
|
||||
@@ -106,6 +107,7 @@ export default function Login() {
|
||||
Don't have an account?{" "}
|
||||
<button
|
||||
type="button"
|
||||
name="register"
|
||||
onClick={() => navigate(ROUTES.ONBOARD)}
|
||||
className="link link-primary no-underline hover:underline font-bold"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user