feat: desktop layout OS element with glassmorphism dashboard #4168
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Implemented dashboard canvas system with draggable widgets - Added glassmorphism design with backdrop blur effects - Created centered greeting element using original Greeting component - Implemented smooth drag and drop with requestAnimationFrame optimization - Added dot pattern overlay instead of grid lines for modern aesthetic - Enhanced widget system with sessions, tokens, and recent chats widgets - Improved visual feedback with scaling and enhanced glass effects during drag - Optimized performance with document-level event listeners and animation frames Key Features: - Canvas-based layout with draggable glass widgets - Centered greeting with text animation and randomized messages - Beautiful gradient background with dot pattern overlay - Smooth 60fps drag interactions with visual feedback - Glass morphism styling throughout with backdrop blur - Responsive design with proper z-index management
- Added subtle moving gradient animation with 20-second cycle - Implemented CSS keyframes for smooth background position shifts - Created multiple animation speed classes (slow, medium, fast) - Enhanced glassmorphism effect with dynamic backdrop blur interaction - Optimized for 60fps performance using GPU-accelerated properties Closes #4168
…re text - Fixed background extending to bottom by overriding SidebarInset and ChatInput backgrounds - Added glassmorphism effect to chat input with backdrop blur and transparent styling - Updated widget text colors to use theme-aware classes for proper light/dark mode support - Implemented 1000px max-width for chat input section for better desktop experience - Enhanced visual consistency with glass effects throughout the interface Fixes background cutoff and improves accessibility in light mode Relates to #4168
- Significantly slowed down gradient animation from 20s to 120s for subtle ambient effect - Removed 'Dashboard Canvas' floating element from bottom-right corner for cleaner interface - Updated animation timing for all speed variants (slow: 120s, medium: 60s, fast: 30s) - Enhanced user experience with uncluttered, zen-like background movement Creates a more polished and distraction-free dashboard environment Relates to #4168
- Added seamless animated gradient background to Pair component matching Hub design - Implemented centered chat layout with 1000px max-width for consistency - Removed all background overrides to allow gradient to flow through chat interface - Used customMainLayoutProps to properly override BaseChat background at source - Made chat input completely transparent to avoid blur panel interference - Added dot pattern overlay for visual consistency between Hub and chat modes Creates unified visual experience with continuous gradient animation from Hub to chat Relates to #4168
… mode contrast - Replaced colorful gradient with sophisticated monochromatic grey palette - Increased background opacity for better visual delineation in light mode - Switched linear gradient to subtle black overlay for enhanced depth - Maintained consistent muted aesthetic across Hub and chat interfaces - Improved glass widget separation and readability without being distracting Creates professional, sophisticated background that provides helpful visual context while maintaining focus on content and productivity Relates to #4168
- Add MessageQueue component with drag-and-drop reordering - Add interruption detection for natural language commands - Add queue pause/resume functionality with visual indicators - Add InterruptionHandler component for managing interruptions - Add Pill UI component for status display - Add queueStorage utility for persistence - Integrate queue system into ChatInput with keyboard shortcuts - Support for editing queued messages and priority sending Addresses #4179
- Fix queue auto-resume to only trigger on non-interruption messages - Add intelligent queue resume logic to handleStopAndSend function - Ensure interruption commands (wait, stop, etc.) keep queue paused until user sends regular message - Queue now properly resumes when user sends message via chat input or queue - Maintain existing manual pause/resume functionality Fixes queue behavior for PR #4179
- Clear paused state and interruption when adding message to empty queue - Clear paused state and interruption when queue becomes empty after processing - Ensures fresh queue state when starting new queue sessions - Prevents stale pause state from previous queue sessions Fixes edge case where empty queue could remain paused from previous session
- Remove queue pausing logic from handleStopAndSend function - Send Now should interrupt current processing and send message immediately - Queue automatically continues processing remaining messages after Send Now completes - Only pause queue when user explicitly uses pause words or stop button - Maintains priority sending without disrupting queue flow Fixes Send Now behavior to be non-disruptive to queue processing
- Temporarily pause queue during Send Now operation to prevent race condition - Save previous pause state and restore it after brief delay - Prevents queue processing effect from triggering while Send Now is executing - Ensures only the selected message is sent, not additional queue messages Fixes double-send issue where Send Now would trigger both the selected message and queue processing
- Initialize queue state from localStorage on component mount - Save queue messages, pause state, and interruption state to localStorage - Restore queue state when navigating between pages or restarting app - Update all queue operations to sync with storage (add, remove, edit, reorder, clear) - Add cleanup effect to save final state on component unmount - Queue now persists across navigation and continues processing where it left off Ensures queue functionality works seamlessly across different spaces and app sessions
- Change QueueStorage utility to use sessionStorage instead of localStorage - Change queue state storage (paused/interrupted) to use sessionStorage - Queue now persists during page navigation within same session - Queue automatically clears on app reload/restart - Maintains queue functionality during navigation while preventing stale queues Fixes queue behavior to clear on app reload but persist during navigation
- Integrate intelligent message queue with interruption handling - Add queue persistence across page navigation using sessionStorage - Implement message reordering, editing, and priority sending - Add interruption detection for stop/pause/redirect commands - Include MessageQueue, InterruptionHandler components and supporting utilities - Enhance ChatInput with queue management and interruption logic - Queue automatically processes messages when AI is idle - Support for manual queue control (pause/resume/clear) Combines sophisticated animated background (PR #4168) with advanced message queue functionality (PR #4179)
- Implement localStorage-based position persistence for dashboard widgets - Add automatic saving when widgets are moved or resized - Include visual 'Saved' indicator when widget positions are updated - Add Reset Layout button to restore default widget positions - Merge saved positions with default layout on component initialization - Separate layout data (positions/sizes) from dynamic data (sessions/tokens) - Enhance user experience with persistent customizable dashboard Widget positions now remember user preferences across app sessions while maintaining data freshness
- Replace text-based 'Saved' pill with clean green circular icon - Use checkmark SVG icon for universal recognition - Maintain 1-second fade-in animation and positioning - Cleaner, more minimal visual feedback for widget position saves
- Replace checkmark icon with minimal 4px green circle (w-1 h-1) - Ultra-subtle visual feedback for widget position saves - Maintains fade-in animation and top-right positioning - Clean, unobtrusive design that doesn't distract from content
- Reduce default height from 270px to 180px for better proportions - Implement proper flexbox layout with flex-col and flex-1 for content area - Add overflow-y-auto with min-h-0 for proper scrolling behavior - Improve text truncation with min-w-0 and flex-shrink-0 for better spacing - Show up to 5 recent sessions instead of 3 for better content utilization - Center 'No recent chats' message for better empty state presentation Recent chats widget now properly hugs its content without excessive empty space
- Change dot pattern from white rgba(255,255,255,0.3) to dark rgba(0,0,0,0.4) - Reduce opacity from 20% to 10% for more subtle appearance - Use consistent dark dots across both light and dark modes - Maintain same 24px grid spacing and positioning - Apply changes to both DashboardCanvas and Pair components Dots are now more subtle and visible in light mode while maintaining design consistency
- Added BackgroundSelector component in App Settings with preset gradients and custom image upload - Implemented drag & drop image upload functionality with file validation - Added Ocean Blue, Purple Haze, and Forest Green gradient presets - Created dynamic background system that responds to user selections - Added toggle for dot pattern overlay with real-time preview - Integrated background settings with DashboardCanvas using localStorage persistence - Added reset to default functionality and image removal options - Enhanced glassmorphism dashboard with user-customizable backgrounds
- Created GlobalBackground component for consistent background rendering across all views - Added aggressive blur (20px) and reduced opacity (0.3) for chat sections to improve readability - Integrated GlobalBackground into AppLayout for all chat/conversation views - Updated Hub component to use GlobalBackground instead of inline styles - Maintained crisp backgrounds for dashboard while adding subtle blur for chat areas - Enhanced glassmorphism effect throughout the application with customizable backgrounds
- Add AnalogClock component with SVG-based real-time display - Implement glassmorphic styling with backdrop blur effects - Add circular widget support in DashboardWidget component - Include analog clock in default dashboard layout - Support configurable size, numbers, and minute marks - Real-time updates with proper cleanup and smooth animations
spencrmartin
added a commit
that referenced
this pull request
Aug 20, 2025
- Added BlurOverlay component for dynamic blur effects - Added ChatInputWrapper for typing state management - Added CustomSideNav for improved navigation - Updated PillSideNav with animated transitions - Enhanced pair.tsx with glassmorphism effects - Updated BaseChat to support transparent backgrounds PR #4168
spencrmartin
added a commit
that referenced
this pull request
Aug 20, 2025
- Added BlurOverlay component for dynamic blur effects - Added ChatInputWrapper for typing state management - Added CustomSideNav for improved navigation - Updated PillSideNav with animated transitions - Enhanced pair.tsx with glassmorphism effects - Updated BaseChat to support transparent backgrounds PR #4168
Collaborator
Author
|
Last known 6e2c4f5 Struggling with global blur component |
…background appears on chat page
spencrmartin
force-pushed
the
spence/ui-muse
branch
from
c26ad48 to
6e2c4f5
Compare
…nimation for session cards - Fixed background image display issues by creating a BackgroundImageFix component - Added staggered animation for session cards in the history view - Replaced skeleton loading with a cleaner minimal loading indicator - Improved transparency of headers in session history view - Added fallback mechanism for session resuming
- Used --ours strategy to preserve our working background switching fixes - Overrode conflicting files with our enhanced versions that prevent hanging - Maintained all functionality while ensuring stability - Our fixes include: async processing, timeout protection, proper error handling - This ensures the background switching issue doesn't break again
- Removed import and usage of BackgroundImageFix component that was deleted - This component was causing compilation errors and preventing app from loading - Background functionality is now handled by GlobalBlurOverlay component - Fixes Vite import resolution error
- Replaced problematic GlobalBlurOverlay with our fixed version
- Removed hardcoded url('/background.jpg') fallback that was showing in chat history
- Now uses transparent fallback instead of unwanted background image
- Only shows custom images when explicitly set by user
- Preserves all background selector functionality without hardcoded defaults
- Prevents background.jpg from appearing in chat history
- Added subtle glass effect to session cards in SessionListView
- bg-background-card/20 with backdrop-blur-md for main cards
- Enhanced hover states with bg-background-card/30
- Subtle white borders (border-white/10) with hover enhancement
- Applied glass effect to skeleton loading cards (15% opacity)
- Enhanced StaggeredSessionItem with improved glass styling
- Made date headers ('Today', 'Yesterday', etc.) completely transparent
- Removed bg-background-card/80 backdrop-blur-md styling
- Headers now float transparently over background
- Maintains readability while creating cleaner visual flow
Visual improvements:
- Consistent glassmorphism throughout session list
- Subtle depth without overwhelming content
- Professional translucent appearance
- Seamless integration with background design
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Key Features: