feat: add publish button with confirmation dialog

- Purple publish icon in the top bar
- Confirmation dialog explaining what publish does
- Loading state with spinner during publish
- Success/error states with appropriate messaging
- Calls POST /api/publish with current docName

Made-with: Cursor

frontend/src/App.tsx

@@ -14,6 +14,16 @@ import UndoIcon from "@mui/icons-material/Undo";
 import RedoIcon from "@mui/icons-material/Redo";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import PublishOutlinedIcon from "@mui/icons-material/PublishOutlined";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  CircularProgress,
+} from "@mui/material";
 import { Editor } from "./editor/Editor";
 import { CommentsSidebar } from "./components/CommentsSidebar";
 import { CommentDialog } from "./components/CommentDialog";
@@ -61,6 +71,9 @@ export default function App() {
   const [showExport, setShowExport] = useState(false);
   const [commentDialogOpen, setCommentDialogOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
+  const [publishDialogOpen, setPublishDialogOpen] = useState(false);
+  const [publishState, setPublishState] = useState<"idle" | "loading" | "success" | "error">("idle");
+  const [publishError, setPublishError] = useState("");
   const selectionRange = useRef<{ from: number; to: number } | null>(null);
   const [hasSelection, setHasSelection] = useState(false);
   const [undoManager, setUndoManager] = useState<UndoManager | null>(null);
@@ -107,6 +120,26 @@ export default function App() {
     setSettingsMap(map);
   }, []);
 
+  const handlePublish = useCallback(async () => {
+    setPublishState("loading");
+    setPublishError("");
+    try {
+      const res = await fetch("/api/publish", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ docName }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: "Publish failed" }));
+        throw new Error(data.error || "Publish failed");
+      }
+      setPublishState("success");
+    } catch (err: any) {
+      setPublishState("error");
+      setPublishError(err.message || "Unknown error");
+    }
+  }, [docName]);
+
   const handleAddComment = useCallback(() => {
     const editor = editorRef.current;
     if (!editor) return;
@@ -195,6 +228,16 @@ export default function App() {
             <FileDownloadOutlinedIcon sx={{ fontSize: 18 }} />
           </IconButton>
         </Tooltip>
+        <Box sx={{ width: "1px", height: 16, bgcolor: "divider", mx: 0.5 }} />
+        <Tooltip title="Publish article" arrow>
+          <IconButton
+            size="small"
+            onClick={() => { setPublishState("idle"); setPublishDialogOpen(true); }}
+            sx={{ color: "primary.main" }}
+          >
+            <PublishOutlinedIcon sx={{ fontSize: 18 }} />
+          </IconButton>
+        </Tooltip>
         <Chip
           label={user.name}
           size="small"
@@ -316,6 +359,59 @@ export default function App() {
         store={frontmatterStore}
         settingsMap={settingsMap}
       />
+
+      <Dialog
+        open={publishDialogOpen}
+        onClose={() => setPublishDialogOpen(false)}
+        maxWidth="xs"
+        fullWidth
+      >
+        <DialogTitle>
+          {publishState === "success" ? "Published!" : "Publish article"}
+        </DialogTitle>
+        <DialogContent>
+          {publishState === "idle" && (
+            <DialogContentText>
+              This will generate a static HTML page, PDF, and thumbnail
+              from the current document. Visitors without edit access
+              will see the published version.
+            </DialogContentText>
+          )}
+          {publishState === "loading" && (
+            <Box sx={{ display: "flex", alignItems: "center", gap: 2, py: 2 }}>
+              <CircularProgress size={24} />
+              <DialogContentText sx={{ m: 0 }}>
+                Publishing...
+              </DialogContentText>
+            </Box>
+          )}
+          {publishState === "success" && (
+            <DialogContentText>
+              Article published successfully. Visitors will now see
+              the updated version.
+            </DialogContentText>
+          )}
+          {publishState === "error" && (
+            <DialogContentText color="error">
+              {publishError || "An error occurred while publishing."}
+            </DialogContentText>
+          )}
+        </DialogContent>
+        <DialogActions>
+          {publishState === "idle" && (
+            <>
+              <Button onClick={() => setPublishDialogOpen(false)}>Cancel</Button>
+              <Button variant="contained" onClick={handlePublish}>
+                Publish
+              </Button>
+            </>
+          )}
+          {publishState === "loading" && null}
+          {(publishState === "success" || publishState === "error") && (
+            <Button onClick={() => setPublishDialogOpen(false)}>Close</Button>
+          )}
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 }