supabase/supabase
★ 75k+The open source Firebase alternative — Studio dashboard.
Dashboard components — CodeEditor, SchemaSelector, SparkBar, HelpPanel — the parts users interact with daily.
apps/studio/components/ui/CodeEditor/CodeEditor.tsx
apps/studio/components/ui/SchemaSelector.tsx
apps/studio/components/ui/SparkBar.tsx
apps/studio/components/ui/HelpPanel/HelpPanel.tsx
Issues
The 'Join us on Discord' label uses style={{ color: '#404EED' }} — a hardcoded hex inside an inline style that will never respond to dark mode or theme changes.
Every CommandItem has both onSelect and onClick wired to the same handler. Cmdk's CommandItem already fires onSelect on both keyboard Enter and mouse click — adding onClick creates a double-fire risk.
The placeholder overlay uses hardcoded pixel offsets top-[3px] and left-[57px] to align with Monaco's editor surface. These values are magic numbers tied to Monaco's internal gutter width.
The close button is w-7 h-7 (28x28px) — well below the 44x44px minimum touch target. On mobile, this is the only way to dismiss the panel.
SparkBar communicates a quantitative value visually but exposes nothing to assistive technology. A screen reader user gets a div with no role, no label, and no value.
Working well
The labelBottomClass default of tabular-nums is the right call for a data component that will often display counts or percentages — prevents layout shift as values update.
Using runQueryCallbackRef to capture the latest callback ref before wiring the Monaco keybinding is a subtle but important correctness fix — prevents stale closure bugs.
The minimum fill height guard (if height < 2, height = 2) in SparkBar prevents a 0% value from rendering an invisible bar.