[WEB-4546] chore: header enhancements + quickstart guide ui update + breadcrumb

apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx

@@ -3,24 +3,25 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { Home } from "lucide-react";
+import { Home, Shapes } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // ui
 import { GITHUB_REDIRECTED_TRACKER_EVENT, HEADER_GITHUB_ICON } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
 // hooks
 import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
+import { useHome } from "@/hooks/store/use-home";
 
 export const WorkspaceDashboardHeader = observer(() => {
   // hooks
   const { resolvedTheme } = useTheme();
-
+  const { toggleWidgetSettings } = useHome();
   const { t } = useTranslation();
 
   return (
@@ -38,6 +39,15 @@ export const WorkspaceDashboardHeader = observer(() => {
           </div>
         </Header.LeftItem>
         <Header.RightItem>
+          <Button
+            variant="neutral-primary"
+            size="sm"
+            onClick={() => toggleWidgetSettings(true)}
+            className="my-auto mb-0"
+          >
+            <Shapes size={16} />
+            <div className="text-xs font-medium">{t("home.manage_widgets")}</div>
+          </Button>
           <a
             onClick={() =>
               captureElementAndEvent({

apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx

@@ -2,6 +2,7 @@
 
 import { CommandPalette } from "@/components/command-palette";
 import { AuthenticationWrapper } from "@/lib/wrappers";
+// plane web components
 import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 import { ProjectAppSidebar } from "./_sidebar";
 

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx

@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { PanelRight } from "lucide-react";
+import { ChartNoAxesColumn, ListFilter, PanelRight, SlidersHorizontal } from "lucide-react";
 // plane imports
 import {
   EIssueFilterType,
@@ -30,7 +30,13 @@ import { cn, isIssueFilterActive } from "@plane/utils";
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import { SwitcherLabel } from "@/components/common";
 import { CycleQuickActions } from "@/components/cycles";
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  FilterSelection,
+  LayoutSelection,
+  MobileLayoutSelection,
+} from "@/components/issues";
 // hooks
 import {
   useCommandPalette,
@@ -207,21 +213,31 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         </Header.LeftItem>
         <Header.RightItem className="items-center">
           <div className="hidden items-center gap-2 md:flex ">
-            <LayoutSelection
-              layouts={[
-                EIssueLayoutTypes.LIST,
-                EIssueLayoutTypes.KANBAN,
-                EIssueLayoutTypes.CALENDAR,
-                EIssueLayoutTypes.SPREADSHEET,
-                EIssueLayoutTypes.GANTT,
-              ]}
-              onChange={(layout) => handleLayoutChange(layout)}
-              selectedLayout={activeLayout}
-            />
+            <div className="hidden @4xl:flex">
+              <LayoutSelection
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                selectedLayout={activeLayout}
+              />
+            </div>
+            <div className="flex @4xl:hidden">
+              <MobileLayoutSelection
+                layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                activeLayout={activeLayout}
+              />
+            </div>
             <FiltersDropdown
               title={t("common.filters")}
               placement="bottom-end"
               isFiltersApplied={isIssueFilterActive(issueFilters)}
+              miniIcon={<ListFilter className="size-3.5" />}
             >
               <FilterSelection
                 filters={issueFilters?.filters ?? {}}
@@ -238,7 +254,11 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 moduleViewDisabled={!currentProjectDetails?.module_view}
               />
             </FiltersDropdown>
-            <FiltersDropdown title={t("common.display")} placement="bottom-end">
+            <FiltersDropdown
+              title={t("common.display")}
+              placement="bottom-end"
+              miniIcon={<SlidersHorizontal className="size-3.5" />}
+            >
               <DisplayFiltersSelection
                 layoutDisplayFiltersOptions={
                   activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
@@ -256,7 +276,10 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             {canUserCreateIssue && (
               <>
                 <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-                  {t("common.analytics")}
+                  <div className="hidden @4xl:flex">Analytics</div>
+                  <div className="flex @4xl:hidden">
+                    <ChartNoAxesColumn className="size-3.5" />
+                  </div>
                 </Button>
                 {!isCompletedCycle && (
                   <Button

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx

@@ -24,6 +24,7 @@ import {
   FilterSelection,
   FiltersDropdown,
   IssueLayoutIcon,
+  MobileLayoutSelection,
 } from "@/components/issues/issue-layouts";
 // helpers
 // hooks
@@ -108,32 +109,10 @@ export const ProjectIssuesMobileHeader = observer(() => {
         projectDetails={currentProjectDetails ?? undefined}
       />
       <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
-        <CustomMenu
-          maxHeight={"md"}
-          className="flex flex-grow justify-center text-sm text-custom-text-200"
-          placement="bottom-start"
-          customButton={
-            <div className="flex flex-start text-sm text-custom-text-200">
-              {t("common.layout")}
-              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
-            </div>
-          }
-          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
-          closeOnSelect
-        >
-          {layouts.map((layout, index) => (
-            <CustomMenu.MenuItem
-              key={index}
-              onClick={() => {
-                handleLayoutChange(ISSUE_LAYOUTS[index].key);
-              }}
-              className="flex items-center gap-2"
-            >
-              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
-              <div className="text-custom-text-300">{t(layout.titleTranslationKey)}</div>
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
+        <MobileLayoutSelection
+          layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+          onChange={handleLayoutChange}
+        />
         <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             title={t("common.filters")}

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx

@@ -4,7 +4,7 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { PanelRight } from "lucide-react";
+import { ChartNoAxesColumn, ListFilter, PanelRight, SlidersHorizontal } from "lucide-react";
 // plane imports
 import {
   EIssueFilterType,
@@ -27,7 +27,13 @@ import { cn, isIssueFilterActive } from "@plane/utils";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import { SwitcherLabel } from "@/components/common";
-import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  FilterSelection,
+  LayoutSelection,
+  MobileLayoutSelection,
+} from "@/components/issues";
 // helpers
 import { ModuleQuickActions } from "@/components/modules";
 // hooks
@@ -198,21 +204,31 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         </Header.LeftItem>
         <Header.RightItem className="items-center">
           <div className="hidden gap-2 md:flex">
-            <LayoutSelection
-              layouts={[
-                EIssueLayoutTypes.LIST,
-                EIssueLayoutTypes.KANBAN,
-                EIssueLayoutTypes.CALENDAR,
-                EIssueLayoutTypes.SPREADSHEET,
-                EIssueLayoutTypes.GANTT,
-              ]}
-              onChange={(layout) => handleLayoutChange(layout)}
-              selectedLayout={activeLayout}
-            />
+            <div className="hidden @4xl:flex">
+              <LayoutSelection
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                selectedLayout={activeLayout}
+              />
+            </div>
+            <div className="flex @4xl:hidden">
+              <MobileLayoutSelection
+                layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+                onChange={(layout) => handleLayoutChange(layout)}
+                activeLayout={activeLayout}
+              />
+            </div>
             <FiltersDropdown
               title="Filters"
               placement="bottom-end"
               isFiltersApplied={isIssueFilterActive(issueFilters)}
+              miniIcon={<ListFilter className="size-3.5" />}
             >
               <FilterSelection
                 filters={issueFilters?.filters ?? {}}
@@ -229,7 +245,11 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                 moduleViewDisabled={!currentProjectDetails?.module_view}
               />
             </FiltersDropdown>
-            <FiltersDropdown title="Display" placement="bottom-end">
+            <FiltersDropdown
+              title="Display"
+              placement="bottom-end"
+              miniIcon={<SlidersHorizontal className="size-3.5" />}
+            >
               <DisplayFiltersSelection
                 layoutDisplayFiltersOptions={
                   activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
@@ -253,7 +273,10 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                 variant="neutral-primary"
                 size="sm"
               >
-                Analytics
+                <div className="hidden @4xl:flex">Analytics</div>
+                <div className="flex @4xl:hidden">
+                  <ChartNoAxesColumn className="size-3.5" />
+                </div>
               </Button>
               <Button
                 className="hidden sm:flex"

apps/web/ce/components/breadcrumbs/project.tsx

@@ -65,6 +65,7 @@ export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
               if (handleOnClick) handleOnClick();
               else router.push(`/${workspaceSlug}/projects/${currentProjectDetails.id}/issues/`);
             }}
+            shouldTruncate
           />
         }
         showSeparator={false}

apps/web/ce/components/common/extended-app-header.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { AppSidebarToggleButton } from "@/components/sidebar";
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+
+export const ExtendedAppHeader = (props: { header: ReactNode }) => {
+  const { header } = props;
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
+
+  return (
+    <>
+      {sidebarCollapsed && <AppSidebarToggleButton />}
+      <div className="w-full">{header}</div>
+    </>
+  );
+};

apps/web/ce/components/common/index.ts

@@ -1 +1,2 @@
 export * from "./subscription";
+export * from "./extended-app-header";

apps/web/core/components/core/app-header.tsx

@@ -5,9 +5,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { Row } from "@plane/ui";
 // components
-import { AppSidebarToggleButton } from "@/components/sidebar";
-// hooks
-import { useAppTheme } from "@/hooks/store";
+import { ExtendedAppHeader } from "@/plane-web/components/common";
 
 export interface AppHeaderProps {
   header: ReactNode;
@@ -16,14 +14,11 @@ export interface AppHeaderProps {
 
 export const AppHeader = observer((props: AppHeaderProps) => {
   const { header, mobileHeader } = props;
-  // store hooks
-  const { sidebarCollapsed } = useAppTheme();
 
   return (
     <div className="z-[18]">
       <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
-        {sidebarCollapsed && <AppSidebarToggleButton />}
-        <div className="w-full">{header}</div>
+        <ExtendedAppHeader header={header} />
       </Row>
       {mobileHeader && mobileHeader}
     </div>

apps/web/core/components/home/root.tsx

@@ -12,7 +12,6 @@ import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useUserProfile, useUser } from "@/hooks/store";
 import { useHome } from "@/hooks/store/use-home";
-import useSize from "@/hooks/use-window-size";
 // plane web components
 import { HomePeekOverviewsRoot } from "@/plane-web/components/home";
 // local imports
@@ -24,8 +23,7 @@ export const WorkspaceHomeView = observer(() => {
   const { workspaceSlug } = useParams();
   const { data: currentUser } = useUser();
   const { data: currentUserProfile, updateTourCompleted } = useUserProfile();
-  const { toggleWidgetSettings, fetchWidgets } = useHome();
-  const [windowWidth] = useSize();
+  const { fetchWidgets } = useHome();
 
   useSWR(
     workspaceSlug ? `HOME_DASHBOARD_WIDGETS_${workspaceSlug}` : null,
@@ -62,12 +60,8 @@ export const WorkspaceHomeView = observer(() => {
       )}
       <>
         <HomePeekOverviewsRoot />
-        <ContentWrapper
-          className={cn("gap-6 bg-custom-background-90/20", {
-            "vertical-scrollbar scrollbar-lg": windowWidth >= 768,
-          })}
-        >
-          {currentUser && <UserGreetingsView user={currentUser} handleWidgetModal={() => toggleWidgetSettings(true)} />}
+        <ContentWrapper className={cn("gap-6 bg-custom-background-100 max-w-[750px] mx-auto scrollbar-hide")}>
+          {currentUser && <UserGreetingsView user={currentUser} />}
           <DashboardWidgets />
         </ContentWrapper>
       </>