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

2025-07-22 16:47:14 +05:30 · 2025-07-22 16:47:14 +05:30 · 763a28ab60
commit 763a28ab60
parent 5c22a6cecc
22 changed files with 307 additions and 148 deletions
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/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({
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
+++ b/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";

--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/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
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/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")}
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/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"