f528d7cc55
Fixed FN-3749 by repointing roadmap type imports from their original location to the plugin package across the legacy API, RoadmapsView component, and useRoadmaps hook. Fusion-Task-Id: FN-3749
2560 lines
90 KiB
TypeScript
2560 lines
90 KiB
TypeScript
import { useState, useCallback, useEffect, useRef } from "react";
|
|
import { Plus, Pencil, Trash2, Check, X, GripVertical, Sparkles, Download, Copy, Loader, ArrowLeft, ChevronUp } from "lucide-react";
|
|
import "./RoadmapsView.css";
|
|
import type { ToastType } from "../hooks/useToast";
|
|
import { useRoadmaps, type FeatureSuggestion, type MilestoneSuggestion, type SuggestionDraftPatch } from "../hooks/useRoadmaps";
|
|
import { useViewportMode } from "../hooks/useViewportMode";
|
|
import { useConfirm } from "../hooks/useConfirm";
|
|
import type {
|
|
Roadmap,
|
|
RoadmapMilestone,
|
|
RoadmapFeature,
|
|
RoadmapCreateInput,
|
|
RoadmapUpdateInput,
|
|
RoadmapMilestoneCreateInput,
|
|
RoadmapMilestoneUpdateInput,
|
|
RoadmapFeatureCreateInput,
|
|
RoadmapFeatureUpdateInput,
|
|
RoadmapMissionPlanningHandoff,
|
|
RoadmapFeatureTaskPlanningHandoff,
|
|
} from "@fusion-plugin-examples/roadmap";
|
|
|
|
export interface RoadmapsViewProps {
|
|
projectId?: string;
|
|
addToast: (message: string, type?: ToastType) => void;
|
|
}
|
|
|
|
// ── Drag State Types ────────────────────────────────────────────────
|
|
|
|
interface MilestoneDragState {
|
|
draggingId: string | null;
|
|
dropTargetId: string | null;
|
|
dropPosition: "before" | "after" | null;
|
|
}
|
|
|
|
interface FeatureDragState {
|
|
draggingId: string | null;
|
|
draggingMilestoneId: string | null;
|
|
dropTargetMilestoneId: string | null;
|
|
dropTargetIndex: number | null;
|
|
dropPosition: "before" | "after" | null;
|
|
}
|
|
|
|
// ── Inline Edit State Types ─────────────────────────────────────────
|
|
|
|
interface InlineEditState {
|
|
roadmapId: string | null;
|
|
field: "title" | "description" | null;
|
|
value: string;
|
|
}
|
|
|
|
interface MilestoneInlineEditState {
|
|
milestoneId: string | null;
|
|
field: "title" | "description" | null;
|
|
value: string;
|
|
}
|
|
|
|
interface FeatureInlineEditState {
|
|
featureId: string | null;
|
|
field: "title" | "description" | null;
|
|
value: string;
|
|
}
|
|
|
|
// ── Create Form State ───────────────────────────────────────────────
|
|
|
|
interface CreateFormState {
|
|
type: "roadmap" | "milestone" | "feature" | null;
|
|
parentId?: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
// ── Handoff Modal Types ─────────────────────────────────────────────
|
|
|
|
interface HandoffModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
roadmapId: string;
|
|
roadmapTitle: string;
|
|
handoffPayload: { mission: RoadmapMissionPlanningHandoff; features: RoadmapFeatureTaskPlanningHandoff[] } | null;
|
|
isLoading: boolean;
|
|
error: Error | null;
|
|
onFetchHandoff: () => void;
|
|
onCopyToClipboard: () => void;
|
|
}
|
|
|
|
// ── Handoff Modal Component ─────────────────────────────────────────
|
|
|
|
function HandoffModal({
|
|
isOpen,
|
|
onClose,
|
|
roadmapTitle,
|
|
handoffPayload,
|
|
isLoading,
|
|
error,
|
|
onFetchHandoff,
|
|
onCopyToClipboard,
|
|
}: HandoffModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="modal-overlay open" onClick={onClose} role="presentation">
|
|
<div className="modal modal-lg" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true" aria-labelledby="handoff-modal-title">
|
|
<div className="modal-header">
|
|
<h2 id="handoff-modal-title">Export Roadmap: {roadmapTitle}</h2>
|
|
<button className="modal-close" onClick={onClose} aria-label="Close modal">
|
|
<X size={18} />
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<p className="text-muted roadmaps-view__handoff-intro">
|
|
Export roadmap data for use in mission and task planning flows.
|
|
This is a read-only export — no missions or tasks will be created.
|
|
</p>
|
|
|
|
{error && (
|
|
<div className="form-error roadmaps-view__handoff-error">
|
|
Error loading handoff data: {error.message}
|
|
</div>
|
|
)}
|
|
|
|
{!handoffPayload && !isLoading && (
|
|
<div className="roadmaps-view__handoff-empty-state">
|
|
<button className="btn btn-primary" onClick={onFetchHandoff}>
|
|
<Download size={16} className="roadmaps-view__handoff-button-icon" />
|
|
Load Handoff Data
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{isLoading && (
|
|
<div className="roadmaps-view__handoff-loading-state">
|
|
<Loader size={24} className="spin" />
|
|
<p className="roadmaps-view__handoff-loading-text">Loading handoff data...</p>
|
|
</div>
|
|
)}
|
|
|
|
{handoffPayload && (
|
|
<>
|
|
<div className="roadmaps-view__handoff-section">
|
|
<h3 className="roadmaps-view__handoff-section-title">Mission Planning Handoff</h3>
|
|
<div className="card roadmaps-view__handoff-card">
|
|
<pre className="roadmaps-view__handoff-pre roadmaps-view__handoff-pre--mission">
|
|
{JSON.stringify(handoffPayload.mission, null, 2)}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="roadmaps-view__handoff-section">
|
|
<h3 className="roadmaps-view__handoff-section-title">
|
|
Feature Task Planning Handoffs ({handoffPayload.features.length})
|
|
</h3>
|
|
<div className="card roadmaps-view__handoff-card">
|
|
<pre className="roadmaps-view__handoff-pre roadmaps-view__handoff-pre--features">
|
|
{JSON.stringify(handoffPayload.features, null, 2)}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="modal-actions">
|
|
<div className="modal-actions-left">
|
|
{handoffPayload && (
|
|
<button className="btn btn-sm" onClick={onCopyToClipboard}>
|
|
<Copy size={14} className="roadmaps-view__handoff-copy-icon" />
|
|
Copy to Clipboard
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="modal-actions-right">
|
|
<button className="btn" onClick={onClose}>Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Roadmap Item ─────────────────────────────────────────────────────
|
|
|
|
function RoadmapItem({
|
|
roadmap,
|
|
isSelected,
|
|
onSelect,
|
|
onEdit,
|
|
onDelete,
|
|
onExport,
|
|
}: {
|
|
roadmap: Roadmap;
|
|
isSelected: boolean;
|
|
onSelect: () => void;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
onExport: () => void;
|
|
}) {
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter") {
|
|
onSelect();
|
|
}
|
|
};
|
|
|
|
const handleEditClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onEdit();
|
|
};
|
|
|
|
const handleDeleteClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onDelete();
|
|
};
|
|
|
|
const handleExportClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onExport();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`roadmaps-view__sidebar-item${isSelected ? " roadmaps-view__sidebar-item--active" : ""}`}
|
|
onClick={onSelect}
|
|
onKeyDown={handleKeyDown}
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-selected={isSelected}
|
|
data-testid={`roadmap-item-${roadmap.id}`}
|
|
>
|
|
<div className="roadmaps-view__sidebar-item-content">
|
|
<div className="roadmaps-view__sidebar-item-title">{roadmap.title}</div>
|
|
{roadmap.description && (
|
|
<div className="roadmaps-view__sidebar-item-desc">{roadmap.description}</div>
|
|
)}
|
|
</div>
|
|
<div className="roadmaps-view__sidebar-item-actions" onClick={handleEditClick} role="presentation">
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={handleExportClick}
|
|
title="Export roadmap"
|
|
aria-label="Export roadmap"
|
|
data-testid={`roadmap-export-${roadmap.id}`}
|
|
type="button"
|
|
>
|
|
<Download size={14} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={handleEditClick}
|
|
title="Edit roadmap"
|
|
aria-label="Edit roadmap"
|
|
data-testid={`roadmap-edit-${roadmap.id}`}
|
|
type="button"
|
|
>
|
|
<Pencil size={14} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
|
|
onClick={handleDeleteClick}
|
|
title="Delete roadmap"
|
|
aria-label="Delete roadmap"
|
|
data-testid={`roadmap-delete-${roadmap.id}`}
|
|
type="button"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Mobile Roadmap List ──────────────────────────────────────────────
|
|
|
|
function MobileRoadmapList({
|
|
roadmaps,
|
|
selectedRoadmapId,
|
|
onSelect,
|
|
onCreate,
|
|
onEdit,
|
|
onDelete,
|
|
onExport,
|
|
showCreateForm,
|
|
onCancelCreate,
|
|
onSaveCreate,
|
|
}: {
|
|
roadmaps: Roadmap[];
|
|
selectedRoadmapId: string | null;
|
|
onSelect: (id: string) => void;
|
|
onCreate: () => void;
|
|
onEdit: (roadmap: Roadmap) => void;
|
|
onDelete: (roadmapId: string) => void;
|
|
onExport: (roadmap: Roadmap) => void;
|
|
showCreateForm: boolean;
|
|
onCancelCreate: () => void;
|
|
onSaveCreate: (input: RoadmapCreateInput) => void;
|
|
}) {
|
|
return (
|
|
<div className="roadmaps-view__mobile-list" data-testid="roadmaps-view__mobile-list">
|
|
<div className="roadmaps-view__mobile-list-header">
|
|
<h2 className="roadmaps-view__mobile-list-title">Roadmaps</h2>
|
|
{!showCreateForm && (
|
|
<button
|
|
className="roadmaps-view__mobile-add-btn"
|
|
onClick={onCreate}
|
|
title="Create roadmap"
|
|
aria-label="Create roadmap"
|
|
data-testid="mobile-create-roadmap-btn"
|
|
>
|
|
<Plus size={18} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{showCreateForm && (
|
|
<div className="roadmaps-view__mobile-create-form">
|
|
<CreateRoadmapForm onSave={onSaveCreate} onCancel={onCancelCreate} />
|
|
</div>
|
|
)}
|
|
|
|
{roadmaps.length === 0 && !showCreateForm ? (
|
|
<div className="roadmaps-view__mobile-empty">
|
|
<p>No roadmaps yet.</p>
|
|
<button className="btn btn-primary btn-sm" onClick={onCreate}>
|
|
<Plus size={14} />
|
|
<span>Create Roadmap</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="roadmaps-view__mobile-list-items">
|
|
{roadmaps.map((roadmap) => (
|
|
<div
|
|
key={roadmap.id}
|
|
className={`roadmaps-view__mobile-item${roadmap.id === selectedRoadmapId ? " roadmaps-view__mobile-item--active" : ""}`}
|
|
onClick={() => onSelect(roadmap.id)}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
onSelect(roadmap.id);
|
|
}
|
|
}}
|
|
data-testid={`mobile-roadmap-item-${roadmap.id}`}
|
|
>
|
|
<div className="roadmaps-view__mobile-item-content">
|
|
<span className="roadmaps-view__mobile-item-title">{roadmap.title}</span>
|
|
{roadmap.description && (
|
|
<span className="roadmaps-view__mobile-item-desc">{roadmap.description}</span>
|
|
)}
|
|
</div>
|
|
<div className="roadmaps-view__mobile-item-actions">
|
|
<button
|
|
className="roadmaps-view__mobile-action-btn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onExport(roadmap);
|
|
}}
|
|
title="Export roadmap"
|
|
aria-label="Export roadmap"
|
|
data-testid={`mobile-roadmap-export-${roadmap.id}`}
|
|
>
|
|
<Download size={16} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__mobile-action-btn"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onEdit(roadmap);
|
|
}}
|
|
title="Edit roadmap"
|
|
aria-label="Edit roadmap"
|
|
data-testid={`mobile-roadmap-edit-${roadmap.id}`}
|
|
>
|
|
<Pencil size={16} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__mobile-action-btn roadmaps-view__mobile-action-btn--danger"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDelete(roadmap.id);
|
|
}}
|
|
title="Delete roadmap"
|
|
aria-label="Delete roadmap"
|
|
data-testid={`mobile-roadmap-delete-${roadmap.id}`}
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Mobile Roadmap Header (shown when roadmap is selected) ────────────
|
|
|
|
function MobileRoadmapHeader({
|
|
roadmapTitle,
|
|
onBack,
|
|
onEdit,
|
|
onDelete,
|
|
onCreate,
|
|
}: {
|
|
roadmapTitle: string;
|
|
onBack: () => void;
|
|
onEdit: () => void;
|
|
onDelete: () => void;
|
|
onCreate: () => void;
|
|
}) {
|
|
return (
|
|
<div className="roadmaps-view__mobile-header" data-testid="roadmaps-view__mobile-header">
|
|
<button
|
|
className="roadmaps-view__mobile-back-btn"
|
|
onClick={onBack}
|
|
title="Back to roadmap list"
|
|
aria-label="Back to roadmap list"
|
|
data-testid="mobile-back-btn"
|
|
>
|
|
<ArrowLeft size={20} />
|
|
</button>
|
|
<h2 className="roadmaps-view__mobile-header-title">{roadmapTitle}</h2>
|
|
<div className="roadmaps-view__mobile-header-actions">
|
|
<button
|
|
className="roadmaps-view__mobile-action-btn"
|
|
onClick={onCreate}
|
|
title="Create roadmap"
|
|
aria-label="Create roadmap"
|
|
data-testid="mobile-header-create-btn"
|
|
>
|
|
<Plus size={18} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__mobile-action-btn"
|
|
onClick={onEdit}
|
|
title="Edit roadmap"
|
|
aria-label="Edit roadmap"
|
|
data-testid="mobile-header-edit-btn"
|
|
>
|
|
<Pencil size={18} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__mobile-action-btn roadmaps-view__mobile-action-btn--danger"
|
|
onClick={onDelete}
|
|
title="Delete roadmap"
|
|
aria-label="Delete roadmap"
|
|
data-testid="mobile-header-delete-btn"
|
|
>
|
|
<Trash2 size={18} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Milestone Card ───────────────────────────────────────────────────
|
|
|
|
function MilestoneCard({
|
|
milestone,
|
|
features,
|
|
onEditMilestone,
|
|
onDeleteMilestone,
|
|
onAddFeature,
|
|
onEditFeature,
|
|
onDeleteFeature,
|
|
milestoneEdit,
|
|
onMilestoneEditChange,
|
|
onMilestoneEditFieldChange,
|
|
onCancelMilestoneEdit,
|
|
onSaveMilestoneEdit,
|
|
featureEdit,
|
|
onFeatureEditChange,
|
|
onStartFeatureEdit: _onStartFeatureEdit,
|
|
onCancelFeatureEdit,
|
|
onSaveFeatureEdit,
|
|
projectId: _projectId,
|
|
addToast: _addToast,
|
|
// Milestone drag-and-drop props
|
|
isMilestoneDragging,
|
|
isMilestoneDropTarget,
|
|
milestoneDropPosition,
|
|
onMilestoneDragStart,
|
|
onMilestoneDragEnd,
|
|
onMilestoneDragOver,
|
|
onMilestoneDrop,
|
|
onMilestoneDragLeave,
|
|
// Feature drag-and-drop props
|
|
isFeatureDragging,
|
|
isFeatureDropTarget,
|
|
featureDropIndex,
|
|
onFeatureDragStart,
|
|
onFeatureDragEnd,
|
|
onFeatureDragOver,
|
|
onFeatureDrop,
|
|
onFeatureDragLeave,
|
|
onFeatureDropOnMilestone,
|
|
// Feature suggestion props
|
|
featureSuggestions,
|
|
isGeneratingFeatureSuggestions,
|
|
onGenerateFeatureSuggestions,
|
|
onAcceptFeatureSuggestion,
|
|
onAcceptAllFeatureSuggestions,
|
|
onUpdateFeatureSuggestionDraft,
|
|
onClearFeatureSuggestions,
|
|
}: {
|
|
milestone: RoadmapMilestone;
|
|
features: RoadmapFeature[];
|
|
onEditMilestone: () => void;
|
|
onDeleteMilestone: () => void;
|
|
onAddFeature: () => void;
|
|
onEditFeature: (featureId: string) => void;
|
|
onDeleteFeature: (featureId: string) => void;
|
|
milestoneEdit: MilestoneInlineEditState | null;
|
|
onMilestoneEditChange: (value: string) => void;
|
|
onMilestoneEditFieldChange: (field: "title" | "description") => void;
|
|
onCancelMilestoneEdit: () => void;
|
|
onSaveMilestoneEdit: (updates: RoadmapMilestoneUpdateInput) => void;
|
|
featureEdit: FeatureInlineEditState | null;
|
|
onFeatureEditChange: (value: string) => void;
|
|
onStartFeatureEdit: (featureId: string, currentTitle: string, currentDescription?: string) => void;
|
|
onCancelFeatureEdit: () => void;
|
|
onSaveFeatureEdit: (updates: RoadmapFeatureUpdateInput) => void;
|
|
projectId?: string;
|
|
addToast: (message: string, type?: ToastType) => void;
|
|
// Milestone drag-and-drop props
|
|
isMilestoneDragging: boolean;
|
|
isMilestoneDropTarget: boolean;
|
|
milestoneDropPosition: "before" | "after" | null;
|
|
onMilestoneDragStart: (milestoneId: string) => void;
|
|
onMilestoneDragEnd: () => void;
|
|
onMilestoneDragOver: (milestoneId: string) => void;
|
|
onMilestoneDrop: (milestoneId: string) => void;
|
|
onMilestoneDragLeave: (e: React.DragEvent) => void;
|
|
// Feature drag-and-drop props
|
|
isFeatureDragging: (featureId: string) => boolean;
|
|
isFeatureDropTarget: boolean;
|
|
featureDropIndex: number | null;
|
|
onFeatureDragStart: (featureId: string, milestoneId: string) => void;
|
|
onFeatureDragEnd: () => void;
|
|
onFeatureDragOver: (featureId: string, position: "before" | "after") => void;
|
|
onFeatureDrop: (featureId: string, targetIndex: number) => void;
|
|
onFeatureDragLeave: (e: React.DragEvent) => void;
|
|
onFeatureDropOnMilestone: () => void;
|
|
// Feature suggestion props
|
|
featureSuggestions?: FeatureSuggestion[];
|
|
isGeneratingFeatureSuggestions?: boolean;
|
|
onGenerateFeatureSuggestions?: () => void;
|
|
onUpdateFeatureSuggestionDraft?: (milestoneId: string, draftId: string, patch: SuggestionDraftPatch) => void;
|
|
onAcceptFeatureSuggestion?: (milestoneId: string, draftId: string) => void;
|
|
onAcceptAllFeatureSuggestions?: () => void;
|
|
onClearFeatureSuggestions?: () => void;
|
|
}) {
|
|
const isEditingMilestone = milestoneEdit?.milestoneId === milestone.id;
|
|
|
|
const handleMilestoneTitleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
if (milestoneEdit) {
|
|
onSaveMilestoneEdit({ title: milestoneEdit.value });
|
|
}
|
|
} else if (e.key === "Escape") {
|
|
onCancelMilestoneEdit();
|
|
}
|
|
};
|
|
|
|
const handleMilestoneDescKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (e.key === "Escape") {
|
|
onCancelMilestoneEdit();
|
|
}
|
|
};
|
|
|
|
// Build class names for drag states
|
|
const milestoneClasses = [
|
|
"roadmaps-view__milestone",
|
|
isMilestoneDragging ? "roadmaps-view__milestone--dragging" : "",
|
|
isMilestoneDropTarget ? "roadmaps-view__milestone--drop-target" : "",
|
|
isMilestoneDropTarget && milestoneDropPosition === "before" ? "roadmaps-view__milestone--drop-before" : "",
|
|
isMilestoneDropTarget && milestoneDropPosition === "after" ? "roadmaps-view__milestone--drop-after" : "",
|
|
].filter(Boolean).join(" ");
|
|
|
|
// Build class names for feature list drop state
|
|
const featureListClasses = [
|
|
"roadmaps-view__feature-list",
|
|
isFeatureDropTarget ? "roadmaps-view__feature-list--drop-target" : "",
|
|
].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<div
|
|
className={milestoneClasses}
|
|
draggable={!isEditingMilestone}
|
|
onDragStart={(e) => {
|
|
if (!isEditingMilestone) {
|
|
onMilestoneDragStart(milestone.id);
|
|
e.dataTransfer.setData("text/plain", `milestone:${milestone.id}`);
|
|
e.dataTransfer.effectAllowed = "move";
|
|
}
|
|
}}
|
|
onDragEnd={onMilestoneDragEnd}
|
|
onDragOver={(e) => {
|
|
// Only prevent default for milestone drops, not feature drops
|
|
if (e.dataTransfer.types.includes("text/plain")) {
|
|
const data = e.dataTransfer.types.includes("text/plain");
|
|
if (data) {
|
|
// This is a milestone drag
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "move";
|
|
onMilestoneDragOver(milestone.id);
|
|
}
|
|
}
|
|
}}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
// Check if this is a feature drop or milestone drop
|
|
const data = e.dataTransfer.getData("text/plain");
|
|
if (data?.startsWith("feature:")) {
|
|
// Feature drop - handled by child element
|
|
} else {
|
|
onMilestoneDrop(milestone.id);
|
|
}
|
|
}}
|
|
onDragLeave={onMilestoneDragLeave}
|
|
data-testid={`milestone-card-${milestone.id}`}
|
|
>
|
|
<div className="roadmaps-view__milestone-header">
|
|
{isEditingMilestone ? (
|
|
<div className="roadmaps-view__inline-edit">
|
|
<div className="roadmaps-view__inline-edit-row">
|
|
<span
|
|
className="roadmaps-view__drag-handle"
|
|
title="Drag to reorder"
|
|
aria-label="Drag to reorder"
|
|
data-testid={`milestone-drag-handle-${milestone.id}`}
|
|
>
|
|
<GripVertical size={14} />
|
|
</span>
|
|
<input
|
|
type="text"
|
|
className="roadmaps-view__inline-input"
|
|
value={milestoneEdit.value}
|
|
onChange={(e) => {
|
|
onMilestoneEditFieldChange("title");
|
|
onMilestoneEditChange(e.target.value);
|
|
}}
|
|
onKeyDown={handleMilestoneTitleKeyDown}
|
|
placeholder="Milestone title"
|
|
autoFocus
|
|
data-testid={`milestone-title-input-${milestone.id}`}
|
|
/>
|
|
<button
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
|
|
onClick={() => onSaveMilestoneEdit({ title: milestoneEdit.value })}
|
|
aria-label="Save milestone title"
|
|
title="Save"
|
|
>
|
|
<Check size={14} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={onCancelMilestoneEdit}
|
|
aria-label="Cancel editing"
|
|
title="Cancel"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
className="roadmaps-view__inline-textarea"
|
|
value={milestoneEdit.field === "description" ? milestoneEdit.value : milestone.description || ""}
|
|
onChange={(e) => {
|
|
onMilestoneEditFieldChange("description");
|
|
onMilestoneEditChange(e.target.value);
|
|
}}
|
|
onKeyDown={handleMilestoneDescKeyDown}
|
|
placeholder="Milestone description (optional)"
|
|
rows={2}
|
|
data-testid={`milestone-desc-input-${milestone.id}`}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="roadmaps-view__milestone-title-row">
|
|
<span
|
|
className="roadmaps-view__drag-handle"
|
|
title="Drag to reorder"
|
|
aria-label="Drag to reorder"
|
|
data-testid={`milestone-drag-handle-${milestone.id}`}
|
|
>
|
|
<GripVertical size={14} />
|
|
</span>
|
|
<h3 className="roadmaps-view__milestone-title">{milestone.title}</h3>
|
|
<div className="roadmaps-view__milestone-actions">
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={onEditMilestone}
|
|
title="Edit milestone"
|
|
aria-label="Edit milestone"
|
|
data-testid={`milestone-edit-${milestone.id}`}
|
|
>
|
|
<Pencil size={14} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
|
|
onClick={onDeleteMilestone}
|
|
title="Delete milestone"
|
|
aria-label="Delete milestone"
|
|
data-testid={`milestone-delete-${milestone.id}`}
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{milestone.description && (
|
|
<p className="roadmaps-view__milestone-desc">{milestone.description}</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="roadmaps-view__milestone-actions-bar">
|
|
<button
|
|
className="roadmaps-view__add-feature-btn"
|
|
onClick={onAddFeature}
|
|
title="Add feature"
|
|
aria-label="Add feature"
|
|
data-testid={`add-feature-${milestone.id}`}
|
|
>
|
|
<Plus size={12} />
|
|
<span>Add Feature</span>
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__suggest-btn"
|
|
onClick={() => {
|
|
// Generate feature suggestions for this milestone
|
|
onGenerateFeatureSuggestions?.();
|
|
}}
|
|
disabled={isGeneratingFeatureSuggestions ?? false}
|
|
title="Generate feature suggestions with AI"
|
|
aria-label="Generate feature suggestions"
|
|
data-testid={`generate-features-${milestone.id}`}
|
|
>
|
|
<Sparkles size={12} />
|
|
<span>{isGeneratingFeatureSuggestions ? "Generating..." : "AI Suggestions"}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
className={featureListClasses}
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = "move";
|
|
// Check if this is a feature being dragged
|
|
const data = e.dataTransfer.getData("text/plain");
|
|
if (data?.startsWith("feature:")) {
|
|
onFeatureDropOnMilestone();
|
|
}
|
|
}}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
const data = e.dataTransfer.getData("text/plain");
|
|
if (data?.startsWith("feature:")) {
|
|
// Drop on empty area of feature list - append to end
|
|
onFeatureDrop(data.split(":")[1], features.length);
|
|
}
|
|
}}
|
|
onDragLeave={onFeatureDragLeave}
|
|
>
|
|
{features.length === 0 ? (
|
|
<p className="roadmaps-view__empty-features">No features yet.</p>
|
|
) : (
|
|
features.map((feature, index) => {
|
|
const isEditingFeature = featureEdit?.featureId === feature.id;
|
|
const isFeatureDraggingThis = isFeatureDragging(feature.id);
|
|
|
|
const handleFeatureTitleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
if (featureEdit) {
|
|
onSaveFeatureEdit({ title: featureEdit.value });
|
|
}
|
|
} else if (e.key === "Escape") {
|
|
onCancelFeatureEdit();
|
|
}
|
|
};
|
|
|
|
// Build class names for feature drag states
|
|
const featureClasses = [
|
|
"roadmaps-view__feature-item",
|
|
isFeatureDraggingThis ? "roadmaps-view__feature-item--dragging" : "",
|
|
isFeatureDropTarget && featureDropIndex === index ? "roadmaps-view__feature-item--drop-before" : "",
|
|
isFeatureDropTarget && featureDropIndex === index + 1 ? "roadmaps-view__feature-item--drop-after" : "",
|
|
].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<div
|
|
key={feature.id}
|
|
className={featureClasses}
|
|
draggable={!isEditingFeature}
|
|
onDragStart={(e) => {
|
|
if (!isEditingFeature) {
|
|
onFeatureDragStart(feature.id, milestone.id);
|
|
e.dataTransfer.setData("text/plain", `feature:${feature.id}`);
|
|
e.dataTransfer.effectAllowed = "move";
|
|
}
|
|
}}
|
|
onDragEnd={onFeatureDragEnd}
|
|
onDragOver={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
e.dataTransfer.dropEffect = "move";
|
|
const data = e.dataTransfer.getData("text/plain");
|
|
if (data?.startsWith("feature:")) {
|
|
// Calculate position (before or after)
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
const midY = rect.top + rect.height / 2;
|
|
const position: "before" | "after" = e.clientY < midY ? "before" : "after";
|
|
onFeatureDragOver(feature.id, position);
|
|
}
|
|
}}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const data = e.dataTransfer.getData("text/plain");
|
|
if (data?.startsWith("feature:")) {
|
|
const draggedFeatureId = data.split(":")[1];
|
|
// Calculate target index
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
const midY = rect.top + rect.height / 2;
|
|
const position: "before" | "after" = e.clientY < midY ? "before" : "after";
|
|
let targetIndex = index;
|
|
if (position === "after") {
|
|
targetIndex = index + 1;
|
|
}
|
|
onFeatureDrop(draggedFeatureId, targetIndex);
|
|
}
|
|
}}
|
|
onDragLeave={onFeatureDragLeave}
|
|
data-testid={`feature-item-${feature.id}`}
|
|
>
|
|
{isEditingFeature ? (
|
|
<div className="roadmaps-view__inline-edit roadmaps-view__inline-edit--compact">
|
|
<div className="roadmaps-view__inline-edit-row">
|
|
<span
|
|
className="roadmaps-view__drag-handle roadmaps-view__drag-handle--feature"
|
|
title="Drag to reorder"
|
|
aria-label="Drag to reorder"
|
|
data-testid={`feature-drag-handle-${feature.id}`}
|
|
>
|
|
<GripVertical size={12} />
|
|
</span>
|
|
<input
|
|
type="text"
|
|
className="roadmaps-view__inline-input"
|
|
value={featureEdit.value}
|
|
onChange={(e) => onFeatureEditChange(e.target.value)}
|
|
onKeyDown={handleFeatureTitleKeyDown}
|
|
placeholder="Feature title"
|
|
autoFocus
|
|
data-testid={`feature-title-input-${feature.id}`}
|
|
/>
|
|
<button
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
|
|
onClick={() => onSaveFeatureEdit({ title: featureEdit.value })}
|
|
aria-label="Save feature title"
|
|
title="Save"
|
|
>
|
|
<Check size={14} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={onCancelFeatureEdit}
|
|
aria-label="Cancel editing"
|
|
title="Cancel"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<span
|
|
className="roadmaps-view__drag-handle roadmaps-view__drag-handle--feature"
|
|
title="Drag to reorder"
|
|
aria-label="Drag to reorder"
|
|
data-testid={`feature-drag-handle-${feature.id}`}
|
|
>
|
|
<GripVertical size={12} />
|
|
</span>
|
|
<div className="roadmaps-view__feature-content">
|
|
<span className="roadmaps-view__feature-title">{feature.title}</span>
|
|
{feature.description && (
|
|
<p className="roadmaps-view__feature-desc">{feature.description}</p>
|
|
)}
|
|
</div>
|
|
<div className="roadmaps-view__feature-actions">
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={() => onEditFeature(feature.id)}
|
|
title="Edit feature"
|
|
aria-label="Edit feature"
|
|
data-testid={`feature-edit-${feature.id}`}
|
|
>
|
|
<Pencil size={12} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
|
|
onClick={() => onDeleteFeature(feature.id)}
|
|
title="Delete feature"
|
|
aria-label="Delete feature"
|
|
data-testid={`feature-delete-${feature.id}`}
|
|
>
|
|
<Trash2 size={12} />
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
|
|
{/* Feature Suggestions Section */}
|
|
{featureSuggestions && featureSuggestions.length > 0 && (
|
|
<div className="roadmap-suggestion-section">
|
|
<div className="roadmap-suggestion-header">
|
|
<h4 className="roadmap-suggestion-title">AI Feature Suggestions</h4>
|
|
<div className="roadmap-suggestion-actions">
|
|
<button
|
|
className="roadmap-suggestion-accept-all-btn"
|
|
onClick={() => onAcceptAllFeatureSuggestions?.()}
|
|
title="Accept all suggestions"
|
|
aria-label="Accept all"
|
|
data-testid={`accept-all-features-${milestone.id}`}
|
|
>
|
|
Accept All
|
|
</button>
|
|
<button
|
|
className="roadmap-suggestion-clear-btn"
|
|
onClick={() => onClearFeatureSuggestions?.()}
|
|
title="Clear suggestions"
|
|
aria-label="Clear"
|
|
data-testid={`clear-features-${milestone.id}`}
|
|
>
|
|
Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="roadmap-suggestion-list">
|
|
{featureSuggestions.map((suggestion) => (
|
|
<FeatureSuggestionCard
|
|
key={suggestion.id}
|
|
suggestion={suggestion}
|
|
onUpdateDraft={(patch) => onUpdateFeatureSuggestionDraft?.(milestone.id, suggestion.id, patch)}
|
|
onAccept={() => {
|
|
onAcceptFeatureSuggestion?.(milestone.id, suggestion.id);
|
|
}}
|
|
testIdPrefix={`feature-suggestion-${milestone.id}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Feature Suggestion Card ───────────────────────────────────────────
|
|
|
|
interface FeatureSuggestionCardProps {
|
|
suggestion: FeatureSuggestion;
|
|
onUpdateDraft: (patch: SuggestionDraftPatch) => void;
|
|
onAccept: () => void;
|
|
testIdPrefix: string;
|
|
}
|
|
|
|
function FeatureSuggestionCard({
|
|
suggestion,
|
|
onUpdateDraft,
|
|
onAccept,
|
|
testIdPrefix,
|
|
}: FeatureSuggestionCardProps) {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editTitle, setEditTitle] = useState(suggestion.title);
|
|
const [editDescription, setEditDescription] = useState(suggestion.description || "");
|
|
|
|
const handleStartEdit = () => {
|
|
setEditTitle(suggestion.title);
|
|
setEditDescription(suggestion.description || "");
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const handleSaveEdit = () => {
|
|
onUpdateDraft({
|
|
title: editTitle.trim(),
|
|
description: editDescription.trim() || undefined,
|
|
});
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const handleCancelEdit = () => {
|
|
setEditTitle(suggestion.title);
|
|
setEditDescription(suggestion.description || "");
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const handleAccept = () => {
|
|
if (!suggestion.title.trim()) {
|
|
return; // Don't accept empty titles
|
|
}
|
|
onAccept();
|
|
};
|
|
|
|
const isValid = suggestion.title.trim().length > 0;
|
|
|
|
if (isEditing) {
|
|
return (
|
|
<div className="roadmap-suggestion-card roadmap-suggestion-card--editing">
|
|
<div className="roadmap-suggestion-edit-form">
|
|
<input
|
|
type="text"
|
|
className="roadmap-suggestion-input"
|
|
value={editTitle}
|
|
onChange={(e) => setEditTitle(e.target.value)}
|
|
placeholder="Feature title"
|
|
autoFocus
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-title-input`}
|
|
/>
|
|
<textarea
|
|
className="roadmap-suggestion-textarea"
|
|
value={editDescription}
|
|
onChange={(e) => setEditDescription(e.target.value)}
|
|
placeholder="Description (optional)"
|
|
rows={2}
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-desc-input`}
|
|
/>
|
|
<div className="roadmap-suggestion-edit-actions">
|
|
<button
|
|
className="roadmap-suggestion-save-btn"
|
|
onClick={handleSaveEdit}
|
|
disabled={!editTitle.trim()}
|
|
title="Save"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-save`}
|
|
>
|
|
<Check size={12} />
|
|
</button>
|
|
<button
|
|
className="roadmap-suggestion-cancel-btn"
|
|
onClick={handleCancelEdit}
|
|
title="Cancel"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-cancel`}
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="roadmap-suggestion-card"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}`}
|
|
>
|
|
<div className="roadmap-suggestion-content">
|
|
<span className="roadmap-suggestion-card-title">{suggestion.title}</span>
|
|
{suggestion.description && (
|
|
<p className="roadmap-suggestion-card-desc">{suggestion.description}</p>
|
|
)}
|
|
</div>
|
|
<div className="roadmap-suggestion-card-actions">
|
|
<button
|
|
className="roadmap-suggestion-edit-btn"
|
|
onClick={handleStartEdit}
|
|
title="Edit suggestion"
|
|
aria-label="Edit"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-edit`}
|
|
>
|
|
<Pencil size={12} />
|
|
</button>
|
|
<button
|
|
className="roadmap-suggestion-accept-btn"
|
|
onClick={handleAccept}
|
|
disabled={!isValid}
|
|
title="Accept this suggestion"
|
|
aria-label="Accept"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-accept`}
|
|
>
|
|
<Check size={12} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Milestone Suggestion Card ────────────────────────────────────────
|
|
|
|
interface MilestoneSuggestionCardProps {
|
|
suggestion: MilestoneSuggestion;
|
|
onUpdateDraft: (patch: SuggestionDraftPatch) => void;
|
|
onAccept: () => void;
|
|
testIdPrefix: string;
|
|
}
|
|
|
|
function MilestoneSuggestionCard({
|
|
suggestion,
|
|
onUpdateDraft,
|
|
onAccept,
|
|
testIdPrefix,
|
|
}: MilestoneSuggestionCardProps) {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editTitle, setEditTitle] = useState(suggestion.title);
|
|
const [editDescription, setEditDescription] = useState(suggestion.description || "");
|
|
|
|
const handleStartEdit = () => {
|
|
setEditTitle(suggestion.title);
|
|
setEditDescription(suggestion.description || "");
|
|
setIsEditing(true);
|
|
};
|
|
|
|
const handleSaveEdit = () => {
|
|
onUpdateDraft({
|
|
title: editTitle.trim(),
|
|
description: editDescription.trim() || undefined,
|
|
});
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const handleCancelEdit = () => {
|
|
setEditTitle(suggestion.title);
|
|
setEditDescription(suggestion.description || "");
|
|
setIsEditing(false);
|
|
};
|
|
|
|
const handleAccept = () => {
|
|
if (!suggestion.title.trim()) {
|
|
return; // Don't accept empty titles
|
|
}
|
|
onAccept();
|
|
};
|
|
|
|
const isValid = suggestion.title.trim().length > 0;
|
|
|
|
if (isEditing) {
|
|
return (
|
|
<div className="roadmap-suggestion-card roadmap-suggestion-card--editing">
|
|
<div className="roadmap-suggestion-edit-form">
|
|
<input
|
|
type="text"
|
|
className="roadmap-suggestion-input"
|
|
value={editTitle}
|
|
onChange={(e) => setEditTitle(e.target.value)}
|
|
placeholder="Milestone title"
|
|
autoFocus
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-title-input`}
|
|
/>
|
|
<textarea
|
|
className="roadmap-suggestion-textarea"
|
|
value={editDescription}
|
|
onChange={(e) => setEditDescription(e.target.value)}
|
|
placeholder="Description (optional)"
|
|
rows={2}
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-desc-input`}
|
|
/>
|
|
<div className="roadmap-suggestion-edit-actions">
|
|
<button
|
|
className="roadmap-suggestion-save-btn"
|
|
onClick={handleSaveEdit}
|
|
disabled={!editTitle.trim()}
|
|
title="Save"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-save`}
|
|
>
|
|
<Check size={12} />
|
|
</button>
|
|
<button
|
|
className="roadmap-suggestion-cancel-btn"
|
|
onClick={handleCancelEdit}
|
|
title="Cancel"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-cancel`}
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="roadmap-suggestion-card"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}`}
|
|
>
|
|
<div className="roadmap-suggestion-content">
|
|
<span className="roadmap-suggestion-card-title">{suggestion.title}</span>
|
|
{suggestion.description && (
|
|
<p className="roadmap-suggestion-card-desc">{suggestion.description}</p>
|
|
)}
|
|
</div>
|
|
<div className="roadmap-suggestion-card-actions">
|
|
<button
|
|
className="roadmap-suggestion-edit-btn"
|
|
onClick={handleStartEdit}
|
|
title="Edit suggestion"
|
|
aria-label="Edit"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-edit`}
|
|
>
|
|
<Pencil size={12} />
|
|
</button>
|
|
<button
|
|
className="roadmap-suggestion-accept-btn"
|
|
onClick={handleAccept}
|
|
disabled={!isValid}
|
|
title="Accept this suggestion"
|
|
aria-label="Accept"
|
|
data-testid={`${testIdPrefix}-${suggestion.id}-accept`}
|
|
>
|
|
<Check size={12} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Create Form ───────────────────────────────────────────────────────
|
|
|
|
function CreateRoadmapForm({
|
|
onSave,
|
|
onCancel,
|
|
}: {
|
|
onSave: (input: RoadmapCreateInput) => void;
|
|
onCancel: () => void;
|
|
}) {
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!title.trim()) return;
|
|
onSave({ title: title.trim(), description: description.trim() || undefined });
|
|
};
|
|
|
|
return (
|
|
<div className="roadmaps-view__create-form" data-testid="create-roadmap-form">
|
|
<form onSubmit={handleSubmit}>
|
|
<input
|
|
type="text"
|
|
className="roadmaps-view__inline-input"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Roadmap title"
|
|
autoFocus
|
|
data-testid="create-roadmap-title"
|
|
/>
|
|
<textarea
|
|
className="roadmaps-view__inline-textarea"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Roadmap description (optional)"
|
|
rows={2}
|
|
data-testid="create-roadmap-description"
|
|
/>
|
|
<div className="roadmaps-view__create-form-actions">
|
|
<button
|
|
type="submit"
|
|
className="roadmaps-view__btn roadmaps-view__btn--primary"
|
|
disabled={!title.trim()}
|
|
data-testid="create-roadmap-submit"
|
|
>
|
|
Create
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="roadmaps-view__btn"
|
|
onClick={onCancel}
|
|
data-testid="create-roadmap-cancel"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreateMilestoneForm({
|
|
onSave,
|
|
onCancel,
|
|
}: {
|
|
onSave: (input: RoadmapMilestoneCreateInput) => void;
|
|
onCancel: () => void;
|
|
}) {
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!title.trim()) return;
|
|
onSave({ title: title.trim(), description: description.trim() || undefined });
|
|
};
|
|
|
|
return (
|
|
<div className="roadmaps-view__create-form roadmaps-view__create-form--inline" data-testid="create-milestone-form">
|
|
<form onSubmit={handleSubmit} className="roadmaps-view__inline-form">
|
|
<input
|
|
type="text"
|
|
className="roadmaps-view__inline-input"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Milestone title"
|
|
autoFocus
|
|
data-testid="create-milestone-title"
|
|
/>
|
|
<textarea
|
|
className="roadmaps-view__inline-textarea"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Description (optional)"
|
|
rows={1}
|
|
data-testid="create-milestone-description"
|
|
/>
|
|
<div className="roadmaps-view__inline-form-actions">
|
|
<button
|
|
type="submit"
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
|
|
disabled={!title.trim()}
|
|
aria-label="Save milestone"
|
|
title="Save"
|
|
data-testid="create-milestone-submit"
|
|
>
|
|
<Check size={14} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={onCancel}
|
|
aria-label="Cancel"
|
|
title="Cancel"
|
|
data-testid="create-milestone-cancel"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreateFeatureForm({
|
|
onSave,
|
|
onCancel,
|
|
}: {
|
|
onSave: (input: RoadmapFeatureCreateInput) => void;
|
|
onCancel: () => void;
|
|
}) {
|
|
const [title, setTitle] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!title.trim()) return;
|
|
onSave({ title: title.trim(), description: description.trim() || undefined });
|
|
};
|
|
|
|
return (
|
|
<div className="roadmaps-view__create-form roadmaps-view__create-form--inline" data-testid="create-feature-form">
|
|
<form onSubmit={handleSubmit} className="roadmaps-view__inline-form">
|
|
<input
|
|
type="text"
|
|
className="roadmaps-view__inline-input"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Feature title"
|
|
autoFocus
|
|
data-testid="create-feature-title"
|
|
/>
|
|
<textarea
|
|
className="roadmaps-view__inline-textarea"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
placeholder="Description (optional)"
|
|
rows={1}
|
|
data-testid="create-feature-description"
|
|
/>
|
|
<div className="roadmaps-view__inline-form-actions">
|
|
<button
|
|
type="submit"
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
|
|
disabled={!title.trim()}
|
|
aria-label="Save feature"
|
|
title="Save"
|
|
data-testid="create-feature-submit"
|
|
>
|
|
<Check size={14} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={onCancel}
|
|
aria-label="Cancel"
|
|
title="Cancel"
|
|
data-testid="create-feature-cancel"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Main Component ────────────────────────────────────────────────────
|
|
|
|
export function RoadmapsView({ projectId, addToast }: RoadmapsViewProps) {
|
|
const { confirm } = useConfirm();
|
|
const isMobile = useViewportMode() === "mobile";
|
|
|
|
const {
|
|
roadmaps,
|
|
selectedRoadmapId,
|
|
selectedRoadmap,
|
|
milestones,
|
|
featuresByMilestoneId,
|
|
loading,
|
|
error,
|
|
createRoadmap,
|
|
updateRoadmap,
|
|
deleteRoadmap,
|
|
selectRoadmap,
|
|
createMilestone,
|
|
updateMilestone,
|
|
deleteMilestone,
|
|
createFeature,
|
|
updateFeature,
|
|
deleteFeature,
|
|
reorderMilestones,
|
|
reorderFeatures,
|
|
moveFeature,
|
|
milestoneSuggestions,
|
|
isGeneratingSuggestions,
|
|
generateMilestoneSuggestions,
|
|
updateMilestoneSuggestionDraft,
|
|
acceptMilestoneSuggestion,
|
|
acceptAllMilestoneSuggestions,
|
|
clearMilestoneSuggestions,
|
|
featureSuggestionsByMilestoneId,
|
|
isGeneratingFeatureSuggestions,
|
|
generateFeatureSuggestions,
|
|
updateFeatureSuggestionDraft,
|
|
acceptFeatureSuggestion,
|
|
acceptAllFeatureSuggestions,
|
|
clearFeatureSuggestions,
|
|
handoffPayload,
|
|
isFetchingHandoff,
|
|
handoffError,
|
|
fetchHandoff,
|
|
clearHandoff,
|
|
} = useRoadmaps({ projectId });
|
|
|
|
// Handoff modal state
|
|
const [handoffModalOpen, setHandoffModalOpen] = useState(false);
|
|
const [handoffRoadmapId, setHandoffRoadmapId] = useState<string | null>(null);
|
|
const [handoffRoadmapTitle, setHandoffRoadmapTitle] = useState<string>("");
|
|
|
|
// Goal prompt state for milestone suggestion generation
|
|
const [goalPrompt, setGoalPrompt] = useState("");
|
|
|
|
// Mobile suggestion panel collapse state
|
|
const [showSuggestionPanel, setShowSuggestionPanel] = useState(false);
|
|
|
|
// Reset suggestion panel when roadmap changes on mobile
|
|
const prevRoadmapIdRef = useRef<string | null>(null);
|
|
useEffect(() => {
|
|
if (prevRoadmapIdRef.current !== null && prevRoadmapIdRef.current !== selectedRoadmapId) {
|
|
setShowSuggestionPanel(false);
|
|
}
|
|
prevRoadmapIdRef.current = selectedRoadmapId;
|
|
}, [selectedRoadmapId]);
|
|
|
|
// Inline edit states
|
|
const [roadmapEdit, setRoadmapEdit] = useState<InlineEditState>({
|
|
roadmapId: null,
|
|
field: null,
|
|
value: "",
|
|
});
|
|
const [milestoneEdit, setMilestoneEdit] = useState<MilestoneInlineEditState>({
|
|
milestoneId: null,
|
|
field: null,
|
|
value: "",
|
|
});
|
|
const [featureEdit, setFeatureEdit] = useState<FeatureInlineEditState>({
|
|
featureId: null,
|
|
field: null,
|
|
value: "",
|
|
});
|
|
|
|
// Create form state
|
|
const [createForm, setCreateForm] = useState<CreateFormState>({
|
|
type: null,
|
|
parentId: undefined,
|
|
title: "",
|
|
description: "",
|
|
});
|
|
|
|
// Mobile roadmap list create form state
|
|
const [mobileShowCreateForm, setMobileShowCreateForm] = useState(false);
|
|
|
|
// Milestone drag-and-drop state
|
|
const [milestoneDrag, setMilestoneDrag] = useState<MilestoneDragState>({
|
|
draggingId: null,
|
|
dropTargetId: null,
|
|
dropPosition: null,
|
|
});
|
|
|
|
// Milestone drag handlers
|
|
const handleMilestoneDragStart = useCallback((milestoneId: string) => {
|
|
setMilestoneDrag((prev) => ({
|
|
...prev,
|
|
draggingId: milestoneId,
|
|
}));
|
|
}, []);
|
|
|
|
const handleMilestoneDragEnd = useCallback(() => {
|
|
setMilestoneDrag({
|
|
draggingId: null,
|
|
dropTargetId: null,
|
|
dropPosition: null,
|
|
});
|
|
}, []);
|
|
|
|
const handleMilestoneDragOver = useCallback((targetMilestoneId: string) => {
|
|
setMilestoneDrag((prev) => {
|
|
// Don't update if dragging over self
|
|
if (prev.draggingId === targetMilestoneId) {
|
|
return prev;
|
|
}
|
|
// Calculate drop position based on mouse position relative to target
|
|
// The position will be computed based on where the drop will happen
|
|
// For now, we just track the target
|
|
return {
|
|
...prev,
|
|
dropTargetId: targetMilestoneId,
|
|
dropPosition: null, // Will be set in handleMilestoneDrop
|
|
};
|
|
});
|
|
}, []);
|
|
|
|
// Feature drag-and-drop state
|
|
const [featureDrag, setFeatureDrag] = useState<FeatureDragState>({
|
|
draggingId: null,
|
|
draggingMilestoneId: null,
|
|
dropTargetMilestoneId: null,
|
|
dropTargetIndex: null,
|
|
dropPosition: null,
|
|
});
|
|
|
|
// Feature drag handlers
|
|
const handleFeatureDragStart = useCallback((featureId: string, milestoneId: string) => {
|
|
setFeatureDrag((prev) => ({
|
|
...prev,
|
|
draggingId: featureId,
|
|
draggingMilestoneId: milestoneId,
|
|
}));
|
|
}, []);
|
|
|
|
const handleFeatureDragEnd = useCallback(() => {
|
|
setFeatureDrag({
|
|
draggingId: null,
|
|
draggingMilestoneId: null,
|
|
dropTargetMilestoneId: null,
|
|
dropTargetIndex: null,
|
|
dropPosition: null,
|
|
});
|
|
}, []);
|
|
|
|
const handleFeatureDragOver = useCallback((targetFeatureId: string, position: "before" | "after") => {
|
|
setFeatureDrag((prev) => {
|
|
// Don't update if dragging over self
|
|
if (prev.draggingId === targetFeatureId) {
|
|
return prev;
|
|
}
|
|
// Find the target feature's index in its milestone
|
|
const targetFeatures = featuresByMilestoneId[prev.draggingMilestoneId || ""] || [];
|
|
const targetIndex = targetFeatures.findIndex((f) => f.id === targetFeatureId);
|
|
|
|
let dropTargetIndex: number;
|
|
if (position === "before") {
|
|
dropTargetIndex = targetIndex;
|
|
} else {
|
|
dropTargetIndex = targetIndex + 1;
|
|
}
|
|
|
|
return {
|
|
...prev,
|
|
dropTargetMilestoneId: prev.draggingMilestoneId,
|
|
dropTargetIndex,
|
|
dropPosition: position,
|
|
};
|
|
});
|
|
}, [featuresByMilestoneId]);
|
|
|
|
const handleFeatureDropOnMilestone = useCallback(() => {
|
|
setFeatureDrag((prev) => ({
|
|
...prev,
|
|
dropTargetMilestoneId: prev.draggingMilestoneId,
|
|
// Append to end of feature list
|
|
dropTargetIndex: (featuresByMilestoneId[prev.draggingMilestoneId || ""] || []).length,
|
|
}));
|
|
}, [featuresByMilestoneId]);
|
|
|
|
const handleFeatureDrop = useCallback(async (featureId: string, targetIndex: number) => {
|
|
const { draggingMilestoneId, dropTargetMilestoneId } = featureDrag;
|
|
if (!draggingMilestoneId) {
|
|
handleFeatureDragEnd();
|
|
return;
|
|
}
|
|
|
|
// Determine the target milestone - use the drop target if available, otherwise the dragging milestone
|
|
const targetMilestoneId = dropTargetMilestoneId || draggingMilestoneId;
|
|
|
|
// Get the source features
|
|
const sourceFeatures = featuresByMilestoneId[draggingMilestoneId] || [];
|
|
|
|
// Find the feature being dragged
|
|
const featureBeingDragged = sourceFeatures.find((f) => f.id === featureId);
|
|
if (!featureBeingDragged) {
|
|
handleFeatureDragEnd();
|
|
return;
|
|
}
|
|
|
|
// Check if this is a cross-milestone move
|
|
const isCrossMilestone = draggingMilestoneId !== targetMilestoneId;
|
|
|
|
if (isCrossMilestone) {
|
|
// No-op check: if moving to same position in same milestone (shouldn't happen but safety check)
|
|
if (draggingMilestoneId === targetMilestoneId) {
|
|
handleFeatureDragEnd();
|
|
return;
|
|
}
|
|
|
|
// Perform the move
|
|
try {
|
|
await moveFeature(featureId, targetMilestoneId, targetIndex, {
|
|
onError: (err) => {
|
|
addToast(`Failed to move feature: ${err.message}`, "error");
|
|
},
|
|
});
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
} else {
|
|
// Same-milestone reorder
|
|
const targetFeatures = [...sourceFeatures];
|
|
const fromIndex = targetFeatures.findIndex((f) => f.id === featureId);
|
|
|
|
// Remove from current position and insert at target
|
|
targetFeatures.splice(fromIndex, 1);
|
|
targetFeatures.splice(targetIndex, 0, featureBeingDragged);
|
|
|
|
// Compute new order of feature IDs
|
|
const orderedIds = targetFeatures.map((f) => f.id);
|
|
|
|
// No-op check: if order is unchanged
|
|
const currentIds = sourceFeatures.map((f) => f.id);
|
|
if (orderedIds.join(",") === currentIds.join(",")) {
|
|
handleFeatureDragEnd();
|
|
return;
|
|
}
|
|
|
|
// Perform the reorder
|
|
try {
|
|
await reorderFeatures(draggingMilestoneId, orderedIds, {
|
|
onError: (err) => {
|
|
addToast(`Failed to reorder features: ${err.message}`, "error");
|
|
},
|
|
});
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
}
|
|
|
|
handleFeatureDragEnd();
|
|
}, [featureDrag, featuresByMilestoneId, reorderFeatures, moveFeature, addToast, handleFeatureDragEnd]);
|
|
|
|
const handleFeatureDragLeave = useCallback((e: React.DragEvent) => {
|
|
// Only clear if leaving the element entirely
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
const x = e.clientX;
|
|
const y = e.clientY;
|
|
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
|
|
setFeatureDrag((prev) => ({
|
|
...prev,
|
|
dropTargetMilestoneId: null,
|
|
dropTargetIndex: null,
|
|
dropPosition: null,
|
|
}));
|
|
}
|
|
}, []);
|
|
|
|
// Check if a feature is being dragged
|
|
const isFeatureDragging = useCallback((featureId: string) => {
|
|
return featureDrag.draggingId === featureId;
|
|
}, [featureDrag.draggingId]);
|
|
|
|
const handleMilestoneDrop = useCallback(async (targetMilestoneId: string) => {
|
|
const { draggingId } = milestoneDrag;
|
|
if (!draggingId || draggingId === targetMilestoneId) {
|
|
handleMilestoneDragEnd();
|
|
return;
|
|
}
|
|
|
|
// Compute the new order
|
|
const currentOrder = milestones.map((m) => m.id);
|
|
const fromIndex = currentOrder.indexOf(draggingId);
|
|
const toIndex = currentOrder.indexOf(targetMilestoneId);
|
|
|
|
if (fromIndex === -1 || toIndex === -1) {
|
|
handleMilestoneDragEnd();
|
|
return;
|
|
}
|
|
|
|
// Compute the new order based on drop position
|
|
// The drop indicator shows where the item will be inserted
|
|
const newOrder = [...currentOrder];
|
|
newOrder.splice(fromIndex, 1);
|
|
newOrder.splice(toIndex, 0, draggingId);
|
|
|
|
// No-op check: if the order is unchanged
|
|
if (newOrder.join(",") === currentOrder.join(",")) {
|
|
handleMilestoneDragEnd();
|
|
return;
|
|
}
|
|
|
|
// Perform the reorder
|
|
try {
|
|
await reorderMilestones(selectedRoadmapId!, newOrder, {
|
|
onError: (err) => {
|
|
addToast(`Failed to reorder milestones: ${err.message}`, "error");
|
|
},
|
|
});
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
|
|
handleMilestoneDragEnd();
|
|
}, [milestoneDrag, milestones, selectedRoadmapId, reorderMilestones, addToast, handleMilestoneDragEnd]);
|
|
|
|
const handleMilestoneDragLeave = useCallback((e: React.DragEvent) => {
|
|
// Only clear if leaving the element entirely
|
|
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
|
|
const x = e.clientX;
|
|
const y = e.clientY;
|
|
if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
|
|
setMilestoneDrag((prev) => ({
|
|
...prev,
|
|
dropTargetId: null,
|
|
dropPosition: null,
|
|
}));
|
|
}
|
|
}, []);
|
|
|
|
// Roadmap handlers
|
|
const handleStartRoadmapEdit = useCallback((roadmap: Roadmap) => {
|
|
selectRoadmap(roadmap.id);
|
|
setRoadmapEdit({
|
|
roadmapId: roadmap.id,
|
|
field: "title",
|
|
value: roadmap.title,
|
|
});
|
|
}, [selectRoadmap]);
|
|
|
|
const handleCancelRoadmapEdit = useCallback(() => {
|
|
setRoadmapEdit({ roadmapId: null, field: null, value: "" });
|
|
}, []);
|
|
|
|
const handleSaveRoadmapEdit = useCallback(
|
|
async (updates: RoadmapUpdateInput) => {
|
|
if (!roadmapEdit.roadmapId) return;
|
|
try {
|
|
await updateRoadmap(roadmapEdit.roadmapId, updates, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
handleCancelRoadmapEdit();
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[roadmapEdit.roadmapId, updateRoadmap, handleCancelRoadmapEdit, addToast]
|
|
);
|
|
|
|
const handleDeleteRoadmap = useCallback(
|
|
async (roadmapId: string) => {
|
|
const shouldDelete = await confirm({
|
|
title: "Delete Roadmap",
|
|
message: "Delete this roadmap? This cannot be undone.",
|
|
danger: true,
|
|
});
|
|
if (!shouldDelete) return;
|
|
try {
|
|
await deleteRoadmap(roadmapId, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
addToast("Roadmap deleted", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[deleteRoadmap, addToast, confirm]
|
|
);
|
|
|
|
// Handoff handlers
|
|
const handleOpenHandoffModal = useCallback((roadmapId: string, roadmapTitle: string) => {
|
|
setHandoffRoadmapId(roadmapId);
|
|
setHandoffRoadmapTitle(roadmapTitle);
|
|
setHandoffModalOpen(true);
|
|
// Clear any previous handoff data
|
|
clearHandoff();
|
|
}, [clearHandoff]);
|
|
|
|
const handleCloseHandoffModal = useCallback(() => {
|
|
setHandoffModalOpen(false);
|
|
setHandoffRoadmapId(null);
|
|
setHandoffRoadmapTitle("");
|
|
clearHandoff();
|
|
}, [clearHandoff]);
|
|
|
|
const handleFetchHandoff = useCallback(() => {
|
|
if (handoffRoadmapId) {
|
|
fetchHandoff(handoffRoadmapId, {
|
|
onError: (err) => addToast(`Failed to load handoff: ${err.message}`, "error"),
|
|
});
|
|
}
|
|
}, [handoffRoadmapId, fetchHandoff, addToast]);
|
|
|
|
const handleCopyHandoffToClipboard = useCallback(() => {
|
|
if (handoffPayload) {
|
|
const data = JSON.stringify(handoffPayload, null, 2);
|
|
navigator.clipboard.writeText(data).then(() => {
|
|
addToast("Handoff data copied to clipboard", "success");
|
|
}).catch(() => {
|
|
addToast("Failed to copy to clipboard", "error");
|
|
});
|
|
}
|
|
}, [handoffPayload, addToast]);
|
|
|
|
const handleCreateRoadmap = useCallback(
|
|
async (input: RoadmapCreateInput) => {
|
|
try {
|
|
await createRoadmap(input, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
setCreateForm({ type: null, parentId: undefined, title: "", description: "" });
|
|
addToast("Roadmap created", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[createRoadmap, addToast]
|
|
);
|
|
|
|
// Milestone handlers
|
|
const handleStartMilestoneEdit = useCallback((milestone: RoadmapMilestone) => {
|
|
setMilestoneEdit({
|
|
milestoneId: milestone.id,
|
|
field: "title",
|
|
value: milestone.title,
|
|
});
|
|
}, []);
|
|
|
|
const handleMilestoneEditChange = useCallback((value: string) => {
|
|
setMilestoneEdit((previous) => ({ ...previous, value }));
|
|
}, []);
|
|
|
|
const handleMilestoneEditFieldChange = useCallback((field: "title" | "description") => {
|
|
setMilestoneEdit((previous) => ({ ...previous, field }));
|
|
}, []);
|
|
|
|
const handleCancelMilestoneEdit = useCallback(() => {
|
|
setMilestoneEdit({ milestoneId: null, field: null, value: "" });
|
|
}, []);
|
|
|
|
const handleSaveMilestoneEdit = useCallback(
|
|
async (updates: RoadmapMilestoneUpdateInput) => {
|
|
if (!milestoneEdit.milestoneId) return;
|
|
try {
|
|
await updateMilestone(milestoneEdit.milestoneId, updates, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
handleCancelMilestoneEdit();
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[milestoneEdit.milestoneId, updateMilestone, handleCancelMilestoneEdit, addToast]
|
|
);
|
|
|
|
const handleDeleteMilestone = useCallback(
|
|
async (milestoneId: string) => {
|
|
const shouldDelete = await confirm({
|
|
title: "Delete Milestone",
|
|
message: "Delete this milestone and all its features?",
|
|
danger: true,
|
|
});
|
|
if (!shouldDelete) return;
|
|
try {
|
|
await deleteMilestone(milestoneId, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
addToast("Milestone deleted", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[deleteMilestone, addToast, confirm]
|
|
);
|
|
|
|
const handleCreateMilestone = useCallback(
|
|
async (input: RoadmapMilestoneCreateInput) => {
|
|
try {
|
|
await createMilestone(input, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
setCreateForm({ type: null, parentId: undefined, title: "", description: "" });
|
|
addToast("Milestone created", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[createMilestone, addToast]
|
|
);
|
|
|
|
// Feature handlers
|
|
const handleStartFeatureEdit = useCallback(
|
|
(featureId: string, currentTitle: string, _currentDescription?: string) => {
|
|
setFeatureEdit({
|
|
featureId,
|
|
field: "title",
|
|
value: currentTitle,
|
|
});
|
|
},
|
|
[]
|
|
);
|
|
|
|
const handleFeatureEditChange = useCallback((value: string) => {
|
|
setFeatureEdit((previous) => ({ ...previous, value }));
|
|
}, []);
|
|
|
|
const handleCancelFeatureEdit = useCallback(() => {
|
|
setFeatureEdit({ featureId: null, field: null, value: "" });
|
|
}, []);
|
|
|
|
const handleSaveFeatureEdit = useCallback(
|
|
async (updates: RoadmapFeatureUpdateInput) => {
|
|
if (!featureEdit.featureId) return;
|
|
try {
|
|
await updateFeature(featureEdit.featureId, updates, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
handleCancelFeatureEdit();
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[featureEdit.featureId, updateFeature, handleCancelFeatureEdit, addToast]
|
|
);
|
|
|
|
const handleDeleteFeature = useCallback(
|
|
async (featureId: string) => {
|
|
const shouldDelete = await confirm({
|
|
title: "Delete Feature",
|
|
message: "Delete this feature?",
|
|
danger: true,
|
|
});
|
|
if (!shouldDelete) return;
|
|
try {
|
|
await deleteFeature(featureId, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
addToast("Feature deleted", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[deleteFeature, addToast, confirm]
|
|
);
|
|
|
|
// Milestone suggestion handlers
|
|
const handleGenerateSuggestions = useCallback(
|
|
async () => {
|
|
if (!goalPrompt.trim()) return;
|
|
try {
|
|
await generateMilestoneSuggestions(goalPrompt, 5, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[goalPrompt, generateMilestoneSuggestions, addToast]
|
|
);
|
|
|
|
const handleAcceptSuggestion = useCallback(
|
|
async (draftId: string) => {
|
|
try {
|
|
await acceptMilestoneSuggestion(draftId, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
addToast("Milestone added", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[acceptMilestoneSuggestion, addToast]
|
|
);
|
|
|
|
const handleAcceptAllSuggestions = useCallback(
|
|
async () => {
|
|
try {
|
|
await acceptAllMilestoneSuggestions({
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
addToast(`${milestoneSuggestions.length} milestones added`, "success");
|
|
setGoalPrompt("");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[acceptAllMilestoneSuggestions, milestoneSuggestions.length, addToast]
|
|
);
|
|
|
|
const handleClearSuggestions = useCallback(() => {
|
|
clearMilestoneSuggestions();
|
|
setGoalPrompt("");
|
|
}, [clearMilestoneSuggestions]);
|
|
|
|
// Feature suggestion handlers
|
|
const handleGenerateFeatureSuggestions = useCallback(
|
|
async (milestoneId: string) => {
|
|
try {
|
|
await generateFeatureSuggestions(milestoneId, { count: 5 }, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[generateFeatureSuggestions, addToast]
|
|
);
|
|
|
|
const handleAcceptFeatureSuggestion = useCallback(
|
|
async (milestoneId: string, draftId: string) => {
|
|
try {
|
|
await acceptFeatureSuggestion(milestoneId, draftId, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
addToast("Feature added", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[acceptFeatureSuggestion, addToast]
|
|
);
|
|
|
|
const handleUpdateFeatureSuggestionDraft = useCallback(
|
|
(milestoneId: string, draftId: string, patch: SuggestionDraftPatch) => {
|
|
updateFeatureSuggestionDraft(milestoneId, draftId, patch);
|
|
},
|
|
[updateFeatureSuggestionDraft]
|
|
);
|
|
|
|
const handleAcceptAllFeatureSuggestions = useCallback(
|
|
async (milestoneId: string) => {
|
|
const suggestions = featureSuggestionsByMilestoneId[milestoneId] || [];
|
|
try {
|
|
await acceptAllFeatureSuggestions(milestoneId, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
addToast(`${suggestions.length} features added`, "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[acceptAllFeatureSuggestions, featureSuggestionsByMilestoneId, addToast]
|
|
);
|
|
|
|
const handleClearFeatureSuggestions = useCallback(
|
|
(milestoneId: string) => {
|
|
clearFeatureSuggestions(milestoneId);
|
|
},
|
|
[clearFeatureSuggestions]
|
|
);
|
|
|
|
const handleCreateFeature = useCallback(
|
|
async (milestoneId: string, input: RoadmapFeatureCreateInput) => {
|
|
try {
|
|
await createFeature(milestoneId, input, {
|
|
onError: (err) => addToast(err.message, "error"),
|
|
});
|
|
setCreateForm({ type: null, parentId: undefined, title: "", description: "" });
|
|
addToast("Feature created", "success");
|
|
} catch {
|
|
// Error handled in callback
|
|
}
|
|
},
|
|
[createFeature, addToast]
|
|
);
|
|
|
|
// Get the currently selected roadmap ID (handles both desktop and mobile)
|
|
const effectiveSelectedRoadmapId = selectedRoadmapId;
|
|
|
|
if (loading && roadmaps.length === 0) {
|
|
return (
|
|
<div className="roadmaps-view roadmaps-view--loading">
|
|
<div className="roadmaps-view__loading-state">Loading roadmaps...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error && roadmaps.length === 0) {
|
|
return (
|
|
<div className="roadmaps-view roadmaps-view--error">
|
|
<div className="roadmaps-view__error-state">
|
|
<p>Failed to load roadmaps</p>
|
|
<p className="roadmaps-view__error-msg">{error.message}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="roadmaps-view">
|
|
{/* Mobile Roadmap List (shown when mobile and no roadmap selected) */}
|
|
{isMobile && !effectiveSelectedRoadmapId && (
|
|
<MobileRoadmapList
|
|
roadmaps={roadmaps}
|
|
selectedRoadmapId={effectiveSelectedRoadmapId}
|
|
onSelect={(id) => selectRoadmap(id)}
|
|
onCreate={() => setMobileShowCreateForm(true)}
|
|
onEdit={handleStartRoadmapEdit}
|
|
onDelete={handleDeleteRoadmap}
|
|
onExport={(roadmap) => handleOpenHandoffModal(roadmap.id, roadmap.title)}
|
|
showCreateForm={mobileShowCreateForm}
|
|
onCancelCreate={() => setMobileShowCreateForm(false)}
|
|
onSaveCreate={async (input) => {
|
|
await handleCreateRoadmap(input);
|
|
setMobileShowCreateForm(false);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Desktop sidebar (hidden on mobile) */}
|
|
{!isMobile && (
|
|
<aside className="roadmaps-view__sidebar" aria-label="Roadmaps">
|
|
<div className="roadmaps-view__sidebar-header">
|
|
<h2 className="roadmaps-view__sidebar-title">Roadmaps</h2>
|
|
<button
|
|
className="roadmaps-view__add-btn"
|
|
onClick={() => setCreateForm({ type: "roadmap", title: "", description: "" })}
|
|
title="Create roadmap"
|
|
aria-label="Create roadmap"
|
|
data-testid="create-roadmap-btn"
|
|
>
|
|
<Plus size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
{createForm.type === "roadmap" && (
|
|
<CreateRoadmapForm
|
|
onSave={handleCreateRoadmap}
|
|
onCancel={() => setCreateForm({ type: null, parentId: undefined, title: "", description: "" })}
|
|
/>
|
|
)}
|
|
|
|
<div className="roadmaps-view__sidebar-list">
|
|
{roadmaps.length === 0 ? (
|
|
<p className="roadmaps-view__empty-sidebar">No roadmaps yet. Click + to create one.</p>
|
|
) : (
|
|
roadmaps.map((roadmap) => (
|
|
<RoadmapItem
|
|
key={roadmap.id}
|
|
roadmap={roadmap}
|
|
isSelected={roadmap.id === effectiveSelectedRoadmapId}
|
|
onSelect={() => selectRoadmap(roadmap.id)}
|
|
onEdit={() => handleStartRoadmapEdit(roadmap)}
|
|
onDelete={() => handleDeleteRoadmap(roadmap.id)}
|
|
onExport={() => handleOpenHandoffModal(roadmap.id, roadmap.title)}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</aside>
|
|
)}
|
|
|
|
{/* Main content */}
|
|
<main className="roadmaps-view__main" aria-label="Roadmap content">
|
|
{/* Mobile header when roadmap is selected */}
|
|
{isMobile && effectiveSelectedRoadmapId && (
|
|
<MobileRoadmapHeader
|
|
roadmapTitle={selectedRoadmap?.title || "Untitled Roadmap"}
|
|
onBack={() => selectRoadmap(null)}
|
|
onEdit={() => {
|
|
if (selectedRoadmap) handleStartRoadmapEdit(selectedRoadmap);
|
|
}}
|
|
onDelete={() => handleDeleteRoadmap(effectiveSelectedRoadmapId)}
|
|
onCreate={() => setMobileShowCreateForm(true)}
|
|
/>
|
|
)}
|
|
|
|
{!effectiveSelectedRoadmapId ? (
|
|
<div className="roadmaps-view__empty-main">
|
|
<p>Select a roadmap from the sidebar to view its milestones.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Roadmap header */}
|
|
<div className="roadmaps-view__roadmap-header">
|
|
{roadmapEdit.roadmapId === effectiveSelectedRoadmapId ? (
|
|
<div className="roadmaps-view__inline-edit">
|
|
<div className="roadmaps-view__inline-edit-row">
|
|
<input
|
|
type="text"
|
|
className="roadmaps-view__inline-input roadmaps-view__inline-input--large"
|
|
value={roadmapEdit.value}
|
|
onChange={(e) =>
|
|
setRoadmapEdit((prev) => ({ ...prev, value: e.target.value }))
|
|
}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter") {
|
|
handleSaveRoadmapEdit({ title: roadmapEdit.value });
|
|
} else if (e.key === "Escape") {
|
|
handleCancelRoadmapEdit();
|
|
}
|
|
}}
|
|
placeholder="Roadmap title"
|
|
autoFocus
|
|
data-testid="roadmap-title-input"
|
|
/>
|
|
<button
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--success"
|
|
onClick={() => handleSaveRoadmapEdit({ title: roadmapEdit.value })}
|
|
aria-label="Save"
|
|
title="Save"
|
|
>
|
|
<Check size={16} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={handleCancelRoadmapEdit}
|
|
aria-label="Cancel"
|
|
title="Cancel"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="roadmaps-view__roadmap-title-row">
|
|
<h1 className="roadmaps-view__roadmap-title">
|
|
{selectedRoadmap?.title || "Untitled Roadmap"}
|
|
</h1>
|
|
<div className="roadmaps-view__roadmap-actions">
|
|
<button
|
|
className="roadmaps-view__icon-btn"
|
|
onClick={() => {
|
|
if (selectedRoadmap) handleStartRoadmapEdit(selectedRoadmap);
|
|
}}
|
|
title="Edit roadmap"
|
|
aria-label="Edit roadmap"
|
|
data-testid="edit-roadmap-btn"
|
|
>
|
|
<Pencil size={16} />
|
|
</button>
|
|
<button
|
|
className="roadmaps-view__icon-btn roadmaps-view__icon-btn--danger"
|
|
onClick={() => handleDeleteRoadmap(effectiveSelectedRoadmapId)}
|
|
title="Delete roadmap"
|
|
aria-label="Delete roadmap"
|
|
data-testid="delete-roadmap-btn"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{selectedRoadmap?.description && (
|
|
<p className="roadmaps-view__roadmap-desc">{selectedRoadmap.description}</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Milestone Suggestions Section */}
|
|
{isMobile ? (
|
|
showSuggestionPanel ? (
|
|
<div className="roadmap-suggestion-section">
|
|
<div className="roadmap-suggestion-header">
|
|
<h3 className="roadmap-suggestion-title">Generate Milestone Ideas</h3>
|
|
<button
|
|
className="roadmap-suggestion-collapse-btn"
|
|
onClick={() => setShowSuggestionPanel(false)}
|
|
aria-label="Collapse suggestion panel"
|
|
data-testid="collapse-suggestion-panel-btn"
|
|
>
|
|
<ChevronUp size={16} />
|
|
</button>
|
|
</div>
|
|
<div className="roadmap-suggestion-form">
|
|
<textarea
|
|
className="roadmap-suggestion-input"
|
|
value={goalPrompt}
|
|
onChange={(e) => setGoalPrompt(e.target.value)}
|
|
placeholder="Describe your roadmap goal (e.g., 'Build a user authentication system with OAuth, profiles, and admin dashboard')"
|
|
rows={2}
|
|
disabled={isGeneratingSuggestions || !selectedRoadmapId}
|
|
data-testid="goal-prompt-input"
|
|
autoFocus
|
|
/>
|
|
<div className="roadmap-suggestion-actions">
|
|
<button
|
|
className="roadmap-suggestion-generate-btn"
|
|
onClick={handleGenerateSuggestions}
|
|
disabled={!goalPrompt.trim() || isGeneratingSuggestions || !selectedRoadmapId}
|
|
data-testid="generate-suggestions-btn"
|
|
>
|
|
{isGeneratingSuggestions ? "Generating..." : "Generate Milestones"}
|
|
</button>
|
|
{milestoneSuggestions.length > 0 && (
|
|
<>
|
|
<button
|
|
className="roadmap-suggestion-accept-all-btn"
|
|
onClick={handleAcceptAllSuggestions}
|
|
data-testid="accept-all-suggestions-btn"
|
|
>
|
|
Accept All ({milestoneSuggestions.length})
|
|
</button>
|
|
<button
|
|
className="roadmap-suggestion-clear-btn"
|
|
onClick={handleClearSuggestions}
|
|
title="Clear suggestions"
|
|
aria-label="Clear suggestions"
|
|
data-testid="clear-suggestions-btn"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Suggestion Cards */}
|
|
{milestoneSuggestions.length > 0 && (
|
|
<div className="roadmap-suggestion-list">
|
|
{milestoneSuggestions.map((suggestion) => (
|
|
<MilestoneSuggestionCard
|
|
key={suggestion.id}
|
|
suggestion={suggestion}
|
|
onUpdateDraft={(patch) => updateMilestoneSuggestionDraft(suggestion.id, patch)}
|
|
onAccept={() => handleAcceptSuggestion(suggestion.id)}
|
|
testIdPrefix="suggestion"
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="roadmap-suggestion-section">
|
|
<button
|
|
className="roadmap-suggestion-expand-btn"
|
|
onClick={() => setShowSuggestionPanel(true)}
|
|
disabled={!selectedRoadmapId}
|
|
data-testid="expand-suggestion-panel-btn"
|
|
>
|
|
<Sparkles size={16} />
|
|
Generate Milestone Ideas
|
|
</button>
|
|
</div>
|
|
)
|
|
) : (
|
|
<div className="roadmap-suggestion-section">
|
|
<div className="roadmap-suggestion-header">
|
|
<h3 className="roadmap-suggestion-title">Generate Milestone Ideas</h3>
|
|
</div>
|
|
<div className="roadmap-suggestion-form">
|
|
<textarea
|
|
className="roadmap-suggestion-input"
|
|
value={goalPrompt}
|
|
onChange={(e) => setGoalPrompt(e.target.value)}
|
|
placeholder="Describe your roadmap goal (e.g., 'Build a user authentication system with OAuth, profiles, and admin dashboard')"
|
|
rows={2}
|
|
disabled={isGeneratingSuggestions || !selectedRoadmapId}
|
|
data-testid="goal-prompt-input"
|
|
/>
|
|
<div className="roadmap-suggestion-actions">
|
|
<button
|
|
className="roadmap-suggestion-generate-btn"
|
|
onClick={handleGenerateSuggestions}
|
|
disabled={!goalPrompt.trim() || isGeneratingSuggestions || !selectedRoadmapId}
|
|
data-testid="generate-suggestions-btn"
|
|
>
|
|
{isGeneratingSuggestions ? "Generating..." : "Generate Milestones"}
|
|
</button>
|
|
{milestoneSuggestions.length > 0 && (
|
|
<>
|
|
<button
|
|
className="roadmap-suggestion-accept-all-btn"
|
|
onClick={handleAcceptAllSuggestions}
|
|
data-testid="accept-all-suggestions-btn"
|
|
>
|
|
Accept All ({milestoneSuggestions.length})
|
|
</button>
|
|
<button
|
|
className="roadmap-suggestion-clear-btn"
|
|
onClick={handleClearSuggestions}
|
|
title="Clear suggestions"
|
|
aria-label="Clear suggestions"
|
|
data-testid="clear-suggestions-btn"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Suggestion Cards */}
|
|
{milestoneSuggestions.length > 0 && (
|
|
<div className="roadmap-suggestion-list">
|
|
{milestoneSuggestions.map((suggestion) => (
|
|
<MilestoneSuggestionCard
|
|
key={suggestion.id}
|
|
suggestion={suggestion}
|
|
onUpdateDraft={(patch) => updateMilestoneSuggestionDraft(suggestion.id, patch)}
|
|
onAccept={() => handleAcceptSuggestion(suggestion.id)}
|
|
testIdPrefix="suggestion"
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Milestone lanes */}
|
|
<div className="roadmaps-view__milestone-lanes">
|
|
{createForm.type === "milestone" && (
|
|
<CreateMilestoneForm
|
|
onSave={handleCreateMilestone}
|
|
onCancel={() => setCreateForm({ type: null, parentId: undefined, title: "", description: "" })}
|
|
/>
|
|
)}
|
|
|
|
{milestones.length === 0 && createForm.type !== "milestone" ? (
|
|
<div className="roadmaps-view__empty-milestones">
|
|
<p>This roadmap has no milestones.</p>
|
|
<button
|
|
className="roadmaps-view__add-milestone-btn"
|
|
onClick={() => setCreateForm({ type: "milestone", title: "", description: "" })}
|
|
data-testid="add-milestone-btn-empty"
|
|
>
|
|
<Plus size={14} />
|
|
<span>Add Milestone</span>
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{createForm.type !== "milestone" && (
|
|
<button
|
|
className="roadmaps-view__add-milestone-fab"
|
|
onClick={() => setCreateForm({ type: "milestone", title: "", description: "" })}
|
|
data-testid="add-milestone-btn"
|
|
>
|
|
<Plus size={14} />
|
|
<span>Add Milestone</span>
|
|
</button>
|
|
)}
|
|
{milestones.map((milestone) => (
|
|
<MilestoneCard
|
|
key={milestone.id}
|
|
milestone={milestone}
|
|
features={featuresByMilestoneId[milestone.id] || []}
|
|
onEditMilestone={() => handleStartMilestoneEdit(milestone)}
|
|
onDeleteMilestone={() => handleDeleteMilestone(milestone.id)}
|
|
onAddFeature={() => setCreateForm({ type: "feature", parentId: milestone.id, title: "", description: "" })}
|
|
onEditFeature={(featureId) => {
|
|
const feature = featuresByMilestoneId[milestone.id]?.find((f) => f.id === featureId);
|
|
if (feature) {
|
|
handleStartFeatureEdit(featureId, feature.title, feature.description);
|
|
}
|
|
}}
|
|
onDeleteFeature={handleDeleteFeature}
|
|
milestoneEdit={milestoneEdit}
|
|
onMilestoneEditChange={handleMilestoneEditChange}
|
|
onMilestoneEditFieldChange={handleMilestoneEditFieldChange}
|
|
onCancelMilestoneEdit={handleCancelMilestoneEdit}
|
|
onSaveMilestoneEdit={handleSaveMilestoneEdit}
|
|
featureEdit={featureEdit}
|
|
onFeatureEditChange={handleFeatureEditChange}
|
|
onStartFeatureEdit={handleStartFeatureEdit}
|
|
onCancelFeatureEdit={handleCancelFeatureEdit}
|
|
onSaveFeatureEdit={handleSaveFeatureEdit}
|
|
projectId={projectId}
|
|
addToast={addToast}
|
|
// Milestone drag-and-drop props
|
|
isMilestoneDragging={milestoneDrag.draggingId === milestone.id}
|
|
isMilestoneDropTarget={milestoneDrag.dropTargetId === milestone.id}
|
|
milestoneDropPosition={milestoneDrag.dropTargetId === milestone.id ? milestoneDrag.dropPosition : null}
|
|
onMilestoneDragStart={handleMilestoneDragStart}
|
|
onMilestoneDragEnd={handleMilestoneDragEnd}
|
|
onMilestoneDragOver={handleMilestoneDragOver}
|
|
onMilestoneDrop={handleMilestoneDrop}
|
|
onMilestoneDragLeave={handleMilestoneDragLeave}
|
|
// Feature drag-and-drop props
|
|
isFeatureDragging={isFeatureDragging}
|
|
isFeatureDropTarget={featureDrag.dropTargetMilestoneId === milestone.id}
|
|
featureDropIndex={featureDrag.dropTargetMilestoneId === milestone.id ? featureDrag.dropTargetIndex : null}
|
|
onFeatureDragStart={handleFeatureDragStart}
|
|
onFeatureDragEnd={handleFeatureDragEnd}
|
|
onFeatureDragOver={handleFeatureDragOver}
|
|
onFeatureDrop={handleFeatureDrop}
|
|
onFeatureDragLeave={handleFeatureDragLeave}
|
|
onFeatureDropOnMilestone={handleFeatureDropOnMilestone}
|
|
// Feature suggestion props
|
|
featureSuggestions={featureSuggestionsByMilestoneId[milestone.id]}
|
|
isGeneratingFeatureSuggestions={isGeneratingFeatureSuggestions(milestone.id)}
|
|
onGenerateFeatureSuggestions={() => handleGenerateFeatureSuggestions(milestone.id)}
|
|
onAcceptFeatureSuggestion={(index) => handleAcceptFeatureSuggestion(milestone.id, index)}
|
|
onAcceptAllFeatureSuggestions={() => handleAcceptAllFeatureSuggestions(milestone.id)}
|
|
onUpdateFeatureSuggestionDraft={(milestoneId, draftId, patch) => handleUpdateFeatureSuggestionDraft(milestoneId, draftId, patch)}
|
|
onClearFeatureSuggestions={() => handleClearFeatureSuggestions(milestone.id)}
|
|
/>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</main>
|
|
|
|
{/* Feature create form overlay */}
|
|
{createForm.type === "feature" && createForm.parentId && (
|
|
<div className="roadmaps-view__feature-create-overlay">
|
|
<CreateFeatureForm
|
|
onSave={(input) => handleCreateFeature(createForm.parentId!, input)}
|
|
onCancel={() => setCreateForm({ type: null, parentId: undefined, title: "", description: "" })}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Handoff export modal */}
|
|
<HandoffModal
|
|
isOpen={handoffModalOpen}
|
|
onClose={handleCloseHandoffModal}
|
|
roadmapId={handoffRoadmapId || ""}
|
|
roadmapTitle={handoffRoadmapTitle}
|
|
handoffPayload={handoffPayload}
|
|
isLoading={isFetchingHandoff}
|
|
error={handoffError}
|
|
onFetchHandoff={handleFetchHandoff}
|
|
onCopyToClipboard={handleCopyHandoffToClipboard}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|