feat(map): toggle the trip map between default and satellite tiles

Add a corner button on the Leaflet trip map that switches the base layer
between the default street tiles and a tokenless satellite view (ESRI
World Imagery). The choice is a per-user setting (map_base_layer) that
persists and applies instantly, including offline. GL-renderer satellite
styles are unchanged.

Closes #993

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

@@ -0,0 +1,44 @@
+// FE-COMP-MAPLAYER-001 to FE-COMP-MAPLAYER-005
+import React from 'react'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '../../../tests/helpers/render'
+import { MapLayerSwitcher } from './MapLayerSwitcher'
+
+describe('MapLayerSwitcher', () => {
+  it('FE-COMP-MAPLAYER-001: on the default layer, offers the switch to satellite', () => {
+    render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
+    const button = screen.getByRole('button', { name: 'Switch to satellite view' })
+    expect(button.getAttribute('aria-pressed')).toBe('false')
+  })
+
+  it('FE-COMP-MAPLAYER-002: on the satellite layer, offers the switch back to the map', () => {
+    render(<MapLayerSwitcher active="satellite" onToggle={() => {}} />)
+    const button = screen.getByRole('button', { name: 'Switch to map view' })
+    expect(button.getAttribute('aria-pressed')).toBe('true')
+  })
+
+  it('FE-COMP-MAPLAYER-003: clicking fires the toggle', () => {
+    const onToggle = vi.fn()
+    render(<MapLayerSwitcher active="default" onToggle={onToggle} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to satellite view' }))
+    expect(onToggle).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-COMP-MAPLAYER-004: swaps the icon with the active layer', () => {
+    const { rerender } = render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
+    // Destination icon: on the map you can reach satellite, and vice-versa.
+    const iconOnDefault = screen.getByRole('button').querySelector('svg')?.getAttribute('class')
+    rerender(<MapLayerSwitcher active="satellite" onToggle={() => {}} />)
+    const iconOnSatellite = screen.getByRole('button').querySelector('svg')?.getAttribute('class')
+    expect(iconOnDefault).not.toBe(iconOnSatellite)
+  })
+
+  it('FE-COMP-MAPLAYER-005: highlights the button on hover and clears it again', () => {
+    render(<MapLayerSwitcher active="default" onToggle={() => {}} />)
+    const button = screen.getByRole('button')
+    fireEvent.mouseEnter(button)
+    expect(button.style.background).toBe('var(--bg-hover)')
+    fireEvent.mouseLeave(button)
+    expect(button.style.background).toBe('transparent')
+  })
+})