refactor: centralize route configuration

frontend/src/App.tsx

@@ -1,8 +1,10 @@
 import { useEffect } from "react";
 import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import Logo from "./components/Logo";
+import { ROUTES } from "./config/routes";
 import Activate from "./pages/Activate";
 import Drawer from "./pages/Drawer";
+import Editor from "./pages/Editor";
 import Home from "./pages/Home";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
@@ -30,17 +32,18 @@ export default function App() {
 
   return (
     <BrowserRouter>
-      <div className="min-h-screen bg-base-200 p-8 flex items-center justify-center">
+      <main className="min-h-screen bg-base-200 flex items-center justify-center w-full">
         <Routes>
-          <Route path="/" element={<Home />} />
+          <Route path={ROUTES.HOME} element={<Home />} />
-          <Route path="/onboard" element={<Register />} />
+          <Route path={ROUTES.ONBOARD} element={<Register />} />
-          <Route path="/verify-email" element={<VerifyEmail />} />
+          <Route path={ROUTES.VERIFY_EMAIL} element={<VerifyEmail />} />
-          <Route path="/activate/:uidb64/:token" element={<Activate />} />
+          <Route path={ROUTES.ACTIVATE} element={<Activate />} />
-          <Route path="/login" element={<Login />} />
+          <Route path={ROUTES.LOGIN} element={<Login />} />
-          <Route path="/drawer" element={<Drawer />} />
+          <Route path={ROUTES.DRAWER} element={<Drawer />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
+          <Route path={ROUTES.WRITE} element={<Editor />} />
+          <Route path="*" element={<Navigate to={ROUTES.HOME} replace />} />
         </Routes>
-      </div>
+      </main>
     </BrowserRouter>
   );
 }

frontend/src/components/Logo.tsx

@@ -4,6 +4,8 @@ import "@fontsource/knewave/400.css";
 export default function Logo() {
   return (
     <span
+      role="img"
+      aria-label="Pi Ku"
       className="inline-flex items-baseline justify-center leading-none select-none"
       style={{ fontFamily: "'Knewave', serif" }}
     >

frontend/src/components/ui/DateDisplay.tsx

@@ -0,0 +1,28 @@
+interface DateDisplayProps {
+  date?: Date;
+  className?: string;
+}
+
+export default function DateDisplay({
+  date = new Date(),
+  className = "",
+}: DateDisplayProps) {
+  const formattedDate = date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  return (
+    <div
+      className={`text-right flex flex-col gap-2 min-w-[140px] ${className}`}
+    >
+      <span className="text-[10px] uppercase tracking-[0.4em] text-accent font-bold">
+        Date
+      </span>
+      <span className="text-sm font-serif text-secondary-content italic whitespace-nowrap">
+        {formattedDate}
+      </span>
+    </div>
+  );
+}

frontend/src/components/ui/FormField.tsx

@@ -19,19 +19,20 @@ export default function FormField({
     <div className="form-control">
       <label
         htmlFor={registration.name}
-        className="field-label font-display text-primary-content"
+        className="field-label font-display text-base-content/90 font-medium"
       >
         {label}
       </label>
       <input
         {...registration}
+        id={registration.name}
         type={type}
         placeholder={placeholder}
         className={`input input-bordered focus:input-primary ${
           error ? "input-error" : ""
         }`}
       />
-      {error && <p className="text-error-content">{error}</p>}
+      {error && <p className="text-error">{error}</p>}
     </div>
   );
 }

frontend/src/config/routes.ts

@@ -0,0 +1,10 @@
+export const ROUTES = {
+  HOME: "/",
+  ONBOARD: "/onboard",
+  VERIFY_EMAIL: "/verify-email",
+  ACTIVATE: "/activate/:uidb64/:token",
+  LOGIN: "/login",
+  DRAWER: "/drawer",
+  WRITE: "/quill",
+  READ: "/read",
+};

frontend/src/pages/Activate.tsx

@@ -70,15 +70,9 @@ export default function Activate() {
       {status === "error" && (
         <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
           <div className="bg-error/10 p-4 rounded-full">
-            <XCircleIcon
+            <XCircleIcon size={64} weight="duotone" className="text-error" />
-              size={64}
-              weight="duotone"
-              className="text-error-content"
-            />
           </div>
-          <h2 className="font-display text-xl text-error-content">
+          <h2 className="font-display text-xl text-error">Activation Failed</h2>
-            Activation Failed
-          </h2>
           <p className="opacity-70 mb-8 leading-relaxed">
             The link might be expired or already used. Please try registering
             again.

frontend/src/pages/Login.tsx

@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
 import { z } from "zod";
 import Logo from "../components/Logo";
 import FormField from "../components/ui/FormField";
+import { ROUTES } from "../config/routes";
 import { useAuth } from "../store/useAuth";
 
 const loginSchema = z.object({
@@ -34,7 +35,7 @@ export default function Login() {
     setApiError(null);
     try {
       await login(data);
-      navigate("/drawer");
+      navigate(ROUTES.DRAWER);
     } catch (err) {
       console.error("Login error:", err);
       let message = "Invalid email or password";
@@ -48,62 +49,59 @@ export default function Login() {
     }
   };
 
-  return (
+  <div className="glass-card w-full max-w-sm p-2 transition-all duration-500 hover:shadow-2xl fade-zoom">
-    <div className="flex min-h-screen items-center justify-center bg-base-200">
+    <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 font-bold justify-center text-primary tracking-tight">
-        <form onSubmit={handleSubmit(onSubmit)} className="card-body gap-4">
+        Sign in to <Logo />
-          <h2 className="card-title font-display text-2xl font-bold justify-center text-primary tracking-tight">
+      </h1>
-            Sign in to <Logo />
-          </h2>
 
-          {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>{apiError}</span>
-            </div>
+        </div>
+      )}
+
+      <FormField
+        label="Email"
+        type="email"
+        placeholder="you@email.com"
+        registration={register("email")}
+        error={errors.email?.message}
+      />
+
+      <FormField
+        label="Password"
+        type="password"
+        placeholder="••••••••"
+        registration={register("password")}
+        error={errors.password?.message}
+      />
+
+      <div className="card-actions mt-4">
+        <button
+          type="submit"
+          disabled={isLoading}
+          aria-label="Sign In"
+          className="btn btn-primary w-full shadow-lg"
+        >
+          {isLoading ? (
+            <span className="loading loading-spinner loading-sm" />
+          ) : (
+            "Sign In"
           )}
-
+        </button>
-          <FormField
-            label="Email"
-            type="email"
-            placeholder="you@email.com"
-            registration={register("email")}
-            error={errors.email?.message}
-          />
-
-          <FormField
-            label="Password"
-            type="password"
-            placeholder="••••••••"
-            registration={register("password")}
-            error={errors.password?.message}
-          />
-
-          <div className="card-actions mt-4">
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="btn btn-primary w-full shadow-lg"
-            >
-              {isLoading ? (
-                <span className="loading loading-spinner loading-sm" />
-              ) : (
-                "Sign In"
-              )}
-            </button>
-          </div>
-
-          <div className="text-center text-sm opacity-70">
-            Don't have an account?{" "}
-            <button
-              type="button"
-              onClick={() => navigate("/register")}
-              className="link link-primary text-primary-content no-underline hover:underline"
-            >
-              Register
-            </button>
-          </div>
-        </form>
       </div>
-    </div>
+
-  );
+      <div className="text-center text-sm font-medium text-base-content/70">
+        Don't have an account?{" "}
+        <button
+          type="button"
+          onClick={() => navigate(ROUTES.ONBOARD)}
+          className="link link-primary no-underline hover:underline font-bold"
+        >
+          Register
+        </button>
+      </div>
+    </form>
+  </div>;
 }

frontend/src/pages/Register.tsx

@@ -62,9 +62,9 @@ export default function Register() {
   return (
     <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">
-        <h2 className="card-title font-display text-2xl font-bold justify-center text-primary tracking-tight">
+        <h1 className="card-title font-display text-2xl font-bold justify-center text-primary tracking-tight">
           Create a <Logo /> Account
-        </h2>
+        </h1>
 
         {apiError && (
           <div className="alert alert-error text-xs py-2 rounded-md">
@@ -104,15 +104,11 @@ export default function Register() {
         />
 
         {/* Warning */}
-        <div className="bg-warning/10 border-l-2 border-warning p-3 rounded-r-md flex gap-2">
+        <div className="alert alert-warning items-start text-left p-3 gap-2 rounded-md border-warning/20">
-          <InfoIcon
+          <InfoIcon size={20} weight="duotone" className="mt-0.5 shrink-0" />
-            size={20}
+          <p className="text-sm font-semibold">
-            weight="duotone"
-            className="text-warning mt-0.5 shrink-0"
-          />
-          <p className="text-sm text-warning-content font-medium opacity-90">
             Choose a password you won't forget. <br />
-            <span className="font-semibold underline">There is no reset.</span>{" "}
+            <span className="underline decoration-2">There is no reset.</span>{" "}
             If you lose it, your letters cannot be recovered.
           </p>
         </div>
@@ -121,6 +117,7 @@ export default function Register() {
           <button
             type="submit"
             disabled={isLoading}
+            aria-label="Register"
             className="btn btn-primary w-full shadow-lg"
           >
             {isLoading ? (

frontend/src/pages/VerifyEmail.tsx

@@ -22,7 +22,7 @@ export default function VerifyEmail() {
 
       <div className="divider opacity-10"></div>
 
-      <div className="bg-base-200/50 p-4 rounded-lg text-xs leading-relaxed text-left opacity-70">
+      <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.