feat: Implement issues #819, #820, #821, #822

[BlazeTekk]

Summary

This PR addresses four UX, responsive design, and PWA update issues across the streamFi application:

1. app/layout.tsx: configure viewport meta tag for mobile notch and safe-area-inset padding #819: Configure viewport meta tag for mobile notch and safe-area-inset padding in app/layout.tsx.
2. components/profile/CashflowChart.tsx: support toggling between cumulative volume and daily bar chart #820: Support toggling between cumulative volume area chart and daily discrete stacked bars in components/profile/CashflowChart.tsx.
3. app/create/CreateStream.module.css: add responsive mobile layout styles for small screen widths (<375px) #821: Add responsive mobile layout styles for small screen widths (<375px / <= 480px) in app/create/CreateStream.module.css.
4. components/ServiceWorkerRegistrar.tsx: prompt toast notification when a new app version is available #822: Prompt toast notification when a new app version is available with an 'Update App' reload button in components/ServiceWorkerRegistrar.tsx.

Changes

#819 — Mobile Notch & Safe Area Inset (app/layout.tsx)

• Exported Next.js App Router viewport: Viewport configuration specifying viewportFit: 'cover'.
• Added <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> in <head>.
• Applied paddingTop: 'env(safe-area-inset-top)' style and pt-[env(safe-area-inset-top)] Tailwind utility on <body> to prevent top navigation clipping behind device notches.
• Added unit tests in app/__tests__/layout.test.tsx.

#820 — Cashflow Chart Area vs Daily Bars View (components/profile/CashflowChart.tsx)

• Introduced view toggle buttons (Area vs Daily Bars) with active states and aria-pressed attributes.
• Implemented cumulative volume SVG area chart rendering both cumulative income and total volume trajectories.
• Preserved the daily discrete stacked bar chart view for analyzing day-to-day transaction spikes.
• Added unit tests in components/profile/__tests__/CashflowChart.test.tsx.

#821 — Responsive Mobile Layout for Stream Creation (app/create/CreateStream.module.css)

• Added @media (max-width: 480px) styles stacking input columns and flex rows vertically.
• Configured form inputs, select elements, and buttons to take width: 100% on compact displays (<375px).
• Added unit tests in app/create/__tests__/CreateStream.module.test.ts.

#822 — Service Worker Update Toast Notification (components/ServiceWorkerRegistrar.tsx)

• Added promptUpdateToast displaying an 'Update Available' toast with an 'Update App' button.
• Listened to service worker registration.waiting and updatefound / installing.statechange events when an active controller is present.
• Dispatches SKIP_WAITING and triggers page reload when the user confirms the update.
• Updated lib/useServiceWorker.ts to prevent silent auto-activation in background.
• Added unit tests in components/ServiceWorkerRegistrar.test.tsx.

Closes

Closes #819
Closes #820
Closes #821
Closes #822

[drips-wave]

@BlazeTekk Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits