Add mobile compatibility concept, Pixel 6 demo video infrastructure, and CI/CD workflow (#1006)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>
2025-12-24 18:02:17 +01:00
parent a3de71d939
commit 1453934e29
13 changed files with 868 additions and 2 deletions
--- a/MOBILE_COMPATIBILITY.md
+++ b/MOBILE_COMPATIBILITY.md
@@ -0,0 +1,156 @@
+# Mobile Compatibility Concept
+
+## Overview
+
+This document outlines the mobile compatibility strategy for MQTT Explorer, focusing on providing a good mobile experience without requiring a complete UI rewrite.
+
+## Target Device
+
+**Reference Device:** Google Pixel 6
+- Viewport: 412x915 pixels (portrait)
+- Typical modern smartphone dimensions
+- Good representation of common mobile browsers
+
+## Strategy
+
+### 1. Browser Mode First
+Mobile compatibility focuses on the browser mode (`yarn dev:server`) rather than native mobile apps, as:
+- Browser mode already supports any device with a modern web browser
+- No app store deployment complexities
+- Users can access via mobile browser or save as PWA
+
+### 2. Responsive Design Enhancements
+
+Without rewriting the UI, we implement strategic responsive improvements:
+
+#### Viewport Configuration
+- Ensure proper viewport meta tag for mobile scaling
+- Already present: `<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />`
+
+#### Layout Adaptations
+- **Tree Panel**: Make touch-friendly (larger tap targets, better scrolling)
+- **Sidebar**: Collapsible by default on mobile, swipe-friendly
+- **Chart Panel**: Stack vertically instead of side-by-side
+- **Split Panes**: Adjust minimum sizes and default positions for mobile
+
+#### Touch Interactions
+- Increase tap target sizes for mobile (minimum 44x44px)
+- Improve scrolling performance
+- Add touch-friendly gestures where applicable
+
+### 3. Minimal CSS Changes
+
+Use CSS media queries to adapt the UI for mobile viewports:
+
+```css
+@media (max-width: 768px) {
+  /* Mobile-specific overrides */
+}
+```
+
+Key areas for CSS adjustments:
+- Typography sizing (ensure readability on small screens)
+- Padding and margins (optimize for touch)
+- Button and icon sizes (larger for touch targets)
+- Navigation (hamburger menu, collapsible sections)
+
+### 4. Feature Prioritization
+
+On mobile devices, prioritize:
+1. **Core Functionality**: View topics, read messages, basic navigation
+2. **Search**: Easy topic filtering and search
+3. **Connection Management**: Connect/disconnect, basic settings
+4. **Publishing**: Simple message publishing
+
+Less critical on mobile (can be de-emphasized):
+- Advanced connection settings (can use smaller text/collapse)
+- Extensive keyboard shortcuts
+- Multi-panel simultaneous viewing
+
+## Implementation Approach
+
+### Phase 1: Foundation (Current)
+- Document mobile compatibility concept ✓
+- Create mobile demo video showing current experience
+- Identify pain points and opportunities
+
+### Phase 2: Quick Wins (Minimal Changes)
+- Adjust default split pane positions for mobile
+- Increase touch target sizes in critical areas
+- Improve sidebar collapse behavior on small screens
+- Optimize tree node spacing for touch
+
+### Phase 3: Enhanced Experience (Future)
+- Add PWA manifest for "add to home screen"
+- Implement swipe gestures
+- Optimize connection dialog for mobile
+- Add mobile-specific keyboard (numeric for ports, etc.)
+
+## Demo Video
+
+### Purpose
+Create a demonstration video showing MQTT Explorer running on a mobile viewport (Pixel 6 dimensions) to:
+- Showcase current mobile experience
+- Identify UX issues
+- Demonstrate the feasibility of mobile usage
+- Guide future improvements
+
+### Technical Implementation
+- Use Playwright with Chromium in mobile emulation mode
+- Viewport size: 412x915 (Pixel 6 portrait)
+- Record typical mobile use cases:
+  - Connecting to broker
+  - Browsing topic tree (with touch gestures)
+  - Viewing message details
+  - Searching topics
+  - Publishing messages
+
+### Script Location
+`src/spec/demoVideoMobile.ts` - Mobile-specific demo video script
+
+## Testing Strategy
+
+### Manual Testing
+- Test on real mobile devices (iOS Safari, Android Chrome)
+- Use Chrome DevTools device emulation during development
+- Verify touch interactions work smoothly
+
+### Automated Testing
+- Create mobile-specific UI tests
+- Run demo video generation with mobile viewport
+- Validate responsive breakpoints
+
+## Future Considerations
+
+### Progressive Web App (PWA)
+Add PWA capabilities:
+- Service worker for offline support
+- App manifest for installability
+- App icon and splash screen
+
+### Platform-Specific Optimizations
+- iOS: Handle safe areas, notch
+- Android: Material Design guidelines
+- Dark mode (already supported via theme)
+
+### Performance
+- Optimize bundle size for mobile networks
+- Implement lazy loading for large topic trees
+- Add connection retry logic for unreliable mobile networks
+
+## Metrics for Success
+
+A successful mobile experience should provide:
+- ✅ All core features accessible on mobile
+- ✅ No horizontal scrolling required
+- ✅ Touch targets minimum 44x44px
+- ✅ Readable text without zooming
+- ✅ Smooth scrolling and interactions
+- ✅ Quick load times (<3s on 3G)
+
+## Resources
+
+- [Google Mobile-Friendly Test](https://search.google.com/test/mobile-friendly)
+- [Material Design Touch Target Guidelines](https://material.io/design/usability/accessibility.html#layout-typography)
+- [MDN Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)
+- [Playwright Device Emulation](https://playwright.dev/docs/emulation)