From 1e7f82615b1cb9df02fd301bec7902964f948251 Mon Sep 17 00:00:00 2001
From: magdev <magdev3.0@gmail.com>
Date: Sun, 29 Mar 2026 15:42:35 +0200
Subject: [PATCH] Restyle category tree to idiomatic Bootstrap list-group
 pattern (v0.1.8)

Switch from custom link classes to Bootstrap's native list-group-item-action
pattern. Replace bold primary-colored active background with subtle tertiary
background, left accent border, and semibold text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  7 ++++
 CLAUDE.md                                     | 13 +++++++-
 assets/css/wc-bootstrap.css                   | 27 +++++----------
 style.css                                     |  2 +-
 templates/global/category-tree-node.html.twig | 33 ++++++++++---------
 templates/global/category-tree.html.twig      | 24 +++++++-------
 6 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4daccc..e958251 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.1.8] - 2026-03-29
+
+### Changed
+
+- **Category tree restyled** (`category-tree.html.twig`, `category-tree-node.html.twig`): Switched from custom link classes to Bootstrap's native `list-group-item list-group-item-action` pattern with nested collapse divs for a more idiomatic Bootstrap look
+- **Subtler active state** (`wc-bootstrap.css`): Replaced bold primary-colored background with light background (`var(--bs-tertiary-bg)`), left accent border (`3px solid var(--bs-primary)`), and semibold text for a less prominent highlight
+
 ## [0.1.7] - 2026-03-29
 
 ### Added
