fix(swipe): localize the base-layer label in the Layer Swipe panel (#860)

apps/geolibre-desktop/src/components/layout/DesktopShell.tsx

@@ -881,6 +881,13 @@
     );
   }, [t, mapReadyGeneration]);
 
+  // Keep the Layer Swipe panel's grouped base-layer label translated. That
+  // panel lives outside React and reads labels from the controller bridge, so
+  // re-push on language change (t identity) and controller (re)init.
+  useEffect(() => {
+    mapControllerRef.current?.setBackgroundLabel(t("layers.background"));
+  }, [t, mapReadyGeneration]);
+
   const handleMapDiagnosticEvent = useCallback((event: MapDiagnosticEvent) => {
     appendDiagnostic({
       category: "map",
@@ -1153,7 +1160,7 @@
       disposed = true;
       unlisten?.();
     };
   }, [clearDropMessageLater,
     finishDrop,
     addDroppedRasters,
     addDroppedPhotos,
@@ -1293,7 +1300,7 @@
         clearDropMessageLater();
       }
     },
     [clearDropMessageLater,
     finishDrop,
     addDroppedRasters,
     addDroppedPhotos,

apps/geolibre-desktop/src/lib/swipe-style.ts

@@ -259,15 +259,14 @@ const enhanceSwipeSelects = () => {
 
 let swipeEnhanceFrame: number | null = null;
 
-// Matches the label used by the main layer manager for the grouped base layer.
+// English fallback for the grouped base layer, used until the controller
+// publishes the translated label through the layer-label bridge.
 const SWIPE_BASEMAP_LABEL = "Background";
 
 const getSwipeLayerLabel = (layerId: string): string => {
-  if (layerId === "__basemap__") return SWIPE_BASEMAP_LABEL;
-  return (
-    (window as GeoLibreLayerLabelWindow).__GEOLIBRE_LAYER_LABELS__?.[layerId] ??
-    layerId
-  );
+  const labels = (window as GeoLibreLayerLabelWindow).__GEOLIBRE_LAYER_LABELS__;
+  if (layerId === "__basemap__") return labels?.[layerId] ?? SWIPE_BASEMAP_LABEL;
+  return labels?.[layerId] ?? layerId;
 };
 
 const syncSwipeLayerLabels = () => {
@@ -286,9 +285,7 @@ const syncSwipeLayerLabels = () => {
 
       const displayName = getSwipeLayerLabel(layerId);
       const title =
-        layerId === "__basemap__"
-          ? SWIPE_BASEMAP_LABEL
-          : `${displayName} (${layerId})`;
+        layerId === "__basemap__" ? displayName : `${displayName} (${layerId})`;
       if (label.textContent !== displayName) {
         label.textContent = displayName;
       }

packages/map/src/map-controller.ts

@@ -207,6 +207,7 @@ export class MapController {
   private fullscreenControl: maplibregl.FullscreenControl | null = null;
   private compassControl: ResetBearingControl | null = null;
   private compassLabel = "Reset pitch & bearing";
+  private backgroundLabel = "Background";
   private geolocateControl: maplibregl.GeolocateControl | null = null;
   private globeControl: maplibregl.GlobeControl | null = null;
   private terrainControl: maplibregl.TerrainControl | null = null;
@@ -574,7 +575,7 @@ export class MapController {
     this.map?.remove();
     this.map = null;
     this.styleReady = false;
-    this.publishLayerDisplayNames([]);
+    this.clearLayerDisplayNames();
   }
 
   setStyle(url: string): void {
@@ -1577,11 +1578,28 @@ export class MapController {
     if (typeof window === "undefined") return;
 
     const labelWindow = window as GeoLibreLayerLabelWindow;
-    labelWindow.__GEOLIBRE_LAYER_LABELS__ = Object.fromEntries(
-      layers
+    labelWindow.__GEOLIBRE_LAYER_LABELS__ = Object.fromEntries([
+      ...layers
         .flatMap((layer) => this.getNamedStyleLayers(layer))
-        .map(({ id, name }) => [id, name]),
-    );
+        .map(({ id, name }): [string, string] => [id, name]),
+      // The Layer Swipe panel groups all basemap layers under "__basemap__";
+      // publish the translated base-layer label last so this synthetic key
+      // always wins over a layer that happens to share the id, matching the
+      // sidebar. It is published even with no overlay layers, since the panel
+      // always lists the basemap entry.
+      ["__basemap__", this.backgroundLabel],
+    ]);
+    window.dispatchEvent(new CustomEvent("geolibre-layer-labels-change"));
+  }
+
+  /**
+   * Clear all published layer display names. Used on teardown so the bridge
+   * does not retain stale labels; kept separate from publishLayerDisplayNames,
+   * which always re-publishes the basemap entry.
+   */
+  private clearLayerDisplayNames(): void {
+    if (typeof window === "undefined") return;
+    (window as GeoLibreLayerLabelWindow).__GEOLIBRE_LAYER_LABELS__ = {};
     window.dispatchEvent(new CustomEvent("geolibre-layer-labels-change"));
   }
 
@@ -1663,6 +1681,17 @@ export class MapController {
     this.compassControl?.setLabel(label);
   }
 
+  /**
+   * Update the label used for the grouped base layer (e.g. after a UI language
+   * change). It is published through the layer-display-name bridge so the
+   * Layer Swipe panel, which lives outside React, shows the same translated
+   * base-layer label as the main layer manager.
+   */
+  setBackgroundLabel(label: string): void {
+    this.backgroundLabel = label;
+    this.publishLayerDisplayNames(this.syncedLayers);
+  }
+
   private addGeolocateControl(): boolean {
     if (
       !this.map ||

tests/map-controller.test.ts

@@ -842,3 +842,65 @@ describe("MapController geolocate permission-denied recovery", () => {
       }
     }));
 });
+
+interface LayerLabelWindow {
+  __GEOLIBRE_LAYER_LABELS__?: Record<string, string>;
+  dispatchEvent: (event: unknown) => boolean;
+}
+
+// publishLayerDisplayNames is guarded on `window`, which `node --test` lacks,
+// so stub a minimal one for the duration of a test. Dispatched event types are
+// recorded so a test can assert the swipe panel's change event actually fires.
+function withStubbedLabelWindow(
+  run: (win: LayerLabelWindow, dispatched: string[]) => void,
+): void {
+  const globals = globalThis as { window?: LayerLabelWindow };
+  const original = globals.window;
+  const dispatched: string[] = [];
+  const stub: LayerLabelWindow = {
+    dispatchEvent: (event: unknown) => {
+      dispatched.push((event as { type: string }).type);
+      return true;
+    },
+  };
+  globals.window = stub;
+  try {
+    run(stub, dispatched);
+  } finally {
+    if (original === undefined) delete globals.window;
+    else globals.window = original;
+  }
+}
+
+describe("MapController base-layer label", () => {
+  it("publishes the grouped basemap label so the swipe panel can localize it", () => {
+    withStubbedLabelWindow((win, dispatched) => {
+      const controller = createMapController();
+
+      // An explicit English push publishes under the "__basemap__" key the
+      // swipe panel reads, and fires the change event the panel listens for.
+      controller.setBackgroundLabel("Background");
+      assert.equal(win.__GEOLIBRE_LAYER_LABELS__?.__basemap__, "Background");
+      assert.deepEqual(dispatched, ["geolibre-layer-labels-change"]);
+
+      // A language change re-publishes the translated label under the same key
+      // and fires the event again so the panel re-syncs.
+      controller.setBackgroundLabel("Hintergrund");
+      assert.equal(win.__GEOLIBRE_LAYER_LABELS__?.__basemap__, "Hintergrund");
+      assert.equal(dispatched.length, 2);
+    });
+  });
+
+  it("clears published labels on destroy", () => {
+    withStubbedLabelWindow((win) => {
+      const controller = createMapController();
+      controller.setBackgroundLabel("Background");
+      assert.equal(win.__GEOLIBRE_LAYER_LABELS__?.__basemap__, "Background");
+
+      // Teardown clears the bridge entirely (including the basemap entry),
+      // rather than leaving the last label behind.
+      controller.destroy();
+      assert.deepEqual(win.__GEOLIBRE_LAYER_LABELS__, {});
+    });
+  });
+});