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).
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.
NamespaceFilter.svelte:126'☑' / '☐' / '⊟'(select-all tri-state)⊟reads as "minus in box", not "some selected"SettingsModal.svelte:86⚙ SettingsheaderToolsView.svelte:390✕remove-buttonFix
indeterminateDOM property (handles tri-state natively), or lucideCheck/Minusinside a styled boxSettingsicon (size 16, strokeWidth 1.75 — match h2 weight)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).