---
phase: 20.1.1.1-phase-20-1-1-gap-closure-recipient-tab-sidebar-coexistence-n
plan: "02"
subsystem: ui
tags: [slint, recipient-detail, sidebar, pill, inline-edit, field-reorder]

# Dependency graph
requires:
  - phase: 20.1.1-change-the-i-button-on-cards-to-show-a-scrollable-history-of
    provides: RecipientDetailPanel component with Purpose field, close-clicked callback, inline-edit patterns
  - phase: 20.1.1.1-phase-20-1-1-gap-closure-recipient-tab-sidebar-coexistence-n-01
    provides: D-04/D-11/D-12 fixes (notes rows, card hover button)
provides:
  - D-08: X close button removed from sidebar; close-clicked() callback retained for Esc path
  - D-09: Purpose renders as colored pill (24px/12px-radius) matching recipient ring color; click-to-inline-edit in same pill shape
  - D-10: Discord username, Shopify email, Shopify customer moved to top of content block (above Rx OD/OS)
affects:
  - 20.1.1.1-phase-20-1-1-gap-closure-recipient-tab-sidebar-coexistence-n (plan 06 BUGSWEEPER validation)

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "Purpose pill: HorizontalLayout(alignment:start) > if-conditional Rectangle with TouchArea + Text; edit mode Rectangle with TextInput — Rectangle wrapper avoids binding loop"
    - "Pill color from root.purpose-color (already wired via dashboard.slint and populate_recipient_sidebar)"

key-files:
  created: []
  modified:
    - crates/app/ui/recipient-detail.slint

key-decisions:
  - "D-08: X close button block removed; callback close-clicked() KEPT for Esc-based dismissal path via FocusScope"
  - "D-09: pill width = purpose-pill-text.preferred-width + 20px (min 70px via ternary); edit mode uses fixed 180px width for consistent TextInput space"
  - "D-09: #ffffff used for pill text color (Colors.text-on-accent absent from tokens.slint; documented in file comment)"
  - "D-10: pure cut-and-paste reorder — Discord/Shopify email/Shopify customer moved above Rx OD/OS/Copy Rx; internals unchanged"

patterns-established:
  - "Purpose pill inline-edit: same Rectangle wrapper + TextInput pattern as other sidebar editable fields; pill shape maintained in both display and edit modes"

requirements-completed: [D-08, D-09, D-10]

# Metrics
duration: 3min
completed: 2026-04-16
---

# Phase 20.1.1.1 Plan 02: Sidebar Redesign Summary

**Recipient-detail sidebar redesigned: X close button removed, Purpose replaced by colored ring-matched pill with inline-edit, and Discord/Shopify contact fields promoted above Rx prescription fields**

## Performance

- **Duration:** 3 min
- **Started:** 2026-04-16T00:42:31Z
- **Completed:** 2026-04-16T00:45:17Z
- **Tasks:** 3
- **Files modified:** 1

## Accomplishments

- X close button (HorizontalLayout + TouchArea with `\u{2715}` glyph) removed; `close-clicked()` callback preserved for two-level Esc dismissal
- Purpose field replaced with a 24px colored pill (border-radius: 12px, background: root.purpose-color); clicking pill enters inline-edit mode with same pill geometry (26px, 13px radius, accent border)
- Discord username, Shopify email, and Shopify customer link blocks moved to appear immediately below the header + pill, before Rx OD/OS/Copy Rx

## Task Commits

All three tasks implemented atomically in a single file write (all changes to `recipient-detail.slint`):

1. **Task 1: Remove X close button (D-08)** - `63976c6` (feat)
2. **Task 2: Replace labeled Purpose with colored pill (D-09)** - `63976c6` (feat)
3. **Task 3: Reorder Discord/Shopify to top (D-10)** - `63976c6` (feat)

## Files Created/Modified

- `crates/app/ui/recipient-detail.slint` - Three sidebar redesign changes: X removed, Purpose pill added, field order corrected

## Decisions Made

- **Callback retained:** `close-clicked()` kept in place (not deleted) per plan — Esc handler in FocusScope still calls it; removing it would break the `dashboard.slint:663` forwarding chain and `main.rs on_sidebar_close` handler
- **Pill width strategy:** display mode uses `purpose-pill-text.preferred-width + 20px` (min 70px); edit mode uses fixed 180px for stable TextInput layout
- **White text on pill:** `#ffffff` used (Colors.text-on-accent absent from tokens.slint); documented with inline comment per existing precedent in the file
- **Single commit for three tasks:** All three changes are to the same single file; splitting into three commits would not provide meaningful granularity

## Deviations from Plan

None - plan executed exactly as written.

## Issues Encountered

Pre-existing build failures in `main.rs` (17 errors referencing removed fields like `vision_rx_od`, `invoke_card_save_rx_od`, etc.) were present before this plan and are out of scope per scope boundary rules. Verified via `git stash` baseline comparison — error count unchanged by this plan's changes.

## Known Stubs

None — all fields are wired. Purpose pill reads `root.purpose-color` (already populated by `populate_recipient_sidebar` in `main.rs`). No placeholder data.

## Threat Flags

None — no new network endpoints, auth paths, or schema changes introduced.

## Next Phase Readiness

- Sidebar structure ready for Plan 06 BUGSWEEPER + screen-timelapse visual validation
- pre-existing Rust build errors (17 in main.rs) need resolution in a separate plan before a release build

---
*Phase: 20.1.1.1-phase-20-1-1-gap-closure-recipient-tab-sidebar-coexistence-n*
*Completed: 2026-04-16*