fix(sidebar): add icon to expanded section, fix icon-rail callbacks, fix active border

- 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>
This commit is contained in:
hsiegeln
2026-04-02 17:59:25 +02:00
parent d2c2b92183
commit c401516b2d
2 changed files with 4 additions and 11 deletions

View File

@@ -205,15 +205,7 @@
padding: 0 6px 6px; padding: 0 6px 6px;
margin-bottom: 2px; margin-bottom: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
} border-left: 3px solid transparent;
.treeSectionLabel {
padding: 10px 12px 4px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--sidebar-muted);
} }
/* Collapsible section toggle */ /* Collapsible section toggle */

View File

@@ -97,14 +97,14 @@ function SidebarSection({
onClick={() => { onClick={() => {
// Expand sidebar and open the section // Expand sidebar and open the section
onCollapseToggle?.() onCollapseToggle?.()
if (!open) onToggle() onToggle()
}} }}
role="button" role="button"
tabIndex={0} tabIndex={0}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') { if (e.key === 'Enter' || e.key === ' ') {
onCollapseToggle?.() onCollapseToggle?.()
if (!open) onToggle() onToggle()
} }
}} }}
> >
@@ -124,6 +124,7 @@ function SidebarSection({
> >
{open ? <ChevronDown size={12} /> : <ChevronRight size={12} />} {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
</button> </button>
{icon && <span className={styles.sectionIcon}>{icon}</span>}
<span className={styles.treeSectionLabel}>{label}</span> <span className={styles.treeSectionLabel}>{label}</span>
</div> </div>
{open && children} {open && children}