feat(settings): collapse settings sections and rework the footer editor

[ssavutu]

What

The settings screen had grown to six full-height cards stacked end to end — about 9,200px of page. The footer menu was most of it: 6 columns × ~8 entries rendered as one long vertical list of ~48 identical wrapping form rows.

Collapsed, the page is now ~1,250px and fits on one screen.

Collapsible sections

New SettingsSection wraps every group (Site, Homepage Carousel, Breaking News, Footer Menu, Taxonomy, Media Library). The profile card is left alone — it's identity, not a setting.

• Collapsed by default, with open state remembered per section in localStorage.
• Collapsed rows stay informative via a right-aligned summary — The Triangle, 2 slides, Enabled, 6 columns, and Reindexing… / Rebuilding… while those jobs run. Descriptions render only when expanded.
• An Unsaved chip appears in the header when a section is dirty and stays visible while collapsed, so collapsing can't hide pending edits.
• Bodies are hidden with CSS rather than unmounted: sections own fetched state and in-progress edits that a remount would refetch and discard.

Add Slide moved from the carousel header into the body, since it can't nest inside the header's toggle button.

Footer menu editor

Columns now lay out in a responsive grid mirroring the footer they produce, instead of stacking. Per entry, the label sits above the href; headings render semibold and spacers draw a dashed "Blank line" rule. A segmented heading/link/spacer picker replaces the per-row <select>, and move/delete controls are revealed on hover or focus. The new-tab toggle stays visible while enabled so it's legible at a glance.

Testing

tsc --noEmit and eslint clean. Driven in a browser against the real default footer (6 columns / 48 entries) with the settings endpoints stubbed, since the page is behind OIDC:

• Expand/collapse, dirty chip appears on edit and persists while collapsed, edits survive a collapse/expand cycle, open state survives a reload.
• Footer save round-trips: moving an entry down and saving returned About, Contact Us, Staff, Join The Triangle.
• Tab order is Sign out plus the six headers — nothing reachable inside a collapsed body.
• No console errors.

Caught this way and fixed: the first version used the hidden attribute alone, which Tailwind's flex class overrode, leaving every section fully expanded under a collapsed chevron.

Note

tailwind.config.js sets darkMode: ["class"], but there is no .dark variable block in src/index.css and nothing toggles the class — dark mode is unused boilerplate, so this was designed light-only.

🤖 Generated with Claude Code