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
|