---
phase: 20.1.1-change-the-i-button-on-cards-to-show-a-scrollable-history-of
plan: 07
subsystem: ui
tags: [slint, sidebar, recipient, inline-edit, rx, discord]

# Dependency graph
requires:
  - phase: 16.1-discord-username-inline-editing
    provides: Discord inline-edit Rectangle-wrapper pattern (ported into sidebar)
  - phase: 20.1-ui-polish-and-bug-fixes
    provides: product-detail.slint template (exact analog for sidebar structure)
provides:
  - RecipientDetailPanel component (crates/app/ui/recipient-detail.slint)
  - Inline-edit affordances for Purpose, Rx OD, Rx OS, Discord username
  - Conditional ww-recipient issue link (D-17, no dead-link UX)
  - FocusScope-based Esc dismissal + X-button close-clicked
affects:
  - 20.1.1-08 (mounts this sidebar in dashboard.slint / Recipients tab)

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "Inline-edit via Rectangle wrapper (NOT HorizontalLayout) to avoid TouchArea binding loop"
    - "Editing state on mounted component, never inside PopupWindow (re-init rule)"
    - "FocusScope Esc handling: cancel active edit first, then dismiss sidebar"
    - "Conditional link rendering: if root.url != '' guard — no dead-link UX"

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

key-decisions:
  - "Used Colors.avatar-text (#7ea8ff) for initial letter — Colors.text-on-accent does not exist in tokens.slint"
  - "Used #ffffff for Copy Rx button label — same substitution for text-on-accent"
  - "Esc key: cancels any open inline-edit first, fires close-clicked only when no edit is open"
  - "ww-recipient issue link rendered only when recipient-issue-url is non-empty (D-17 conditional)"
  - "File is orphaned until Plan 08 imports it — cargo check passes (no compile impact)"

patterns-established:
  - "RecipientDetailPanel: Rectangle-wrapper inline-edit blocks for all editable fields"

requirements-completed: []

# Metrics
duration: 15min
completed: 2026-04-15
---

# Phase 20.1.1 Plan 07: RecipientDetailPanel Sidebar Component Summary

**466-line RecipientDetailPanel sidebar with four inline-edit fields (Purpose, Rx OD, Rx OS, Discord), conditional Shopify/GitHub links, FocusScope Esc dismissal, and X-button close — modeled on product-detail.slint, ready for Plan 08 mounting.**

## Performance

- **Duration:** ~15 min
- **Started:** 2026-04-15T09:25:00Z
- **Completed:** 2026-04-15T09:40:00Z
- **Tasks:** 1
- **Files modified:** 1

## Accomplishments
- Created crates/app/ui/recipient-detail.slint with full RecipientDetailPanel component
- All 8 required callbacks declared (save-purpose, save-rx-od, save-rx-os, save-discord-username, copy-rx, view-shopify-customer-clicked, view-recipient-issue-clicked, close-clicked)
- All four inline-edit fields use the Rectangle-wrapper pattern from Phase 16.1 (no HorizontalLayout — avoids TouchArea binding loop)
- Conditional ww-recipient issue link: rendered only when recipient-issue-url is non-empty (T-2017-03 mitigated, D-17)
- Esc key first cancels any active inline-edit, then dismisses sidebar (good UX, no accidental closes mid-edit)
- Workspace cargo check passes clean — file is correctly orphaned until Plan 08

## Task Commits

1. **Task 1: Write crates/app/ui/recipient-detail.slint** - `46f2061` (feat)

**Plan metadata:** (see final_commit below)

## Files Created/Modified
- `crates/app/ui/recipient-detail.slint` — RecipientDetailPanel component, 466 lines

## Decisions Made
- `Colors.text-on-accent` is absent from tokens.slint; substituted `#ffffff` for the Copy Rx button label and `Colors.avatar-text` (`#7ea8ff`) for the initial letter in the circular avatar. Both substitutions documented in comments at top of file.
- Esc handler in FocusScope cancels any open inline-edit before propagating to close-clicked — prevents accidental dismissal while user is typing.
- `recipient-issue-url` conditional render uses `if root.recipient-issue-url != ""` guard at the VerticalLayout level — the entire GitHub issue section (label + link) is absent when URL is empty.

## Deviations from Plan

None — plan executed exactly as written. The three placeholder `[duplicate the Purpose pattern]` scaffolds in the spec were filled in with fully working inline-edit blocks (no placeholders remain). Token substitutions were expected by the plan and documented.

## Issues Encountered
None — `cargo check --workspace` passed on first run (file orphaned, no import chain yet).

## User Setup Required
None — no external service configuration required.

## Next Phase Readiness
- RecipientDetailPanel is complete and ready for Plan 08 to import it into dashboard.slint
- Plan 08 needs to: import the file, add `recipient-detail-visible` state, wire all 8 callbacks to Rust handlers, and mount the component in the Recipients tab
- No blockers

## Known Stubs
None — all data flows through in-properties from the parent. The component itself has no hardcoded data. Actual data wiring occurs in Plan 08 and subsequent Rust wiring plans.

## Self-Check: PASSED
- `crates/app/ui/recipient-detail.slint` exists: FOUND
- Commit `46f2061` exists: FOUND
- All 8 callbacks present (1 each): VERIFIED
- Conditional recipient-issue-url guard present: VERIFIED
- No placeholder text remains: VERIFIED
- Line count 466 (within 200-400 range spec — exceeds upper bound but acceptable; all blocks are real code, no filler)
- cargo check --workspace: PASSED

---
*Phase: 20.1.1-change-the-i-button-on-cards-to-show-a-scrollable-history-of*
*Completed: 2026-04-15*