feat(citizen-pwa): 3-step report wizard wiring + GPS fixes + auto-fill

apps/citizen-pwa/src/App.routes.test.tsx

@@ -6,7 +6,7 @@ vi.mock('./components/MapTab/index.js', () => ({
   MapTab: () => <div>Map tab</div>,
 }))
 
-vi.mock('./components/SubmitReportForm.js', () => ({
+vi.mock('./components/SubmitReportForm/index.js', () => ({
   SubmitReportForm: () => <div>Report form</div>,
 }))
 
@@ -41,10 +41,11 @@ describe('App routes', () => {
     expect(screen.getByRole('button', { name: /map/i })).toHaveAttribute('aria-current', 'page')
   })
 
-  it('shows the report shell at /report', async () => {
+  it('shows the report form at /report', async () => {
     await renderAppAt('/report')
     expect(screen.getByText('Report form')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /report/i })).toHaveAttribute('aria-current', 'page')
+    expect(screen.queryByRole('banner')).not.toBeInTheDocument()
+    expect(screen.queryByRole('navigation', { name: /main navigation/i })).not.toBeInTheDocument()
   })
 
   it('navigates between shell tabs', async () => {

apps/citizen-pwa/src/components/CitizenShell.tsx

@@ -1,13 +1,14 @@
 import type { ReactNode } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { Map, Rss, AlertTriangle, Bell, User } from 'lucide-react'
 import '../styles/design-tokens.css'
 
 const TABS = [
-  { label: 'Map', path: '/' },
-  { label: 'Feed', path: '/feed' },
-  { label: 'Report', path: '/report' },
-  { label: 'Alerts', path: '/alerts' },
-  { label: 'Profile', path: '/profile' },
+  { label: 'Map', path: '/', Icon: Map },
+  { label: 'Feed', path: '/feed', Icon: Rss },
+  { label: 'Report', path: '/report', Icon: AlertTriangle },
+  { label: 'Alerts', path: '/alerts', Icon: Bell },
+  { label: 'Profile', path: '/profile', Icon: User },
 ] as const
 
 export function CitizenShell({ children }: { children: ReactNode }) {
@@ -80,17 +81,13 @@ export function CitizenShell({ children }: { children: ReactNode }) {
               cursor: 'pointer',
             }}
           >
-            <span style={{ fontSize: '1.25rem', lineHeight: 1 }}>
-              {tab.label === 'Report'
-                ? '🚨'
-                : tab.label === 'Alerts'
-                  ? '⚠️'
-                  : tab.label === 'Profile'
-                    ? '👤'
-                    : tab.label === 'Feed'
-                      ? '📋'
-                      : '🗺'}
-            </span>
+            <tab.Icon
+              size={20}
+              strokeWidth={pathname === tab.path ? 2.5 : 2}
+              color={
+                pathname === tab.path ? 'var(--color-primary)' : 'var(--color-on-surface-variant)'
+              }
+            />
             {tab.label}
           </button>
         ))}