refactoring, linting, formatting

src/components/ActionsPanel.tsx

@@ -1,5 +1,8 @@
-import React from 'react';
-import type { SplitResult } from '../pdf/pdfTypes';
+import React from "react";
+import type {
+  PdfDownload,
+  SplitPdfDownload,
+} from "../hooks/usePdfGeneratedOutputs";
 
 interface ActionsPanelProps {
   hasPdf: boolean;
@@ -11,11 +14,9 @@ interface ActionsPanelProps {
   onExtractSelected: () => void;
   onExportReordered: () => void;
 
-  splitResults: SplitResult[];
-  subsetDownloadUrl: string | null;
-  subsetFilename: string | null;
-  exportDownloadUrl: string | null;
-  exportFilename: string | null;
+  splitDownloads: SplitPdfDownload[];
+  subsetDownload: PdfDownload | null;
+  exportDownload: PdfDownload | null;
 }
 
 const ActionsPanel: React.FC<ActionsPanelProps> = ({
@@ -25,11 +26,9 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
   onSplit,
   onExtractSelected,
   onExportReordered,
-  splitResults,
-  subsetDownloadUrl,
-  subsetFilename,
-  exportDownloadUrl,
-  exportFilename,
+  splitDownloads,
+  subsetDownload,
+  exportDownload,
 }) => {
   const disabled = !hasPdf || isBusy;
 
@@ -41,20 +40,20 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
   return (
     <div className="card">
       <h2>Tools</h2>
-      <p style={{ fontSize: '0.85rem', color: '#6b7280' }}>
+      <p style={{ fontSize: "0.85rem", color: "#6b7280" }}>
         Use these tools on the current in-memory document (reordered, rotated,
         with deletions). Nothing is uploaded to a server.
       </p>
 
       <div
         className="button-row"
-        style={{ justifyContent: 'space-between', flexWrap: 'wrap' }}
+        style={{ justifyContent: "space-between", flexWrap: "wrap" }}
       >
         <button
           className="secondary"
           disabled={disabled}
           onClick={onExportReordered}
-          style={{ flex: '1 1 45%' }}
+          style={{ flex: "1 1 45%" }}
         >
           🧾 Export new PDF
         </button>
@@ -63,11 +62,11 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
           className="secondary"
           disabled={disabled || selectedCount === 0}
           onClick={handleExtractSelectedClick}
-          style={{ flex: '1 1 45%' }}
+          style={{ flex: "1 1 45%" }}
           title={
             selectedCount === 0
-              ? 'Select at least one page'
-              : 'Create a PDF from selected pages'
+              ? "Select at least one page"
+              : "Create a PDF from selected pages"
           }
         >
           📤 Extract selected ({selectedCount})
@@ -77,58 +76,52 @@ const ActionsPanel: React.FC<ActionsPanelProps> = ({
           className="secondary"
           disabled={disabled}
           onClick={onSplit}
-          style={{ flex: '1 1 45%' }}
+          style={{ flex: "1 1 45%" }}
         >
           📂 Split into single PDFs
         </button>
       </div>
 
-      {subsetDownloadUrl && subsetFilename && (
-        <div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
-          <strong>Subset result:</strong>{' '}
+      {subsetDownload && (
+        <div style={{ marginTop: "0.5rem", fontSize: "0.9rem" }}>
+          <strong>Subset result:</strong>{" "}
           <a
             className="download-link"
-            href={subsetDownloadUrl}
-            download={subsetFilename}
+            href={subsetDownload.url}
+            download={subsetDownload.filename}
           >
-            Download {subsetFilename}
+            Download {subsetDownload.filename}
           </a>
         </div>
       )}
 
-      {exportDownloadUrl && exportFilename && (
-        <div style={{ marginTop: '0.5rem', fontSize: '0.9rem' }}>
-          <strong>Exported document:</strong>{' '}
+      {exportDownload && (
+        <div style={{ marginTop: "0.5rem", fontSize: "0.9rem" }}>
+          <strong>Exported document:</strong>{" "}
           <a
             className="download-link"
-            href={exportDownloadUrl}
-            download={exportFilename}
+            href={exportDownload.url}
+            download={exportDownload.filename}
           >
-            Download {exportFilename}
+            Download {exportDownload.filename}
           </a>
         </div>
       )}
 
-      {splitResults.length > 0 && (
-        <div style={{ marginTop: '0.75rem', fontSize: '0.9rem' }}>
+      {splitDownloads.length > 0 && (
+        <div style={{ marginTop: "0.75rem", fontSize: "0.9rem" }}>
           <strong>Single-page PDFs:</strong>
           <div>
-            {splitResults.map((r) => {
-              const url = URL.createObjectURL(r.blob);
-              return (
-                <a
-                  key={r.pageIndex}
-                  className="download-link"
-                  href={url}
-                  download={r.filename}
-                  onClick={() => {
-                    setTimeout(() => URL.revokeObjectURL(url), 5000);
-                  }}
-                >
-                  {r.filename}
-                </a>
-              );
-            })}
+            {splitDownloads.map((download) => (
+              <a
+                key={download.id}
+                className="download-link"
+                href={download.url}
+                download={download.filename}
+              >
+                {download.filename}
+              </a>
+            ))}
           </div>
         </div>
       )}