plane icon indicating copy to clipboard operation
plane copied to clipboard

feat: enhance notification sidebar header with back navigation and st…

Open rbshh opened this issue 3 days ago β€’ 2 comments

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

rbshh avatar Dec 22 '25 09:12 rbshh

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.

❀️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Dec 22 '25 09:12 coderabbitai[bot]

I wasn't able to run the prettier fix. Let me know if this can go through or needs any change.

rbshh avatar Dec 23 '25 11:12 rbshh