feat(sync): sync Web and Desktop projects with Host Server SQLite and Main Project Directory

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

@@ -43,6 +43,7 @@ export function ExportDialog({ open, onClose }: ExportDialogProps) {
   const [chapterId, setChapterId] = useState<string>("");
   const [fileName, setFileName] = useState<string>("");
   const [saveDir, setSaveDir] = useState<string>(projectDirectory || "~/Documents/PubScript");
+  const [alsoDownloadBrowser, setAlsoDownloadBrowser] = useState<boolean>(false);
   const [browseOpen, setBrowseOpen] = useState<boolean>(false);
   const [books, setBooks] = useState<{ id: string; title: string }[]>([]);
   const [exporting, setExporting] = useState(false);
@@ -138,7 +139,14 @@ export function ExportDialog({ open, onClose }: ExportDialogProps) {
       );
 
       if (saved.savedOnServer && saved.savedPath) {
-        toast.success(`Exported to ${saved.savedPath}`);
+        if (alsoDownloadBrowser) {
+          downloadFile(
+            finalFileName,
+            data,
+            formatInfo?.mime ?? "application/octet-stream",
+          );
+        }
+        toast.success(`Saved on host machine: ${saved.savedPath}`);
       } else {
         downloadFile(
           finalFileName,
@@ -239,7 +247,7 @@ export function ExportDialog({ open, onClose }: ExportDialogProps) {
           </label>
 
           <div className="ps-export-field" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-            <span style={{ fontSize: 12.5, fontWeight: 600 }}>Save Directory</span>
+            <span style={{ fontSize: 12.5, fontWeight: 600 }}>Save Directory on Host Machine</span>
             <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
               <input
                 type="text"
@@ -256,9 +264,27 @@ export function ExportDialog({ open, onClose }: ExportDialogProps) {
                 onClick={() => setBrowseOpen(true)}
                 disabled={exporting}
               >
-                📁 Browse…
+                📁 Browse Host…
               </Button>
             </div>
+            <label
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                fontSize: 12,
+                color: "var(--ps-text-muted)",
+                marginTop: 4,
+                cursor: "pointer",
+              }}
+            >
+              <input
+                type="checkbox"
+                checked={alsoDownloadBrowser}
+                onChange={(e) => setAlsoDownloadBrowser(e.target.checked)}
+              />
+              <span>Also download a copy to this browser device</span>
+            </label>
           </div>
         </div>