From f25d856a2a50c0850a7f3bc4b69bae2ad511733a Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Fri, 5 Jun 2026 19:30:15 +0530
Subject: [PATCH] feat(renderer): ExportBatchDialog (format, concurrency, file
 list)

---
 .../components/modals/ExportBatchDialog.tsx   | 79 +++++++++++++++++++
 .../modals/ExportBatchDialog.test.tsx         | 29 +++++++
 2 files changed, 108 insertions(+)
 create mode 100644 src/renderer/components/modals/ExportBatchDialog.tsx
 create mode 100644 tests/component/modals/ExportBatchDialog.test.tsx

diff --git a/src/renderer/components/modals/ExportBatchDialog.tsx b/src/renderer/components/modals/ExportBatchDialog.tsx
new file mode 100644
index 0000000..f740e35
--- /dev/null
+++ b/src/renderer/components/modals/ExportBatchDialog.tsx
@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useAppStore } from '@/stores/app-store';
+import { ipc } from '@/lib/ipc';
+import { ExportDialogFooter } from './ExportDialogFooter';
+
+const extFor = (format: 'pdf' | 'docx' | 'html' | 'png') =>
+  format === 'pdf' ? '.pdf' : format === 'docx' ? '.docx' : format === 'png' ? '.png' : '.html';
+
+export function ExportBatchDialog({ sourcePaths }: { sourcePaths: string[] }) {
+  const closeModal = useAppStore((s) => s.closeModal);
+  const [format, setFormat] = useState<'pdf' | 'docx' | 'html' | 'png'>('pdf');
+  const [concurrency, setConcurrency] = useState(4);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async () => {
+    setSubmitting(true);
+    setError(null);
+    const items = sourcePaths.map((p) => ({
+      inputPath: p,
+      outputPath: p.replace(/\.md$/, extFor(format)),
+    }));
+    const result = await ipc.export.batch(items, { format, concurrency });
+    if (!result.ok) {
+      setError(result.error.message);
+      setSubmitting(false);
+    } else {
+      closeModal();
+    }
+  };
+
+  return (
+    <Dialog open onOpenChange={(o) => !o && closeModal()}>
+      <DialogContent aria-describedby="batch-desc">
+        <DialogHeader>
+          <DialogTitle>Batch export</DialogTitle>
+          <DialogDescription id="batch-desc">{sourcePaths.length} files</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3 text-sm">
+          <div>
+            <Label htmlFor="batch-format">Format</Label>
+            <Select value={format} onValueChange={(v) => setFormat(v as any)}>
+              <SelectTrigger id="batch-format" aria-label="Format"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="pdf">PDF</SelectItem>
+                <SelectItem value="docx">DOCX</SelectItem>
+                <SelectItem value="html">HTML</SelectItem>
+                <SelectItem value="png">PNG</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <Label htmlFor="batch-concurrency">Concurrency</Label>
+            <Select value={String(concurrency)} onValueChange={(v) => setConcurrency(Number(v))}>
+              <SelectTrigger id="batch-concurrency" aria-label="Concurrency"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {[1, 2, 4, 8, 16].map((n) => (
+                  <SelectItem key={n} value={String(n)}>{n}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="max-h-40 overflow-auto rounded border border-border bg-card/20 p-2 text-xs">
+            {sourcePaths.map((p) => <div key={p} className="truncate">{p}</div>)}
+          </div>
+          {error && (
+            <div role="alert" className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">
+              {error}
+            </div>
+          )}
+        </div>
+        <ExportDialogFooter onCancel={closeModal} onSubmit={handleSubmit} submitting={submitting} submitLabel="Export" />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/tests/component/modals/ExportBatchDialog.test.tsx b/tests/component/modals/ExportBatchDialog.test.tsx
new file mode 100644
index 0000000..cb9afdf
--- /dev/null
+++ b/tests/component/modals/ExportBatchDialog.test.tsx
@@ -0,0 +1,29 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ExportBatchDialog } from '@/components/modals/ExportBatchDialog';
+
+describe('ExportBatchDialog', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    window.electronAPI = {
+      export: { batch: vi.fn().mockResolvedValue({ ok: true, data: { total: 2, succeeded: 2, failed: 0, results: [] } }) },
+    } as any;
+  });
+
+  it('renders the file list passed via sourcePaths', () => {
+    render(<ExportBatchDialog sourcePaths={['/a.md', '/b.md']} />);
+    expect(screen.getByText('/a.md')).toBeInTheDocument();
+    expect(screen.getByText('/b.md')).toBeInTheDocument();
+  });
+
+  it('selecting format and concurrency submits correct options', async () => {
+    render(<ExportBatchDialog sourcePaths={['/a.md', '/b.md']} />);
+    await userEvent.click(screen.getByRole('combobox', { name: /format/i }));
+    await userEvent.click(screen.getByRole('option', { name: /^pdf$/i }));
+    await userEvent.click(screen.getByRole('button', { name: /^export$/i }));
+    const call = (window.electronAPI.export.batch as any).mock.calls[0];
+    expect(call[0]).toEqual([{ inputPath: '/a.md', outputPath: expect.any(String) }, { inputPath: '/b.md', outputPath: expect.any(String) }]);
+    expect(call[1].format).toBe('pdf');
+  });
+});