v3: code quality pass

src/components/NewPlaylistForm.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import { useState } from "react";
 import type { Playlist } from "../model.ts";
+import { Modal } from "./Modal.tsx";
 import { PlaylistCreateForm } from "./PlaylistCreateForm.tsx";
 
 interface NewPlaylistFormProps {
@@ -17,26 +17,6 @@ export function NewPlaylistForm(
   }: NewPlaylistFormProps,
 ) {
   const [open, setOpen] = useState(false);
-  const backdropRef = useRef<HTMLDivElement>(null);
-
-  const close = () => setOpen(false);
-
-  useEffect(() => {
-    if (!open) return;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [open]);
-
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === "Escape") close();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [open]);
 
   return (
     <>
@@ -48,38 +28,16 @@ export function NewPlaylistForm(
         {toggleLabel}
       </button>
 
-      {open && createPortal(
-        <div
-          className="modal-backdrop"
-          ref={backdropRef}
-          onClick={(e) => {
-            if (e.target === backdropRef.current) close();
-          }}
-        >
-          <div className="modal-card">
-            <div className="modal-header">
-              <span className="modal-title">New playlist</span>
-              <button
-                type="button"
-                className="modal-close-btn"
-                onClick={close}
-                aria-label="Close"
-              >
-                ✕
-              </button>
-            </div>
-            <div className="modal-body">
-              <PlaylistCreateForm
-                onCreated={(playlist) => {
-                  onCreated(playlist);
-                  close();
-                }}
-                onCancel={close}
-              />
-            </div>
-          </div>
-        </div>,
-        document.body,
+      {open && (
+        <Modal title="New playlist" onClose={() => setOpen(false)}>
+          <PlaylistCreateForm
+            onCreated={(playlist) => {
+              onCreated(playlist);
+              setOpen(false);
+            }}
+            onCancel={() => setOpen(false)}
+          />
+        </Modal>
       )}
     </>
   );