Add collapsible primary UI sections (ticket 035)

Log viewer (FilterBar+LogTimeline+LogPreview), Params, Metrics, and
Dashboards can each be collapsed/expanded via a toggle next to their
existing help icon. Collapsed state persists per-section in
localStorage (ottyl.collapsedSections) and content is hidden with the
`hidden` attribute rather than unmounted, so in-progress form state
(a half-filled Metrics/Params form, in-progress Dashboards panel
edits) survives a collapse/expand cycle.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-05 16:46:22 +01:00
co-authored by Claude Sonnet 5
parent dd1a0a234d
commit 7db1e0f055
7 changed files with 96 additions and 46 deletions
-34
View File
@@ -1,34 +0,0 @@
# 035 — Collapsible primary UI sections
## Summary
`App.tsx` stacks the Log viewer (`LogTimeline` + `LogPreview`), Params
([034](034-params-declaration-ui.md)), `Metrics`, and `Dashboards` vertically
with no way to collapse any of them. On a small screen — or just when only
one section is being worked on — the others take up space and force
scrolling. Make each section collapsible.
## Scope
- Each of the four sections (Log viewer, Params, Metrics, Dashboards) gets a
collapse/expand toggle in its header, next to its existing "?" help icon.
- Collapsed state persists across reloads per-section, via `localStorage`
(same pattern as `LogPreview`'s `VISIBLE_PARAM_COLUMNS_STORAGE_KEY` at
`webapp/src/components/LogPreview.tsx:13`).
- A collapsed section still shows its header (title + toggle), just not its
body/content.
- Collapsing a section must not tear down state that would be lost/reset on
re-expand (e.g. `Dashboards`' in-progress panel edits, `Metrics`' declare
form) — hide with CSS/conditional render at the container level, not by
unmounting stateful subtrees.
## Acceptance criteria
- Each section can be independently collapsed and re-expanded.
- Reloading the page preserves each section's collapsed/expanded state.
- Collapsing a section with unsaved in-progress input (e.g. a half-filled
Metrics declare form) and re-expanding it preserves that input.
## Depends on
- [034 — Params declaration UI](034-params-declaration-ui.md)