From c401516b2d71c61cd7c0f23fb71aa70968b5da9f Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 2 Apr 2026 17:59:25 +0200
Subject: [PATCH] fix(sidebar): add icon to expanded section, fix icon-rail
 callbacks, fix active border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Render icon between chevron and label in expanded SidebarSection
- Remove !open guard from icon-rail click — always fire both callbacks
- Add border-left: 3px solid transparent to .treeSection so
  .treeSectionActive border-left-color takes effect
- Remove duplicate .treeSectionLabel CSS declaration

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/design-system/layout/Sidebar/Sidebar.module.css | 10 +---------
 src/design-system/layout/Sidebar/Sidebar.tsx        |  5 +++--
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/design-system/layout/Sidebar/Sidebar.module.css b/src/design-system/layout/Sidebar/Sidebar.module.css
index 66f12f3..12c5bef 100644
--- a/src/design-system/layout/Sidebar/Sidebar.module.css
+++ b/src/design-system/layout/Sidebar/Sidebar.module.css
@@ -205,15 +205,7 @@
   padding: 0 6px 6px;
   margin-bottom: 2px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-}
-
-.treeSectionLabel {
-  padding: 10px 12px 4px;
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: var(--sidebar-muted);
+  border-left: 3px solid transparent;
 }
 
 /* Collapsible section toggle */
diff --git a/src/design-system/layout/Sidebar/Sidebar.tsx b/src/design-system/layout/Sidebar/Sidebar.tsx
index ee38234..e9e1089 100644
--- a/src/design-system/layout/Sidebar/Sidebar.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.tsx
@@ -97,14 +97,14 @@ function SidebarSection({
         onClick={() => {
           // Expand sidebar and open the section
           onCollapseToggle?.()
-          if (!open) onToggle()
+          onToggle()
         }}
         role="button"
         tabIndex={0}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
             onCollapseToggle?.()
-            if (!open) onToggle()
+            onToggle()
           }
         }}
       >
@@ -124,6 +124,7 @@ function SidebarSection({
         >
           {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
         </button>
+        {icon && <span className={styles.sectionIcon}>{icon}</span>}
         <span className={styles.treeSectionLabel}>{label}</span>
       </div>
       {open && children}