feat(frontend): auto-reconnect offline page on network restore

[Onesimus-dev]

feat(frontend): auto-reconnect offline page on network restore

Closes #278
closes #275
closes #268
closes #269

Problem

The offline fallback page (app/offline/page.tsx) was a static Server
Component with no awareness of network state changes. When a user's
connection was restored, they had to manually reload the page to get
back to the app — a poor UX for a PWA where seamless recovery is
expected.

Solution

app/offline/page.tsx

Converted from a static Server Component to a "use client" Client
Component so it can register browser event listeners.

Key behaviours:

• On mount: checks window.navigator.onLine — if already online (e.g.
  the browser served a cached copy after reconnecting), redirects
  immediately to / via router.replace('/') without waiting for the event.
• On 'online' event: sets reconnecting state to true (shows spinner +
  "Reconnecting…" message), then calls router.replace('/') to send the
  user home automatically — no manual reload needed.
• Cleanup: the event listener is removed in the useEffect cleanup
  function to prevent memory leaks and stale closures.
• Offline state: the original UI (📡 icon, descriptive message, manual
  Retry link) is preserved as a fallback while the network is still down.

app/offline/layout.tsx (new)

The Next.js App Router does not allow a metadata export in a Client
Component. A minimal sibling layout.tsx is added to own the route-level
metadata (title: "You're offline") so the page title is still set
correctly without making the page a Server Component.

e2e/offline.spec.ts (new)

Three Playwright tests using context.setOffline(true/false) to toggle
the browser context network state. This fires the real window 'online'
and 'offline' events — the same mechanism the page listens to — making
the test faithful to production behaviour without any mocking.

Tests:

1. redirects to / automatically when network is restored

   • Goes offline, navigates to /offline, restores network, asserts
     router navigates to / without a manual reload.

2. shows Reconnecting spinner with accessible label

   • Asserts spinner is absent while offline, appears on network
     restore, and carries aria-label="Reconnecting…" for screen readers.

3. Retry link is present while offline

   • Asserts the manual Retry link is always visible as a
     fallback for users who restore connectivity before the event fires
     or who have JS disabled.

Files changed

M frontend/app/offline/page.tsx
A frontend/app/offline/layout.tsx
A frontend/e2e/offline.spec.ts

[drips-wave]

@Onesimus-dev 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