From 8cbabf8f8299382ef9bd6acab7de8730354cfe27 Mon Sep 17 00:00:00 2001
From: Tomek Zebrowski <zebrowski.tomek@gmail.com>
Date: Sat, 15 Aug 2026 21:40:15 +0200
Subject: [PATCH] fix: make sidebar Signals section header collapsible

The "Signals" title lives inside SignalListPanel (shared with the
right-edge flyout), so it was never wired to Sidebar's
toggleSection('signals') and clicking it did nothing. Even once wired,
the generic .control-group collapse CSS would have hidden the whole
<app-signal-list-panel> element, title included, with no way back.
SignalListPanel now takes a collapsed input and emits titleClick so
Sidebar can drive the toggle while the panel hides its own body.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/app/analyzer/sidebar/sidebar.html         |  6 +++++-
 .../signal-list-panel/signal-list-panel.html  | 20 ++++++++++++++++---
 .../signal-list-panel/signal-list-panel.ts    | 14 ++++++++++++-
 src/styles.css                                |  3 ++-
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/app/analyzer/sidebar/sidebar.html b/src/app/analyzer/sidebar/sidebar.html
index 74d2541..370bea4 100644
--- a/src/app/analyzer/sidebar/sidebar.html
+++ b/src/app/analyzer/sidebar/sidebar.html
@@ -40,7 +40,11 @@ <h3 (click)="toggleSection('anomalyScanner')">Anomaly Scanner</h3>
     class="control-group flex-grow gray-box"
     [class.collapsed]="isSectionCollapsed('signals')"
   >
-    <app-signal-list-panel idPrefix="chk-left"></app-signal-list-panel>
+    <app-signal-list-panel
+      idPrefix="chk-left"
+      [collapsed]="isSectionCollapsed('signals')"
+      (titleClick)="toggleSection('signals')"
+    ></app-signal-list-panel>
   </div>
 
   <div
diff --git a/src/app/analyzer/signal-list-panel/signal-list-panel.html b/src/app/analyzer/signal-list-panel/signal-list-panel.html
index 4dd860a..42e180b 100644
--- a/src/app/analyzer/signal-list-panel/signal-list-panel.html
+++ b/src/app/analyzer/signal-list-panel/signal-list-panel.html
@@ -1,10 +1,23 @@
-<div class="group-header-row">
+<div class="group-header-row" (click)="titleClick.emit()">
   <h3>Signals</h3>
+  @if (!collapsed()) {
   <div class="button-row-sw">
-    <button class="btn btn-sm" (click)="toggleAllSignals(true)">All</button>
-    <button class="btn btn-sm" (click)="toggleAllSignals(false)">None</button>
+    <button
+      class="btn btn-sm"
+      (click)="toggleAllSignals(true); $event.stopPropagation()"
+    >
+      All
+    </button>
+    <button
+      class="btn btn-sm"
+      (click)="toggleAllSignals(false); $event.stopPropagation()"
+    >
+      None
+    </button>
   </div>
+  }
 </div>
+@if (!collapsed()) {
 <p class="section-description">
   Search and select signals to display on the chart.
 </p>
@@ -169,3 +182,4 @@ <h3>Signals</h3>
   </div>
   } }
 </div>
+}
diff --git a/src/app/analyzer/signal-list-panel/signal-list-panel.ts b/src/app/analyzer/signal-list-panel/signal-list-panel.ts
index ed00d1e..e1ce5d2 100644
--- a/src/app/analyzer/signal-list-panel/signal-list-panel.ts
+++ b/src/app/analyzer/signal-list-panel/signal-list-panel.ts
@@ -1,4 +1,4 @@
-import { Component, inject, input, signal } from '@angular/core';
+import { Component, inject, input, output, signal } from '@angular/core';
 import { AppStateService } from '../../core/app-state.service';
 import { LoadedFile } from '../../core/models';
 import { PreferencesService } from '../../core/preferences.service';
@@ -34,6 +34,18 @@ interface CategoryGroup {
 export class SignalListPanel {
   readonly idPrefix = input('chk');
 
+  /**
+   * Whether the caller's wrapping section is collapsed. This component owns its own "Signals"
+   * title (shared with SignalsEdgePanel, which never collapses it), so Sidebar can't just hide
+   * this whole element the way it does for its other sections -- instead it passes the collapsed
+   * state in and this component hides its own body while keeping the header (and the way back
+   * to expand it) visible.
+   */
+  readonly collapsed = input(false);
+
+  /** Emitted when the title row is clicked; Sidebar wires this to its own toggleSection('signals'). */
+  readonly titleClick = output<void>();
+
   protected readonly appState = inject(AppStateService);
   protected readonly preferences = inject(PreferencesService);
   private readonly palette = inject(SignalPaletteService);
diff --git a/src/styles.css b/src/styles.css
index 098fa07..ab036f9 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -238,7 +238,8 @@ body:not(.dark-theme) .sidebar h2 {
   float: right;
 }
 
-.control-group.collapsed > :not(h3, .group-header, .group-header-row) {
+.control-group.collapsed
+  > :not(h3, .group-header, .group-header-row, app-signal-list-panel) {
   display: none !important;
 }