ci: unset email host creds for local testing

backend/config/settings.py

@@ -25,12 +25,9 @@ env_file = os.environ.get("PIKU_ENV_FILE", os.path.join(BASE_DIR.parent, ".env")
 if os.path.exists(env_file):
     environ.Env.read_env(env_file, overwrite=False)
 
-# Security Settings
 ALLOWED_HOSTS = env.list("ALLOWED_HOSTS", default=["127.0.0.1"])
 ALLOWED_HOSTS.append(env("FRONTEND_DOMAIN", default="127.0.0.1"))
 ALLOWED_HOSTS.append(env("BACKEND_DOMAIN", default="127.0.0.1"))
-# NOTE: Set to forward https when using reverse proxy
-SECURE_PROXY_SSL_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")
 
 CSRF_TRUSTED_ORIGINS = env.list("CSRF_TRUSTED_ORIGINS", default=[])
 
@@ -84,21 +81,6 @@ MIDDLEWARE = [
     "django_structlog.middlewares.RequestMiddleware",
 ]
 
-TEMPLATES = [
-    {
-        "BACKEND": "django.template.backends.django.DjangoTemplates",
-        "DIRS": [os.path.join(BASE_DIR, "templates")],
-        "APP_DIRS": True,
-        "OPTIONS": {
-            "context_processors": [
-                "django.template.context_processors.debug",
-                "django.template.context_processors.request",
-                "django.contrib.auth.context_processors.auth",
-                "django.contrib.messages.context_processors.messages",
-            ],
-        },
-    },
-]
 
 ROOT_URLCONF = "config.urls"
 

backend/letters/tasks.py

@@ -3,10 +3,8 @@ from datetime import UTC, datetime
 import structlog
 from apscheduler.schedulers.background import BackgroundScheduler
 from django.core.mail import send_mail
-from django.template.loader import render_to_string
 
 from config import settings
-from config.settings import FRONTEND_URLS
 from letters.models import Letter
 
 logger = structlog.get_logger(__name__)
@@ -25,26 +23,9 @@ def notify_unlocked_letter(letter):
     """
     author = letter.user.get_username()
     try:
-        letter_link = f"{FRONTEND_URLS[0]}/read/{letter.public_id}"
+        send_mail(subject="", message="", from_email=settings.FROM_EMAIL, recipient_list=[author], fail_silently=False)
-        subject = "A letter. Written for this exact moment."
-        context = {
-            "pen_name": letter.user.first_name,
-            "cta": {"title": "View what you wrote", "link": letter_link},
-            "footnote": True,
-        }
-        plaint_content = render_to_string("email/vault_unlock.txt", context=context)
-        html_content = render_to_string("email/vault_unlock.html", context=context)
-        send_mail(
-            subject=subject,
-            message=plaint_content,
-            from_email=settings.FROM_EMAIL,
-            recipient_list=[author],
-            fail_silently=False,
-            html_message=html_content,
-        )
         letter.notified_at = datetime.now(UTC)
         letter.save()
-        logger.info(f"Successfully notified {author} of unlocked letter")
     except Exception:
         logger.exception(f"Failed to notify {author} of unlocked letter")
 

backend/letters/tests.py

@@ -396,7 +396,6 @@ class LetterTaskTest(TestCase):
                 from_email=settings.FROM_EMAIL,
                 recipient_list=[self.user.email],
                 fail_silently=False,
-                html_message=ANY,
             )
             self.assertIsNotNone(letter_to_notify1.notified_at)
 

backend/templates/email/activation.html

@@ -1,22 +0,0 @@
-{% extends 'email/base.html' %}
-
-{% block content %}
-    <div style="padding: 15px; font-style: italic">
-        <p>{{ pen_name }},</p>
-        <p>
-            Your destination is one train away.
-        </p>
-        <p>I've been keeping a place for your words.<br/>
-            Come when you're ready.</p>
-    </div>
-{% endblock %}
-
-{% block footnote %}
-    This link expires in 24 hours.<br/>
-    I'm patient, but not endlessly so.
-{% endblock %}
-
-{% block footer %}
-    Didn't write to me? Then someone else did.<br/>
-    Ignore this. I'll forget you were ever here.
-{% endblock %}

backend/templates/email/activation.txt

@@ -1,21 +0,0 @@
-pi. ku.
--------------------------------------------
-
-{{pen_name}},
-
-Your destination is one train away.
-
-I've been keeping a place for your words.
-Come when you're ready.
-
-{{ cta.title }} -> {{ cta.link }}
-
--------------------------------------------
-
-This link expires in 24 hours.
-I'm patient, but not endlessly so.
-
--------------------------------------------
-
-Didn't write to me? Then someone else did.
-Ignore this. I'll forget you were ever here.

backend/templates/email/base.html

@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>pi. ku.</title>
-</head>
-<body style="margin:0; padding:0; background-color:#1a1712;">
-
-<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
-       style="background-color:#1a1712;">
-    <tr>
-        <td align="center" style="padding: 48px 16px;">
-            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
-                   style="max-width:480px; width:100%;">
-
-                {# Logo #}
-                <tr>
-                    <td align="left" style="padding-bottom: 36px;">
-                        <img src="https://cdn.jsdelivr.net/gh/ramvignesh-b/cdn@main/pi-ku_logo.png" width="100"
-                             height="50" alt="Pi.Ku"
-                             style="display:block;">
-                    </td>
-                </tr>
-
-                {# Body #}
-                <tr>
-                    <td style="font-family: Lora, Georgia, serif;
-                           font-size: 16px;
-                           line-height: 1.9;
-                           color: #cdccca;
-                           font-style: italic;
-                           padding-bottom: 32px;">
-                        {% block content %}
-                        {% endblock %}
-                    </td>
-                </tr>
-
-                {# CTA #}
-                {% if cta %}
-                    <tr>
-                        <td align="left" style="padding-bottom: 32px;">
-                            <table role="presentation" cellpadding="0" cellspacing="0" border="0">
-                                <tr>
-                                    <td style="background-color: #301e19; border-radius: 3px;">
-                                        <a href='{{ cta.link }}'
-                                           style="display: inline-block;
-                                  padding: 12px 28px;
-                                  font-family: Georgia, serif;
-                                  font-size: 14px;
-                                  color: #f5e6c8;
-                                  text-decoration: none;
-                                  letter-spacing: 0.04em;">
-                                            {{ cta.title }}
-                                        </a>
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                {% endif %}
-
-                {% if footnote %}
-                    <tr>
-                        <td style="font-family: Lora, Georgia, serif;
-                           font-size: 13px;
-                           font-style: italic;
-                           color: #7a7974;
-                           padding-bottom: 40px;
-                           line-height: 1.8;">
-                            {% block footnote %}
-                            {% endblock %}
-                        </td>
-                    </tr>
-                {% endif %}
-
-                {# Footer #}
-                <tr>
-                    <td style="border-top: 1px solid #2e2c29; padding-bottom: 24px; font-size: 0;">&nbsp;</td>
-                </tr>
-                <tr>
-                    <td style="font-family: Lora, serif;
-                           font-size: 13px;
-                           font-style: italic;
-                           color: #5a5957;
-                           line-height: 1.8;">
-                        {% block footer %}
-                        {% endblock %}
-                    </td>
-                </tr>
-
-            </table>
-        </td>
-    </tr>
-</table>
-
-</body>
-</html>

backend/templates/email/vault_unlock.html

@@ -1,20 +0,0 @@
-{% extends 'email/base.html' %}
-
-{% block content %}
-    <p>
-        Time has a way of making things clearer.<br/>
-        Or heavier. Sometimes both.
-    </p>
-    <p>
-        You had something to say at this exact moment.<br/>
-        I kept it exactly as you left it. <br/>
-        Not a word changed. Not a word read.
-    </p>
-{% endblock %}
-
-{% block footnote %}
-    <p>
-        You're ready now. Or maybe you're still not.<br/>
-        Open it anyway. You won't regret it.
-    </p>
-{% endblock %}

backend/templates/email/vault_unlock.txt

@@ -1,17 +0,0 @@
-pi. ku.
--------------------------------------------
-
-{{pen_name}},
-
-Time has a way of making things clearer.
-Or heavier. Sometimes both.
-
-You had something to say at this exact moment.
-I kept it exactly as you left it.
-Not a word changed. Not a word read.
-
-{{ cta.title }} -> {{ cta.link }}
-
--------------------------------------------
-You're ready now. Or maybe you're still not.
-Open it anyway. You won't regret it.

backend/users/utils.py

@@ -1,7 +1,6 @@
 from django.conf import settings
 from django.contrib.auth.tokens import default_token_generator
 from django.core.mail import send_mail
-from django.template.loader import render_to_string
 from django.utils.encoding import force_bytes
 from django.utils.http import urlsafe_base64_encode
 
@@ -10,25 +9,16 @@ def send_activation_email(user):
     token = default_token_generator.make_token(user)
     uid = urlsafe_base64_encode(force_bytes(user.public_id))
     activation_url = f"{settings.FRONTEND_URLS[0]}/activate/{uid}/{token}"
-    subject = "Activate your pi. ku. account"
+    subject = "Activate Your Piku Account"
-    context = {
+    message = f"""Hi {user.full_name},
-        "pen_name": user.full_name,
+
-        "footnote": True,
+        Welcome to Pi Ku.
-        "cta": {
+
-            "title": "Onboard",
+        Please click the link below to activate your account:
-            "link": activation_url,
+        >> {activation_url}
-        },
+
-    }
+        If you did not create this account, please ignore this email."""
-    html_content = render_to_string("email/activation.html", context)
+    send_mail(subject, message, settings.FROM_EMAIL, [user.email], fail_silently=False)
-    plain_content = render_to_string("email/activation.txt", context)
-    send_mail(
-        subject=subject,
-        message=plain_content,
-        from_email=settings.FROM_EMAIL,
-        recipient_list=[user.email],
-        fail_silently=False,
-        html_message=html_content,
-    )
     return True
 
 

frontend/Dockerfile

@@ -4,8 +4,15 @@ COPY package.json bun.lock* ./
 RUN bun install --frozen-lockfile
 COPY . .
 
+ARG BACKEND_DOMAIN
+ARG BACKEND_PORT
+ARG SSL_ENABLED
 ARG VITE_API_URL
 
+ENV BACKEND_DOMAIN=$BACKEND_DOMAIN
+ENV BACKEND_PORT=$BACKEND_PORT
+ENV SSL_ENABLED=$SSL_ENABLED
+
 ENV VITE_API_URL=$VITE_API_URL
 
 RUN bun run build:prod
@@ -22,4 +29,4 @@ RUN chown -R nginx:nginx /usr/share/nginx/html
 USER nginx
 
 EXPOSE 8080
-ENTRYPOINT ["nginx", "-e", "/tmp/error.log", "-g", "daemon off;"]
+ENTRYPOINT ["nginx", "-e", "/tmp/error.log", "-g", "daemon off;"]

frontend/e2e/letter.spec.ts

@@ -185,7 +185,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
     await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
       timeout: 10000,
     });
-    await page.getByRole("button", { name: /keep it to myself/i }).click();
+    await page.getByRole("button", { name: /keep it/i }).click();
 
     // Open "Kept" section - search for the section with id='kept' and click its toggle button
     logger.info(">> [Drawer] Opening Kept section...");

frontend/e2e/utils/auth.ts

@@ -14,13 +14,13 @@ const logger = pino({
 /**
  * Completes the full registration -> activation -> login cycle.
  */
-async function registerAndLogin(
+export async function registerAndLogin(
   page: Page,
   email: string,
   fullName: string,
   password: string,
 ) {
-  // Register the User
+  // 1. Registration
   logger.info(`[Auth] Registering user: ${email}`);
   await page.goto("/onboard");
   await page.getByLabel(/pen name/i).fill(fullName);
@@ -31,7 +31,7 @@ async function registerAndLogin(
 
   await expect(page).toHaveURL(/\/verify-email/);
 
-  // Get activation URL from Mailpit and activate user
+  // 2. Activation via Mailpit
   logger.info(`[Auth] Polling Mailpit for activation email...`);
   const activationLink = await MailpitHelper.getActivationLink(email);
 
@@ -40,11 +40,11 @@ async function registerAndLogin(
   await expect(page.getByText(/account activated/i)).toBeVisible();
   await page.getByRole("button", { name: /start writing/i }).click();
 
-  // Dismiss the Welcom Modal and Perform Login
+  // 3. Login
   logger.info(`[Auth] Logging in...`);
   await expect(page).toHaveURL(/\/login/);
 
-  const welcomeButton = page.getByRole("button", { name: /I'll remember/i });
+  const welcomeButton = page.getByRole("button", { name: /i understand/i });
   await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
   await welcomeButton.click();
   await expect(welcomeButton).toBeHidden();
@@ -56,4 +56,6 @@ async function registerAndLogin(
   await expect(page).toHaveURL(/\/drawer/);
   logger.info(`[Auth] Successfully authenticated ${email}`);
 }
+
+// Maintain backward compatibility if needed, or update callers
 export const AuthHelper = { registerAndLogin };

frontend/e2e/utils/mailpit.ts

@@ -31,8 +31,8 @@ export const MailpitHelper = {
           );
           const details = await detailRes.json();
 
-          const body = details.Text || "";
+          const body = details.HTML || details.Text || "";
-          const match = body.match(/https?:\/\/\S*activate\S*/);
+          const match = body.match(/https?:\/\/\S+activate\/\S+/);
 
           if (match) return match[0];
         }

frontend/src/App.tsx

@@ -31,7 +31,7 @@ export default function App() {
 
   return (
     <BrowserRouter>
-      <main className="relative min-h-screen min-w-screen flex items-center justify-center w-full bg-base-200 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')]">
+      <main className="min-h-screen bg-base-200 flex items-center justify-center w-full">
         <Suspense fallback={<SplashScreen />}>
           <Routes>
             <Route path={ROUTES.HOME} element={<Home />} />

frontend/src/components/Logo.tsx

@@ -1,7 +1,7 @@
 import { DotIcon } from "@phosphor-icons/react";
 import "@fontsource/knewave/400.css";
 
-export default function Logo({ scale = 1 }) {
+export default function Logo({ scale = 2 }) {
   return (
     <div
       role="img"
@@ -9,16 +9,16 @@ export default function Logo({ scale = 1 }) {
       className="inline-flex items-baseline justify-center leading-none select-none"
       style={{ fontFamily: "'Knewave', serif", scale }}
     >
-      <span className={`text-3xl font-light text-accent`}>Pi</span>
+      <span className={`text-xl font-light text-accent`}>&nbsp;Pi</span>
       <DotIcon
         weight="fill"
-        size={12}
+        size={6}
         className={`text-primary translate-y-1 -mx-px`}
       />
-      <span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span>
+      <span className={`text-xl font-light text-accent`}>&nbsp;Ku</span>
       <DotIcon
         weight="fill"
-        size={12}
+        size={6}
         className={`text-primary translate-y-1 -mx-px`}
       />
     </div>

frontend/src/components/drawer/LetterItem.tsx

@@ -2,15 +2,6 @@ import { LockIcon, LockKeyOpenIcon } from "@phosphor-icons/react";
 import { useNavigate } from "react-router-dom";
 import { PATHS } from "../../config/routes";
 
-interface LetterItemProps {
-  preview: string;
-  timestamp: string;
-  id: string;
-  status: "DRAFT" | "SEALED" | "BURNED";
-  unlock_at?: string;
-  isLocked?: boolean;
-}
-
 export function LetterItem({
   preview,
   timestamp,
@@ -18,7 +9,14 @@ export function LetterItem({
   status,
   unlock_at,
   isLocked = false,
-}: LetterItemProps) {
+}: {
+  preview: string;
+  timestamp: string;
+  id: string;
+  status: "DRAFT" | "SEALED" | "BURNED";
+  unlock_at?: string;
+  isLocked?: boolean;
+}) {
   const navigate = useNavigate();
   function handleNavigate(): void {
     if (isLocked) return;

frontend/src/components/editor/PostSealModal.tsx

@@ -5,13 +5,11 @@ import { PATHS, ROUTES } from "../../config/routes";
 interface PostSealModalProps {
   sealedTargetId: string | null;
   navigate: NavigateFunction;
-  type: "KEPT" | "VAULT";
 }
 
 export function PostSealModal({
   sealedTargetId,
   navigate,
-  type = "KEPT",
 }: PostSealModalProps) {
   if (!sealedTargetId) return null;
   return (
@@ -22,61 +20,33 @@ export function PostSealModal({
         <p className="text-base-content/60">
           It's encrypted and always safe in your drawer.
         </p>
-        {type === "KEPT" ? (
+        <p className="text-base-content font-sans">
-          <p className="text-base-content/80 text-sm font-sans">
+          When you're ready,
-            When you're ready,
+          <br />
-            <br />
+          you can{" "}
-            you can{" "}
+          <span className="text-primary font-bold font-display">read</span> it,{" "}
-            <span className="text-primary font-bold font-display">read</span>{" "}
+          <span className="text-accent font-bold font-display">send</span> it to
-            it, <span className="text-accent font-bold font-display">send</span>{" "}
+          someone, or{" "}
-            it to someone, or{" "}
+          <span className="text-error font-bold font-display">burn</span> it to
-            <span className="text-error font-bold font-display">burn</span> it
+          release
-            to release
+        </p>
-          </p>
-        ) : (
-          <p className="text-base-content/80 text-sm font-sans">
-            Be assured that the letter will find you when the time is right.
-            <br />
-            Till then,{" "}
-            <span className="font-bold font-display text-primary">
-              take a deep breath
-            </span>
-            ,{" "}
-            <span className="font-bold font-display text-accent">manifest</span>
-            , and{" "}
-            <span className="font-bold font-display text-success">
-              let it rest
-            </span>
-            .
-          </p>
-        )}
         <div className="modal-action w-full justify-center gap-3 mt-4 mb-4">
-          {type === "KEPT" ? (
+          <button
-            <>
+            type="button"
-              <button
+            className="btn btn-ghost btn-sm"
-                type="button"
+            onClick={() => navigate(ROUTES.DRAWER)}
-                className="btn btn-ghost btn-sm"
+          >
-                onClick={() => navigate(ROUTES.DRAWER)}
+            Keep it to myself
-              >
+          </button>
-                Keep it to myself
+          <button
-              </button>
+            type="button"
-              <button
+            className="btn btn-primary btn-sm"
-                type="button"
+            onClick={() =>
-                className="btn btn-primary btn-sm"
+              navigate(PATHS.read(sealedTargetId), { replace: true })
-                onClick={() => navigate(PATHS.read(sealedTargetId))}
+            }
-              >
+          >
-                View letter
+            View letter
-              </button>
+          </button>
-            </>
-          ) : (
-            <button
-              type="button"
-              className="btn btn-ghost btn-sm"
-              onClick={() => navigate(ROUTES.DRAWER)}
-            >
-              Step Away...
-            </button>
-          )}
         </div>
       </div>
     </div>

frontend/src/components/editor/ToolBar.tsx

@@ -102,24 +102,10 @@ export function ToolBar({
       </div>
       <button
         type="button"
-        aria-label="Help"
         onClick={() => setSealBtnClicked(false)}
         className={`bg-transparent cursor-pointer -mt-2 absolute z-1000001 right-0 text-primary  ${sealBtnClicked ? "" : "hidden"}`}
       >
-        <div className="tooltip tooltip-left">
+        <QuestionIcon weight="duotone" size={20} className={""} />
-          <div className="tooltip-content -translate-x-38 text-left">
-            <span className="font-bold text-accent">Seal</span> puts the letter
-            in an envelope, ready to be read right away.
-            <div className="divider my-0"></div>
-            <span className="font-bold text-success">Vault</span> keeps it
-            locked away until the right moment, even from yourself.
-          </div>
-          <QuestionIcon
-            weight="duotone"
-            size={20}
-            className={"absolute -translate-x-38 -translate-y-3"}
-          />
-        </div>
       </button>
     </div>
   );
@@ -150,23 +136,21 @@ export function VaultConfirmModal({
   setUnlockDate,
 }: VaultConfirmModalProps) {
   return (
-    <div className={"modal modal-open bg-base-100/10 backdrop-blur-md"}>
+    <div className={"modal modal-open bg-base-100/20 backdrop-blur-md"}>
-      <div className="modal-box p-12 flex flex-col items-center bg-base-100/90">
+      <div className="modal-box p-12 flex flex-col items-center">
         <VaultIcon
           size={48}
           className="text-primary mx-auto mb-8 animate-pulse"
         />
-        <h3 className="font-serif text-3xl">Take it away, then?</h3>
+        <h3 className="font-serif text-3xl">Vault this letter?</h3>
         <p className="text-base-content/60 text-sm text-center mt-4">
-          By vaulting this letter, you ask me to hold on to this.
+          Vaulting locks the letter permanently and will be{" "}
+          <span className={"font-bold text-primary"}>mailed</span> to you
+          automatically on the unlock date.
           <br />
-          I'll remember to mail you this on the unlock date.
+          <span className={"underline"}>
-          <br />
+            You cannot edit or view the contents of the letter until then.
-          <span className={"font-bold text-primary"}>
-            {" "}
-            But I won't let you read or rewrite this letter until then.
           </span>
-          <br />
         </p>
         <form
           onSubmit={async (e) => {
@@ -174,13 +158,11 @@ export function VaultConfirmModal({
             const formData = new FormData(e.currentTarget);
             const unlockDateStr = formData.get("vault-date") as string;
             const newUnlockDate = new Date(unlockDateStr);
-            console.log(newUnlockDate);
             setUnlockDate(newUnlockDate);
             await onSave("VAULT", newUnlockDate);
             setConfirmModal(null);
           }}
           id="vault-form"
-          className="min-w-75"
         >
           <div className={"divider tracking-tightest font-display text-sm"}>
             Set an unlock date
@@ -191,22 +173,21 @@ export function VaultConfirmModal({
             className="input input-bordered w-full"
             name="vault-date"
           />
-          <div className="w-full flex justify-center gap-8 mt-4">
+          <button
-            <button
+            className="btn btn-primary mt-4"
-              type="button"
+            type="submit"
-              className="btn btn-ghost btn-sm mt-4"
+            form="vault-form"
-              onClick={() => setConfirmModal(null)}
+          >
-            >
+            Vault
-              I need time
+          </button>
-            </button>
+
-            <button
+          <button
-              className="btn btn-primary btn-sm mt-4"
+            type="button"
-              type="submit"
+            className="btn btn-ghost mt-4"
-              form="vault-form"
+            onClick={() => setConfirmModal(null)}
-            >
+          >
-              Take it
+            Cancel
-            </button>
+          </button>
-          </div>
         </form>
       </div>
     </div>

frontend/src/components/reader/BurnModal.tsx

@@ -1,19 +1,12 @@
 import { CampfireIcon, FlameIcon, XCircleIcon } from "@phosphor-icons/react";
 import { useEffect, useState } from "react";
 
-interface BurnModalProps {
-  burnLetter: () => void;
-  isBurning: boolean;
-  setShowBurnModal: (show: boolean) => void;
-  setRevealState: (state: "sealed" | "revealed" | "burning" | "burned") => void;
-}
-
 export function BurnModal({
   burnLetter,
   isBurning,
   setShowBurnModal,
   setRevealState,
-}: BurnModalProps) {
+}) {
   const [flameOn, setFlameOn] = useState(0);
   const [rotate, setRotate] = useState(0);
   const [burnClicked, setBurnClicked] = useState(false);

frontend/src/components/reader/EnvelopeReveal.tsx

@@ -9,7 +9,6 @@ export interface EnvelopeRevealProps {
   onRevealComplete: () => void;
   ignite: boolean;
   isFlip?: boolean;
-  isInteractive?: boolean;
 }
 
 export function EnvelopeReveal({
@@ -18,7 +17,6 @@ export function EnvelopeReveal({
   onRevealComplete,
   ignite,
   isFlip,
-  isInteractive = true,
 }: EnvelopeRevealProps) {
   const [revealLetter, setRevealLetter] = useState(false);
   const [isFlipped, setIsFlipped] = useState(!!isFlip);
@@ -69,7 +67,6 @@ export function EnvelopeReveal({
               type="checkbox"
               className="transition checkbox absolute h-full w-full text-transparent bg-transparent z-100"
               ref={flapCheckbox}
-              disabled={!isInteractive}
             />
           </div>
           <img
@@ -106,7 +103,6 @@ export function EnvelopeReveal({
         <button
           id="env-front"
           type="button"
-          disabled={!isInteractive}
           className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}
           onClick={() => setIsFlipped((prev) => !prev)}
         >

frontend/src/components/reader/PostActionOverlay.tsx

@@ -1,11 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { ROUTES } from "../../config/routes";
 
-interface PostActionOverlayProps {
+export function PostActionOverlay({ revealState }) {
-  revealState: "sealed" | "revealed" | "burning" | "burned";
-}
-
-export function PostActionOverlay({ revealState }: PostActionOverlayProps) {
   const navigate = useNavigate();
   return (
     <div

frontend/src/components/reader/ShareModal.tsx

@@ -4,12 +4,7 @@ import {
   XCircleIcon,
 } from "@phosphor-icons/react";
 
-interface ShareModalProps {
+export function ShareModal({ shareLink, setShareLink }) {
-  shareLink: string | null;
-  setShareLink: (link: string | null) => void;
-}
-
-export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
   const copyToClipboard = async () => {
     if (!shareLink) return;
     await navigator.clipboard.writeText(shareLink);

frontend/src/components/ui/FormField.tsx

@@ -6,7 +6,6 @@ interface FormFieldProps {
   placeholder?: string;
   registration: UseFormRegisterReturn;
   error?: string;
-  handleFocus?: () => void;
 }
 
 export default function FormField({
@@ -15,7 +14,6 @@ export default function FormField({
   placeholder,
   registration,
   error,
-  handleFocus,
 }: FormFieldProps) {
   return (
     <div className="form-control">
@@ -33,7 +31,6 @@ export default function FormField({
         className={`input input-bordered focus:input-primary ${
           error ? "input-error" : ""
         }`}
-        onFocus={handleFocus}
       />
       {error && <p className="text-error">{error}</p>}
     </div>

frontend/src/components/ui/Saajan.tsx

@@ -1,53 +0,0 @@
-import { useEffect, useState } from "react";
-import sf_mini from "../../assets/sf_mini.png";
-
-interface SaajanProps {
-  message: string;
-  position?: "top" | "left" | "right" | "bottom";
-}
-
-export default function Saajan({ message, position = "right" }: SaajanProps) {
-  const [animate, setAnimate] = useState<boolean>(false);
-  const [tooltipPosition, setTooltipPosition] =
-    useState<string>("tooltip-right");
-  const [alignment, setAlignment] = useState<string>("justify-start");
-
-  useEffect(() => {
-    setAnimate(true);
-    const timeout = setTimeout(() => {
-      setAnimate(false);
-    }, 1000);
-
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, []);
-
-  useEffect(() => {
-    setTooltipPosition(`tooltip-${position}`);
-    if (position === "top") {
-      setAlignment("justify-center");
-    }
-    if (position === "right") {
-      setAlignment("justify-start");
-    }
-    if (position === "left") {
-      setAlignment("justify-end");
-    }
-  }, [position]);
-
-  return (
-    <div className={`relative w-full flex ${alignment}`}>
-      <div
-        className={`tooltip tooltip-open ${tooltipPosition} before:max-w-xs before:whitespace-pre-line italic before:text-left`}
-        data-tip={message}
-      >
-        <img
-          src={sf_mini}
-          alt="saajan"
-          className={`sepia-20 w-35 -mb-3 ${animate ? "animate-[pulse_.5s_ease_2]" : ""}`}
-        />
-      </div>
-    </div>
-  );
-}

frontend/src/hooks/useLetters.tsx

@@ -86,7 +86,7 @@ export function useLetters() {
     return {
       drafts: letters.filter((l) => l.status === "DRAFT"),
       kept: letters.filter((l) => l.type === "KEPT" && l.status === "SEALED"),
-      vault: letters.filter((l) => l.type === "VAULT" && l.status === "SEALED"),
+      vault: letters.filter((l) => l.type === "VAULT"),
       sent: letters.filter((l) => l.type === "SENT" && l.status === "SEALED"),
     };
   }, [letters]);

frontend/src/index.css

@@ -47,7 +47,10 @@
     --font-display: "Playwrite HR Lijeva Variable", cursive;
     --font-sans: "Jost Variable", sans-serif;
     --font-serif: "Playfair Display Variable", serif;
-    --color-glass-bg: rgba(28, 22, 16, 0.45);
+    --color-glass-bg: rgba(28,
+            22,
+            16,
+            0.45);
     --shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6);
     --radius-xl: 1.5rem;
     --color-paper: oklch(97% 0.008 80);

frontend/src/pages/Activate.tsx

@@ -16,6 +16,8 @@ export default function Activate() {
 
   useEffect(() => {
     if (!(uidb64 && token) || hasCalled.current) return;
+
+    // prevent double api calls
     hasCalled.current = true;
 
     const activateAccount = async () => {
@@ -44,7 +46,7 @@ export default function Activate() {
       )}
 
       {status === "success" && (
-        <div className="flex flex-col items-center gap-6 duration-500">
+        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
           <div className="bg-success/10 p-4 rounded-full">
             <CheckCircleIcon
               size={64}
@@ -55,12 +57,13 @@ export default function Activate() {
           <h2 className="font-display text-xl text-success">
             Account Activated!
           </h2>
-          <p className="opacity-70 leading-relaxed">
+          <p className="opacity-70 mb-8 leading-relaxed">
-            Welcome to <Logo scale={1} />
+            Welcome to <Logo />
             <br />
             Your identity is now verified and ready for timeless letters.
           </p>
-          <div className="divider opacity-10 my-0"></div>
+          <div className="divider opacity-10"></div>
+
           <button
             type="button"
             className="btn btn-primary w-full shadow-lg"
@@ -82,17 +85,16 @@ export default function Activate() {
             <XCircleIcon size={64} weight="duotone" className="text-error" />
           </div>
           <h2 className="font-display text-xl text-error">Activation Failed</h2>
-          <p className="opacity-70 leading-relaxed">
+          <p className="opacity-70 mb-8 leading-relaxed">
             The link might be expired or already used. Please try registering
             again.
           </p>
-          <div className="divider opacity-10 my-0"></div>
           <button
             type="button"
             className="btn btn-ghost w-full"
             onClick={() => navigate(ROUTES.ONBOARD)}
           >
-            Register Again
+            Back to Registration
           </button>
         </div>
       )}

frontend/src/pages/Drawer.tsx

@@ -5,7 +5,6 @@ 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 Saajan from "../components/ui/Saajan.tsx";
 import { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";
@@ -166,12 +165,6 @@ export default function Drawer() {
       <footer className="mt-25 font-sans text-[0.6rem] tracking-[0.2em] uppercase text-base-content/10 z-10">
         For your unsaid.
       </footer>
-      <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

@@ -83,9 +83,11 @@ describe("Editor Page", () => {
       expect(screen.queryByText(/Opening your draft/i)).not.toBeInTheDocument();
     });
 
+    // Initial state: DRAFT (not read-only)
     const canvas = screen.getByTestId("canvas");
     expect(canvas.getAttribute("data-readonly")).toBe("false");
 
+    // Click Seal in the main toolbar (it's in the div with id="writer-toolbar")
     const toolbar = container.querySelector("#writer-toolbar");
     const sealBtn = toolbar?.querySelector(".btn-primary");
     if (!sealBtn) throw new Error("Seal button not found");

frontend/src/pages/Editor.tsx

@@ -293,7 +293,7 @@ export default function Editor() {
       setLetterStatus(status);
       setLastSavedPulseTick((prev) => prev + 1);
 
-      if (status === "SEALED" || status === "VAULT") {
+      if (status === "SEALED") {
         setSealedTargetId(targetId);
       }
       setSaveOverlay("saved");
@@ -419,11 +419,7 @@ export default function Editor() {
           />
         )}
         {sealedTargetId && (
-          <PostSealModal
+          <PostSealModal sealedTargetId={sealedTargetId} navigate={navigate} />
-            sealedTargetId={sealedTargetId}
-            navigate={navigate}
-            type={status === "VAULT" ? "VAULT" : "KEPT"}
-          />
         )}
 
         <div className="max-w-180 mx-auto px-1 md:px-0">

frontend/src/pages/Login.test.tsx

@@ -14,6 +14,16 @@ describe("Login Page", () => {
     server.resetHandlers();
   });
 
+  it("should render the sign-in form correctly", () => {
+    render(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText("Sign in to")).toBeInTheDocument();
+  });
+
   it("should display a technical issues message when the server is down", async () => {
     server.use(
       http.post(`${API_URL}${endpoints.LOGIN}`, () =>

frontend/src/pages/Login.tsx

@@ -1,9 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
+import { ShieldCheckIcon, WarningIcon } from "@phosphor-icons/react";
-  HandPalmIcon,
-  ShieldCheckIcon,
-  WarningIcon,
-} from "@phosphor-icons/react";
 import axios from "axios";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -12,7 +8,6 @@ import { z } from "zod";
 import { api, publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
-import Saajan from "../components/ui/Saajan";
 import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
@@ -25,19 +20,10 @@ const loginSchema = z.object({
 
 type LoginInputs = z.infer<typeof loginSchema>;
 
-function WelcomeModal({
+function WelcomeModal({ setShowWelcome }) {
-  setShowWelcome,
-}: {
-  setShowWelcome: (show: boolean) => void;
-}) {
   return (
     <div className="modal modal-open backdrop-blur-sm transition-all duration-1000">
-      <div className="absolute bottom-1">
+      <div className="modal-box border border-primary/20 shadow-2xl p-8">
-        <Saajan
-          message={"I've lost words before.\nI know what it feels like."}
-        />
-      </div>
-      <div className="modal-box border bg-base-100/20 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
@@ -47,22 +33,19 @@ function WelcomeModal({
             />
           </div>
           <h3 className="font-display text-2xl font-bold text-primary">
-            Welcome to &nbsp;
+            Welcome to <Logo />!
-            <Logo /> &nbsp;!
           </h3>
           <p className="text-base-content/80 leading-relaxed">
-            Before we begin, let me make a small promise.
+            To ensure <span className="font-bold">complete privacy</span>, all
-            <HandPalmIcon
+            your letters are{" "}
-              size={18}
+            <span className="font-bold underline">
-              className="inline text-primary"
+              sealed with your password
-              weight="fill"
+            </span>
-            />
+            , which only you have access to.
-            <div className="divider my-0"></div>
             <br />
-            Everything you write here is sealed with your password,{" "}
+            <span className="font-bold">
-            <span className="font-display text-success">cryptographically</span>
+              The server never sees it, and it's a solemn promise!
-            , before it leaves your hands.
+            </span>
-            <br />A fancy way of saying, I couldn't if I tried.
           </p>
 
           <div className="alert alert-warning bg-paper/20 border-paper/20 flex items-start gap-3 text-left py-3">
@@ -70,19 +53,6 @@ function WelcomeModal({
             <p className="text-sm font-medium text-primary-content">
               If you ever happen to forget your password, your letters are lost
               to time, forever.
-              <br />
-              <span className="font-bold mt-2">
-                I highly, highly recommend storing this password in your{" "}
-                <a
-                  href="https://www.privacyguides.org/en/passwords/"
-                  target="_blank"
-                  className="link link-primary-content"
-                  rel="noopener"
-                >
-                  password manager
-                </a>{" "}
-                or somewhere safe to remember it.
-              </span>
             </p>
           </div>
 
@@ -92,7 +62,7 @@ function WelcomeModal({
               onClick={() => setShowWelcome(false)}
               className="btn btn-primary w-full shadow-lg"
             >
-              I'll remember
+              I understand
             </button>
           </div>
         </div>
@@ -108,9 +78,6 @@ export default function Login() {
   const [apiError, setApiError] = useState<string | null>(null);
   const { setAuthStore } = useAuth();
   const [showWelcome, setShowWelcome] = useState(!!location.state?.firstTime);
-  const [saajanMessage, setSaajanMessage] = useState<string>(
-    "I was wondering when you'd return.",
-  );
   const nextRoute = location.state?.redirectUrl || ROUTES.DRAWER;
 
   const {
@@ -158,13 +125,12 @@ export default function Login() {
   };
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col gap-3">
-      {!showWelcome && <Saajan message={saajanMessage} position="top" />}
       {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 justify-center text-primary/80 tracking-tight">
-            Enter <Logo /> Archive
+            Sign in to <Logo />
           </h1>
 
           {apiError && (
@@ -176,10 +142,9 @@ export default function Login() {
           <FormField
             label="Email"
             type="email"
-            placeholder="f.kafka@wrongtrain.com"
+            placeholder="you@email.com"
             registration={register("email")}
             error={errors.email?.message}
-            handleFocus={() => setSaajanMessage("I remember you.")}
           />
 
           <FormField
@@ -188,9 +153,6 @@ export default function Login() {
             placeholder="••••••••"
             registration={register("password")}
             error={errors.password?.message}
-            handleFocus={() =>
-              setSaajanMessage("The one thing I cannot know for you.")
-            }
           />
 
           <div className="card-actions mt-4">

frontend/src/pages/Reader.tsx

@@ -44,7 +44,7 @@ export default function Reader() {
 
   const [isDecrypting, setIsDecrypting] = useState(true);
   const [revealState, setRevealState] = useState<
-    "sealed" | "revealed" | "burned" | "burning"
+    "sealed" | "revealed" | "burned"
   >("sealed");
   const [error, setError] = useState<{
     message: string;

frontend/src/pages/Register.tsx

@@ -8,7 +8,6 @@ import { z } from "zod";
 import { publicApi } from "../api/apiClient";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
-import Saajan from "../components/ui/Saajan";
 import { endpoints } from "../config/endpoints";
 import { ROUTES } from "../config/routes";
 import { CryptoUtils } from "../utils/crypto";
@@ -32,9 +31,6 @@ export default function Register() {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const [apiError, setApiError] = useState<string | null>(null);
-  const [saajanMessage, setSaajanMessage] = useState<string>(
-    "I didn't think I'd be here either.\nAnd yet, here we are.",
-  );
 
   const {
     register,
@@ -45,7 +41,6 @@ export default function Register() {
   });
 
   const onSubmit = async (data: RegisterInputs) => {
-    setSaajanMessage("Good. I'll remember that.");
     setIsLoading(true);
     setApiError(null);
     try {
@@ -73,96 +68,74 @@ export default function Register() {
   };
 
   return (
-    <div className="flex flex-col">
+    <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-      <Saajan message={saajanMessage} position="right" />
+      <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
-      <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
+        <h1 className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight">
-        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+          Create a <Logo /> Account
-          <div className="card-title font-display text-2xl justify-center text-primary/80 tracking-tight whitespace-nowrap">
+        </h1>
-            Create a <Logo /> Account
+
+        {apiError && (
+          <div className="alert alert-error text-xs py-2 rounded-md">
+            <span>{apiError}</span>
           </div>
+        )}
 
-          {apiError && (
+        <FormField
-            <div className="alert alert-error text-xs py-2 rounded-md">
+          label="Pen Name"
-              <span>{apiError}</span>
+          placeholder="Word Smith"
-            </div>
+          registration={register("full_name")}
-          )}
+          error={errors.full_name?.message}
+        />
 
-          <FormField
+        <FormField
-            label="Pen Name"
+          label="Email"
-            placeholder="Word Smith"
+          type="email"
-            registration={register("full_name")}
+          placeholder="f.kafka@email.com"
-            error={errors.full_name?.message}
+          registration={register("email")}
-            handleFocus={() =>
+          error={errors.email?.message}
-              setSaajanMessage("Hello friend. What should I call you?")
+        />
-            }
-          />
 
-          <FormField
+        <FormField
-            label="Email"
+          label="Password"
-            type="email"
+          type="password"
-            placeholder="f.kafka@email.com"
+          placeholder="••••••••"
-            registration={register("email")}
+          registration={register("password")}
-            error={errors.email?.message}
+          error={errors.password?.message}
-            handleFocus={() =>
+        />
-              setSaajanMessage(
-                "Where should I send your letters?\nNo empty lunchboxes, please.",
-              )
-            }
-          />
 
-          <FormField
+        <FormField
-            label="Password"
+          label="Confirm Password"
-            type="password"
+          type="password"
-            placeholder="••••••••"
+          placeholder="••••••••"
-            registration={register("password")}
+          registration={register("confirm_password")}
-            error={errors.password?.message}
+          error={errors.confirm_password?.message}
-            handleFocus={() =>
+        />
-              setSaajanMessage(
-                "Something only you know.\nI have one of those too.",
-              )
-            }
-          />
 
-          <FormField
+        {/* Warning */}
-            label="Confirm Password"
+        <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
-            type="password"
+          <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
-            placeholder="••••••••"
+          <p className="text-sm font-semibold">
-            registration={register("confirm_password")}
+            Choose a password you won't forget. <br />
-            error={errors.confirm_password?.message}
+            <span className="underline decoration-2">There is no reset.</span>{" "}
-            handleFocus={() =>
+            If you lose it, your letters cannot be recovered.
-              setSaajanMessage(
+          </p>
-                "Just once? Trust me, \nsome things are worth repeating twice.",
+        </div>
-              )
-            }
-          />
 
-          {/* Warning */}
+        <div className="card-actions mt-4">
-          <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
+          <button
-            <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
+            type="submit"
-            <p className="text-sm font-semibold">
+            disabled={isLoading}
-              Choose a password you won't forget. <br />
+            aria-label="Register"
-              Just like life,{" "}
+            className="btn btn-primary w-full shadow-lg"
-              <span className="underline decoration-2">there is no reset</span>{" "}
+          >
-              here. If you lose it, your letters cannot be recovered.
+            {isLoading ? (
-            </p>
+              <span className="loading loading-spinner loading-sm" />
-          </div>
+            ) : (
-
+              "Register"
-          <div className="card-actions mt-4">
+            )}
-            <button
+          </button>
-              type="submit"
+        </div>
-              disabled={isLoading}
+      </form>
-              aria-label="Register"
-              className="btn btn-primary w-full shadow-lg"
-            >
-              {isLoading ? (
-                <span className="loading loading-spinner loading-sm" />
-              ) : (
-                "Register"
-              )}
-            </button>
-          </div>
-        </form>
-      </div>
     </div>
   );
 }

frontend/src/pages/VerifyEmail.tsx

@@ -1,55 +1,41 @@
 import { EnvelopeSimpleOpenIcon } from "@phosphor-icons/react";
 import Logo from "../components/Logo";
-import Saajan from "../components/ui/Saajan";
 
 export default function VerifyEmail() {
   return (
-    <div className="relative">
+    <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col items-center gap-6 fade-zoom">
-      <Saajan
+      <div className="auth-icon-container">
-        message={"I sent something to your inbox.\nOpen it, and we can begin."}
+        <EnvelopeSimpleOpenIcon
-      />
+          size={32}
-
+          weight="duotone"
-      <div className="glass-card w-full max-w-sm p-8 text-center flex flex-col items-center gap-6 fade-zoom">
+          className="text-primary"
-        <div className="auth-icon-container">
+        />
-          <EnvelopeSimpleOpenIcon
-            size={32}
-            weight="duotone"
-            className="text-primary"
-          />
-        </div>
-
-        <div className="space-y-2">
-          <h2 className="font-display text-xl text-primary">
-            Check Your Mailbox
-          </h2>
-          <p className="text-sm opacity-80 leading-relaxed font-sans mt-6">
-            You're one train away from starting your <Logo scale={0.8} />{" "}
-            journey.
-          </p>
-        </div>
-
-        <div className="divider opacity-10 my-0"></div>
-
-        <div className="alert bg-base-200/50 p-4 rounded-lg text-xs leading-relaxed opacity-70 text-center">
-          <p>
-            Nothing yet? Sometimes letters take the wrong train. Check your spam
-            folder.
-            <br />
-            <span className="underline font-bold">
-              The link expires in 24 hours.
-            </span>
-            <br /> I'm patient... but not endlessly so
-          </p>
-        </div>
-
-        <button
-          type="button"
-          className="text-xs italic opacity-40 cursor-pointer underline"
-          onClick={() => window.close()}
-        >
-          You can close this window now.
-        </button>
       </div>
+
+      <div className="space-y-2">
+        <h2 className="font-display text-xl text-primary">Check Your Email</h2>
+        <p className="text-sm opacity-80 leading-relaxed font-sans">
+          We've sent an activation link to your inbox. <br />
+          Please click it to verify your <Logo /> account.
+        </p>
+      </div>
+
+      <div className="divider opacity-10"></div>
+
+      <div className="alert bg-base-200/50 p-4 rounded-lg text-xs leading-relaxed text-left opacity-70">
+        <p>
+          Didn't receive it? Check your spam folder or wait for a few minutes.
+          The link will expire in 24 hours.
+        </p>
+      </div>
+
+      <button
+        type="button"
+        className="text-xs italic opacity-40 cursor-pointer underline"
+        onClick={() => window.close()}
+      >
+        You can close this window now.
+      </button>
     </div>
   );
 }