properly integrate the theme system. Here's what was accomplished:
- ✅ Converted all color variables to HSL format compatible with theme
files
- ✅ Created a two-layer bridge system:
- **Layer 1**: Base HSL variables (from theme files: `--primary: 217
91% 60%`)
- **Layer 2**: Working CSS variables (auto-derived: `--accent-color:
hsl(var(--primary))`)
- ✅ Added support for alpha transparency: `hsla(var(--primary) / 0.1)`
Rewrites chat.css to use centralized CSS variables from app.css instead
of maintaining its own theme definitions. Moves all theme variables
(colors, spacing, shadows, transitions) to app.css as the single source
of truth. Improves chat UI consistency, adds better connection status
indicators, and enhances responsive design.
Switch messages area to fixed positioning with centered transform for
better layout stability. Enhance scrollbar appearance with thin style,
improved colors
- Implement singleton pattern for chatApp to prevent multiple instances
- Gate initialization with isInitialized to skip repeated init calls
- Add guards for auth and WebSocket connections to avoid overlaps
- Filter non-message payloads and only render content messages
- Improve scroll-to-bottom button visibility and interaction
- Update scrollbar styling, including dark theme rules
- Added a new "Chat" link in the desktop navigation bar with appropriate click handling and active state styling.
- Updated the layout configuration to include the Chat section, mapping it to `chat/chat.html`.
- Enables users to switch to the Chat interface directly from the main navigation.
