[Feature] [Studio] Add advanced resume sections, theme customization, and toolbar actions

apps/studio/app/(main)/(dashboard)/components/RecentCard.tsx

@@ -7,14 +7,16 @@ import { FileText } from "lucide-react";
 import { Badge } from "@veriworkly/ui";
 
 import { getDocumentDefinition } from "@/features/documents/core/registry";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { type DocumentLibraryItem } from "@/features/documents/services/document-library";
 
 const RecentCard = ({ doc }: { doc: DocumentLibraryItem }) => {
   const definition = getDocumentDefinition(doc.type);
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
 
   return (
     <Link
-      href={`/editor/${doc.type.toLowerCase()}/${doc.id}`}
+      href={editorPath}
       className="border-border bg-background/70 group hover:border-accent/40 hover:bg-card overflow-hidden rounded-xl border transition"
     >
       <div className="border-border/70 relative h-32 border-b bg-[color-mix(in_oklab,var(--card)_78%,var(--background))]">

apps/studio/app/(main)/(dashboard)/documents/components/DocumentActionsMenu.tsx

@@ -16,6 +16,7 @@ import { useRouter } from "next/navigation";
 import { Menu, MenuItem, MenuSeparator } from "@veriworkly/ui";
 
 import type { DocumentLibraryItem } from "@/features/documents/services/document-library";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 
 export interface DocumentActionsMenuProps {
   doc: DocumentLibraryItem;
@@ -37,6 +38,7 @@ export function DocumentActionsMenu({
   onSyncDetailsAction,
 }: DocumentActionsMenuProps) {
   const router = useRouter();
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
 
   return (
     <Menu
@@ -66,7 +68,7 @@ export function DocumentActionsMenu({
             className="h-8 rounded-lg text-xs"
             onClick={() => {
               close();
-              router.push(`/editor/${doc.type.toLowerCase()}/${doc.id}`);
+              router.push(editorPath);
             }}
           >
             <ExternalLink className="h-4 w-4" />
@@ -122,9 +124,7 @@ export function DocumentActionsMenu({
             className="h-8 rounded-lg text-xs"
             onClick={() => {
               close();
-              void navigator.clipboard.writeText(
-                `${window.location.origin}/editor/${doc.type.toLowerCase()}/${doc.id}`,
-              );
+              void navigator.clipboard.writeText(`${window.location.origin}${editorPath}`);
               toast.success("Document link copied");
             }}
           >

apps/studio/app/(main)/(dashboard)/documents/components/DocumentListRow.tsx

@@ -8,6 +8,7 @@ import type { SyncTelemetry } from "@/features/documents/services/document-sync"
 import type { DocumentLibraryItem } from "@/features/documents/services/document-library";
 
 import { getDocumentDefinition } from "@/features/documents/core/registry";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { formatRelative } from "@/features/documents/services/document-library";
 
 import { DocumentActionsMenu } from "./DocumentActionsMenu";
@@ -35,6 +36,7 @@ export function DocumentListRow({
   onSyncDetailsAction,
 }: DocumentListRowProps) {
   const Icon = docIconMap[doc.type];
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
 
   return (
     <article className="grid gap-3 p-4 sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center sm:p-5">
@@ -67,7 +69,7 @@ export function DocumentListRow({
 
       <div className="flex items-center gap-2 sm:justify-end">
         <Button asChild size="sm" variant="secondary">
-          <Link href={`/editor/${doc.type.toLowerCase()}/${doc.id}`}>Open</Link>
+          <Link href={editorPath}>Open</Link>
         </Button>
 
         <DocumentActionsMenu

apps/studio/app/(main)/(dashboard)/documents/components/DocumentPreviewCard.tsx

@@ -9,6 +9,7 @@ import type { SyncTelemetry } from "@/features/documents/services/document-sync"
 import type { DocumentLibraryItem } from "@/features/documents/services/document-library";
 
 import { getDocumentDefinition } from "@/features/documents/core/registry";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { formatRelative } from "@/features/documents/services/document-library";
 
 import { DocumentActionsMenu } from "./DocumentActionsMenu";
@@ -35,6 +36,8 @@ export function DocumentPreviewCard({
   onSyncNowAction,
   onSyncDetailsAction,
 }: DocumentPreviewCardProps) {
+  const editorPath = getDocumentEditorPath(doc.type, doc.id);
+
   return (
     <article className="group border-border bg-card hover:border-accent/40 relative aspect-3/4 w-full min-w-0 overflow-hidden rounded-xl border transition hover:shadow-sm">
       <div className="absolute inset-0 bg-[color-mix(in_oklab,var(--background)_94%,white)]">
@@ -79,7 +82,7 @@ export function DocumentPreviewCard({
       <Link
         aria-label={`Open ${doc.title}`}
         className="absolute inset-0 z-20 cursor-pointer"
-        href={`/editor/${doc.type.toLowerCase()}/${doc.id}`}
+        href={editorPath}
       />
 
       <div className="absolute top-2 right-2 z-30 opacity-0 transition-opacity duration-200 group-hover:opacity-100">

apps/studio/app/(main)/editor/[type]/[id]/preview/PreviewClient.tsx

@@ -15,6 +15,7 @@ import { loadResumeById } from "@/features/resume/services/resume-service";
 import { loadDocumentById } from "@/features/documents/services/document-workspace-service";
 import type { DocumentType } from "@/features/documents/core/document-types";
 import type { CoverLetterContent } from "@/features/cover-letter/types";
+import { getDocumentEditorPath } from "@/features/documents/core/routes";
 import { CoverLetterPreview } from "@/templates/cover-letter/web";
 
 interface PreviewClientProps {
@@ -58,7 +59,7 @@ export function PreviewClient({ documentId, type }: PreviewClientProps) {
   const found = type === "RESUME" ? Boolean(routeResume) : Boolean(routeDocument);
   const title =
     type === "RESUME" ? resume.basics.fullName || "Untitled Resume" : routeDocument?.title;
-  const routeType = type.toLowerCase();
+  const editorPath = getDocumentEditorPath(type, documentId);
   const debugType = type === "COVER_LETTER" ? "cover-letter" : type.toLowerCase();
   const debugTemplateId = type === "RESUME" ? resume.templateId : routeDocument?.templateId;
   const canDebugPdf = type === "RESUME" || type === "COVER_LETTER";
@@ -87,7 +88,7 @@ export function PreviewClient({ documentId, type }: PreviewClientProps) {
           ) : null}
 
           <Link
-            href={`/editor/${routeType}/${documentId}`}
+            href={editorPath}
             className="text-foreground hover:bg-card inline-flex h-9 items-center justify-center rounded-full bg-transparent px-3 text-sm font-medium transition"
           >
             Back to editor