50 lines
2.2 KiB
Markdown
50 lines
2.2 KiB
Markdown
|
---
|
|||
|
|
phase: 16-multi-signer-ui
|
|||
|
|
plan: "03"
|
|||
|
|
subsystem: ui
|
|||
|
|
tags: [react, typescript, fieldplacer, signer-coloring, active-signer]
|
|||
|
|
|
|||
|
|
# Dependency graph
|
|||
|
|
requires:
|
|||
|
|
- phase: 16-multi-signer-ui
|
|||
|
|
plan: "01"
|
|||
|
|
provides: signers prop + unassignedFieldIds prop threaded into FieldPlacer
|
|||
|
|
provides:
|
|||
|
|
- activeSignerEmail state in FieldPlacer — auto-defaults to signers[0].email
|
|||
|
|
- Active signer selector UI (select dropdown with colored dot, shown when signers.length > 0)
|
|||
|
|
- Per-signer field coloring — dragged fields get signerEmail; color overrides type color when assigned
|
|||
|
|
- Unassigned field red highlight — border/background #ef4444 when field.id in unassignedFieldIds
|
|||
|
|
- DragOverlay ghost uses activeSigner.color
|
|||
|
|
|
|||
|
|
affects: [16-04-dashboard-badge]
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Phase 16 Plan 03: FieldPlacer Active Signer Selector and Color Override Summary
|
|||
|
|
|
|||
|
|
## What Was Built
|
|||
|
|
|
|||
|
|
Added multi-signer UX to `FieldPlacer.tsx` (822 → 907 lines):
|
|||
|
|
|
|||
|
|
1. **`activeSignerEmail` state** — `useState<string | null>(null)` initialized via `useEffect` to `signers[0].email` on mount; resets if signers prop changes or selected signer removed.
|
|||
|
|
|
|||
|
|
2. **`handleDragEnd` signer auto-assignment** — `...(activeSignerEmail ? { signerEmail: activeSignerEmail } : {})` added to `newField` construction so dragged fields are tagged automatically.
|
|||
|
|
|
|||
|
|
3. **`renderFields` signer color override** — `signers.find(s => s.email === field.signerEmail)?.color` overrides type-based color when the field has a signerEmail. Fields without signerEmail retain existing PALETTE_TOKENS color.
|
|||
|
|
|
|||
|
|
4. **Unassigned field validation overlay** — `isUnassigned` flag from `unassignedFieldIds.has(field.id)` applies `border: 2px solid #ef4444` / `background: #ef444414` to highlight fields needing signer assignment.
|
|||
|
|
|
|||
|
|
5. **Active signer selector UI** — Native `<select>` at `height: 32px` above field palette. Shows only when `!readOnly && signers.length > 0`. Colored dot indicator (8×8px circle in signer color). Label: "Active signer:" at 12px/500 weight.
|
|||
|
|
|
|||
|
|
6. **DragOverlay ghost** — Uses `activeSigner.color` for the ghost field color when an active signer is selected.
|
|||
|
|
|
|||
|
|
# Tech tracking
|
|||
|
|
tech-stack:
|
|||
|
|
added: []
|
|||
|
|
removed: []
|
|||
|
|
changed: []
|
|||
|
|
|
|||
|
|
# Metrics
|
|||
|
|
duration: 3min
|
|||
|
|
commit: d768fc6
|