UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: перенос режимов проекта в нижнюю панель

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx

@@ -13,6 +13,7 @@ import { WorkItemsIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { HeaderFilters } from "@/components/issues/filters";
 import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -62,6 +63,14 @@ export const WorkItemDetailsHeader = observer(function WorkItemDetailsHeader() {
         </Breadcrumbs>
       </Header.LeftItem>
       <Header.RightItem>
+        <div className="hidden items-center gap-2 md:flex">
+          <HeaderFilters
+            projectId={projectId.toString()}
+            currentProjectDetails={projectDetails}
+            workspaceSlug={workspaceSlug.toString()}
+            canUserCreateIssue={undefined}
+          />
+        </div>
         {projectId && issueId && (
           <IssueDetailQuickActions
             workspaceSlug={workspaceSlug?.toString()}

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

@@ -36,7 +36,6 @@ import {
   DisplayFiltersSelection,
   FiltersDropdown,
   LayoutSelection,
-  MobileLayoutSelection,
 } from "@/components/issues/issue-layouts/filters";
 import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
 // hooks
@@ -185,32 +184,17 @@ export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
         </Header.LeftItem>
         <Header.RightItem className="items-center">
           <div className="hidden items-center gap-2 md:flex">
-            <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,
-                  EIssueLayoutTypes.SPREADSHEET,
-                  EIssueLayoutTypes.GANTT,
-                ]}
-                onChange={(layout) => handleLayoutChange(layout)}
-                activeLayout={activeLayout}
-              />
-            </div>
+            <LayoutSelection
+              layouts={[
+                EIssueLayoutTypes.LIST,
+                EIssueLayoutTypes.KANBAN,
+                EIssueLayoutTypes.CALENDAR,
+                EIssueLayoutTypes.SPREADSHEET,
+                EIssueLayoutTypes.GANTT,
+              ]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
+            />
             <WorkItemFiltersToggle entityType={EIssuesStoreType.CYCLE} entityId={cycleId} />
             <FiltersDropdown
               title={t("common.display")}

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

@@ -18,7 +18,7 @@ import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import {
   DisplayFiltersSelection,
   FiltersDropdown,
-  MobileLayoutSelection,
+  LayoutSelection,
 } from "@/components/issues/issue-layouts/filters";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
@@ -93,9 +93,15 @@ export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader
         cycleDetails={cycleDetails ?? undefined}
       />
       <div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
-        <MobileLayoutSelection
-          activeLayout={activeLayout}
-          layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+        <LayoutSelection
+          selectedLayout={activeLayout}
+          layouts={[
+            EIssueLayoutTypes.LIST,
+            EIssueLayoutTypes.KANBAN,
+            EIssueLayoutTypes.CALENDAR,
+            EIssueLayoutTypes.SPREADSHEET,
+            EIssueLayoutTypes.GANTT,
+          ]}
           onChange={handleLayoutChange}
         />
         <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">

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

@@ -18,7 +18,7 @@ import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import {
   DisplayFiltersSelection,
   FiltersDropdown,
-  MobileLayoutSelection,
+  LayoutSelection,
 } from "@/components/issues/issue-layouts/filters";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
@@ -69,9 +69,16 @@ export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHe
         projectDetails={currentProjectDetails ?? undefined}
       />
       <div className="z-[13] flex justify-evenly border-b border-subtle bg-surface-1 py-2 md:hidden">
-        <MobileLayoutSelection
-          layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+        <LayoutSelection
+          layouts={[
+            EIssueLayoutTypes.LIST,
+            EIssueLayoutTypes.KANBAN,
+            EIssueLayoutTypes.CALENDAR,
+            EIssueLayoutTypes.SPREADSHEET,
+            EIssueLayoutTypes.GANTT,
+          ]}
           onChange={handleLayoutChange}
+          selectedLayout={activeLayout}
         />
         <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown

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

@@ -32,7 +32,6 @@ import {
   DisplayFiltersSelection,
   FiltersDropdown,
   LayoutSelection,
-  MobileLayoutSelection,
 } from "@/components/issues/issue-layouts/filters";
 import { ModuleQuickActions } from "@/components/modules";
 import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
@@ -179,32 +178,17 @@ export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
         </Header.LeftItem>
         <Header.RightItem className="items-center">
           <div className="hidden gap-2 md:flex">
-            <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,
-                  EIssueLayoutTypes.SPREADSHEET,
-                  EIssueLayoutTypes.GANTT,
-                ]}
-                onChange={(layout) => handleLayoutChange(layout)}
-                activeLayout={activeLayout}
-              />
-            </div>
+            <LayoutSelection
+              layouts={[
+                EIssueLayoutTypes.LIST,
+                EIssueLayoutTypes.KANBAN,
+                EIssueLayoutTypes.CALENDAR,
+                EIssueLayoutTypes.SPREADSHEET,
+                EIssueLayoutTypes.GANTT,
+              ]}
+              onChange={(layout) => handleLayoutChange(layout)}
+              selectedLayout={activeLayout}
+            />
             {moduleId && <WorkItemFiltersToggle entityType={EIssuesStoreType.MODULE} entityId={moduleId} />}
             <FiltersDropdown
               title="Display"

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

@@ -18,7 +18,7 @@ import { WorkItemsModal } from "@/components/analytics/work-items/modal";
 import {
   DisplayFiltersSelection,
   FiltersDropdown,
-  MobileLayoutSelection,
+  LayoutSelection,
 } from "@/components/issues/issue-layouts/filters";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
@@ -75,9 +75,15 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
         projectDetails={currentProjectDetails}
       />
       <div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2">
-        <MobileLayoutSelection
-          activeLayout={activeLayout}
-          layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+        <LayoutSelection
+          selectedLayout={activeLayout}
+          layouts={[
+            EIssueLayoutTypes.LIST,
+            EIssueLayoutTypes.KANBAN,
+            EIssueLayoutTypes.CALENDAR,
+            EIssueLayoutTypes.SPREADSHEET,
+            EIssueLayoutTypes.GANTT,
+          ]}
           onChange={handleLayoutChange}
         />
         <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">