feat: add collapsible sidebar sections

[jjjhenriksen]

Summary

• adds independently collapsible Channels, Direct messages, and People sidebar sections
• persists disclosure state per workspace while keeping section actions available
• recovers safely when browser storage is unavailable or malformed
• adds accessibility, mobile, unread-count, persistence, and workspace-isolation regressions

Validation

• pnpm check
• pnpm coverage — 85.8% Go statement coverage
• pnpm exec playwright test tests/e2e/sidebar-collapse.spec.ts --repeat-each=5 --workers=2 — 5 passed
• CI=1 pnpm test:e2e — 62 passed
• pnpm build:desktop
• docker build -t clickclack:pr50-land .
• pnpm audit --prod — no known vulnerabilities
• govulncheck ./... — no vulnerabilities found

Existing-profile Chrome proof covered independent disclosure, reload persistence, keyboard activation, valid accessibility relationships, 390×844 touch behavior, and malformed-storage recovery. Source-aware autoreview reported no accepted or actionable findings. Public Model Identifier Gate: PASS.

This revision preserves Jacqueline Henriksen's feature commit and credits @jjjhenriksen in the changelog.

[clawsweeper]

ClawSweeper status: review started.

I am starting a fresh review of this pull request: feat: add collapsible sidebar sections This is item 1/1 in the current shard. Shard 0/1.

This placeholder means the worker is alive and reading the current context. I will edit this same comment with the actual review when the claws are done clicking.

Crustacean status: shell secured, claws on keyboard, evidence pebbles being sorted.

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed July 11, 2026, 7:49 PM ET / 23:49 UTC.

Summary
Adds independently collapsible Channels, Direct messages, and People sections with accessible disclosure controls, per-workspace local persistence, collapsed unread summaries, focused E2E coverage, proof documentation, and regenerated embedded web assets.

Reproducibility: not applicable. This PR adds a new sidebar capability rather than repairing broken behavior with an existing contract; its behavior is instead demonstrated by a real recording and focused E2E scenario.

Review metrics: 2 noteworthy metrics.

• Authored behavior surface: 5 web files, 1 E2E test. The substantive implementation is bounded; the remaining changed files are proof documentation or regenerated embedded assets.
• Preference contract: 3 booleans per workspace. Merge persists visibility for Channels, Direct messages, and People under one versioned localStorage key.

Merge readiness
Overall: 🐚 platinum hermit
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🐚 platinum hermit
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

• none.

Risk before merge

• [P1] Merging intentionally establishes a versioned, browser-local per-workspace preference for three navigation sections; maintainers should explicitly accept that durable UX contract and its browser-only synchronization behavior.

Maintainer options:

1. Decide the mitigation before merge
   Keep the accessible disclosure design and merge it if the sidebar owner accepts persistent per-workspace state; if persistence is not desired, narrow only the state lifetime rather than replacing the focused controls and coverage.
2. Pause or close
   Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

• [P2] No concrete automated repair is needed; the remaining action is an explicit maintainer decision on the new persistent sidebar preference.

Maintainer decision needed

• Question: Should ClickClack permanently support independently collapsible Channels, Direct messages, and People sections with state remembered per workspace in each browser profile?
• Rationale: The implementation is correct and proven, but current behavior does not define this capability, and merging creates a lasting navigation-preference contract that requires product intent rather than automated repair judgment.
• Likely owner: Peter Steinberger — Current-main blame shows the strongest ownership of the sidebar structure and styling whose product contract this PR changes.
• Options:
  • Accept persistent disclosures (recommended): Merge the all-expanded default with independent state remembered locally for each workspace.
  • Use session-only state: Keep the accessible disclosures but reset all sections after reload to avoid durable preference behavior.
  • Retain current navigation: Decline section-level disclosure and keep whole-sidebar collapse as the only collapse control.

Security
Cleared: No concrete security or supply-chain concern was found: the patch adds first-party UI state, local boolean persistence, tests, proof files, and rebuilt assets without dependency, secret, permission, or execution-source changes.

Review details

Best possible solution:

Keep the accessible disclosure design and merge it if the sidebar owner accepts persistent per-workspace state; if persistence is not desired, narrow only the state lifetime rather than replacing the focused controls and coverage.

Do we have a high-confidence way to reproduce the issue?

Not applicable: this PR adds a new sidebar capability rather than repairing broken behavior with an existing contract; its behavior is instead demonstrated by a real recording and focused E2E scenario.

Is this the best way to solve the issue?

Yes at the implementation level: native disclosure buttons, stable controlled regions, safe storage fallback, and workspace scoping are the narrowest maintainable design; only the persistence product policy remains undecided.

AGENTS.md: found, but no applicable review policy affected this item.

Codex review notes: model internal, reasoning high; reviewed against afcf67c692d6.

Label changes

Label changes:

• add proof: sufficient: Contributor real behavior proof is sufficient. The PR supplies an after-change real-browser recording from a running production candidate, and the same-head prior review accepted the visible independent disclosure interaction as strong media proof.
• add proof: 🎥 video: Contributor real behavior proof includes video or recording evidence. The PR supplies an after-change real-browser recording from a running production candidate, and the same-head prior review accepted the visible independent disclosure interaction as strong media proof.
• add rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
• add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (recording): The PR supplies an after-change real-browser recording from a running production candidate, and the same-head prior review accepted the visible independent disclosure interaction as strong media proof.
• remove rating: 🦐 gold shrimp: Current PR rating is rating: 🐚 platinum hermit, so this older rating label is no longer current.
• remove status: 📣 needs proof: Current PR status label is status: 👀 ready for maintainer look.

