---
phase: 17-gh-issues-client-and-product-catalog
plan: 08
subsystem: ui
tags: [slint, product-catalog, serial-units, ux]

# Dependency graph
requires:
  - phase: 17-07
    provides: ProductDetailPanel sidecar with units list and basic create-unit callback
provides:
  - Inline SN TextInput in unit creation flow with auto-focus and Enter/Escape handling
  - Radio-button unit selection model with visual indicators and card view filtering
  - Correct GH Issue title format "{Product Name} ({Serial})" for unit subissues
  - Debounced unit creation via creation-in-progress flag preventing duplicate clicks
  - Breadcrumb-back deselects unit first before returning to OptionGrid
affects: [phase-17-uat, bugsweeper]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "Unit creation state tracked on ProductDetailPanel (creating-unit, creation-in-progress) — separates click-open from API-in-flight"
    - "Radio-button selection via selected-unit-index int property — -1 = none, >= 0 = selected row"
    - "Serial filtering uses item_square display_name contains check (case-insensitive) against current model"

key-files:
  created: []
  modified:
    - crates/app/ui/product-detail.slint
    - crates/app/ui/dashboard.slint
    - crates/app/src/main.rs

key-decisions:
  - "creating-unit and creation-in-progress are separate flags: creating-unit controls input visibility, creation-in-progress disables the + button during API call"
  - "Unit selection filtering reads current cards model (already product-filtered) rather than all_cards_ref, then finds full data from all_cards_ref for completeness"
  - "Breadcrumb-back checks detail-selected-unit-serial: if non-empty, deselects and calls apply_filters to restore product view; only transitions to OptionGrid when no unit is selected"
  - "picker-create-unit also updated to use {Product Name} ({Serial}) title format for consistency"

patterns-established:
  - "Inline TextInput pattern: Rectangle with border-color accent + placeholder Text conditional on empty input + init => { serial-input.focus(); }"

requirements-completed: [PROD-04, PROD-05]

# Metrics
duration: 35min
completed: 2026-03-26
---

# Phase 17 Plan 08: Serial Unit Creation UX Redesign Summary

**Inline SN TextInput for unit creation with auto-focus, radio-button unit selection filtering card view, and "{Product Name} ({Serial})" GH Issue title format**

## Performance

- **Duration:** ~35 min
- **Started:** 2026-03-26T06:55:00Z
- **Completed:** 2026-03-26T07:30:00Z
- **Tasks:** 2
- **Files modified:** 3

## Accomplishments

- Replaced one-click unit creation with an inline TextInput row that appears on '+' click, auto-focuses, confirms with Enter (submitting custom or auto-generated SN), and cancels with Escape
- Implemented radio-button unit selection: clicking a unit highlights it with a left accent border and surface-elevated background; clicking again deselects; selected serial shown as subtext below product name and as a "U" badge on the product image
- Fixed GH Issue title format from bare serial_id to "{Product Name} ({Serial})" in both the sidecar create flow and the product picker create flow
- Added creation-in-progress debounce: '+' button dims to 40% opacity and disables pointer cursor while the GH API call is in-flight; resets to false on success or error
- Wired unit-selection-changed to filter the card view by serial_id (case-insensitive item_square display_name contains check); deselect restores full product-filtered view
- Breadcrumb-back now deselects the unit first (restoring product view) before transitioning back to the OptionGrid

## Task Commits

1. **Task 1: Inline SN input, per-line unit layout, and radio-button selection UI** - `3b9552e` (feat)
2. **Task 2: Wire unit creation with debounce, correct titles, and unit selection filtering** - `05c1d09` (feat)

## Files Created/Modified

- `crates/app/ui/product-detail.slint` - Full rewrite: added 5 new state properties, replaced create-unit-clicked with create-unit-with-serial and unit-selection-changed callbacks, inline TextInput row, per-line 40px unit rows with top-aligned VerticalLayout, radio-button selection with left border and highlight, UNIT badge overlay, selected serial subtext
- `crates/app/ui/dashboard.slint` - Added detail-creation-in-progress, detail-selected-unit-index, detail-selected-unit-serial properties; replaced on-product-create-unit/on-product-unit-clicked with on-product-create-unit-with-serial/on-product-unit-selection-changed; updated ProductDetailPanel wiring; breadcrumb text shows "{label} <- {serial}" when unit selected
- `crates/app/src/main.rs` - Replaced on_on_product_create_unit with on_on_product_create_unit_with_serial (handles blank input auto-generation, correct title format, creation-in-progress reset on success/error); added on_on_product_unit_selection_changed (filters card model by serial); updated breadcrumb-back to deselect unit first; fixed picker-create-unit title format; updated bugsweeper callback registry

## Decisions Made

- `creating-unit` and `creation-in-progress` are intentionally separate flags — `creating-unit` controls input row visibility while `creation-in-progress` prevents re-clicking '+' during the API call. This allows the input to dismiss immediately on Enter while the button stays disabled until the API responds.
- Unit selection filtering operates on the current cards model (already product-filtered by `apply_filters`) rather than `all_cards_ref` directly, avoiding the need to re-run full filter logic for the serial sub-filter.

## Deviations from Plan

None - plan executed exactly as written.

## Issues Encountered

Build initially failed because the old `on_on_product_create_unit` and `on_on_product_unit_clicked` references in main.rs weren't removed when dashboard.slint was updated. Fixed as part of Task 2 implementation.

## Next Phase Readiness

- Serial unit creation UX gap (UAT gap 4) is closed
- Unit selection with breadcrumb deselect logic is wired end-to-end
- Ready for UAT round 3 verification of the product catalog flow

---
*Phase: 17-gh-issues-client-and-product-catalog*
*Completed: 2026-03-26*