feat: procedural editor redesign with collapsible sections and DnD #84

2026-02-19T12:03:11Z

chihlasm commented

2026-02-19 12:03:11 +00:00

(Migrated from github.com)

Summary

Convert procedural/maintenance editor from scrolling document to fixed-height layout with independent step list scrolling
Add collapsible accordion sections for Details, Intake Form, and Maintenance Schedule with rich one-line summaries
Implement drag-to-reorder steps using @dnd-kit with keyboard accessibility and ARIA labels
Add maintenance schedule section with two-stage save (tree first, schedule second) and failure handling
Step list shows aggregate time estimate and auto-scrolls to newly added steps

Key Design Decisions

Accordion mode: Only one section open at a time, controlled by parent page
Schedule persistence: Via separate API endpoints (NOT tree_structure) — two-stage save
DnD constraints: procedure_end is non-draggable and always last; reorder is array-index only
Store invariant: Minimum one procedure_step enforced — no "0 steps" empty state

Files Changed

New

CollapsibleEditorSection.tsx — reusable collapsible wrapper with aria-expanded/aria-controls
MaintenanceScheduleSection.tsx — schedule builder with draft state and two-stage save
scheduleUtils.ts — getScheduleSummary helper for collapsed display

Modified

ProceduralEditorPage.tsx — fixed-height layout, accordion sections, schedule integration
StepList.tsx — DnD with @dnd-kit, step count header with time, auto-scroll
IntakeFormBuilder.tsx — removed outer card wrapper (now inside collapsible section)

Test plan

New procedural flow: Details expanded by default, steps area scrolls independently
Existing procedural flow: all sections collapsed with summaries, steps visible immediately
Drag-to-reorder: mouse and keyboard, procedure_end stays last
New maintenance flow: Schedule section expanded, "save flow first" message shown
Existing maintenance flow with schedule: collapsed summary shows frequency/time/targets
Schedule save failure: tree save preserved, actionable error shown
Build passes: npm run build clean

🤖 Generated with Claude Code

## Summary - Convert procedural/maintenance editor from scrolling document to fixed-height layout with independent step list scrolling - Add collapsible accordion sections for Details, Intake Form, and Maintenance Schedule with rich one-line summaries - Implement drag-to-reorder steps using @dnd-kit with keyboard accessibility and ARIA labels - Add maintenance schedule section with two-stage save (tree first, schedule second) and failure handling - Step list shows aggregate time estimate and auto-scrolls to newly added steps ## Key Design Decisions - **Accordion mode**: Only one section open at a time, controlled by parent page - **Schedule persistence**: Via separate API endpoints (NOT tree_structure) — two-stage save - **DnD constraints**: `procedure_end` is non-draggable and always last; reorder is array-index only - **Store invariant**: Minimum one `procedure_step` enforced — no "0 steps" empty state ## Files Changed ### New - `CollapsibleEditorSection.tsx` — reusable collapsible wrapper with aria-expanded/aria-controls - `MaintenanceScheduleSection.tsx` — schedule builder with draft state and two-stage save - `scheduleUtils.ts` — getScheduleSummary helper for collapsed display ### Modified - `ProceduralEditorPage.tsx` — fixed-height layout, accordion sections, schedule integration - `StepList.tsx` — DnD with @dnd-kit, step count header with time, auto-scroll - `IntakeFormBuilder.tsx` — removed outer card wrapper (now inside collapsible section) ## Test plan - [ ] New procedural flow: Details expanded by default, steps area scrolls independently - [ ] Existing procedural flow: all sections collapsed with summaries, steps visible immediately - [ ] Drag-to-reorder: mouse and keyboard, procedure_end stays last - [ ] New maintenance flow: Schedule section expanded, "save flow first" message shown - [ ] Existing maintenance flow with schedule: collapsed summary shows frequency/time/targets - [ ] Schedule save failure: tree save preserved, actionable error shown - [ ] Build passes: `npm run build` clean 🤖 Generated with [Claude Code](https://claude.com/claude-code)

railway-app[bot] commented

2026-02-19 12:03:26 +00:00

(Migrated from github.com)

🚅 Deployed to the patherly-pr-84 environment in selfless-grace

Service	Status	Web	Updated (UTC)
patherly	✅ Success (View Logs)	Web	Feb 19, 2026 at 1:14 pm
hopeful-liberation	✅ Success (View Logs)	Web	Feb 19, 2026 at 1:14 pm

🚅 Deployed to the [patherly-pr-84](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134?environmentId=4e4988d1-7465-4f89-8780-bfdc563b3c37) environment in **[selfless-grace](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134)** | **Service** | **Status** | **Web** | **Updated** (UTC) | | :--- | :--- | :--- | :--- | | patherly | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/95f556ff-5264-4116-a0c2-618a2fc53ba4?id=fcea0dd0-05d6-4be7-83e3-80753e5f33e1&environmentId=4e4988d1-7465-4f89-8780-bfdc563b3c37)) | [Web](https://patherly-patherly-pr-84.up.railway.app) | Feb 19, 2026 at 1:14 pm | | hopeful-liberation | ✅ Success ([View Logs](https://railway.com/project/22b9b58c-271b-42e5-a10e-6fdec8d00134/service/e1db2ee3-d241-4f45-abe4-c9c5fdf483d5?id=14d4b65b-0d19-402e-9689-5669c0b71f67&environmentId=4e4988d1-7465-4f89-8780-bfdc563b3c37)) | [Web](https://hopeful-liberation-patherly-pr-84.up.railway.app) | Feb 19, 2026 at 1:14 pm |

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: chihlasm/resolutionflow#84