feat(mobile): two calm round controls a side on the map, no extra buttons

The phone map stacked four controls on the right and one on the left, in
three different looks. Now each side has two at most, all in one frosted
style, 20px off the edge and 8px apart: the whole-trip overview and locate on
the right, the base layer and the Dawarich route on the left, with the compass
appearing only while the map is turned off north.

The map's own places filter button and sheet are gone: the places tab carries
the same filter, and the map's pins follow it. The jump-to-today button beside
the day rail is gone too, since today's chip is already marked.

Also fixes a leftover of the segmented-control change that broke the parse.

client/src/components/Map/LocationButton.tsx

@@ -69,14 +69,19 @@ export default function LocationButton({ mode, error, errorCode, onClick, bottom
       style={{
         position: 'absolute',
         bottom: bottomOffset,
-        right: 12,
+        // The map's base-layer switcher sits 20px off the left edge; this mirrors it.
+        right: 20,
         zIndex: 1000,
         width: 42,
         height: 42,
         borderRadius: '50%',
         border: 'none',
         cursor: 'pointer',
-        background: isActive ? '#3b82f6' : 'var(--bg-card, white)',
+        // Off, it wears the same frosted glass as the map's other round controls;
+        // on, the location blue says it is tracking.
+        background: isActive ? '#3b82f6' : 'var(--sidebar-bg)',
+        backdropFilter: isActive ? undefined : 'blur(20px) saturate(180%)',
+        WebkitBackdropFilter: isActive ? undefined : 'blur(20px) saturate(180%)',
         color: isActive ? 'white' : (error ? '#ef4444' : 'var(--text-muted, #6b7280)'),
         boxShadow: MAP_CONTROL_SHADOW,
         display: 'flex',

client/src/components/Map/MapCompassPill.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-MAPCOMPASS-001 to FE-COMP-MAPCOMPASS-006
+// FE-COMP-MAPCOMPASS-001 to FE-COMP-MAPCOMPASS-007
 import React from 'react'
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent, act } from '../../../tests/helpers/render'
@@ -86,3 +86,17 @@ describe('MapCompassPill', () => {
     expect(button.style.background).toBe('transparent')
   })
 })
+
+describe('MapCompassPill on the phone map', () => {
+  it('FE-COMP-MAPCOMPASS-007: appears only while the map is turned off north', () => {
+    const { map, rotateTo } = fakeCompassMap(0)
+    render(<MapCompassPill map={map} onlyWhenRotated />)
+    expect(screen.queryByRole('button', { name: 'Reset north' })).not.toBeInTheDocument()
+
+    rotateTo(30)
+    expect(screen.getByRole('button', { name: 'Reset north' })).toBeInTheDocument()
+
+    rotateTo(0)
+    expect(screen.queryByRole('button', { name: 'Reset north' })).not.toBeInTheDocument()
+  })
+})

client/src/components/Map/MapCompassPill.tsx

@@ -15,7 +15,12 @@ export interface CompassMap {
  * (GL only) and built as the SAME frosted shell (padding 4 around a 34px button)
  * so its height and transparency match the POI pill exactly.
  */
-export function MapCompassPill({ map }: { map: CompassMap }) {
+export function MapCompassPill({ map, onlyWhenRotated = false }: {
+  map: CompassMap
+  /** Shown only while the map is turned off north, the way a native map's compass
+   *  appears when it has something to undo (the phone map, where room is short). */
+  onlyWhenRotated?: boolean
+}) {
   const [bearing, setBearing] = useState(() => map.getBearing())
 
   useEffect(() => {
@@ -25,6 +30,8 @@ export function MapCompassPill({ map }: { map: CompassMap }) {
     return () => { map.off('rotate', update) }
   }, [map])
 
+  if (onlyWhenRotated && Math.abs(bearing) < 0.5) return null
+
   return (
     <div style={{
       display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto',