Miguel Palhas
babdc678e0
Ports the vanilla spawn form/modal to src/components/spawn/: SpawnModal, SpawnForm, DirAutocomplete, BranchPicker, and a useFastForward hook for the one-keystroke spawn. Pure logic modules (spawnForm.ts's buildSpawnRequest, fastForward.ts, spawnSimilar.ts, projectList.ts, toolIcon.ts) are reused as-is rather than re-derived. Exports supportsStructuredView from spawnForm.ts so the React form can share the structured-view-eligibility check with the vanilla one.
83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
// React port of ../../spawnModal.ts: dialog chrome around SpawnForm. Escape,
|
|
// the ✕ and a click on the backdrop all close it; SpawnForm's own DirAutocomplete
|
|
// swallows Escape first, so dismissing a dropdown never also discards the form.
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { createPortal } from "react-dom";
|
|
|
|
import type { Session } from "../../types.js";
|
|
import { SpawnForm, type SpawnFormProps } from "./SpawnForm.js";
|
|
|
|
export interface SpawnModalProps {
|
|
seed?: SpawnFormProps["seed"];
|
|
/** Called with the created session after a successful submit — the modal
|
|
* has already closed by then, so the caller decides where it lands. */
|
|
onSuccess(session: Session): void;
|
|
onClose(): void;
|
|
}
|
|
|
|
export function SpawnModal({ seed, onSuccess, onClose }: SpawnModalProps) {
|
|
const filterInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleSuccess = (session: Session) => {
|
|
onClose();
|
|
onSuccess(session);
|
|
};
|
|
|
|
// The project filter owns the keyboard on open: typing narrows the list and
|
|
// Tab from here reaches the harness tiles, matching the TUI's draft pane.
|
|
useEffect(() => {
|
|
const host = filterInputRef.current;
|
|
host?.querySelector<HTMLInputElement>("input[placeholder='Filter projects…']")?.focus();
|
|
}, []);
|
|
|
|
return createPortal(
|
|
<div
|
|
className="modal-backdrop fixed inset-0 z-modal flex items-center justify-center bg-bg/70 backdrop-blur-sm"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
}}
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="spawn-title"
|
|
className="flex max-h-[92vh] w-full max-w-[560px] flex-col rounded-r-3 border border-border bg-surface shadow-2"
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Escape" && !e.defaultPrevented) {
|
|
e.preventDefault();
|
|
onClose();
|
|
}
|
|
}}
|
|
>
|
|
<header className="flex items-center justify-between border-b border-border p-sp-3">
|
|
<h2 id="spawn-title" className="m-0 text-fs-15 font-semibold text-ink">
|
|
{seed ? "Spawn similar" : "Spawn session"}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
aria-label="Close"
|
|
className="rounded-r-1 px-sp-2 py-1 text-fs-15 text-muted hover:text-ink"
|
|
onClick={onClose}
|
|
>
|
|
✕
|
|
</button>
|
|
</header>
|
|
<div ref={filterInputRef} className="min-h-0 flex-1 overflow-auto">
|
|
<SpawnForm seed={seed} onSuccess={handleSuccess} />
|
|
</div>
|
|
<div className="flex justify-end gap-sp-2 border-t border-border p-sp-3">
|
|
<button
|
|
type="button"
|
|
className="rounded-r-1 border border-border px-sp-3 py-sp-1 text-fs-12 text-ink"
|
|
onClick={onClose}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|