supersam/docs/superpowers/plans/2026-05-12-themed-status-dropdown.md

Themed Status Dropdown Implementation Plan

For agentic workers: REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Replace the native status <select> in the delivery filters with a themed dropdown that matches the app styling and does not expose browser-default chrome.

Architecture: Keep the change local to the existing filters component so behavior stays the same while the rendering shifts from a native form control to an app-styled button plus floating menu. Reuse the existing filter state and active-chip logic so downstream list filtering does not change.

Tech Stack: React 18, Vitest, Tailwind utility classes with CSS variables.

---

File Structure

• Modify: src/components/orders/OrderFilters.jsx Responsible for rendering the search field and the themed status dropdown, including open/close behavior and option selection.

• Modify: src/components/orders/OrderFilters.test.jsx Server-rendered tests for the new dropdown markup and the existing active-chip behavior.

Chunk 1: Themed Dropdown Rendering

Task 1: Replace the Native <select> With a Custom Dropdown

Files:

• Modify: src/components/orders/OrderFilters.jsx

• Step 1: Replace the status <select> with a button-triggered dropdown

Use the existing statusOptions array and filters.displayStatus state, but render a button that opens a floating menu of options instead of the browser's native select chrome.

• Step 2: Keep the current filter semantics unchanged

Selecting an option must still call setFilters((current) => ({ ...current, displayStatus: value })).

• Step 3: Keep the component visually aligned with the app theme

Use the same rounded borders, surface/background colors, accent border on focus/open, and muted text used elsewhere in the dashboard.

Task 2: Update the Component Test

Files:

• Modify: src/components/orders/OrderFilters.test.jsx

• Step 1: Update the expectation that currently checks for <select>

Assert that the markup no longer contains a native select element.

• Step 2: Add a markup assertion for the custom trigger

Verify that the closed state still renders the selected label and the status control remains present.

• Step 3: Run the focused test

Run: npm test -- --run src/components/orders/OrderFilters.test.jsx

Expected: PASS.

Task 3: Build Verification

Files:

• None

• Step 1: Run the production build

Run: npm run build

Expected: PASS.