Label justifications:

• P3: This is optional, low-risk sidebar ergonomics rather than a regression, blocked workflow, or urgent user-impact issue.
• rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (recording): The PR supplies an after-change real-browser recording from a running production candidate, and the same-head prior review accepted the visible independent disclosure interaction as strong media proof.
• proof: sufficient: Contributor real behavior proof is sufficient. The PR supplies an after-change real-browser recording from a running production candidate, and the same-head prior review accepted the visible independent disclosure interaction as strong media proof.
• proof: 🎥 video: Contributor real behavior proof includes video or recording evidence. The PR supplies an after-change real-browser recording from a running production candidate, and the same-head prior review accepted the visible independent disclosure interaction as strong media proof.

Evidence reviewed

What I checked:

• Current-main behavior: Current main renders the three sidebar sections as always-expanded lists with decorative carets and has only the existing whole-sidebar collapse, so the proposed section-level behavior is not redundant. (apps/web/src/components/navigation/Sidebar.svelte:150, afcf67c692d6)
• Focused implementation: The PR adds native disclosure buttons, stable aria-controls targets, safe workspace-scoped localStorage loading, and independent state wiring for Channels, Direct messages, and People. (apps/web/src/components/navigation/Sidebar.svelte:66, ebb1ce896385)
• Regression coverage: The focused Playwright scenario covers independent collapse, accessibility state, 99+ unread aggregation, retained create actions, reload persistence, workspace isolation, deep links, malformed-storage fallback, and mobile navigation. (tests/e2e/sidebar-collapse.spec.ts:3, ebb1ce896385)
• Real behavior proof: The committed proof is a valid 8.958-second H.264 ReplayKit recording, and the latest completed ClawSweeper review on this same head accepted it as strong media proof with no code findings. (docs/proof/collapsible-sidebar-real-behavior.mov, ebb1ce896385)
• Established preference mechanism: Current main already uses localStorage for web preferences, so the patch follows an existing client-side persistence mechanism rather than creating a parallel settings subsystem. (apps/web/src/ChatApp.svelte:274, afcf67c692d6)
• Feature provenance: Git history shows Peter Steinberger authored most current sidebar and navigation lines, while Shakker recently integrated settings behavior and previously split account and workspace settings. (apps/web/src/components/navigation/Sidebar.svelte:1, 5e8b6309bdcc)

Likely related people:

• Peter Steinberger: Blame attributes most current Sidebar, ChannelList, and sidebar CSS lines to Peter Steinberger, including the v0.1.0 baseline containing the navigation structure this PR extends. (role: original sidebar owner; confidence: high; commits: 8453b5f758c9; files: apps/web/src/components/navigation/Sidebar.svelte, apps/web/src/components/navigation/ChannelList.svelte, apps/web/src/styles/sidebar.css)
• shakkernerd: The merged settings work in pull request 47 most recently changed Sidebar.svelte, and earlier settings-separation work changed sidebar CSS and adjacent navigation behavior. (role: recent adjacent contributor; confidence: high; commits: 5e8b6309bdcc, 597b8fdbe2b6; files: apps/web/src/components/navigation/Sidebar.svelte, apps/web/src/styles/sidebar.css)

What the crustacean ranks mean

• 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
• 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
• 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
• 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
• 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
• 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
• 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works

• ClawSweeper keeps one durable marker-backed review comment per issue or PR.
• Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
• A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
• PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
• Maintainers can also comment @clawsweeper review to request a fresh review only.
• Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
• Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
• Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

Review history (2 earlier review cycles)

• reviewed 2026-07-11T23:30:19.851Z sha ebb1ce8 :: needs real behavior proof before merge. :: none
• reviewed 2026-07-11T23:44:49.476Z sha ebb1ce8 :: needs maintainer review before merge. :: none

[jjjhenriksen]

@clawsweeper review, updated with browser viewable proof video

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[steipete]

Exact-head proof for 08c3bcdc8164578eda06d4fa84222a6066608eab:

• pnpm check: pass
• pnpm coverage: pass, 85.8% Go statement coverage
• focused disclosure stress: 5/5 pass with two workers
• full Playwright: 62/62 pass
• desktop build: pass
• Docker build: pass
• production dependency audit: no known vulnerabilities
• Go vulnerability audit: no vulnerabilities found
• existing-profile Chrome: independent section state, reload persistence, keyboard activation, accessibility relationships, mobile touch behavior, and malformed-storage recovery all passed
• autoreview: clean, no accepted/actionable findings
• Public Model Identifier Gate: PASS

The prior live head's TypeScript failure was stale embedded web assets. This exact candidate contains the regenerated asset set and passes the repository's embedded-asset gate locally.

@clawsweeper review

[clawsweeper]

🦞🧹
ClawSweeper re-review requested.

I asked ClawSweeper to review this item again.
Action: item re-review queued (workflow sweep.yml, event repository_dispatch).
Result: the existing ClawSweeper review comment will be edited in place when the review finishes.