Skip to content

refactor(dashboard): BEM component class system#1

Merged
quinnjr merged 2 commits intomainfrom
develop
Feb 25, 2026
Merged

refactor(dashboard): BEM component class system#1
quinnjr merged 2 commits intomainfrom
develop

Conversation

@quinnjr
Copy link
Contributor

@quinnjr quinnjr commented Feb 25, 2026

Summary

  • Rewrites app.css with a full BEM component library using Tailwind v4 @apply.badge, .btn, .card, .form__*, .nav-tab, .mobile-menu, .alert, .chat-bubble, .token-health, .pwa-banner, and more
  • Removes all scattered inline Tailwind utility chains from 25 components, replacing them with the new BEM class names
  • No SCSS introduced — Lightning CSS (via Tailwind v4/Vite) handles CSS nesting natively

Test plan

  • Build frontend (npm run build in src/dashboard/frontend/) succeeds without errors
  • All tabs render correctly in dark and light themes
  • Buttons, badges, cards, alerts, form inputs, and chat bubbles display with correct styles
  • Mobile menu opens/closes with correct overlay and slide-in animation
  • Token health indicators colour correctly (green/yellow/red)
  • PWA install banner appears and animates on supported browsers

🤖 Generated with Claude Code

quinnjr and others added 2 commits February 24, 2026 12:44
Brings version bump (0.1.2) and CHANGELOG update back to the
integration branch after the v0.1.2 release.
…t classes

Inline Tailwind utility chains scattered across 25 components made the
HTML hard to read and impossible to maintain consistently. Every button,
card header, and badge had its own hand-rolled utility soup, so visual
changes required hunting through dozens of files and there was no single
source of truth for what a "button" or "card" looked like.

Extract all recurring patterns into a BEM component library in app.css
using @apply, CSS nesting (Lightning CSS via Tailwind v4), and plain CSS
custom properties. No SCSS was introduced — Tailwind v4 with the vite
plugin handles nesting natively, avoiding SCSS/PostCSS import conflicts.

New BEM blocks:
- .badge (--running, --paused, --success, --error, --warning, --info,
  --primary) — replaces badge-running, badge-paused, etc.
- .btn (--sm, --md, --icon) × (--primary, --secondary, --ghost,
  --success, --danger) — single definition for all button variants
- .card, .card__header, .card__header-title, .card__body
- .form__label, .form__input, .form__textarea, .form__select
- .nav-tab (--main, --sub, --active) — replaces .main-tab and .mem-tab
- .mobile-menu, .mobile-menu--open, .mobile-menu__header,
  .mobile-menu__nav, .mobile-menu__nav-item (--active),
  .mobile-menu-overlay (--open) — replaces .mobile-nav-item + .open
- .alert (--success, --error, --warning, --info)
- .chat-bubble (--user, --assistant, --system)
- .token-health (--good, --warning, --expired)
- .pwa-banner, .pwa-banner__message, .pwa-banner__actions,
  .pwa-banner__install-btn, .pwa-banner__dismiss-btn
- .kg-canvas, .custom-scroll, .tab-scroll, .animate-subtle-pulse

All 25 component files updated to use the new class names. Inline utility
chains retained only where they express layout context unique to that
component rather than a reusable widget appearance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@quinnjr quinnjr merged commit f02bea7 into main Feb 25, 2026
1 of 5 checks passed
@quinnjr quinnjr deleted the develop branch February 25, 2026 16:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant