---
created: 2026-03-26T03:10:00.000Z
title: Centralized modular search modal with shared UX patterns
area: ui
files:
  - crates/app/ui/add-product-form.slint
  - crates/app/ui/product-picker.slint
  - crates/app/ui/dashboard.slint
---

## Problem

Multiple fuzzy search modals exist across the app (item search, product picker, add-product form, potentially more in future phases). Each was built independently with its own interaction patterns, styling, and keyboard handling. This leads to inconsistent UX: some modals may not dismiss on ESC, some may not auto-focus the search bar, styling varies, and adding shared features (like keyboard navigation, loading states, or empty-state messages) requires duplicating work across every modal.

## Solution

- Create a centralized `SearchModal` Slint component that all fuzzy-search-style modals extend or compose
- Shared behaviors baked into the base component:
  - ESC to close
  - Auto-focus search input on open
  - Backdrop click to dismiss
  - Consistent styling (colors, spacing, typography from tokens.slint)
  - Keyboard navigation (arrow keys to move selection, Enter to confirm)
  - Loading/empty state handling
- Refactor existing modals (item search, product picker, add-product form Shopify suggest) to use the centralized component
- Future modals automatically inherit all shared behaviors