feat(layers): add Style panel button to layer cards (#1944)

* feat(layers): add Style panel button to layer cards

Opening a layer's styling controls previously meant finding the entry
inside the layer's overflow menu. A palette button on the card itself
selects the layer and opens the Style panel in one click, and the action
row now wraps so the extra button does not overflow on narrow panels.

* Address review feedback

- Return early from the layer card key handler when the event came from a
  nested control. The card is a role="button" wrapper that called
  preventDefault on Enter, which cancelled the native activation of every
  action button inside it, the new palette button included.
- Add an e2e test that opens the Style panel from the card by Enter and by
  Space. It fails without the guard above.
- Match the Style panel aside by exact accessible name, so the collapsed
  rail ("Layer style (collapsed)") cannot satisfy the default substring
  match and mask the initial toHaveCount(0) assertion.
- Note in the user guide that the palette button appears only when the
  built-in Style panel is enabled, since onOpenStylePanel is optional.

Author: giswqs

apps/geolibre-desktop/src/components/panels/LayerPanel.tsx

@@ -3210,6 +3210,10 @@ export function LayerPanel({
                     aria-pressed={selectedLayerIds.has(layer.id)}
                     onClick={(e) => handleLayerSelection(e, layer.id)}
                     onKeyDown={(e) => {
+                      // Only act on the card itself: preventDefault here would
+                      // otherwise cancel the Enter activation of the action
+                      // buttons nested inside it.
+                      if (e.target !== e.currentTarget) return;
                       if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         setSelectedLayerIds(new Set([layer.id]));
@@ -3389,7 +3393,7 @@ export function LayerPanel({
                         onChange={(v) => setLayerOpacity(layer.id, v)}
                       />
                     )}
-                    <div className="mt-2 flex gap-1">
+                    <div className="mt-2 flex flex-wrap gap-1">
                       <Button
                         variant="ghost"
                         size="icon"
@@ -3449,6 +3453,22 @@ export function LayerPanel({
                       >
                         <MousePointerClick className="h-3.5 w-3.5" />
                       </Button>
+                      {onOpenStylePanel && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7"
+                          title={t("layers.openStylePanel")}
+                          aria-label={t("layers.openStylePanel")}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            selectLayer(layer.id);
+                            onOpenStylePanel();
+                          }}
+                        >
+                          <Palette className="h-3.5 w-3.5" />
+                        </Button>
+                      )}
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                           <Button

docs/user-guide/layers.md

@@ -14,6 +14,7 @@ The **Layers panel** on the left lists every layer in the project, from the topm
 
 Each layer exposes a set of actions:
 
+- **Open Style panel**: when the built-in Style panel is enabled, use the palette button on the layer card to select the layer and open its styling controls.
 - **Zoom to layer**: fit the map to the layer's extent (for layers whose bounds are known).
 - **Identify features**: click features on the map to see their attributes in a popup. On a raster layer this reads the pixel value instead, and on a multiband raster it also builds a [spectral profile](styling.md#spectral-profile).
 - **Labels**: toggle text labels for vector layers that have a label field.

e2e/layer-panel.spec.ts

@@ -108,3 +108,46 @@ test("long layer names truncate without widening the layer panel", async ({ page
     .poll(() => name.evaluate((element) => element.scrollWidth > element.clientWidth))
     .toBe(true);
 });
+
+test("opens the selected layer in the Style panel from its card", async ({ page }) => {
+  await page.setViewportSize({ width: 768, height: 720 });
+  await waitForMap(page);
+  await dropGeoJson(page, "first", FIXTURE_TEXT);
+  await expect(layerRow(page, "first")).toBeVisible();
+  await dropGeoJson(page, "second", FIXTURE_TEXT);
+  await expect(layerRow(page, "second")).toBeVisible();
+
+  // Exact, so the collapsed rail ("Layer style (collapsed)") cannot satisfy the
+  // default substring match.
+  const stylePanel = page.getByRole("complementary", { name: "Layer style", exact: true });
+  await expect(stylePanel).toHaveCount(0);
+
+  await layerRow(page, "first").getByRole("button", { name: "Open Style panel" }).click();
+
+  await expect(stylePanel).toBeVisible();
+  await expect(stylePanel.getByText("Style - first", { exact: true })).toBeVisible();
+});
+
+test("opens the Style panel from the layer card by keyboard", async ({ page }) => {
+  await page.setViewportSize({ width: 768, height: 720 });
+  await waitForMap(page);
+  await dropGeoJson(page, "first", FIXTURE_TEXT);
+  await expect(layerRow(page, "first")).toBeVisible();
+  await dropGeoJson(page, "second", FIXTURE_TEXT);
+  await expect(layerRow(page, "second")).toBeVisible();
+
+  const stylePanel = page.getByRole("complementary", { name: "Layer style", exact: true });
+  const styleButton = (name: string) =>
+    layerRow(page, name).getByRole("button", { name: "Open Style panel" });
+
+  // The card is a role="button" wrapper; its key handler must not swallow the
+  // activation of the action buttons nested inside it.
+  await styleButton("first").focus();
+  await page.keyboard.press("Enter");
+  await expect(stylePanel).toBeVisible();
+  await expect(stylePanel.getByText("Style - first", { exact: true })).toBeVisible();
+
+  await styleButton("second").focus();
+  await page.keyboard.press("Space");
+  await expect(stylePanel.getByText("Style - second", { exact: true })).toBeVisible();
+});