Migrate frontend from Material-UI to Tailwind CSS with shadcn/ui

[joseconstela]

This PR replaces the Material-UI (Joy UI) component library with Tailwind CSS and shadcn/ui components across the entire frontend application, implementing a custom design system based on the lab34 brand guidelines.

Summary

The frontend has been completely redesigned with a new visual identity and component architecture. All pages and components now use Tailwind CSS for styling with a curated set of shadcn/ui-based components, replacing the previous Joy UI dependency.

Key Changes

Design System & Styling

• Replaced @mui/joy with Tailwind CSS (@tailwindcss/vite)
• Implemented custom CSS variables for lab34 brand tokens (Bone, Ink, Brass, Carbon, Grey)
• Added dark mode support with CSS custom properties
• Created index.css with Tailwind configuration and brand color definitions

Component Library

• Migrated all UI components to shadcn/ui-based implementations:
  • Button, Card, Input, Label, Select, Table, Dialog, Badge, Alert, Textarea, Separator, Skeleton
• Replaced Material-UI icons with Lucide React icons throughout
• Created custom PageHeader component for consistent section headers with index numbering
• Created ConfirmDialog component for confirmation flows (replacing browser confirm())
• Updated DismissibleAlert to use new Alert component with variant support

Page Updates

• GuardrailsPage: Migrated to new components, added ModeBadge helper, replaced modal dialogs with Radix Dialog
• KeysPage: Updated with new UI components, added ConfirmDialog for revoke actions
• ProvidersPage: Converted to Tailwind styling with new component library
• UsagePage: Refactored StatCard to StatTile, added formatCompact() utility, improved filter handling with ALL constant
• PlaygroundPage: Migrated to new components with improved layout using flexbox utilities
• LoginPage: Updated with new Card and Input components, integrated brand Lockup/Monogram

Layout & Navigation

• Redesigned Layout.tsx with new navigation structure
• Replaced Material-UI navigation with custom styled links using Lucide icons
• Integrated ThemeProvider for light/dark mode management
• Added brand components (Lockup, Monogram) to layout

Utilities & Infrastructure

• Added lib/theme.tsx for theme management with system preference detection
• Added lib/format.ts with formatDateTime() and formatCompact() utilities
• Added lib/utils.ts with cn() helper for class merging
• Updated path aliases in tsconfig.json to use @/* for cleaner imports
• Added components.json for shadcn/ui configuration
• Updated vite.config.ts to include Tailwind CSS plugin
• Updated package.json with new dependencies (Tailwind, Radix UI, Lucide, etc.)

Data Fetching Patterns

• Refactored async data loading to use useEffect with stale flag pattern instead of useCallback
• Replaced load() function calls with reload() tick-based approach for cleaner dependency management
• Improved cleanup handling in async effects to prevent state updates on unmounted components

Accessibility & UX

• Replaced browser confirm() dialogs with custom ConfirmDialog component
• Improved form handling with proper label associations
• Enhanced keyboard navigation with Radix UI primitives
• Added proper ARIA labels and semantic HTML

Assets

• Added favicon.svg with lab34 monogram design
• Updated screenshots in docs to reflect new UI

Implementation Details

• All imports updated to use @/ path alias for consistency
• Maintained existing API client and authentication logic
• Preserved all business logic while updating presentation layer
• Tailwind configuration uses CSS custom properties for dynamic theming
• Brand colors follow lab34 guidelines: Bone (background), Ink (text), Brass (accents), Carbon (dark panels)

https://claude.ai/code/session_012MVP8Re7W1Z3jUeXrqzY9a