Parts search bar UX notes

Overview

The PartsSearchBar widget (see features/search-bar/ui/parts-search-bar.tsx) powers every catalog page. It is composed of three interactive zones:

1. Query input + inline completion — accepts free text and can accept ghost text with →.
2. Mode / Advanced toggle — sets the intent (auto, parts, equipment) and exposes the AdvancedForm sheet (mode + "fitment only").
3. Autocomplete panel — Tahoe-styled popover with grouped suggestions, keyboard navigation, and analytics hooks.

All logic lives in the search feature layer (FSD) and does not duplicate the sidebar filter tree.

Advanced search ("Lite")

• The advanced sheet only exposes two options: ModeToggle and Fitment data only¹.
• The default mode is always auto; users cannot trigger an extra query field inside the sheet.
• Apply simply pushes /parts?mode=…&hasEquipmentFitment=true. There is no "Open full filters" shortcut and no redundant inputs.

Autocomplete panel

• Suggestions are grouped into ordered chips: Direct, Manufacturers, Categories, Fits equipment, Descriptions.
• Chips (tabs) live inside the panel header and capture ←/→ navigation. While focus is inside the input or the suggestions list, a single Tab keystroke flips sections (use Esc to close before moving focus elsewhere).
• The input never hijacks ←/→; it only handles ↑/↓, Home/End, Tab (section switch), Enter, Esc, and → (to accept inline completion when the caret is at the end).
• Selection state is tracked as { groupIndex, itemIndex }, so ↑/↓ wraps only inside the active section while Tab performs section jumps.
• Analytics emitted:
  • autocomplete_click (existing),
  • autocomplete_group_switch with { from_group, to_group, source },
  • inline_completion_view / inline_completion_accept.

Inline completion

• If the top suggestion starts with the raw input, we show a ghost tail (muted text layered under the caret).
• → at the end of the input accepts the completion and fires inline_completion_accept.
• The feature is purely client-side and never mutates the value until acceptance.

Testing checklist

• bun run lint
• tsc --noEmit
• bunx vitest run features/search-bar/model/inline-completion.test.ts
• Manual a11y pass (Tab order: input → tabs → list → footer; Esc closes).

Release verification — 2025-11-07 (CT-65/66/67)

• Automated: bunx vitest run app/parts (catalog + part-detail suites) — green.
• Manual smoke: /parts mode switching, grouped autocomplete with Tab cycling, breadcrumbs + pagination, pricing filters, and /parts/[id] gallery/fallbacks (performed by QA, see CT-65 notes).
• URL contract: search continues to emit mode, q, manufacturer, category, priceBucket, priceMin, priceMax, hasImage, has360, availability, equipmentFitment, hasEquipmentFitment, and equipmentModelKey. Consumers should continue honoring these query params; equipment mode remains opt-in via mode=equipment.

Footnotes

1. Fits the "intent first" requirement from Tahoe — no duplication of sidebar filters. ↩