Collapse sections by clicking their title bar (ticket 006)

Alerts, Metrics, Params, and Dashboards now toggle collapsed state when
their header row is clicked, instead of requiring a dedicated collapse
button. The chevron (CollapseToggle) becomes a purely visual, non-focusable
indicator for these sections; HelpIcon and PopOutButton now stop
propagation so they keep working without also collapsing the section.

The log viewer's toggle (App.tsx/FilterBar) keeps its dedicated button,
since that row is a filter toolbar with an editable input rather than a
plain title bar, so CollapseToggle's onToggle prop stays available for
that case.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/Dashboards.tsx

@@ -16,8 +16,9 @@ import {
 } from '../lib/api'
 import {
   CollapseToggle,
+  handleSectionHeaderKeyDown,
   PopOutButton,
-  sectionHeaderClassName,
+  sectionHeaderInteractiveClassName,
   sectionHeaderLeftClassName,
   useSectionCollapsed,
 } from './CollapsibleSection'
@@ -217,13 +218,20 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
   if (!activeProfile) {
     return (
       <div className="border-b border-border text-sm">
-        <div className={sectionHeaderClassName}>
+        <div
+          className={sectionHeaderInteractiveClassName}
+          role="button"
+          tabIndex={0}
+          aria-expanded={!collapsed}
+          onClick={() => setCollapsed(!collapsed)}
+          onKeyDown={handleSectionHeaderKeyDown(() => setCollapsed(!collapsed))}
+        >
           <div className={sectionHeaderLeftClassName}>
             Dashboards
             <HelpIcon sectionId="dashboards" label="Help: Dashboards" />
           </div>
           <div className="flex items-center gap-1.5">
-            <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+            <CollapseToggle collapsed={collapsed} />
             <PopOutButton section="dashboards" range={range} />
           </div>
         </div>
@@ -236,13 +244,20 @@ export function Dashboards({ range }: { range: TimeRange | null }) {
 
   return (
     <div className="border-b border-border text-sm">
-      <div className={sectionHeaderClassName}>
+      <div
+        className={sectionHeaderInteractiveClassName}
+        role="button"
+        tabIndex={0}
+        aria-expanded={!collapsed}
+        onClick={() => setCollapsed(!collapsed)}
+        onKeyDown={handleSectionHeaderKeyDown(() => setCollapsed(!collapsed))}
+      >
         <div className={sectionHeaderLeftClassName}>
           Dashboards — profile "{activeProfile}"
           <HelpIcon sectionId="dashboards" label="Help: Dashboards" />
         </div>
         <div className="flex items-center gap-1.5">
-          <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+          <CollapseToggle collapsed={collapsed} />
           <PopOutButton section="dashboards" range={range} />
         </div>
       </div>