fix(street-level): point a key-gated layer at Street View; button beside the hint

Review of #966: with a Google Maps key but no Mapillary token, switching
Street Level on read KEY REQUIRED / "Needs MAPILLARY_CLIENT_TOKEN" with
nothing about Street View, which stayed off (billing), so the layer looked
broken.

- While the switched-on providers lack their keys, the layer reports the
  switched-off ones that would draw with a key already set
  (keyAlternatives: Street View on Google 3D with a Google key). The
  panel's KEY REQUIRED tooltip, its coverage line and the layer row's
  tooltip then read "Needs MAPILLARY_CLIENT_TOKEN — add it in Provider
  Settings, or light STREET VIEW to use your Google Maps key"
  (keySetupWithAlternatives). Off Google 3D the plain KEY REQUIRED stays.
  Street View stays off by default.
- OPEN STREET VIEW moves beside the coverage hint: at the default panel
  width the PROVIDERS row has no room for it, so it wrapped onto a line of
  its own.
- The panel gate's corner drag names what lay under the pointer when it
  fails.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Said TurkseverandClaude Opus 5.5 committed 2026-10-09 00:05:58 +01:00
1 parent f5c4f3fda3
commit e823e15025
15 files changed
+669 -138

No files matched your search

+15
View File
@@ -38,6 +38,20 @@ export function summarizeCoverage(providers) {
};
}
/**
* Switched-off providers that would draw with a key already set, offered
* while the switched-on ones lack theirs (Street View beside a Mapillary
* layer with no token).
* @param {Array<ProviderSnapshot>} providers
* @returns {Array<{id: string, label: string, requiresKeyId: string|null}>}
*/
export function keyAlternatives(providers) {
if (!summarizeCoverage(providers).keyRequired) return [];
return providers
.filter((p) => !p.on && p.configured === true && p.keyRequired !== true)
.map(({ id, label, requiresKeyId }) => ({ id, label, requiresKeyId }));
}
/**
* The panel snapshot from core state and provider snapshots. The legend has
* one swatch per active source, then the shared selection colour.
@@ -67,6 +81,7 @@ export function composeUIState({
/** The camera is at street zoom: a ground-click provider can open here. */
groundClickReady: groundClickReady === true,
keyRequired,
keyAlternatives: keyAlternatives(providers),
keyRejected,
filter: { ...filter },
providers: providers.map((p) => ({ ...p })),