Implement compact card/list modes with view toggle (NIC-399)#1
Open
Implement compact card/list modes with view toggle (NIC-399)#1
Conversation
- Add /dashboard route with query parameter support for v2 interface - Implement tabbed navigation (Overview, Issues, Metrics) - Add clickable issue table with detail page views - Support deep linking: /dashboard?v=2&tab=issues&issueId=NIC-xxx - Enhanced CSS styling for v2 while maintaining v1 compatibility - Add slide-in animations and responsive mobile design
- Add alert detection logic to Presenter for capacity, rate limits, and orchestrator health - Implement alerts panel UI in both v1 and v2 dashboards - Support warning/critical severity levels with color coding - Include specific remediation guidance for each alert type - Graceful empty state when no alerts present - Responsive grid layout for multiple alerts
- Add sticky navigation bar with tabs and quick action buttons - Implement quick refresh, alert jump, and retry queue navigation - Add smooth scrolling with proper scroll margins - Include context-aware button visibility with count badges - Mobile responsive layout with stacked navigation - JavaScript scroll-to event handling for smooth UX
- Add comprehensive device testing matrix for mobile/tablet viewports - Implement performance budget with Core Web Vitals targets - Create automated Lighthouse audit script with mobile focus - Build responsive design test suite using Puppeteer - Include touch target validation and accessibility checks - Set up package.json with test automation scripts Addresses NIC-343: Symphony Mobile QA device matrix + perf budget Testing framework includes: - 5 primary test devices (iPhone 15 Pro, SE, Samsung S24, etc.) - Performance targets: LCP <1.5s, FID <50ms, CLS <0.1 - Automated screenshot capture across viewports - Horizontal overflow detection - Touch target size validation (≥44px) - Text readability checks (≥16px) Ready for immediate use via: npm run full-qa
Complete notification system implementation: 📱 CORE FEATURES: - Smart notification hierarchy (Critical/Important/Info) - Context-aware routing (desktop vs mobile, DnD, workout) - Duplicate suppression with configurable time windows - Intelligent batching to reduce notification noise 🔔 NOTIFICATION TYPES: - Financial alerts (portfolio changes >5%, position moves >15%) - Task/productivity alerts (stuck tasks, ready-for-review) - Health reminders (missing vitals, workout tracking, HRV) - System alerts (service outages, API failures) 🚀 PWA INTEGRATION: - Service Worker with background notification handling - Rich notification actions (Open, Snooze, Dismiss, API calls) - Offline notification queue and caching - Push API integration ready 🧠 SMART ROUTING: - Respects Do Not Disturb (10pm-7am CT, except critical) - Suppresses mobile when desktop active (except critical) - Workout time awareness (emergency only) - User preference enforcement per category 📊 TESTING & QUALITY: - Comprehensive test suite (routing, suppression, factories) - TypeScript with full type safety - Mock browser APIs for testing - Integration test utilities Addresses NIC-342: Symphony Mobile Notifications high-signal alerts Ready for immediate integration into Symphony dashboard. Time to completion: 90 minutes as planned.
Implements a real-time, mobile-first activity feed with smart grouping, infinite scroll, and touch-optimized quick actions. 🚀 **Core Features:** - **Mobile-First Design**: Thumb-friendly navigation, progressive disclosure, and responsive layouts. - **Real-Time & Performant**: WebSocket integration for live updates, virtual scrolling for smooth performance, and infinite scroll with smart preloading. - **Smart UI**: Time-based grouping (Live, Recent, Today, Yesterday), collapsible sections, and contextual quick actions. 📦 **Architecture:** - **ActivityFeed**: Main container component. - **ActivityItem**: Individual activity card. - **ActivityHeader**: Time-based group headers. - **useActivityStream**: Hook for real-time WebSocket connection. - **useInfiniteScroll**: Hook for efficient infinite scrolling. ✅ **Functionality:** - Displays live, incoming activities without a page refresh. - Groups activities logically to reduce cognitive load. - Efficiently handles very large activity lists. - Provides context-sensitive actions directly in the feed. Addresses NIC-340: Symphony Mobile UX live activity timeline. This is Phase 1, providing the core components and real-time functionality. Time to completion: 70 minutes.
✨ Features: - Enhanced sticky top action bar with improved visuals and responsiveness - Quick jump buttons for hot sections (running issues, retry queue, alerts) - Tab icons and badges showing issue counts and status - Keyboard shortcuts for power users (⌘1-3 for tabs, ⌘R refresh, ⌘Home top) - Smooth scrolling with proper offset calculations - Mobile-responsive design with adaptive layouts 🎯 Navigation Improvements: - Persistent sticky navigation that adapts when scrolled - Visual feedback when jumping to sections - Better scroll margins to avoid content hiding under nav - Utility buttons for quick access to key functions 💻 Technical: - New Phoenix LiveView hook for enhanced client-side navigation - Enhanced CSS with smooth transitions and visual feedback - Comprehensive test suite for navigation features - Updated documentation with usage guidelines Closes Linear NIC-401: Symphony Dashboard v2 navigation and sticky quick actions Removes long-scroll pain with instant access to any dashboard section
- Add Auto/Card/Table view modes with responsive toggle UI - Implement localStorage preference persistence with toast notifications - Create mobile-optimized card layout with touch targets - Maintain desktop table view with seamless mode switching - Add responsive breakpoint behavior (card <860px, table ≥860px) - Preserve backward compatibility and all existing functionality Resolves NIC-399: Symphony Dashboard v2: compact card/list modes
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Overview
Implements Symphony Dashboard v2 compact card/list modes with user preference persistence and responsive design.
Features Delivered
✅ View Mode Toggle UI - Auto/Card/Table modes with responsive design
✅ Preference Persistence - localStorage with toast notification feedback
✅ Mobile Card Layout - Touch-optimized responsive card grid (320px+)
✅ Desktop Table Mode - Preserved existing table functionality
✅ Auto Responsive Mode - Card view <860px, table view ≥860px
Technical Implementation
dashboard_live.exwith view state management?v=2&mode=card)Files Modified
elixir/lib/symphony_elixir_web/live/dashboard_live.ex- View rendering logicelixir/priv/static/dashboard.css- Card layouts and responsive styleselixir/priv/static/enhanced-navigation.js- Preference storageTesting
✅ Elixir compilation successful (no errors/warnings)
✅ CSS responsive breakpoints validated
✅ JavaScript preference storage functional
✅ Backward compatibility maintained
✅ All existing v2 dashboard features preserved
User Experience
Significantly improves mobile experience while maintaining desktop productivity.
Closes Linear NIC-399