// Phase 20.1.1 — Recipient Detail sidebar (D-16, D-17, D-20). // Modeled on product-detail.slint. Content migrated from summary-popup. // Editing state lives on this component (NOT in PopupWindow) per SLINT PopupWindow re-init rule. // Dismissal: Esc via FocusScope (tab-switch is the primary dismissal per D-08; X button removed). // This is a MOUNTED sidebar, not a PopupWindow — there is no click-outside path // (parent owns visibility via recipient-detail-visible in Plan 08). // // Token substitutions: // Colors.text-on-accent — not in tokens.slint; replaced with #ffffff (white on accent) // Colors.avatar-text — used for initial letter color (defined in tokens.slint) import { Colors, Typography } from "tokens.slint"; export component RecipientDetailPanel inherits Rectangle { // ---- data in ---- in property recipient-id: ""; in property recipient-name: ""; in property has-avatar-image: false; in property avatar-image; in property recipient-initial: "?"; in property purpose-color: #3a4060; in property purpose: ""; in property vision-rx-od: ""; in property vision-rx-os: ""; in property discord-username: ""; in property shopify-email: ""; in property shopify-customer-url: ""; in property recipient-issue-url: ""; // empty => not rendered (D-17) in property <[string]> purpose-options: []; // ---- editing state (on this component; survives re-renders) ---- in-out property editing-purpose: false; in-out property purpose-draft: ""; in-out property editing-rx-od: false; in-out property rx-od-draft: ""; in-out property editing-rx-os: false; in-out property rx-os-draft: ""; in-out property editing-discord-username: false; in-out property discord-username-draft: ""; // ---- callbacks out ---- callback save-purpose(string); callback save-rx-od(string); callback save-rx-os(string); callback save-discord-username(string); callback copy-rx(); callback view-shopify-customer-clicked(); callback view-recipient-issue-clicked(); callback close-clicked(); callback navigate-back(); // ESC with no active edit → navigate to recipients grid width: 320px; background: Colors.surface; border-radius: 6px; sidebar-focus := FocusScope { key-pressed(event) => { if (event.text == Key.Escape) { if (root.editing-purpose || root.editing-rx-od || root.editing-rx-os || root.editing-discord-username) { root.editing-purpose = false; root.editing-rx-od = false; root.editing-rx-os = false; root.editing-discord-username = false; return accept; } // ESC navigates back to recipients grid (which dismisses sidebar) root.navigate-back(); return accept; } return reject; } VerticalLayout { padding: 12px; spacing: 10px; alignment: start; // ---- Header: avatar + name side-by-side (D-17) ---- HorizontalLayout { spacing: 10px; Rectangle { width: 64px; height: 64px; horizontal-stretch: 0; border-radius: 32px; clip: true; background: root.purpose-color; if root.has-avatar-image : Image { source: root.avatar-image; width: 64px; height: 64px; image-fit: cover; } if !root.has-avatar-image : Text { text: root.recipient-initial; font-size: Typography.size-lg; color: Colors.avatar-text; // substitution: no Colors.text-on-accent; avatar-text is #7ea8ff on dark bg horizontal-alignment: center; vertical-alignment: center; } } // D-02: pill positioned just below name, inside header row // Explicit width: sidebar(320) - padding(24) - avatar(64) - spacing(10) = 222 VerticalLayout { alignment: center; width: root.width - 98px; spacing: 8px; Text { text: root.recipient-name; font-size: Typography.size-lg; font-weight: 700; color: Colors.text-primary; wrap: word-wrap; } Rectangle { height: 24px; width: purpose-pill-text.preferred-width + 20px; border-radius: 12px; background: transparent; border-width: 2px; border-color: root.purpose-color; purpose-pill-touch := TouchArea { mouse-cursor: pointer; clicked => { root.purpose-draft = root.purpose; root.editing-purpose = true; purpose-dropdown.show(); } } purpose-pill-text := Text { text: root.purpose != "" ? root.purpose : "Purpose"; font-size: Typography.size-xs; font-weight: 700; color: root.purpose-color; horizontal-alignment: center; vertical-alignment: center; width: parent.width; height: parent.height; } // D-01: PopupWindow dropdown below the pill purpose-dropdown := PopupWindow { x: 0px; y: parent.height + 4px; width: 160px; Rectangle { background: Colors.surface-popup; border-radius: 6px; border-width: 1px; border-color: Colors.border-muted; VerticalLayout { padding: 4px; for role in root.purpose-options : Rectangle { height: 28px; border-radius: 4px; background: role-touch.has-hover ? Colors.border-default : transparent; Text { text: role; x: 10px; font-size: Typography.size-sm; color: Colors.text-primary; vertical-alignment: center; } role-touch := TouchArea { mouse-cursor: pointer; clicked => { root.purpose-draft = role; root.editing-purpose = false; root.save-purpose(role); purpose-dropdown.close(); } } } } } } } } } // ---- Discord Username (D-10: moved to TOP of content, above Rx fields) ---- VerticalLayout { spacing: 2px; Text { text: "Discord"; font-size: Typography.size-xs; color: Colors.text-muted; } // CRITICAL: Rectangle wrapper (NOT HorizontalLayout) — TouchArea must ref parent.width without binding loop if !root.editing-discord-username : Rectangle { height: 22px; discord-row-touch := TouchArea { width: parent.width; height: parent.height; mouse-cursor: pointer; clicked => { root.discord-username-draft = root.discord-username; root.editing-discord-username = true; } } HorizontalLayout { spacing: 4px; alignment: start; Text { text: root.discord-username != "" ? root.discord-username : "\u{2014}"; font-size: Typography.size-sm; color: Colors.text-primary; vertical-alignment: center; } Text { text: "\u{270F}"; font-size: Typography.size-xs; color: discord-row-touch.has-hover ? Colors.text-secondary : Colors.text-muted; vertical-alignment: center; } } } if root.editing-discord-username : Rectangle { height: 26px; border-radius: 4px; background: Colors.background; border-width: 1px; border-color: Colors.accent; discord-username-input := TextInput { x: 6px; y: 4px; width: parent.width - 12px; height: 18px; text <=> root.discord-username-draft; font-size: Typography.size-sm; color: Colors.text-primary; accepted => { root.editing-discord-username = false; if (root.discord-username-draft != root.discord-username) { root.save-discord-username(root.discord-username-draft); } sidebar-focus.focus(); } key-pressed(event) => { if (event.text == Key.Escape) { root.editing-discord-username = false; root.discord-username-draft = root.discord-username; sidebar-focus.focus(); return accept; } return reject; } } } } // ---- Shopify email (display only; D-10: moved to TOP of content) ---- VerticalLayout { spacing: 2px; Text { text: "Shopify email"; font-size: Typography.size-xs; color: Colors.text-muted; } Text { text: root.shopify-email != "" ? root.shopify-email : "\u{2014}"; font-size: Typography.size-sm; color: Colors.text-primary; } } // ---- Shopify customer link (clickable; "Not linked" when empty; D-10: moved to TOP of content) ---- VerticalLayout { spacing: 2px; Text { text: "Shopify customer"; font-size: Typography.size-xs; color: Colors.text-muted; } if root.shopify-customer-url != "" : Rectangle { height: 18px; Text { x: 0px; text: "View profile"; font-size: Typography.size-sm; color: Colors.accent; vertical-alignment: center; } shopify-touch := TouchArea { mouse-cursor: pointer; clicked => { root.view-shopify-customer-clicked(); } } } if root.shopify-customer-url == "" : Text { text: "Not linked"; font-size: Typography.size-sm; color: Colors.text-dim; } } // ---- Vision Rx OD (editable) ---- VerticalLayout { spacing: 2px; Text { text: "Rx OD"; font-size: Typography.size-xs; color: Colors.text-muted; } // CRITICAL: Rectangle wrapper (NOT HorizontalLayout) — TouchArea must ref parent.width without binding loop if !root.editing-rx-od : Rectangle { height: 22px; rx-od-row-touch := TouchArea { width: parent.width; height: parent.height; mouse-cursor: pointer; clicked => { root.rx-od-draft = root.vision-rx-od; root.editing-rx-od = true; } } HorizontalLayout { spacing: 4px; alignment: start; Text { text: root.vision-rx-od != "" ? root.vision-rx-od : "\u{2014}"; font-size: Typography.size-sm; color: Colors.text-primary; vertical-alignment: center; } Text { text: "\u{270F}"; font-size: Typography.size-xs; color: rx-od-row-touch.has-hover ? Colors.text-secondary : Colors.text-muted; vertical-alignment: center; } } } if root.editing-rx-od : Rectangle { height: 26px; border-radius: 4px; background: Colors.background; border-width: 1px; border-color: Colors.accent; rx-od-input := TextInput { x: 6px; y: 4px; width: parent.width - 12px; height: 18px; text <=> root.rx-od-draft; font-size: Typography.size-sm; color: Colors.text-primary; accepted => { root.editing-rx-od = false; if (root.rx-od-draft != root.vision-rx-od) { root.save-rx-od(root.rx-od-draft); } sidebar-focus.focus(); } key-pressed(event) => { if (event.text == Key.Escape) { root.editing-rx-od = false; root.rx-od-draft = root.vision-rx-od; sidebar-focus.focus(); return accept; } return reject; } } } } // ---- Vision Rx OS (editable) ---- VerticalLayout { spacing: 2px; Text { text: "Rx OS"; font-size: Typography.size-xs; color: Colors.text-muted; } // CRITICAL: Rectangle wrapper (NOT HorizontalLayout) — TouchArea must ref parent.width without binding loop if !root.editing-rx-os : Rectangle { height: 22px; rx-os-row-touch := TouchArea { width: parent.width; height: parent.height; mouse-cursor: pointer; clicked => { root.rx-os-draft = root.vision-rx-os; root.editing-rx-os = true; } } HorizontalLayout { spacing: 4px; alignment: start; Text { text: root.vision-rx-os != "" ? root.vision-rx-os : "\u{2014}"; font-size: Typography.size-sm; color: Colors.text-primary; vertical-alignment: center; } Text { text: "\u{270F}"; font-size: Typography.size-xs; color: rx-os-row-touch.has-hover ? Colors.text-secondary : Colors.text-muted; vertical-alignment: center; } } } if root.editing-rx-os : Rectangle { height: 26px; border-radius: 4px; background: Colors.background; border-width: 1px; border-color: Colors.accent; rx-os-input := TextInput { x: 6px; y: 4px; width: parent.width - 12px; height: 18px; text <=> root.rx-os-draft; font-size: Typography.size-sm; color: Colors.text-primary; accepted => { root.editing-rx-os = false; if (root.rx-os-draft != root.vision-rx-os) { root.save-rx-os(root.rx-os-draft); } sidebar-focus.focus(); } key-pressed(event) => { if (event.text == Key.Escape) { root.editing-rx-os = false; root.rx-os-draft = root.vision-rx-os; sidebar-focus.focus(); return accept; } return reject; } } } } // ---- Copy Rx button ---- Rectangle { width: 80px; height: 22px; border-radius: 4px; background: copy-rx-touch.has-hover ? Colors.accent-hover : Colors.accent; Text { text: "Copy Rx"; font-size: Typography.size-xs; color: #ffffff; // substitution: Colors.text-on-accent not in tokens.slint horizontal-alignment: center; vertical-alignment: center; } copy-rx-touch := TouchArea { mouse-cursor: pointer; clicked => { root.copy-rx(); } } } // ---- ww-recipient issue link (CONDITIONAL — only when URL non-empty per D-17) ---- if root.recipient-issue-url != "" : VerticalLayout { spacing: 2px; Text { text: "GitHub issue"; font-size: Typography.size-xs; color: Colors.text-muted; } Rectangle { height: 18px; Text { x: 0px; text: "View on GitHub"; font-size: Typography.size-sm; color: Colors.accent; vertical-alignment: center; } issue-touch := TouchArea { mouse-cursor: pointer; clicked => { root.view-recipient-issue-clicked(); } } } } } } }