From 87209ea4012a93032043dd353812333401bbab32 Mon Sep 17 00:00:00 2001
From: Hugh Kaznowski <hughkaznowski@Hughs-MacBook-Pro.local>
Date: Sat, 5 Sep 2026 18:44:22 +0100
Subject: [PATCH] Make Alerts section collapsible

Wire the Alerts section into the shared CollapsibleSection mechanism
(CollapseToggle + useSectionCollapsed), matching the pattern used by
Metrics and Params, with its own persisted 'alerts' section id.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
---
 tickets/002-collapsible-alerts-section.md |  7 -------
 webapp/src/components/Alerts.tsx          | 16 +++++++++++-----
 2 files changed, 11 insertions(+), 12 deletions(-)
 delete mode 100644 tickets/002-collapsible-alerts-section.md

diff --git a/tickets/002-collapsible-alerts-section.md b/tickets/002-collapsible-alerts-section.md
deleted file mode 100644
index a64b9cd..0000000
--- a/tickets/002-collapsible-alerts-section.md
+++ /dev/null
@@ -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).
diff --git a/webapp/src/components/Alerts.tsx b/webapp/src/components/Alerts.tsx
index 43fefc8..4dd4fcd 100644
--- a/webapp/src/components/Alerts.tsx
+++ b/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">
-        Every rule delivers to the ntfy sink configured in Settings.
-      </p>
-      <div className="flex gap-4 p-3">
+      <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>
+        <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>
   )