fix(sidebar): make entire section header row clickable

The toggle was only on the chevron button. Now the full row
(chevron + icon + label) triggers onToggle on click or Enter/Space.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/design-system/layout/Sidebar/Sidebar.module.css

@@ -215,6 +215,8 @@
   gap: 2px;
   width: 100%;
   padding: 8px 0 4px;
+  cursor: pointer;
+  user-select: none;
 }
 
 .treeSectionChevronBtn {

src/design-system/layout/Sidebar/Sidebar.tsx

@@ -115,15 +115,18 @@ function SidebarSection({
 
   return (
     <div className={`${styles.treeSection} ${active ? styles.treeSectionActive : ''} ${className ?? ''}`}>
-      <div className={styles.treeSectionToggle}>
-        <button
-          className={styles.treeSectionChevronBtn}
-          onClick={onToggle}
-          aria-expanded={open}
-          aria-label={open ? `Collapse ${label}` : `Expand ${label}`}
-        >
+      <div
+        className={styles.treeSectionToggle}
+        onClick={onToggle}
+        role="button"
+        tabIndex={0}
+        aria-expanded={open}
+        aria-label={open ? `Collapse ${label}` : `Expand ${label}`}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle() } }}
+      >
+        <span className={styles.treeSectionChevronBtn} aria-hidden="true">
           {open ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-        </button>
+        </span>
         {icon && <span className={styles.sectionIcon}>{icon}</span>}
         <span className={styles.treeSectionLabel}>{label}</span>
       </div>