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(EMPTY_FORM) const [submitError, setSubmitError] = useState(null) const [submitting, setSubmitting] = useState(false) + const [collapsed, setCollapsed] = useSectionCollapsed('alerts') async function loadRules() { try { @@ -235,11 +236,15 @@ export function Alerts() { Alerts +
+ setCollapsed(!collapsed)} /> +
-

- Every rule delivers to the ntfy sink configured in Settings. -

-
+
)