feat: restructure procedural editor with collapsible sections and fixed-height layout

Convert scrolling document layout to fixed-height editor with accordion-mode
collapsible sections for Details and Intake Form. Step list now gets all
remaining height with independent scrolling. Add CollapsibleEditorSection
component with ARIA attributes (aria-expanded, aria-controls).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-19 03:15:00 -05:00
parent 96b8818b36
commit dff53e55bb
5 changed files with 174 additions and 42 deletions

View File

@@ -81,6 +81,14 @@ A reusable component used by Details, Intake Form, and Maintenance Schedule.
**Expanded state:** Full content slides down with a subtle animation. Collapse chevron rotates.
**Accordion mode:** Single-open by default — expanding one section collapses others. Controlled by parent page component.
**Accessibility:**
- Toggle button has `aria-expanded` and `aria-controls` pointing to section content `id`
- Content region has matching `id`
- Keyboard operable (Enter/Space to toggle)
- Focus remains stable after toggle
### Details Section — Collapsed Summary
Format: `"Flow Name" · N tags · Public/Private`
@@ -107,7 +115,9 @@ Only renders when `treeType === 'maintenance'`.
**New flow (no schedule):** Section starts expanded with:
- Cron expression builder (frequency picker: daily/weekly/monthly + time + timezone)
- Target list selector (dropdown of saved target lists, or create new inline)
- These fields write to the store and get saved with the flow
- These fields write to local UI draft state (NOT tree_structure)
- On save: tree saved first, then schedule created via `maintenanceSchedulesApi.create` with resulting `tree_id`
- If schedule create fails: tree save remains successful, show actionable error, preserve draft
**Existing flow (has schedule):** Collapsed summary:
- Format: `"Every Monday at 2:00 AM UTC · 5 targets"`
@@ -142,7 +152,7 @@ The Steps section header shows aggregate info:
- `Steps (4 steps · ~25 min estimated)` — when steps have time estimates
- `Steps (4 steps)` — when no time estimates set
- `Steps (0 steps)` — empty, triggers the empty state below
- `Steps (0 steps)` — empty state (note: store currently enforces minimum one `procedure_step`, so 0-step state only appears if invariant is intentionally changed)
### Auto-Expand New Steps
@@ -159,8 +169,8 @@ Same for `addSectionHeader()` — auto-expand for immediate title editing.
- Dragged card lifts with `shadow-lg` and slight scale
- Drop target: blue insertion line between steps
- Section headers are draggable — moving a section header moves it independently (steps below stay in place)
- On drop: update the store's step array order and recalculate `display_order` values
- Keyboard accessible: focus grip handle, Enter to pick up, arrow keys to move, Enter to drop
- On drop: update the store's step array order (array-index based only, no `display_order` recalculation)
- Keyboard accessible: focus grip handle, Enter/Space to pick up, arrow keys to move, Enter to drop, Escape to cancel
**Implementation:**
- Wrap step list in `<DndContext>` + `<SortableContext>`
@@ -208,11 +218,16 @@ Maintenance flows show `Wrench` icon + "Edit Maintenance Flow" title.
| `components/procedural-editor/CollapsibleEditorSection.tsx` | Shared collapsible wrapper with summary display |
| `components/procedural-editor/MaintenanceScheduleSection.tsx` | Schedule builder + collapsed summary for maintenance flows |
### New Dependencies
### Existing Dependencies Used
- `@dnd-kit/core` — drag-and-drop framework
- `@dnd-kit/sortable` — sortable preset for ordered lists
- `@dnd-kit/utilities` — CSS utilities for transforms
- `@dnd-kit/core` — drag-and-drop framework (already installed)
- `@dnd-kit/sortable` — sortable preset for ordered lists (already installed)
- `@dnd-kit/utilities` — CSS utilities for transforms (already installed)
### Existing APIs Used
- `frontend/src/api/maintenanceSchedules.ts` — schedule CRUD via separate endpoints (NOT tree_structure)
- `frontend/src/api/targetLists.ts` — target list selection for schedules
### Unchanged