feat: enhance notification sidebar header with back navigation and stβ¦
Description
Added a Back to workspace button to the notifications sidebar header so users can easily navigate from /[workspaceSlug]/notifications back to the workspace home.
The back button:
- Uses ChevronLeftIcon from @plane/propel/icons
- Navigates via next/link to /${workspaceSlug}
- Reuses getButtonStyling("secondary", "base") and cn to match existing button and header styling
- Is aligned inline with the notifications breadcrumb to maintain visual consistency
Type of Change
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ x ] Feature (non-breaking change which adds functionality)
- [ x ] Improvement (change that would cause existing functionality to not work as expected)
- [ ] Code refactoring
- [ ] Performance improvements
- [ ] Documentation update
Test Scenarios
- Navigated to /[workspaceSlug]/notifications and verified:
- The back button is visible in the notifications sidebar header.
- Clicking the back button navigates to
/${workspaceSlug}. - Header layout and alignment remain correct on different viewport widths.
- Ran linting for the updated file to ensure no new lint errors:
apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
Walkthrough
A back navigation button using ChevronLeftIcon within a Next.js Link component is added alongside the existing Breadcrumbs header. The header now features a horizontal container layout with the new button and updated styling via getButtonStyling utilities, while maintaining existing conditional rendering logic.
Changes
| Cohort / File(s) | Summary |
|---|---|
Workspace Notifications Header Navigation apps/web/core/components/workspace-notifications/sidebar/header/root.tsx |
Added left-aligned back button (ChevronLeftIcon in Next.js Link) adjacent to Breadcrumbs. Introduced horizontal container layout with spacing and button styling via getButtonStyling. Updated imports to include Link, getButtonStyling, ChevronLeftIcon, InboxIcon, and cn utility. Preserved existing conditional rendering for missing workspaceSlug. |
Estimated code review effort
π― 2 (Simple) | β±οΈ ~8 minutes
- Verify the back button navigation link target is correct (check href construction)
- Confirm getButtonStyling and cn utilities are imported from the correct modules
- Ensure horizontal layout and spacing work across responsive breakpoints
- Check that ChevronLeftIcon rendering aligns with design specifications
Poem
π° A button of chevrons points the way back, Next to breadcrumbs in a neat horizontal stackβ Navigation flows left, then forward once more, Users now travel both out and in-door! π
Pre-merge checks and finishing touches
β Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | β Passed | The title clearly describes the main enhancement: adding back navigation and styling improvements to the notification sidebar header. |
| Docstring Coverage | β Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Description check | β Passed | The PR description is well-structured, follows the template, and provides clear details about the changes including the back button implementation, navigation behavior, and test scenarios performed. |
β¨ Finishing touches
- [ ] π Generate docstrings
π§ͺ Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
I wasn't able to run the prettier fix. Let me know if this can go through or needs any change.