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/Metrics.tsx

@@ -10,7 +10,14 @@ import {
   type MetricDeclaration,
   type MetricParamMatcher,
 } from '../lib/api'
-import { CollapseToggle, PopOutButton, sectionHeaderClassName, sectionHeaderLeftClassName, useSectionCollapsed } from './CollapsibleSection'
+import {
+  CollapseToggle,
+  handleSectionHeaderKeyDown,
+  PopOutButton,
+  sectionHeaderInteractiveClassName,
+  sectionHeaderLeftClassName,
+  useSectionCollapsed,
+} from './CollapsibleSection'
 import { HelpIcon } from './HelpIcon'
 
 const EMPTY_MATCHER: MetricParamMatcher = { param_name: '', capture_group: '', kind: 'string' }
@@ -151,13 +158,20 @@ export function Metrics({ 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}>
           Metrics
           <HelpIcon sectionId="metrics" label="Help: Metrics" />
         </div>
         <div className="flex items-center gap-1.5">
-          <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+          <CollapseToggle collapsed={collapsed} />
           <PopOutButton section="metrics" range={range} />
         </div>
       </div>