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,7 +236,11 @@ 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>
+      <div hidden={collapsed}>
         <p className="px-3 pt-3 text-xs text-text-faint">
           Every rule delivers to the ntfy sink configured in Settings.
         </p>
@@ -445,5 +450,6 @@ export function Alerts() {
         </div>
         </div>
       </div>
+    </div>
   )
 }