feat: add tabbed Settings, 10 themes with custom accent/text color pickers, main project directory selector, and export filename/directory controls

apps/web/src/features/export/ExportDialog.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
-import { Modal, Button } from "@pubscript/ui";
-import {
-  THEMES,
-  exportProjectData,
-  type ExportFormat,
-} from "@pubscript/exporters";
+import { Modal, Button, toast } from "@pubscript/ui";
+import { exportProjectData, type ExportFormat } from "@pubscript/exporters";
 import { useProjectStore } from "../../store/project-store.js";
+import { useSettings } from "../../store/settings.js";
+import { api } from "../../api.js";
+import { DirectoryBrowserModal } from "../../components/DirectoryBrowserModal.js";
 import { buildExportProject } from "./buildExportProject.js";
 import { downloadFile } from "./download.js";
 import { EXPORT_FORMATS, type FormatInfo } from "./formats.js";
@@ -19,27 +18,65 @@ type Scope = "project" | "chapter";
 
 /** Collapse a string into a filesystem-safe slug. */
 function slug(value: string): string {
-  return value
-    .trim()
-    .replace(/[^\w-]+/g, "-")
-    .replace(/-+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 60) || "project";
+  return (
+    value
+      .trim()
+      .toLowerCase()
+      .replace(/[^\w-]+/g, "-")
+      .replace(/-+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 60) || "manuscript"
+  );
 }
 
 export function ExportDialog({ open, onClose }: ExportDialogProps) {
   const adapter = useProjectStore((s) => s.adapter);
-  const projectId = useProjectStore((s) => s.project?.projectId);
+  const project = useProjectStore((s) => s.project);
+  const projectId = project?.id;
   const chapters = useProjectStore((s) => s.chapters);
 
-  const [format, setFormat] = useState<ExportFormat>("markdown");
-  const [themeId, setThemeId] = useState("ink");
+  const projectDirectory = useSettings((s) => s.projectDirectory);
+  const serverPort = useSettings((s) => s.serverPort);
+
+  const [format, setFormat] = useState<ExportFormat>("epub");
   const [scope, setScope] = useState<Scope>("project");
   const [chapterId, setChapterId] = useState<string>("");
+  const [fileName, setFileName] = useState<string>("");
+  const [saveDir, setSaveDir] = useState<string>(projectDirectory || "~/Documents/PubScript");
+  const [browseOpen, setBrowseOpen] = useState<boolean>(false);
   const [books, setBooks] = useState<{ id: string; title: string }[]>([]);
   const [exporting, setExporting] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const formatInfo: FormatInfo | undefined = useMemo(
+    () => EXPORT_FORMATS.find((f) => f.id === format),
+    [format],
+  );
+
+  // Initialize default fileName and saveDir when dialog opens
+  useEffect(() => {
+    if (!open) return;
+    const ext = formatInfo?.extension ?? "epub";
+    const base = slug(project?.title || "manuscript");
+    setFileName(`${base}.${ext}`);
+    setSaveDir(projectDirectory || "~/Documents/PubScript");
+    setError(null);
+  }, [open, project?.title, projectDirectory]);
+
+  // Update file extension when conversion format changes
+  const handleFormatChange = (nextFormat: ExportFormat) => {
+    setFormat(nextFormat);
+    const nextExt = EXPORT_FORMATS.find((f) => f.id === nextFormat)?.extension ?? "bin";
+    setFileName((prev) => {
+      const trimmed = prev.trim();
+      if (!trimmed) {
+        return `${slug(project?.title || "manuscript")}.${nextExt}`;
+      }
+      const withoutExt = trimmed.replace(/\.[a-z0-9]+$/i, "");
+      return `${withoutExt}.${nextExt}`;
+    });
+  };
+
   // Populate the book/chapter selectors when the dialog opens.
   useEffect(() => {
     if (!open || !adapter || !projectId) return;
@@ -48,7 +85,6 @@ export function ExportDialog({ open, onClose }: ExportDialogProps) {
       const allBooks = await adapter.listBooks(projectId);
       if (!active) return;
       setBooks(allBooks);
-      // Resolve the first chapter across books so the selector has a default.
       let firstChapterId = "";
       for (const book of allBooks) {
         const cs = await adapter.listChapters(book.id);
@@ -69,30 +105,48 @@ export function ExportDialog({ open, onClose }: ExportDialogProps) {
   const chapterOptions = useMemo(() => {
     const byBook = new Map<string, { id: string; title: string }[]>();
     for (const book of books) {
-      byBook.set(book.id, chapters.filter((c) => c.bookId === book.id));
+      byBook.set(
+        book.id,
+        chapters.filter((c) => c.bookId === book.id),
+      );
     }
     return byBook;
   }, [books, chapters]);
 
-  const formatInfo: FormatInfo | undefined = useMemo(
-    () => EXPORT_FORMATS.find((f) => f.id === format),
-    [format]
-  );
-
   const handleExport = async () => {
     if (!adapter || !projectId) return;
     setExporting(true);
     setError(null);
     try {
-      const project = await buildExportProject(adapter, projectId);
+      const exportProj = await buildExportProject(adapter, projectId);
       const options: Parameters<typeof exportProjectData>[2] = {
         scope: scope === "chapter" ? "chapter" : "project",
-        theme: themeId,
       };
       if (scope === "chapter") options.scopeId = chapterId;
-      const data = await exportProjectData(project, format, options);
+      const data = await exportProjectData(exportProj, format, options);
       const ext = formatInfo?.extension ?? "bin";
-      downloadFile(`${slug(projectId)}.${ext}`, data, formatInfo?.mime ?? "application/octet-stream");
+      const rawName = fileName.trim() || `${slug(project?.title || "manuscript")}.${ext}`;
+      const finalFileName = rawName.includes(".") ? rawName : `${rawName}.${ext}`;
+
+      const saved = await api.saveExportToDirectory(
+        {
+          directory: saveDir.trim() || projectDirectory || "~/Documents/PubScript",
+          fileName: finalFileName,
+          data,
+        },
+        serverPort,
+      );
+
+      if (saved.savedOnServer && saved.savedPath) {
+        toast.success(`Exported to ${saved.savedPath}`);
+      } else {
+        downloadFile(
+          finalFileName,
+          data,
+          formatInfo?.mime ?? "application/octet-stream",
+        );
+        toast.success(`Downloaded ${finalFileName}`);
+      }
       onClose();
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -102,89 +156,126 @@ export function ExportDialog({ open, onClose }: ExportDialogProps) {
   };
 
   return (
-    <Modal
-      title="Export project"
-      open={open}
-      onClose={onClose}
-      footer={
-        <>
-          <Button variant="ghost" onClick={onClose} disabled={exporting}>
-            Cancel
-          </Button>
-          <Button onClick={handleExport} disabled={exporting || !formatInfo}>
-            {exporting ? "Exporting…" : "Export"}
-          </Button>
-        </>
-      }
-    >
-      <div className="ps-export-grid">
-        <label className="ps-export-field">
-          <span>Format</span>
-          <select
-            className="ps-select"
-            value={format}
-            onChange={(e) => setFormat(e.target.value as ExportFormat)}
-            disabled={exporting}
-          >
-            {EXPORT_FORMATS.map((f) => (
-              <option key={f.id} value={f.id}>
-                {f.label}
-              </option>
-            ))}
-          </select>
-        </label>
-
-        <label className="ps-export-field">
-          <span>Theme</span>
-          <select
-            className="ps-select"
-            value={themeId}
-            onChange={(e) => setThemeId(e.target.value)}
-            disabled={exporting}
-          >
-            {Object.entries(THEMES).map(([id, t]) => (
-              <option key={id} value={id}>
-                {t.name}
-              </option>
-            ))}
-          </select>
-        </label>
-
-        <label className="ps-export-field">
-          <span>Scope</span>
-          <select
-            className="ps-select"
-            value={scope}
-            onChange={(e) => setScope(e.target.value as Scope)}
-            disabled={exporting}
-          >
-            <option value="project">Entire book</option>
-            <option value="chapter">Selected chapter</option>
-          </select>
-        </label>
-
-        {scope === "chapter" && (
-          <label className="ps-export-field">
-            <span>Chapter</span>
+    <>
+      <Modal
+        title="Export Manuscript"
+        open={open}
+        onClose={onClose}
+        footer={
+          <>
+            <Button variant="ghost" onClick={onClose} disabled={exporting}>
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => void handleExport()}
+              disabled={exporting || !formatInfo}
+            >
+              {exporting ? "Exporting…" : "Export"}
+            </Button>
+          </>
+        }
+      >
+        <div className="ps-export-grid" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+          <label className="ps-export-field" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <span style={{ fontSize: 12.5, fontWeight: 600 }}>File Type / Conversion Format</span>
             <select
               className="ps-select"
-              value={chapterId}
-              onChange={(e) => setChapterId(e.target.value)}
-              disabled={exporting || chapterOptions.size === 0}
+              value={format}
+              onChange={(e) => handleFormatChange(e.target.value as ExportFormat)}
+              disabled={exporting}
             >
-              {Array.from(chapterOptions.values()).flatMap((cs) =>
-                cs.map((c) => (
-                  <option key={c.id} value={c.id}>
-                    {c.title}
-                  </option>
-                ))
-              )}
+              {EXPORT_FORMATS.map((f) => (
+                <option key={f.id} value={f.id}>
+                  {f.label} (.{f.extension})
+                </option>
+              ))}
             </select>
           </label>
-        )}
-      </div>
 
-      {error && <p className="ps-export-error" role="alert">{error}</p>}
-    </Modal>
+          <label className="ps-export-field" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <span style={{ fontSize: 12.5, fontWeight: 600 }}>Scope</span>
+            <select
+              className="ps-select"
+              value={scope}
+              onChange={(e) => setScope(e.target.value as Scope)}
+              disabled={exporting}
+            >
+              <option value="project">Entire book</option>
+              <option value="chapter">Selected chapter</option>
+            </select>
+          </label>
+
+          {scope === "chapter" && (
+            <label className="ps-export-field" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              <span style={{ fontSize: 12.5, fontWeight: 600 }}>Chapter</span>
+              <select
+                className="ps-select"
+                value={chapterId}
+                onChange={(e) => setChapterId(e.target.value)}
+                disabled={exporting || chapterOptions.size === 0}
+              >
+                {Array.from(chapterOptions.values()).flatMap((cs) =>
+                  cs.map((c) => (
+                    <option key={c.id} value={c.id}>
+                      {c.title}
+                    </option>
+                  )),
+                )}
+              </select>
+            </label>
+          )}
+
+          <label className="ps-export-field" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <span style={{ fontSize: 12.5, fontWeight: 600 }}>Exported File Name</span>
+            <input
+              type="text"
+              className="ps-input"
+              value={fileName}
+              onChange={(e) => setFileName(e.target.value)}
+              placeholder={`manuscript.${formatInfo?.extension ?? "epub"}`}
+              disabled={exporting}
+            />
+          </label>
+
+          <div className="ps-export-field" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            <span style={{ fontSize: 12.5, fontWeight: 600 }}>Save Directory</span>
+            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+              <input
+                type="text"
+                className="ps-input"
+                style={{ flex: 1, fontFamily: "var(--ps-font-mono)", fontSize: 12.5 }}
+                value={saveDir}
+                onChange={(e) => setSaveDir(e.target.value)}
+                placeholder="~/Documents/PubScript"
+                disabled={exporting}
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => setBrowseOpen(true)}
+                disabled={exporting}
+              >
+                📁 Browse…
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {error && (
+          <p className="ps-export-error" role="alert" style={{ color: "var(--ps-danger)", marginTop: 10 }}>
+            {error}
+          </p>
+        )}
+      </Modal>
+
+      <DirectoryBrowserModal
+        open={browseOpen}
+        initialPath={saveDir}
+        title="Choose Export Save Directory"
+        onSelect={(dir) => setSaveDir(dir)}
+        onClose={() => setBrowseOpen(false)}
+      />
+    </>
   );
 }