---
created: 2026-03-15T17:08:59.880Z
title: Replace planning category filter select with icon-aware dropdown
area: ui
files:
  - src/client/routes/collection/index.tsx
---

## Problem

The category filter in the planning tab uses a native HTML `<select>` element, which cannot render Lucide icons inline. After Phase 6 migrated all category icons from emoji to Lucide, this filter only shows category names without their icons — inconsistent with the rest of the app where category icons appear alongside names (CategoryPicker combobox, CategoryHeader, cards, etc.).

This was documented as a deliberate deviation in 06-02-SUMMARY due to HTML `<select>` constraints.

## Solution

Replace the native `<select>` with a custom dropdown component (similar to CategoryPicker's combobox pattern) that renders `LucideIcon` + category name for each option. Reuse the existing popover/dropdown patterns from IconPicker or CategoryPicker.