diff --git a/CLAUDE.md b/CLAUDE.md
index eb6f706..2438c38 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -345,10 +345,21 @@ The child theme inherits from `wp-bootstrap` via WordPress `Template: wp-bootstr
 
 ## Version History
 
-Current version: **v0.1.7**
+Current version: **v0.1.8**
 
 ## Session History
 
+### 2026-03-29 — v0.1.8 Restyle Category Tree to Idiomatic Bootstrap
+
+**Scope:** Restyled the category tree sidebar to use Bootstrap's native `list-group-item-action` pattern with subtler active highlighting.
+
+**Files modified (4):**
+
+- `templates/global/category-tree.html.twig` — Switched to `list-group-item list-group-item-action` links in a `list-group-flush` container
+- `templates/global/category-tree-node.html.twig` — Replaced nested `<ul>` lists with `<div>` wrappers and Bootstrap `collapse` divs; level indentation via inline `padding-left`
+- `assets/css/wc-bootstrap.css` — Replaced primary-colored active background with subtle tertiary background, left accent border, and semibold text; removed unused `.category-tree-link` rules
+- `style.css` — Version bump 0.1.7 → 0.1.8
+
 ### 2026-03-29 — v0.1.7 Add Product Category Tree Sidebar
 
 **Scope:** Added a hierarchical product category tree sidebar to archive/shop and single product pages, with collapsible sub-levels up to 3 levels deep.
diff --git a/assets/css/wc-bootstrap.css b/assets/css/wc-bootstrap.css
index 48b5b4f..bff3595 100644
--- a/assets/css/wc-bootstrap.css
+++ b/assets/css/wc-bootstrap.css
@@ -648,6 +648,7 @@ header.sticky-top.is-stuck {
 /* ==========================================================================
    Category Tree Sidebar
    Hierarchical product category navigation with collapsible sub-levels.
+   Uses Bootstrap list-group-item-action with subtle active styling.
    ========================================================================== */
 
 .category-tree {
@@ -658,24 +659,17 @@ header.sticky-top.is-stuck {
     background-color: transparent;
 }
 
-.category-tree-link {
-    color: var(--bs-body-color);
-    transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.category-tree-link:hover {
+/* Subtle active state: fw-semibold + left accent border instead of
+   full primary background, keeping the look understated. */
+.category-tree .list-group-item.active {
     background-color: var(--bs-tertiary-bg);
     color: var(--bs-body-color);
+    border-left: 3px solid var(--bs-primary);
+    font-weight: 600;
 }
 
-.category-tree-link.active {
-    background-color: var(--bs-primary);
-    color: #fff;
-}
-
-.category-tree-link.active .badge {
-    background-color: rgba(255, 255, 255, 0.2) !important;
-    color: #fff !important;
+.category-tree .list-group-item.active small {
+    color: var(--bs-body-secondary) !important;
 }
 
 /* Rotate chevron icon when collapsed/expanded */
@@ -686,8 +680,3 @@ header.sticky-top.is-stuck {
 .category-tree-toggle[aria-expanded="false"] .bi {
     transform: rotate(-90deg);
 }
-
-/* Nested list indentation */
-.category-tree .list-group-flush .list-group-flush {
-    padding-left: 0.75rem;
-}
diff --git a/style.css b/style.css
index d9e13de..95ebc11 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,7 @@ Description: A Bootstrap 5 child theme for WP Bootstrap that overrides all WooCo
 Requires at least: 6.7
 Tested up to: 6.7
 Requires PHP: 8.3
-Version: 0.1.7
+Version: 0.1.8
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Template: wp-bootstrap
diff --git a/templates/global/category-tree-node.html.twig b/templates/global/category-tree-node.html.twig
index 8295c5c..c1e76d1 100644
--- a/templates/global/category-tree-node.html.twig
+++ b/templates/global/category-tree-node.html.twig
@@ -1,8 +1,8 @@
 {#
  # Single Category Tree Node (recursive)
  #
- # Renders one category with optional collapsible children.
- # Included recursively by category-tree.html.twig.
+ # Renders one category as a list-group-item-action link with optional
+ # collapsible nested list for children. Included recursively.
  #
  # Expected context:
  #   node  - Category node from wc_bootstrap_get_category_tree()
@@ -12,22 +12,24 @@
  # @since 0.1.7
  #}
 
-<li class="list-group-item px-0 py-1 border-0">
+{% set has_children = node.children is not empty %}
+{% set is_open = node.is_active or node.is_ancestor %}
+
+<div class="category-tree-item">
     <div class="d-flex align-items-center">
         <a href="{{ node.url }}"
-           class="category-tree-link d-block text-decoration-none py-1 px-2 rounded flex-grow-1{% if node.is_active %} active fw-semibold{% endif %}"
+           class="list-group-item list-group-item-action border-0 py-1 flex-grow-1{% if node.is_active %} active{% endif %}"
+           style="padding-left: {{ 0.5 + (level - 1) * 1 }}rem;"
            {% if node.is_active %}aria-current="page"{% endif %}>
-            <span class="ps-{{ (level - 1) * 2 }}">
-                {{ node.name }}
-            </span>
-            <span class="badge bg-body-secondary text-body-secondary rounded-pill ms-1 small">{{ node.count }}</span>
+            {{ node.name }}
+            <small class="text-body-secondary ms-1">({{ node.count }})</small>
         </a>
-        {% if node.children is not empty %}
-            <button class="btn btn-sm btn-link text-body-secondary p-0 ms-1 category-tree-toggle"
+        {% if has_children %}
+            <button class="btn btn-sm btn-link text-body-secondary p-0 px-2 category-tree-toggle"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#cat-{{ node.term_id }}"
-                    aria-expanded="{{ node.is_active or node.is_ancestor ? 'true' : 'false' }}"
+                    aria-expanded="{{ is_open ? 'true' : 'false' }}"
                     aria-controls="cat-{{ node.term_id }}"
                     aria-label="{{ __('Toggle subcategories', 'wc-bootstrap') }}">
                 <i class="bi bi-chevron-down small" aria-hidden="true"></i>
@@ -35,12 +37,11 @@
         {% endif %}
     </div>
 
-    {% if node.children is not empty %}
-        <ul class="list-group list-group-flush collapse{{ node.is_active or node.is_ancestor ? ' show' : '' }}"
-            id="cat-{{ node.term_id }}">
+    {% if has_children %}
+        <div class="collapse{{ is_open ? ' show' : '' }}" id="cat-{{ node.term_id }}">
             {% for child in node.children %}
                 {% include 'global/category-tree-node.html.twig' with { node: child, level: level + 1 } only %}
             {% endfor %}
-        </ul>
+        </div>
     {% endif %}
-</li>
+</div>
diff --git a/templates/global/category-tree.html.twig b/templates/global/category-tree.html.twig
index 773a985..e99a18a 100644
--- a/templates/global/category-tree.html.twig
+++ b/templates/global/category-tree.html.twig
@@ -1,13 +1,13 @@
 {#
  # Product Category Tree (Bootstrap 5)
  #
- # Renders a hierarchical product category navigation with collapsible
- # sub-levels, up to 3 levels deep. Uses Bootstrap 5 list-group and
- # collapse components for responsive tree navigation.
+ # Renders a hierarchical product category navigation using Bootstrap
+ # list-group with nested sub-lists and action links.
  #
  # Expected context:
- #   categories - Hierarchical array from wc_bootstrap_get_category_tree()
- #   shop_url   - URL to the main shop page
+ #   categories  - Hierarchical array from wc_bootstrap_get_category_tree()
+ #   shop_url    - URL to the main shop page
+ #   current_cat - Term ID of the currently viewed category (0 = shop page)
  #
  # @package WcBootstrap
  # @since 0.1.7
@@ -19,16 +19,14 @@
         {{ __('Categories', 'wc-bootstrap') }}
     </h3>
 
-    <ul class="list-group list-group-flush category-tree">
-        <li class="list-group-item px-0 py-1">
-            <a href="{{ shop_url }}"
-               class="category-tree-link d-block text-decoration-none py-1 px-2 rounded{% if current_cat == 0 %} active fw-semibold{% endif %}">
-                {{ __('All products', 'wc-bootstrap') }}
-            </a>
-        </li>
+    <div class="list-group list-group-flush category-tree">
+        <a href="{{ shop_url }}"
+           class="list-group-item list-group-item-action border-0 px-2 py-1{% if current_cat == 0 %} active{% endif %}">
+            {{ __('All products', 'wc-bootstrap') }}
+        </a>
         {% for cat in categories %}
             {% include 'global/category-tree-node.html.twig' with { node: cat, level: 1 } only %}
         {% endfor %}
-    </ul>
+    </div>
 </nav>
 {% endif %}