Merge ticket/002-collapsible-alerts-section

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

tickets/002-collapsible-alerts-section.md

@@ -1,7 +0,0 @@
-# Make Alerts section collapsible
-
-Alerts section should be collapsible.
-
-## Acceptance criteria
-- The Alerts section can be collapsed and expanded, consistent with how other collapsible sections behave.
-- Collapsed/expanded state persists in a way consistent with the rest of the UI (e.g. across reloads if other sections do so).

webapp/src/components/Alerts.tsx

@@ -9,7 +9,7 @@ import {
   type AlertRule,
   type CompareOp,
 } from '../lib/api'
-import { sectionHeaderClassName, sectionHeaderLeftClassName } from './CollapsibleSection'
+import { CollapseToggle, sectionHeaderClassName, sectionHeaderLeftClassName, useSectionCollapsed } from './CollapsibleSection'
 import { HelpIcon } from './HelpIcon'
 import { queryInputClassName } from './FilterBar'
 
@@ -151,6 +151,7 @@ export function Alerts() {
   const [form, setForm] = useState<FormState>(EMPTY_FORM)
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
+  const [collapsed, setCollapsed] = useSectionCollapsed('alerts')
 
   async function loadRules() {
     try {
@@ -235,11 +236,15 @@ export function Alerts() {
           Alerts
           <HelpIcon sectionId="alerts" label="Help: Alerts" />
         </div>
+        <div className="flex items-center gap-1.5">
+          <CollapseToggle collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
+        </div>
       </div>
-      <p className="px-3 pt-3 text-xs text-text-faint">
+      <div hidden={collapsed}>
-        Every rule delivers to the ntfy sink configured in Settings.
+        <p className="px-3 pt-3 text-xs text-text-faint">
-      </p>
+          Every rule delivers to the ntfy sink configured in Settings.
-      <div className="flex gap-4 p-3">
+        </p>
+        <div className="flex gap-4 p-3">
         <form onSubmit={handleSubmit} className="w-96 shrink-0 space-y-2">
           <div>
             <label className="mb-1 block text-xs text-text-subtle">Name</label>
@@ -443,6 +448,7 @@ export function Alerts() {
             </div>
           )}
         </div>
+        </div>
       </div>
     </div>
   )