refactor: migrate route definitions to path builders

frontend/src/App.tsx

@@ -72,7 +72,7 @@ export default function App() {
             }
           />
           <Route
-            path={`${ROUTES.WRITE()}:public_id?`}
+            path={ROUTES.WRITE}
             element={
               <ProtectedRoute>
                 <Editor />

frontend/src/components/ui/LetterItem.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { ROUTES } from "../../config/routes";
+import { PATHS } from "../../config/routes";
 
 export function LetterItem({
   preview,
@@ -15,9 +15,9 @@ export function LetterItem({
   const navigate = useNavigate();
   function handleNavigate(): void {
     if (status === "SEALED") {
-      navigate(ROUTES.READ(id));
+      navigate(PATHS.read(id));
     } else {
-      navigate(ROUTES.WRITE(id));
+      navigate(PATHS.write(id));
     }
   }
 

frontend/src/config/routes.ts

@@ -1,3 +1,4 @@
+// Route PATTERNS
 export const ROUTES = {
   HOME: "/",
   ONBOARD: "/onboard",
@@ -5,6 +6,13 @@ export const ROUTES = {
   ACTIVATE: "/activate/:uidb64/:token",
   LOGIN: "/login",
   DRAWER: "/drawer",
-  WRITE: (public_id?: string) => `/quill/${public_id ? public_id : ""}`,
+  WRITE: "/quill/:public_id?", // ← static pattern
-  READ: (public_id?: string) => `/read/${public_id ? public_id : ""}`,
+  READ: "/read/:public_id",
+};
+
+// Path BUILDERS
+export const PATHS = {
+  write: (public_id?: string) => `/quill/${public_id ?? ""}`,
+  read: (public_id: string) => `/read/${public_id}`,
+  activate: (uidb64: string, token: string) => `/activate/${uidb64}/${token}`,
 };

frontend/src/pages/Drawer.tsx

@@ -4,7 +4,7 @@ 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 { PATHS } from "../config/routes";
 import { useAuth } from "../hooks/useAuth";
 import { useLetters } from "../hooks/useLetters";
 
@@ -127,7 +127,7 @@ export default function Drawer() {
       <button
         type="button"
         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 })}
+        onClick={() => navigate(PATHS.write(""), { replace: true })}
       >
         <FeatherIcon
           size={18}

frontend/src/pages/Editor.tsx

@@ -14,7 +14,7 @@ import {
 } from "../components/ui/ComposeCanvas";
 import DateDisplay from "../components/ui/DateDisplay";
 import { endpoints } from "../config/endpoints";
-import { ROUTES } from "../config/routes";
+import { PATHS } from "../config/routes";
 import { useKeyStore } from "../store/useKeyStore";
 import { CryptoUtils } from "../utils/crypto";
 
@@ -140,7 +140,7 @@ export default function Editor() {
     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 });
+      navigate(PATHS.write(letterIdRef.current), { replace: true });
     } else if (public_id) {
       letterIdRef.current = public_id;
     }