From 80dbae8b69f303ead1df6f2166ca35eefd839bb2 Mon Sep 17 00:00:00 2001
From: giswqs <giswqs@gmail.com>
Date: Sat, 15 Aug 2026 15:16:21 -0400
Subject: [PATCH 1/2] 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.
---
 .../src/components/panels/LayerPanel.tsx       | 18 +++++++++++++++++-
 docs/user-guide/layers.md                      |  1 +
 e2e/layer-panel.spec.ts                        | 17 +++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/apps/geolibre-desktop/src/components/panels/LayerPanel.tsx b/apps/geolibre-desktop/src/components/panels/LayerPanel.tsx
index 4e25c1f9a6..c724bc1771 100644
--- a/apps/geolibre-desktop/src/components/panels/LayerPanel.tsx
+++ b/apps/geolibre-desktop/src/components/panels/LayerPanel.tsx
@@ -3389,7 +3389,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 +3449,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
diff --git a/docs/user-guide/layers.md b/docs/user-guide/layers.md
index 3e9995227e..043ff0a962 100644
--- a/docs/user-guide/layers.md
+++ b/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**: 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.
diff --git a/e2e/layer-panel.spec.ts b/e2e/layer-panel.spec.ts
index 82de28afa9..66c7f077cb 100644
--- a/e2e/layer-panel.spec.ts
+++ b/e2e/layer-panel.spec.ts
@@ -108,3 +108,20 @@ 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();
+
+  const stylePanel = page.getByRole("complementary", { name: "Layer style" });
+  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();
+});

From efe844e716989fd4fd7cb39988c4144b3df8f3ae Mon Sep 17 00:00:00 2001
From: giswqs <giswqs@gmail.com>
Date: Sat, 15 Aug 2026 15:26:54 -0400
Subject: [PATCH 2/2] 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.
---
 .../src/components/panels/LayerPanel.tsx      |  4 +++
 docs/user-guide/layers.md                     |  2 +-
 e2e/layer-panel.spec.ts                       | 28 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/apps/geolibre-desktop/src/components/panels/LayerPanel.tsx b/apps/geolibre-desktop/src/components/panels/LayerPanel.tsx
index c724bc1771..934fd93566 100644
--- a/apps/geolibre-desktop/src/components/panels/LayerPanel.tsx
+++ b/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]));
diff --git a/docs/user-guide/layers.md b/docs/user-guide/layers.md
index 043ff0a962..10228a5b36 100644
--- a/docs/user-guide/layers.md
+++ b/docs/user-guide/layers.md
@@ -14,7 +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**: use the palette button on the layer card to select the layer and open its styling controls.
+- **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.
diff --git a/e2e/layer-panel.spec.ts b/e2e/layer-panel.spec.ts
index 66c7f077cb..497f957c03 100644
--- a/e2e/layer-panel.spec.ts
+++ b/e2e/layer-panel.spec.ts
@@ -117,7 +117,9 @@ test("opens the selected layer in the Style panel from its card", async ({ page
   await dropGeoJson(page, "second", FIXTURE_TEXT);
   await expect(layerRow(page, "second")).toBeVisible();
 
-  const stylePanel = page.getByRole("complementary", { name: "Layer style" });
+  // 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();
@@ -125,3 +127,27 @@ test("opens the selected layer in the Style panel from its card", async ({ page
   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();
+});