Skip to content

fix(ui): replace emoji UI controls with lucide icons (tri-state checkbox, ⚙ header, ✕ button) #249

Description

@ajianaz

Problem

Emoji are used as functional UI controls in 3 places. Emoji render differently across OSes (Apple vs Google vs Windows) — a tri-state checkbox becomes ambiguous on Windows, and a settings header carries inconsistent visual weight.

Location Current Why it's a problem
NamespaceFilter.svelte:126 '☑' / '☐' / '⊟' (select-all tri-state) Tri-state via 3 different glyphs — renders inconsistently across OS; reads as "minus in box", not "some selected"
SettingsModal.svelte:86 ⚙ Settings header Emoji gear vs lucide icons elsewhere on the same surface
ToolsView.svelte:390 remove-button Tiny hit area + not from the icon set

Fix

  • NamespaceFilter: real checkbox input with indeterminate DOM property (handles tri-state natively), or lucide Check/Minus inside a styled box
  • SettingsModal: lucide Settings icon (size 16, strokeWidth 1.75 — match h2 weight)
  • ToolsView: lucide X (size 12–14)

All lucide already imported in these files' siblings — no new deps.

Source

Full-app UI audit (miifb #18: one icon system, SVG over emoji).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions