refactoring, linting, formatting

src/components/PageWorkspace/CopyPagesDialog.tsx

@@ -0,0 +1,224 @@
+import React, { useEffect } from "react";
+
+interface CopyPagesDialogProps {
+  selectedCount: number;
+  pageCount: number;
+  targetPosition: string;
+  error: string | null;
+  onTargetPositionChange: (value: string) => void;
+  onCancel: () => void;
+  onConfirm: (e?: React.FormEvent) => void;
+}
+
+const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
+  selectedCount,
+  pageCount,
+  targetPosition,
+  error,
+  onTargetPositionChange,
+  onCancel,
+  onConfirm,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onCancel]);
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="copy-pages-dialog-title"
+      onPointerDown={(e) => {
+        if (e.target === e.currentTarget) {
+          onCancel();
+        }
+      }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 60,
+        background: "rgba(15, 23, 42, 0.55)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem",
+      }}
+    >
+      <form
+        onSubmit={onConfirm}
+        style={{
+          width: "100%",
+          maxWidth: "420px",
+          background: "white",
+          borderRadius: "0.75rem",
+          boxShadow: "0 20px 40px rgba(15, 23, 42, 0.35)",
+          padding: "1rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.75rem",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "0.75rem",
+          }}
+        >
+          <h2
+            id="copy-pages-dialog-title"
+            style={{
+              margin: 0,
+              fontSize: "1rem",
+            }}
+          >
+            Copy selected pages
+          </h2>
+
+          <button
+            type="button"
+            onClick={onCancel}
+            style={{
+              border: "none",
+              borderRadius: "999px",
+              width: "1.8rem",
+              height: "1.8rem",
+              background: "#e5e7eb",
+              color: "#111827",
+              cursor: "pointer",
+              fontSize: "1.1rem",
+              lineHeight: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            aria-label="Close copy dialog"
+          >
+            ×
+          </button>
+        </div>
+
+        <p
+          style={{
+            margin: 0,
+            fontSize: "0.9rem",
+            color: "#4b5563",
+          }}
+        >
+          Copy{" "}
+          <strong>
+            {selectedCount === 1
+              ? "1 selected page"
+              : `${selectedCount} selected pages`}
+          </strong>{" "}
+          to a new position.
+        </p>
+
+        <label
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.25rem",
+            fontSize: "0.9rem",
+          }}
+        >
+          Insert before position
+          <input
+            type="number"
+            min={1}
+            max={pageCount + 1}
+            value={targetPosition}
+            autoFocus
+            onChange={(e) => onTargetPositionChange(e.target.value)}
+            style={{
+              padding: "0.45rem 0.55rem",
+              borderRadius: "0.5rem",
+              border: "1px solid #d1d5db",
+              fontSize: "0.95rem",
+            }}
+          />
+        </label>
+
+        <div
+          style={{
+            fontSize: "0.8rem",
+            color: "#6b7280",
+            lineHeight: 1.4,
+          }}
+        >
+          <div>1 = before the first page</div>
+          <div>{pageCount + 1} = after the last page</div>
+        </div>
+
+        {error && (
+          <div
+            style={{
+              borderRadius: "0.5rem",
+              background: "#fef2f2",
+              border: "1px solid #fecaca",
+              color: "#b91c1c",
+              padding: "0.5rem",
+              fontSize: "0.85rem",
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "0.5rem",
+            marginTop: "0.25rem",
+          }}
+        >
+          <button
+            type="button"
+            onClick={onCancel}
+            style={{
+              border: "none",
+              borderRadius: "0.5rem",
+              padding: "0.45rem 0.8rem",
+              background: "#e5e7eb",
+              color: "#111827",
+              cursor: "pointer",
+              fontSize: "0.9rem",
+            }}
+          >
+            Cancel
+          </button>
+
+          <button
+            type="submit"
+            style={{
+              border: "none",
+              borderRadius: "0.5rem",
+              padding: "0.45rem 0.8rem",
+              background: "#16a34a",
+              color: "white",
+              cursor: "pointer",
+              fontSize: "0.9rem",
+            }}
+          >
+            Copy pages
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CopyPagesDialog;