feat(dashboard): make the dashboard panel collapsible (#459)#463
Conversation
Add a collapse/expand toggle to the Dashboard panel header so users can temporarily reclaim the full map view without deactivating the dashboard or dragging the divider to the bottom. Collapsing hides the resize handle, column picker, Add widget button, and widget grid, leaving just the header bar docked at the bottom. The last height is kept in state, so expanding restores the panel to exactly the size it was last dragged/resized to. Mirrors NotebookPanel's collapse pattern using PanelBottomClose/PanelBottomOpen icons.
✅ Deploy Preview for geolibre-app ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthrough
ChangesDashboard collapse/expand feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| // Collapse the panel to just its header bar for a full map view, without | ||
| // losing the last height (issue #459). The height is kept in state so an | ||
| // expand restores the panel to exactly the size the user last dragged it to. | ||
| const [isCollapsed, setIsCollapsed] = useState(false); |
There was a problem hiding this comment.
CLAUDE.md violation — issue reference in comment
(issue #459) is the kind of reference CLAUDE.md explicitly says to keep in the PR description, not in source comments: "Don't reference the current task, fix, or callers…since those belong in the PR description and rot as the codebase evolves."
The non-obvious WHY (keeping height separate from the collapsed flag so an expand round-trip restores the last drag size) is worth preserving; only the tracker link needs to go.
| // Collapse the panel to just its header bar for a full map view, without | |
| // losing the last height (issue #459). The height is kept in state so an | |
| // expand restores the panel to exactly the size the user last dragged it to. | |
| const [isCollapsed, setIsCollapsed] = useState(false); | |
| // Height is kept separately from `isCollapsed` so expanding restores the | |
| // panel to the exact size the user last dragged it to. | |
| const [isCollapsed, setIsCollapsed] = useState(false); |
| <Button | ||
| variant="outline" | ||
| size="sm" | ||
| className="h-8 px-2" | ||
| onClick={openAdd} | ||
| disabled={chartableLayers.length === 0} | ||
| variant="ghost" | ||
| size="icon" | ||
| className="h-8 w-8" | ||
| aria-label={ | ||
| isCollapsed ? t("dashboard.expand") : t("dashboard.collapse") | ||
| } | ||
| title={ | ||
| chartableLayers.length === 0 | ||
| ? t("dashboard.noLayersHint") | ||
| : t("dashboard.addWidget") | ||
| isCollapsed ? t("dashboard.expand") : t("dashboard.collapse") | ||
| } | ||
| onClick={() => setIsCollapsed((c) => !c)} | ||
| > | ||
| <Plus className="h-3.5 w-3.5" /> | ||
| <span className="hidden sm:inline">{t("dashboard.addWidget")}</span> | ||
| {isCollapsed ? ( | ||
| <PanelBottomOpen className="h-4 w-4" /> | ||
| ) : ( | ||
| <PanelBottomClose className="h-4 w-4" /> | ||
| )} | ||
| </Button> |
There was a problem hiding this comment.
Accessibility — missing aria-expanded
For a disclosure button (one that shows/hides a region), aria-expanded is the correct ARIA attribute to communicate the current state to assistive technologies. The dynamic aria-label communicates the next action ("Collapse dashboard" / "Expand dashboard"), which is fine, but aria-expanded additionally exposes the current state to AT without requiring the AT to parse the label. Both together follow the ARIA authoring practices for disclosure widgets.
| <Button | |
| variant="outline" | |
| size="sm" | |
| className="h-8 px-2" | |
| onClick={openAdd} | |
| disabled={chartableLayers.length === 0} | |
| variant="ghost" | |
| size="icon" | |
| className="h-8 w-8" | |
| aria-label={ | |
| isCollapsed ? t("dashboard.expand") : t("dashboard.collapse") | |
| } | |
| title={ | |
| chartableLayers.length === 0 | |
| ? t("dashboard.noLayersHint") | |
| : t("dashboard.addWidget") | |
| isCollapsed ? t("dashboard.expand") : t("dashboard.collapse") | |
| } | |
| onClick={() => setIsCollapsed((c) => !c)} | |
| > | |
| <Plus className="h-3.5 w-3.5" /> | |
| <span className="hidden sm:inline">{t("dashboard.addWidget")}</span> | |
| {isCollapsed ? ( | |
| <PanelBottomOpen className="h-4 w-4" /> | |
| ) : ( | |
| <PanelBottomClose className="h-4 w-4" /> | |
| )} | |
| </Button> | |
| <Button | |
| variant="ghost" | |
| size="icon" | |
| className="h-8 w-8" | |
| isCollapsed ? t("dashboard.expand") : t("dashboard.collapse") | |
| } | |
| aria-expanded={!isCollapsed} | |
| isCollapsed ? t("dashboard.expand") : t("dashboard.collapse") | |
| } | |
| onClick={() => setIsCollapsed((c) => !c)} | |
| > | |
| {isCollapsed ? ( | |
| <PanelBottomOpen className="h-4 w-4" /> | |
| ) : ( | |
| <PanelBottomClose className="h-4 w-4" /> | |
| )} | |
| </Button> |
Code reviewReviewed CLAUDE.md
Accessibility
Bugs / Performance / SecurityNothing found. Specifically checked:
|
1 participant
Summary
Closes #459. The Dashboard panel can now be collapsed to a thin header bar at the bottom of the screen with a single click, reclaiming the full map view, and expanded back to its previous height — no more deactivating it via the menu or dragging the divider to the bottom.
PanelBottomClose/PanelBottomOpenicons), placed beside the close button.dashboard.collapse/dashboard.expandinen.json(the typed source of truth; other locales fall back to English).Mirrors the existing collapse pattern in
NotebookPanel.Testing
npm run typecheck(full build) passes.pre-commit run --files …passes (eslint + npm build).Summary by CodeRabbit