feat(frontend): add relay type color pickers and keep settings across reloads

[JuliusHenke]

Closes #71

Summary

• Relay type color pickers: each row in the "Show relay types" panel (Exit, Guard, Other) gets a small round swatch that opens the browser's native color picker (<input type="color">), so no new dependency is needed. A "Reset colors" button appears once a color differs from the defaults.
  • The colors are a new relayTypeColors setting. It replaces the hard-coded Colors in config.ts and keeps the same defaults.
  • Map markers and every relay type icon (settings, stats, relay list, relay details header) use the chosen colors through a new RelayTypeIcon component.
  • The setting is only updated by the native change event, which fires once a color is picked. Updating on every input event while dragging would redraw all relays and country layers each time.
• Settings survive page reloads: settings are saved to localStorage (tormap.settings.v1) whenever they change and restored on load.
  • Stored values are validated against the defaults. Missing, invalid or unknown entries fall back to the defaults, and unavailable storage (e.g. private mode) is ignored.
  • The selected family is never stored, because family IDs differ between dates. The date isn't part of the settings and isn't stored either. The selected country is stored.
• Restore defaults and map search (follow-up to feat(frontend): add button to restore default settings #578 and feat(frontend): show relay search results on the map #580):
  • "Restore default settings" also removes a relay search shown on the map, and the button is offered while such a search is active.
  • On small screens the settings dialog closes once search results are shown on the map, so the map is directly visible.
  • settingsEqual compares nested records as unknown, since relayTypeColors holds strings.

Tests

• yarn build, yarn lint and tsc pass.
• yarn test:run: 18 files, 214 tests pass. New tests:
  • AppSettings.test.tsx: picking and resetting colors, and restoring the defaults clears the map search.
  • OverlaySmall.test.tsx: the mobile settings close when search results are shown on the map. This test fails without the fix.
  • settings-storage.unit.test.ts: parsing and validating stored settings.
  • settings-context.test.tsx: restoring and saving settings, the selected family isn't saved, and a changed color counts as non-default.
  • The marker tests in layer-construction.test.ts now use custom colors.
• Checked in the running dev app that a picked color and the heatmap toggle survive a reload.
• Locally, 2 of about 20 full test runs reported one unhandled TypeError: Cannot read properties of undefined (reading 'includes') while all tests passed. It couldn't be reproduced with a stack trace, and CI was green.
• No dependencies were added or changed, so no dependency vetting or SCA scan was run.

🤖 Generated with Claude Code

https://claude.ai/code/session_017g53GDRosq9GXX9AXEsw1a

[github-actions]

Visit the preview URL for this PR (updated for commit ceb0e17):

https://tormap-36f44--pr581-claude-relay-type-co-dusykr8p.web.app

_{(expires Mon, 09 Nov 2026 23:47:25 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 0c1f71965de18e60b0e686b0d0356977fec090dc}