gavindiaz/arbpulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5d84df3e25e971dfdb5cd4362ccb9e2487eaffab
arbpulse/openspec/changes/add-pwa-mobile/tasks.md
T
Mauricio Barragan 5d84df3e25 feat(pwa): installable PWA + responsive mobile dashboard 
- Add Web App Manifest + ArbPulse icons (192/512/maskable/apple-touch) under
  web/public/; no service worker (real-time honesty: never serve stale data).
- Add mobile/install metadata to index.html (theme-color, viewport-fit=cover,
  apple-mobile-web-app-*, manifest + apple-touch-icon links).
- Responsive layout: PriceMatrix stacked per-venue cards below sm, StatsBar
  reflow, ~44px touch targets in Controls/ConfigPanel, safe-area top inset.
- scripts/gen-icons.ps1 derives icon sizes from the master (no new deps).
- openspec: add-pwa-mobile change (proposal/design/specs/tasks).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-16 15:21:13 -06:00

1.8 KiB
Raw Blame History

1. Icons

  • 1.1 Finalize the ArbPulse master icon and derive icon-192.png, icon-512.png, icon-maskable-512.png (glyph within ~80% safe zone), and apple-touch-icon.png (180px)
  • 1.2 Place all icons under web/public/

2. Manifest

  • 2.1 Create web/public/manifest.webmanifest with name, short_name, start_url: "/", scope: "/", display: "standalone", theme_color/background_color #0a0e14, and icon entries (192, 512, and 512 maskable with "purpose": "maskable")

3. HTML head metadata

  • 3.1 In web/index.html, add viewport-fit=cover to the viewport meta and a theme-color meta (#0a0e14)
  • 3.2 Add <link rel="manifest">, <link rel="apple-touch-icon">, and the apple-mobile-web-app-capable / apple-mobile-web-app-status-bar-style / apple-mobile-web-app-title tags

4. Responsive layout

  • 4.1 PriceMatrix.tsx: render per-venue stacked cards (exchange + bid/ask/qty/ spread as label–value rows) below sm; keep the <table> from sm up, with no horizontal overflow on phones
  • 4.2 StatsBar.tsx: reflow stats and badges on mobile without clipping
  • 4.3 Ensure touch targets in Controls.tsx and ConfigPanel.tsx are ~44px min
  • 4.4 Sanity-check App.tsx spacing/padding on narrow viewports

5. Verify

  • 5.1 npm run typecheck and npm test pass
  • 5.2 npm run build succeeds and web/dist contains the manifest + icons
  • 5.3 DevTools device emulation: no horizontal overflow at ~375px; Application → Manifest shows no errors; confirm no service worker is registered
  • 5.4 After dev → PR → main → deploy.sh, install on a real phone from https://arbpulse.wayool.com and confirm standalone launch + live SSE data
Reference in New Issue View Git Blame Copy Permalink