feat: PWA & mobile UI/UX improvements — 12 enhancements across 3 tiers

[devin-ai-integration]

Summary

Platform PWA and mobile UI/UX was rated 4/10 — functional on desktop but missing critical mobile patterns. This PR adds 12 improvements across 3 tiers that bring the mobile experience up to parity with native apps.

Tier 1: Critical Mobile Experience

• MobileBottomNav — Persistent 5-tab bar (Home, Policies, Claims, Payments, More) replaces sidebar drawer on mobile. "More" opens the full sidebar. Includes aria-current and active state pill animation.
• PWAInstallPrompt — Smart banner triggered by beforeinstallprompt event with 7-day dismiss cooldown via localStorage. Shows 3s after event fires to avoid interrupting initial load.
• OfflineIndicator — Fixed banner on navigator.onLine change. Red bar when offline, green "Back online" toast that auto-dismisses after 3s.
• Responsive layout fixes — Dashboard grid: grid-cols-2 on mobile (was single column), card padding p-3 sm:p-6, heading sizes text-2xl sm:text-3xl lg:text-4xl. Main content area: p-3 sm:p-4 md:p-6.

Tier 2: Polish

• PullToRefresh — Touch gesture handler with 80px threshold, 0.5x dampening, spring animation. navigator.vibrate(15) on trigger.
• PageSkeleton — Shimmer-based skeletons: CardSkeleton, TableSkeleton, DashboardSkeleton, ListSkeleton, FormSkeleton. Uses animate-pulse on bg-muted divs.
• Page transitions — CSS @keyframes page-enter on <main>: opacity: 0.85 → 1, translateY(4px) → 0 over 200ms.
• Dark mode toggle — ThemeToggle component in header (Moon/Sun icons). Enabled by adding switchable prop to existing <ThemeProvider>. Preference persisted to localStorage.

Tier 3: Premium

• 44px touch targets — @media (max-width: 767px) rule sets min-height: 44px; min-width: 44px on all buttons/links/inputs (Apple HIG).
• Header breadcrumbs — Desktop shows {group} > {page} via activeMenuGroup lookup. Mobile shows page name only.
• FloatingActionButton — Fixed position above bottom nav. Expands to 3 quick actions (File Claim, Get Quote, Emergency SOS) with staggered slide-in animation.
• Haptic feedback — navigator.vibrate(10) on bottom nav, FAB, and pull-to-refresh interactions.

PWA manifest additions

• 2 new shortcuts (Emergency SOS, Payments)
• share_target for receiving shared content into Claims
• launch_handler.client_mode: "navigate-existing" for single-instance behavior
• viewport-fit: cover for notched devices

CSS additions

• -webkit-tap-highlight-color: transparent for native feel
• overscroll-behavior-y: contain to prevent pull-to-refresh browser default
• Hidden scrollbars on mobile, styled thin scrollbars on desktop
• Safe area inset utilities (.safe-area-top, .safe-area-bottom)

Build verified — Vite build passes, all 7 features confirmed in compiled bundle via grep.

Link to Devin session: https://app.devin.ai/sessions/0475192a778b45cea30202f85ad52b63

[devin-ai-integration]

Original prompt from Patrick

https://drive.google.com/file/d/17FqTB6666Z-CYrffikjqdPh1-qWXxQXf/view?usp=sharing
Extract the entire archive, analyze and search for orphan, partially and generic scaffolded features across the platform - fully implement them end to end -generic CRUD-only patterns , modules with no domain logic, disconnected features, and incomplete implementations.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[devin-ai-integration]

Test Results — PR #54: PWA & Mobile UI/UX Improvements

12/12 tests passed — all features correctly compiled into the production bundle.

Escalation

Visual rendering was not testable — the app requires a tRPC backend to render (React crashes with TRPCClientError when API calls return Vite's HTML fallback instead of JSON). Testing was done via Vite build + compiled bundle inspection, which proves code exists and compiles correctly but does NOT prove runtime visual behavior.

Test Results (12/12 PASSED)

#	Test	Result	Key Evidence
1	Vite build — all 12 features compile	PASSED	Exit 0, 1915 modules, 5.49s
2	MobileBottomNav — 5 tabs	PASSED	Home/Policies/Claims/Payments/More labels, 4 nav paths, __more__, 768px breakpoint
3	FloatingActionButton — 3 actions	PASSED	File Claim/Get Quote/Emergency, bottom-[88px], navigator.vibrate
4	ThemeToggle — dark mode	PASSED	"Switch to" aria-label, switchable prop, Moon/Sun icons, App.tsx:719
5	Responsive Dashboard — grid	PASSED	grid-cols-2 + lg:grid-cols-4, responsive text/padding
6	Header Breadcrumbs — desktop only	PASSED	activeMenuGroup, !isMobile && activeMenuGroup guard, ChevronRight
7	Touch targets 44px — CSS	PASSED	@media (max-width: 767px) + min-height: 44px in source & built CSS
8	Page transitions — animation	PASSED	@keyframes page-enter, opacity 0.85→1, translateY 4px→0
9	PWA manifest — enhancements	PASSED	5 shortcuts, share_target, launch_handler: navigate-existing
10	Offline/PullToRefresh/Install	PASSED	"You are offline"/"Back online"/"Install App"/"beforeinstallprompt" in bundle
11	viewport-fit=cover	PASSED	Present in index.html viewport meta tag
12	Safe area CSS	PASSED	.safe-area-top/.safe-area-bottom, env(safe-area-inset-*), tap-highlight, overscroll-behavior

What Was NOT Tested (Missing Backend)

• Runtime visual rendering at mobile/desktop viewports
• Click interactions (bottom nav switching, FAB expand/collapse, dark mode toggle)
• localStorage persistence (dark mode, favorites, PWA install cooldown)
• Offline/online indicator transitions
• Pull-to-refresh gesture behavior
• Page transition animation smoothness
• Service worker registration and caching
• PWA install prompt flow

Methodology

• Vite build with DEMO_MODE=true — proves all imports resolve and TypeScript compiles
• Bundle grep — proves specific component strings exist in minified JS/CSS (tree-shaking removes unused code)
• Source code assertions — proves component logic wired with correct breakpoints, conditional rendering, navigation paths
• CSS inspection — proves mobile-specific styles exist in source and compiled output
• Manifest inspection — proves PWA configuration entries exist with correct values

Devin session