[WEB-4546] chore: header enhancements + quickstart guide ui update + breadcrumb#7451
[WEB-4546] chore: header enhancements + quickstart guide ui update + breadcrumb#7451
Conversation
WalkthroughThis update introduces responsive UI enhancements across various workspace and project headers, focusing on layout selection and dropdowns. It adds a mobile-optimized layout selector, updates button and icon presentations for different screen sizes, and adjusts component props for improved flexibility. Some redundant logic and props are removed for simplification. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Header
participant LayoutSelector
participant MobileLayoutSelector
User->>Header: Loads page
Header->>LayoutSelector: Render (if screen ≥ 4xl)
Header->>MobileLayoutSelector: Render (if screen < 4xl)
User->>LayoutSelector: Selects layout (large screen)
LayoutSelector->>Header: onChange(layout)
User->>MobileLayoutSelector: Selects layout (mobile)
MobileLayoutSelector->>Header: onChange(layout)
Estimated code review effort3 (30–60 minutes) Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
🧠 Learnings (1)apps/web/core/components/core/app-header.tsx (1)Learnt from: vamsikrishnamathala 🧬 Code Graph Analysis (2)apps/web/ce/components/common/extended-app-header.tsx (1)
apps/web/core/components/core/app-header.tsx (1)
✅ Files skipped from review due to trivial changes (3)
🧰 Additional context used🧠 Learnings (1)apps/web/core/components/core/app-header.tsx (1)Learnt from: vamsikrishnamathala 🧬 Code Graph Analysis (2)apps/web/ce/components/common/extended-app-header.tsx (1)
apps/web/core/components/core/app-header.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (5)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx (2)
5-6: Inline comment adds little value
// plane web componentsdoesn’t provide information that isn’t already obvious from the@/plane-web/...path. Unless you’re enforcing an import-grouping convention, consider dropping it to avoid noisy comments that can drift out of date.
14-16: Hard-codedidrisks DOM duplicatesIf this layout can appear more than once (e.g., multiple workspaces open in parallel), the fixed
id="full-screen-portal"will be duplicated, violating HTML spec and potentially breakingdocument.getElementById/portal logic.
Wrap a single global portal at the app shell, generate a unique id, or replace with a Reactref.apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx (1)
16-16: Remove unusedisMobilepropThe
isMobileprop is defined in the component props but never used in the implementation. This creates unnecessary API surface.export const MobileLayoutSelection = ({ layouts, onChange, activeLayout, }: { layouts: EIssueLayoutTypes[]; onChange: (layout: EIssueLayoutTypes) => void; activeLayout?: EIssueLayoutTypes; - isMobile?: boolean; }) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx(1 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx(5 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx(2 hunks)apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx(5 hunks)apps/web/ce/components/breadcrumbs/project.tsx(1 hunks)apps/web/core/components/home/root.tsx(2 hunks)apps/web/core/components/home/user-greetings.tsx(2 hunks)apps/web/core/components/home/widgets/empty-states/no-projects.tsx(6 hunks)apps/web/core/components/issues/filters.tsx(5 hunks)apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx(4 hunks)apps/web/core/components/issues/issue-layouts/filters/header/index.ts(1 hunks)apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx(1 hunks)packages/ui/src/breadcrumbs/navigation-dropdown.tsx(1 hunks)packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx(3 hunks)packages/ui/src/header/helper.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (9)
apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx (2)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
Learnt from: mathalav55
PR: #6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/archive.tsx:11-14
Timestamp: 2024-11-28T07:02:54.664Z
Learning: When components are still located in core, it's appropriate for files to import them using @/components/..., and the migration to the new import paths is not necessary in such cases.
apps/web/ce/components/breadcrumbs/project.tsx (1)
Learnt from: prateekshourya29
PR: #7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx (1)
Learnt from: mathalav55
PR: #6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, ISSUE_DISPLAY_FILTERS_BY_LAYOUT and ISSUE_DISPLAY_FILTERS_BY_PAGE are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
apps/web/core/components/home/root.tsx (1)
Learnt from: vamsikrishnamathala
PR: #7061
File: web/core/components/workspace-notifications/root.tsx:18-18
Timestamp: 2025-05-14T13:16:23.323Z
Learning: In the Plane project codebase, the path alias @/plane-web resolves to the ce directory, making imports like @/plane-web/hooks/use-notification-preview correctly resolve to files in web/ce/hooks/.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx (1)
Learnt from: mathalav55
PR: #6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, ISSUE_DISPLAY_FILTERS_BY_LAYOUT and ISSUE_DISPLAY_FILTERS_BY_PAGE are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
apps/web/core/components/issues/filters.tsx (2)
Learnt from: mathalav55
PR: #6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, ISSUE_DISPLAY_FILTERS_BY_LAYOUT and ISSUE_DISPLAY_FILTERS_BY_PAGE are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
Learnt from: vamsikrishnamathala
PR: #7214
File: web/core/store/issue/helpers/base-issues.store.ts:117-117
Timestamp: 2025-06-16T07:23:39.497Z
Learning: In the updateIssueDates method of BaseIssuesStore (web/core/store/issue/helpers/base-issues.store.ts), the projectId parameter is intentionally made optional to support override implementations in subclasses. The base implementation requires projectId and includes an early return check, but making it optional allows derived classes to override the method with different parameter requirements.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx (2)
Learnt from: mathalav55
PR: #6107
File: web/ce/components/workspace-notifications/sidebar/notification-card/options/archive.tsx:11-14
Timestamp: 2024-11-28T07:02:54.664Z
Learning: When components are still located in core, it's appropriate for files to import them using @/components/..., and the migration to the new import paths is not necessary in such cases.
Learnt from: mathalav55
PR: #6452
File: web/helpers/issue.helper.ts:6-6
Timestamp: 2025-01-24T09:37:19.339Z
Learning: In the Plane codebase, ISSUE_DISPLAY_FILTERS_BY_LAYOUT and ISSUE_DISPLAY_FILTERS_BY_PAGE are two distinct constants serving different purposes - one for layout-level filters and another for page-level filters. They are not interchangeable and should coexist.
packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx (1)
Learnt from: prateekshourya29
PR: #7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
apps/web/core/components/home/widgets/empty-states/no-projects.tsx (1)
Learnt from: prateekshourya29
PR: #7188
File: web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx:40-45
Timestamp: 2025-06-18T09:46:08.566Z
Learning: When reviewing breadcrumb components that accept projectId or similar props, check if empty strings are being passed during loading states, which can result in invalid URLs. The preferred approach is to handle these loading states internally within the component rather than requiring each consumer to manage the loading logic.
🔇 Additional comments (38)
apps/web/core/components/home/widgets/empty-states/no-projects.tsx (5)
47-47: LGTM - Consistent icon size reduction for improved mobile responsiveness.The reduction from
size-10tosize-4for all quickstart icons creates a more compact and mobile-friendly layout.Also applies to: 65-65, 77-77
92-92: LGTM - Avatar size consistency maintained.The avatar containers are properly resized to match the new compact design while maintaining the same styling approach for both image and fallback states.
Also applies to: 102-102
145-145: LGTM - Grid layout simplified for better responsive behavior.Removing the
xl:grid-cols-4breakpoint simplifies the layout and ensures better usability on medium screens.
151-151: LGTM - Card styling optimized for compact design.The reduced padding, border radius, and icon container size (
size-20→size-9) create a more streamlined appearance suitable for the new compact layout.Also applies to: 155-155
163-164: LGTM - Text sizing and completion indicator improvements.The font size reductions (
text-base→text-sm,text-sm→text-[11px]) and thew-fitclass on the completion checkmark enhance the compact design while maintaining readability.Also applies to: 166-166
apps/web/ce/components/breadcrumbs/project.tsx (2)
68-68: LGTM - Responsive truncation enhancement.The
shouldTruncateprop addition enables responsive breadcrumb behavior, showing ellipsis on smaller screens while maintaining full content on larger displays. This aligns well with the mobile responsiveness improvements.
27-31: ProjectBreadcrumb handles loading internally
TheProjectBreadcrumbcomponent returnsnullwhenevergetPartialProjectById(projectId)is falsy—including ifprojectIdisundefinedor an empty string—so no breadcrumb or invalid URL is ever rendered. Consumers don’t need to guard against empty or missingprojectId.apps/web/core/components/issues/issue-layouts/filters/header/index.ts (1)
5-5: LGTM - Export addition supports responsive layout functionality.Adding the mobile layout selection export enables centralized access to the
MobileLayoutSelectioncomponent, supporting the responsive design improvements across issue layouts.packages/ui/src/breadcrumbs/navigation-dropdown.tsx (1)
48-52: LGTM - Well-implemented responsive truncation using container queries.The responsive implementation properly handles different container sizes:
- Shows ellipsis (
...) on smaller containers for space efficiency- Displays full icon and label on
@4xlcontainers and larger- Maintains consistent button functionality across all sizes
The use of container queries (
@4xl:) is appropriate for component-level responsive behavior.packages/ui/src/header/helper.tsx (1)
27-27: LGTM - Container query support enables responsive header behavior.Adding
@containerto the header styling enables container-based responsive design, which supports the responsive UI improvements throughout the application. This foundational change allows header components to adapt to their container size rather than just viewport size.apps/web/core/components/home/root.tsx (2)
26-26: Good simplification of hook usage.The removal of
toggleWidgetSettingsfrom the destructureduseHomehook aligns with moving widget management controls to the header component, improving separation of concerns.
63-64: Excellent responsive design improvement.The ContentWrapper styling changes effectively implement the PR objectives:
- Fixed
max-w-[750px]provides consistent content widthmx-autocenters the content for better visual presentationscrollbar-hidemaintains clean aesthetics- Removes complex conditional scrollbar logic in favor of simpler CSS-based approach
This approach is more maintainable than the previous JavaScript-based window width tracking.
apps/web/core/components/home/user-greetings.tsx (2)
9-15: Clean interface simplification.The removal of
handleWidgetModalprop from the interface correctly reflects the architectural change of moving widget management to the header component.
44-54: Improved responsive layout design.The layout changes effectively enhance the user experience:
flex-col items-centerprovides better center alignmentmy-6adds appropriate vertical spacingtext-centerensures consistent text alignment- Simplified single-column layout works better on smaller screens
This aligns perfectly with the PR objective of improving usability on smaller screen widths.
apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx (3)
6-6: Appropriate icon import for widget management.The
Shapesicon import is well-chosen for representing widget management functionality.
19-25: Proper hook integration for centralized widget management.The
useHomehook import andtoggleWidgetSettingsdestructuring correctly implements the relocated widget management functionality from the home components.
42-50: Well-implemented widget management button.The button implementation follows excellent design practices:
neutral-primaryvariant maintains visual consistencysize="sm"is appropriate for header contextShapesicon provides clear visual indication- Proper localized text with
t("home.manage_widgets")- Clean onClick handler with
toggleWidgetSettings(true)- Appropriate CSS classes for layout
This successfully centralizes widget management in the header as mentioned in the PR objectives.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx (5)
7-7: Comprehensive icon imports for enhanced UI.The additional icon imports (
ChartNoAxesColumn,ListFilter,SlidersHorizontal) support the responsive design improvements and visual enhancements throughout the header.
33-39: Excellent component organization for responsive layout selection.The import of
MobileLayoutSelectionalongside existing layout components demonstrates proper separation of concerns for responsive design.
216-235: Outstanding responsive layout selection implementation.This responsive approach excellently addresses the PR objectives:
@4xl:flex/@4xl:hiddenprovides clean breakpoint-based switchingLayoutSelectionfor large screens supports all layout typesMobileLayoutSelectionfor smaller screens focuses on essential layouts (list, kanban, calendar)- Consistent
handleLayoutChangecallback across both components- Maintains functionality while optimizing for different screen sizes
The reduced layout options on mobile (3 vs 5) improve usability on smaller screens.
240-240: Smart mini-icon enhancement for space efficiency.The
miniIconprops withListFilterandSlidersHorizontalicons effectively implement the PR objective of replacing buttons with icon buttons to save space. Thesize-3.5class ensures appropriate icon sizing for header context.Also applies to: 260-260
279-283: Perfect responsive button implementation for Analytics.The Analytics button responsiveness excellently demonstrates space-saving design:
- Shows "Analytics" text on very large screens (
@4xl:flex)- Shows
ChartNoAxesColumnicon on smaller screens (@4xl:hidden)- Maintains functionality while optimizing screen real estate
- Icon size (
size-3.5) is consistent with other mini iconsThis perfectly aligns with the PR objective of using icon buttons to save space.
apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx (5)
7-7: Consistent icon imports across header components.The same icon imports as the cycles header (
ChartNoAxesColumn,ListFilter,SlidersHorizontal) demonstrate excellent consistency in the responsive design approach.
30-36: Proper component import organization.The inclusion of
MobileLayoutSelectionmaintains consistency with the cycles header implementation, showing good architectural alignment.
207-226: Excellent consistency in responsive layout selection.The implementation perfectly mirrors the cycles header approach:
- Same
@4xlbreakpoint strategy- Identical layout type selections for both desktop and mobile
- Consistent component usage and callback handling
- Maintains the same user experience across different project contexts
This consistency enhances user familiarity and reduces cognitive load.
231-231: Consistent mini-icon implementation.The
miniIconprops withListFilterandSlidersHorizontalmaintain perfect consistency with the cycles header, ensuring a unified user experience across all project detail pages.Also applies to: 251-251
276-280: Consistent responsive Analytics button.The Analytics button implementation maintains the same responsive pattern as the cycles header, with proper text/icon switching based on screen size. This consistency is crucial for user experience across different project contexts.
packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx (2)
19-19: LGTM: Well-structured truncation propThe
shouldTruncateprop is properly typed as optional boolean and defaulted tofalse, maintaining backward compatibility.Also applies to: 32-32
70-78: LGTM: Clean responsive truncation implementationThe truncation logic is well-implemented:
- Uses container queries (
@4xlbreakpoint) for responsive behavior- Shows ellipsis on smaller screens and full content on larger screens
- Maintains proper structure with conditional CSS classes
- Follows consistent responsive design patterns used elsewhere in the codebase
apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx (1)
20-53: LGTM: Well-structured mobile layout selectorThe component implementation is solid:
- Uses CustomMenu with proper button variants
- Conditional rendering based on activeLayout presence
- Good use of internationalization with
t()function- Clean filtering logic using
ISSUE_LAYOUTS.filter()- Proper icon integration with
IssueLayoutIconapps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx (2)
27-27: LGTM: Good import of reusable componentAdding
MobileLayoutSelectionto the imports promotes code reusability across different mobile headers.
112-115: LGTM: Clean component replacementThe replacement of the custom dropdown menu with
MobileLayoutSelectioncomponent is well-executed:
- Uses appropriate layout types for mobile (LIST, KANBAN, CALENDAR)
- Proper integration with existing
handleLayoutChangecallback- Simplifies the code by removing manual menu item rendering
- Maintains consistent functionality
apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx (1)
16-16: LGTM: Well-designed miniIcon propThe addition of the optional
miniIconprop provides good flexibility for responsive design patterns.Also applies to: 28-28
apps/web/core/components/issues/filters.tsx (5)
20-34: LGTM: Well-organized importsThe imports are properly structured, bringing in the necessary components and icons for the responsive UI enhancements.
43-49: LGTM: Good use of constants for maintainabilityDefining the
LAYOUTSconstant eliminates code duplication and makes the available layouts easy to modify in one place.
127-140: LGTM: Clean responsive layout selection implementationThe split between desktop and mobile layout selectors is well-executed:
- Uses consistent
@4xlbreakpoint for responsive behavior- Both components receive the same props for consistent functionality
- Clean separation of concerns between desktop and mobile experiences
145-145: LGTM: Good visual enhancement with mini iconsAdding
ListFilterandSlidersHorizontalicons to the filters dropdowns improves visual clarity and user experience on smaller screens.Also applies to: 163-163
179-189: LGTM: Responsive analytics button implementationThe analytics button enhancement is well-implemented:
- Shows full text on larger screens (
@4xland above)- Shows compact icon on smaller screens
- Maintains proper button styling and functionality
- Follows consistent responsive design patterns
apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
Show resolved
Hide resolved
pushya22
changed the title
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
3 participants
Description
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Enhancements
Bug Fixes
Refactor
Documentation
Chores