UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: миграция mobile header, intake actions и member filters на общий канон

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx

@@ -12,9 +12,10 @@ import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissi
 import { useTranslation } from "@plane/i18n";
 import { YourWorkIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IUserProfileProjectSegregation } from "@plane/types";
-import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { SelectionDropdown } from "@/components/common/selection-dropdown";
 import { ProfileIssuesFilter } from "@/components/profile/profile-issues-filter";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
@@ -71,30 +72,22 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
       <Header.RightItem>
         <div className="hidden md:flex md:items-center">{showProfileIssuesFilter && <ProfileIssuesFilter />}</div>
         <div className="flex gap-4 md:hidden">
-          <CustomMenu
-            maxHeight={"md"}
-            className="flex flex-grow justify-center text-13 text-secondary"
+          <SelectionDropdown
             placement="bottom-start"
-            customButton={
+            menuButton={
               <div className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1.5">
                 <span className="flex flex-grow justify-center text-13 text-secondary">{type}</span>
                 <ChevronDownIcon className="h-4 w-4 text-placeholder" />
               </div>
             }
-            customButtonClassName="flex flex-grow justify-center text-secondary text-13"
-            closeOnSelect
-          >
-            <></>
-            {tabsList.map((tab) => (
-              <CustomMenu.MenuItem
-                className="flex items-center gap-2"
-                key={tab.route}
-                onClick={() => router.push(`/${workspaceSlug}/profile/${userId}/${tab.route}`)}
-              >
-                <span className="w-full text-tertiary">{t(tab.i18n_label)}</span>
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
+            menuButtonWrapperClassName="flex flex-grow justify-center text-secondary text-13"
+            options={tabsList.map((tab) => ({
+              key: tab.route,
+              title: t(tab.i18n_label),
+              isChecked: type === tab.route,
+              onClick: () => router.push(`/${workspaceSlug}/profile/${userId}/${tab.route}`),
+            }))}
+          />
           <div className="shrink-0 md:hidden">
             <Button
               variant="ghost"

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx

@@ -8,7 +8,7 @@ import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane constants
-import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 // plane i18n
 import { useTranslation } from "@plane/i18n";
 // icons
@@ -18,14 +18,15 @@ import type {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
   TIssueLayouts,
-  EIssueLayoutTypes,
 } from "@plane/types";
-import { EIssuesStoreType } from "@plane/types";
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
 // components
-import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
-import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  MobileLayoutSelection,
+} from "@/components/issues/issue-layouts/filters";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 
@@ -85,35 +86,11 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
 
   return (
     <div className="flex justify-evenly border-b border-subtle py-2 md:hidden">
-      <CustomMenu
-        maxHeight={"md"}
-        className="flex flex-grow justify-center text-13 text-secondary"
-        placement="bottom-start"
-        customButton={
-          <div className="flex-center flex text-13 text-secondary">
-            {t("common.layout")}
-            <ChevronDownIcon className="my-auto ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
-          </div>
-        }
-        customButtonClassName="flex flex-center text-secondary text-13"
-        closeOnSelect
-      >
-        {ISSUE_LAYOUTS.map((layout, index) => {
-          if (layout.key === "spreadsheet" || layout.key === "gantt_chart" || layout.key === "calendar") return;
-          return (
-            <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-tertiary">{t(layout.i18n_title)}</div>
-            </CustomMenu.MenuItem>
-          );
-        })}
-      </CustomMenu>
+      <MobileLayoutSelection
+        activeLayout={activeLayout}
+        layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN]}
+        onChange={handleLayoutChange}
+      />
       <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
         <FiltersDropdown
           title={t("common.display")}

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

@@ -8,27 +8,23 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
-import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
-import { EIssuesStoreType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { ChevronDownIcon } from "@plane/propel/icons";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
-import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
-import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  MobileLayoutSelection,
+} from "@/components/issues/issue-layouts/filters";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 
-const SUPPORTED_LAYOUTS = [
-  { key: "list", titleTranslationKey: "issue.layouts.list", icon: ListLayoutIcon },
-  { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: BoardLayoutIcon },
-  { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: CalendarLayoutIcon },
-];
-
 export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader() {
   // router
   const { workspaceSlug, projectId, cycleId } = useParams();
@@ -97,29 +93,11 @@ 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">
-        <CustomMenu
-          maxHeight={"md"}
-          className="flex flex-grow justify-center text-13 text-secondary"
-          placement="bottom-start"
-          customButton={
-            <span className="flex flex-grow justify-center text-13 text-secondary">{t("common.layout")}</span>
-          }
-          customButtonClassName="flex flex-grow justify-center text-secondary text-13"
-          closeOnSelect
-        >
-          {SUPPORTED_LAYOUTS.map((layout, index) => (
-            <CustomMenu.MenuItem
-              key={ISSUE_LAYOUTS[index].key}
-              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-tertiary">{t(layout.titleTranslationKey)}</div>
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
+        <MobileLayoutSelection
+          activeLayout={activeLayout}
+          layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+          onChange={handleLayoutChange}
+        />
         <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown
             title={t("common.display")}

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

@@ -11,7 +11,7 @@ import type { ISvgIcons } from "@plane/propel/icons";
 import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
 // plane package imports
 import type { TCycleLayoutOptions } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { SelectionDropdown } from "@/components/common/selection-dropdown";
 // hooks
 import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
 import { useProject } from "@/hooks/store/use-project";
@@ -41,40 +41,29 @@ const CYCLE_VIEW_LAYOUTS: {
 export const CyclesListMobileHeader = observer(function CyclesListMobileHeader() {
   const { currentProjectDetails } = useProject();
   // hooks
-  const { updateDisplayFilters } = useCycleFilter();
+  const { currentProjectDisplayFilters, updateDisplayFilters } = useCycleFilter();
   return (
     <div className="flex justify-center sm:hidden">
-      <CustomMenu
-        maxHeight={"md"}
-        className="flex flex-grow justify-center border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
-        // placement="bottom-start"
-        customButton={
+      <SelectionDropdown
+        placement="bottom-start"
+        menuButton={
           <span className="flex items-center gap-2">
             <ListLayoutIcon className="h-4 w-4" />
             <span className="flex flex-grow justify-center text-13 text-secondary">Layout</span>
           </span>
         }
-        customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
-        closeOnSelect
-      >
-        {CYCLE_VIEW_LAYOUTS.map((layout) => {
-          if (layout.key == "gantt") return;
-          return (
-            <CustomMenu.MenuItem
-              key={layout.key}
-              onClick={() => {
-                updateDisplayFilters(currentProjectDetails!.id, {
-                  layout: layout.key,
-                });
-              }}
-              className="flex items-center gap-2"
-            >
-              <layout.icon className="h-3 w-3" />
-              <div className="text-tertiary">{layout.title}</div>
-            </CustomMenu.MenuItem>
-          );
-        })}
-      </CustomMenu>
+        menuButtonWrapperClassName="flex flex-grow justify-center items-center border-b border-subtle bg-surface-1 py-2 text-secondary text-13"
+        options={CYCLE_VIEW_LAYOUTS.filter((layout) => layout.key !== "gantt").map((layout) => ({
+          key: layout.key,
+          icon: <layout.icon className="h-3 w-3" />,
+          title: layout.title,
+          isChecked: currentProjectDisplayFilters?.layout === layout.key,
+          onClick: () =>
+            updateDisplayFilters(currentProjectDetails!.id, {
+              layout: layout.key,
+            }),
+        }))}
+      />
     </div>
   );
 });

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

@@ -8,27 +8,23 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
-import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
-import { EIssuesStoreType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import { ChevronDownIcon } from "@plane/propel/icons";
+import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
-import { DisplayFiltersSelection, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
-import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
+import {
+  DisplayFiltersSelection,
+  FiltersDropdown,
+  MobileLayoutSelection,
+} from "@/components/issues/issue-layouts/filters";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 import { useModule } from "@/hooks/store/use-module";
 import { useProject } from "@/hooks/store/use-project";
 
-const SUPPORTED_LAYOUTS = [
-  { key: "list", i18n_title: "issue.layouts.list", icon: ListLayoutIcon },
-  { key: "kanban", i18n_title: "issue.layouts.kanban", icon: BoardLayoutIcon },
-  { key: "calendar", i18n_title: "issue.layouts.calendar", icon: CalendarLayoutIcon },
-];
-
 export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHeader() {
   // router
   const { workspaceSlug, projectId, moduleId } = useParams();
@@ -79,27 +75,11 @@ export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHead
         projectDetails={currentProjectDetails}
       />
       <div className="flex justify-evenly border-b border-subtle bg-surface-1 py-2">
-        <CustomMenu
-          maxHeight={"md"}
-          className="flex flex-grow justify-center text-13 text-secondary"
-          placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-13 text-secondary">Layout</span>}
-          customButtonClassName="flex flex-grow justify-center text-secondary text-13"
-          closeOnSelect
-        >
-          {SUPPORTED_LAYOUTS.map((layout, index) => (
-            <CustomMenu.MenuItem
-              key={layout.key}
-              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-tertiary">{t(layout.i18n_title)}</div>
-            </CustomMenu.MenuItem>
-          ))}
-        </CustomMenu>
+        <MobileLayoutSelection
+          activeLayout={activeLayout}
+          layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+          onChange={handleLayoutChange}
+        />
         <div className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <FiltersDropdown
             title="Display"

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

@@ -8,46 +8,35 @@ import { observer } from "mobx-react";
 import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { ChevronDownIcon } from "@plane/propel/icons";
-import { CustomMenu, Row } from "@plane/ui";
+import { Row } from "@plane/ui";
+import { SelectionDropdown } from "@/components/common/selection-dropdown";
 import { ModuleLayoutIcon } from "@/components/modules";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 import { useProject } from "@/hooks/store/use-project";
 
 export const ModulesListMobileHeader = observer(function ModulesListMobileHeader() {
   const { currentProjectDetails } = useProject();
-  const { updateDisplayFilters } = useModuleFilter();
+  const { currentProjectDisplayFilters, updateDisplayFilters } = useModuleFilter();
   const { t } = useTranslation();
 
   return (
     <div className="flex justify-start md:hidden">
-      <CustomMenu
-        maxHeight={"md"}
-        className="flex flex-grow justify-start border-b border-subtle bg-surface-1 py-2 text-13 text-secondary"
-        // placement="bottom-start"
-        customButton={
+      <SelectionDropdown
+        placement="bottom-start"
+        menuButton={
           <Row className="flex flex-grow justify-center gap-2 text-13 text-secondary">
             <span>Layout</span> <ChevronDownIcon className="my-auto h-4 w-4 text-secondary" strokeWidth={1} />
           </Row>
         }
-        customButtonClassName="flex flex-grow justify-center items-center text-secondary text-13"
-        closeOnSelect
-      >
-        {MODULE_VIEW_LAYOUTS.map((layout) => {
-          if (layout.key == "gantt") return;
-          return (
-            <CustomMenu.MenuItem
-              key={layout.key}
-              onClick={() => {
-                updateDisplayFilters(currentProjectDetails!.id.toString(), { layout: layout.key });
-              }}
-              className="flex items-center gap-2"
-            >
-              <ModuleLayoutIcon layoutType={layout.key} />
-              <div className="text-tertiary">{t(layout.i18n_title)}</div>
-            </CustomMenu.MenuItem>
-          );
-        })}
-      </CustomMenu>
+        menuButtonWrapperClassName="flex flex-grow justify-center items-center border-b border-subtle bg-surface-1 py-2 text-secondary text-13"
+        options={MODULE_VIEW_LAYOUTS.filter((layout) => layout.key !== "gantt").map((layout) => ({
+          key: layout.key,
+          icon: <ModuleLayoutIcon layoutType={layout.key} />,
+          title: t(layout.i18n_title),
+          isChecked: currentProjectDisplayFilters?.layout === layout.key,
+          onClick: () => updateDisplayFilters(currentProjectDetails!.id.toString(), { layout: layout.key }),
+        }))}
+      />
     </div>
   );
 });

plane-src/apps/web/core/components/inbox/content/inbox-issue-header.tsx

@@ -25,7 +25,7 @@ import {
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EInboxIssueStatus } from "@plane/types";
-import { ControlLink, CustomMenu } from "@plane/ui";
+import { ActionDropdown, ControlLink } from "@plane/ui";
 import { copyUrlToClipboard, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
 // components
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
@@ -348,61 +348,68 @@ export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader
       ) : (
         <>
           {isAllowed && (
-            <CustomMenu
-              customButton={<MoreHorizontal className="size-4" />}
-              customButtonClassName="nodedc-external-icon-button"
+            <ActionDropdown
+              button={<MoreHorizontal className="size-4" />}
+              buttonClassName="nodedc-external-icon-button"
               placement="bottom-start"
-              menuItemsClassName="z-[760]"
-            >
-              {canMarkAsAccepted && (
-                <CustomMenu.MenuItem
-                  onClick={() =>
+              items={[
+                {
+                  key: "snooze",
+                  shouldRender: canMarkAsAccepted,
+                  action: () =>
                     handleActionWithPermission(
                       isProjectAdmin,
                       handleIssueSnoozeAction,
                       t("inbox_issue.errors.snooze_permission")
-                    )
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <Clock size={14} strokeWidth={2} />
-                    {inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0
-                      ? t("inbox_issue.actions.unsnooze")
-                      : t("inbox_issue.actions.snooze")}
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-              {canMarkAsDuplicate && (
-                <CustomMenu.MenuItem
-                  onClick={() =>
+                    ),
+                  customContent: (
+                    <div className="flex items-center gap-2">
+                      <Clock size={14} strokeWidth={2} />
+                      {inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0
+                        ? t("inbox_issue.actions.unsnooze")
+                        : t("inbox_issue.actions.snooze")}
+                    </div>
+                  ),
+                },
+                {
+                  key: "duplicate",
+                  shouldRender: canMarkAsDuplicate,
+                  action: () =>
                     handleActionWithPermission(
                       isProjectAdmin,
                       () => setSelectDuplicateIssue(true),
                       t("inbox_issue.errors.duplicate_permission")
-                    )
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <FileStack size={14} strokeWidth={2} />
-                    {t("inbox_issue.actions.mark_as_duplicate")}
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-              <CustomMenu.MenuItem onClick={() => handleCopyIssueLink(workItemLink)}>
-                <div className="flex items-center gap-2">
-                  <CopyIcon width={14} height={14} strokeWidth={2} />
-                  {t("inbox_issue.actions.copy")}
-                </div>
-              </CustomMenu.MenuItem>
-              {canDelete && (
-                <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
-                  <div className="flex items-center gap-2">
-                    <TrashIcon width={14} height={14} strokeWidth={2} />
-                    {t("inbox_issue.actions.delete")}
-                  </div>
-                </CustomMenu.MenuItem>
-              )}
-            </CustomMenu>
+                    ),
+                  customContent: (
+                    <div className="flex items-center gap-2">
+                      <FileStack size={14} strokeWidth={2} />
+                      {t("inbox_issue.actions.mark_as_duplicate")}
+                    </div>
+                  ),
+                },
+                {
+                  key: "copy",
+                  action: () => handleCopyIssueLink(workItemLink),
+                  customContent: (
+                    <div className="flex items-center gap-2">
+                      <CopyIcon width={14} height={14} strokeWidth={2} />
+                      {t("inbox_issue.actions.copy")}
+                    </div>
+                  ),
+                },
+                {
+                  key: "delete",
+                  shouldRender: canDelete,
+                  action: () => setDeleteIssueModal(true),
+                  customContent: (
+                    <div className="flex items-center gap-2">
+                      <TrashIcon width={14} height={14} strokeWidth={2} />
+                      {t("inbox_issue.actions.delete")}
+                    </div>
+                  ),
+                },
+              ]}
+            />
           )}
         </>
       )}

plane-src/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx

@@ -19,7 +19,7 @@ import {
 } from "@plane/propel/icons";
 import type { TNameDescriptionLoader } from "@plane/types";
 
-import { Header, CustomMenu, EHeaderVariant } from "@plane/ui";
+import { ActionDropdown, Header, EHeaderVariant } from "@plane/ui";
 import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
 // components
 import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
@@ -136,102 +136,112 @@ export const InboxIssueActionsMobileHeader = observer(function InboxIssueActions
           </div>
         </div>
         <div className="ml-auto">
-          <CustomMenu
-            customButton={<MoreHorizontal className="size-4" />}
-            customButtonClassName={getIconButtonStyling("secondary", "lg")}
+          <ActionDropdown
+            button={<MoreHorizontal className="size-4" />}
+            buttonClassName={getIconButtonStyling("secondary", "lg")}
             placement="bottom-start"
-          >
-            {isAcceptedOrDeclined && (
-              <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
-                <div className="flex items-center gap-2">
-                  <LinkIcon width={14} height={14} strokeWidth={2} />
-                  {t("inbox_issue.actions.copy")}
-                </div>
-              </CustomMenu.MenuItem>
-            )}
-            {isAcceptedOrDeclined && (
-              <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
-                <div className="flex items-center gap-2">
-                  <NewTabIcon width={14} height={14} strokeWidth={2} />
-                  {t("inbox_issue.actions.open")}
-                </div>
-              </CustomMenu.MenuItem>
-            )}
-            {canMarkAsAccepted && !isAcceptedOrDeclined && (
-              <CustomMenu.MenuItem
-                onClick={() =>
+            items={[
+              {
+                key: "copy",
+                shouldRender: !!isAcceptedOrDeclined,
+                action: handleCopyIssueLink,
+                customContent: (
+                  <div className="flex items-center gap-2">
+                    <LinkIcon width={14} height={14} strokeWidth={2} />
+                    {t("inbox_issue.actions.copy")}
+                  </div>
+                ),
+              },
+              {
+                key: "open",
+                shouldRender: !!isAcceptedOrDeclined,
+                action: () => router.push(workItemLink),
+                customContent: (
+                  <div className="flex items-center gap-2">
+                    <NewTabIcon width={14} height={14} strokeWidth={2} />
+                    {t("inbox_issue.actions.open")}
+                  </div>
+                ),
+              },
+              {
+                key: "snooze",
+                shouldRender: canMarkAsAccepted && !isAcceptedOrDeclined,
+                action: () =>
                   handleActionWithPermission(
                     isProjectAdmin,
                     handleIssueSnoozeAction,
                     t("inbox_issue.errors.snooze_permission")
-                  )
-                }
-              >
-                <div className="flex items-center gap-2">
-                  <Clock size={14} strokeWidth={2} />
-                  {inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0
-                    ? t("inbox_issue.actions.unsnooze")
-                    : t("inbox_issue.actions.snooze")}
-                </div>
-              </CustomMenu.MenuItem>
-            )}
-            {canMarkAsDuplicate && !isAcceptedOrDeclined && (
-              <CustomMenu.MenuItem
-                onClick={() =>
+                  ),
+                customContent: (
+                  <div className="flex items-center gap-2">
+                    <Clock size={14} strokeWidth={2} />
+                    {inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0
+                      ? t("inbox_issue.actions.unsnooze")
+                      : t("inbox_issue.actions.snooze")}
+                  </div>
+                ),
+              },
+              {
+                key: "duplicate",
+                shouldRender: canMarkAsDuplicate && !isAcceptedOrDeclined,
+                action: () =>
                   handleActionWithPermission(
                     isProjectAdmin,
                     () => setSelectDuplicateIssue(true),
                     t("inbox_issue.errors.duplicate_permission")
-                  )
-                }
-              >
-                <div className="flex items-center gap-2">
-                  <FileStack size={14} strokeWidth={2} />
-                  {t("inbox_issue.actions.mark_as_duplicate")}
-                </div>
-              </CustomMenu.MenuItem>
-            )}
-            {canMarkAsAccepted && (
-              <CustomMenu.MenuItem
-                onClick={() =>
+                  ),
+                customContent: (
+                  <div className="flex items-center gap-2">
+                    <FileStack size={14} strokeWidth={2} />
+                    {t("inbox_issue.actions.mark_as_duplicate")}
+                  </div>
+                ),
+              },
+              {
+                key: "accept",
+                shouldRender: canMarkAsAccepted,
+                action: () =>
                   handleActionWithPermission(
                     isProjectAdmin,
                     () => setAcceptIssueModal(true),
                     t("inbox_issue.errors.accept_permission")
-                  )
-                }
-              >
-                <div className="flex items-center gap-2 text-success-secondary">
-                  <CheckCircleFilledIcon width={14} height={14} />
-                  {t("inbox_issue.actions.accept")}
-                </div>
-              </CustomMenu.MenuItem>
-            )}
-            {canMarkAsDeclined && (
-              <CustomMenu.MenuItem
-                onClick={() =>
+                  ),
+                customContent: (
+                  <div className="flex items-center gap-2 text-success-secondary">
+                    <CheckCircleFilledIcon width={14} height={14} />
+                    {t("inbox_issue.actions.accept")}
+                  </div>
+                ),
+              },
+              {
+                key: "decline",
+                shouldRender: canMarkAsDeclined,
+                action: () =>
                   handleActionWithPermission(
                     isProjectAdmin,
                     () => setDeclineIssueModal(true),
                     t("inbox_issue.errors.decline_permission")
-                  )
-                }
-              >
-                <div className="flex items-center gap-2 text-danger-secondary">
-                  <CloseCircleFilledIcon width={14} height={14} />
-                  {t("inbox_issue.actions.decline")}
-                </div>
-              </CustomMenu.MenuItem>
-            )}
-            {canDelete && !isAcceptedOrDeclined && (
-              <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
-                <div className="flex items-center gap-2 text-danger-primary">
-                  <TrashIcon height={14} width={14} strokeWidth={2} />
-                  {t("inbox_issue.actions.delete")}
-                </div>
-              </CustomMenu.MenuItem>
-            )}
-          </CustomMenu>
+                  ),
+                customContent: (
+                  <div className="flex items-center gap-2 text-danger-secondary">
+                    <CloseCircleFilledIcon width={14} height={14} />
+                    {t("inbox_issue.actions.decline")}
+                  </div>
+                ),
+              },
+              {
+                key: "delete",
+                shouldRender: canDelete && !isAcceptedOrDeclined,
+                action: () => setDeleteIssueModal(true),
+                customContent: (
+                  <div className="flex items-center gap-2 text-danger-primary">
+                    <TrashIcon height={14} width={14} strokeWidth={2} />
+                    {t("inbox_issue.actions.delete")}
+                  </div>
+                ),
+              },
+            ]}
+          />
         </div>
       </div>
     </Header>

plane-src/apps/web/core/components/project/dropdowns/filters/member-list.tsx

@@ -8,13 +8,11 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Button } from "@plane/propel/button";
 import { ChevronDownIcon } from "@plane/propel/icons";
 import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
 // plane ui
-import { CustomMenu } from "@plane/ui";
 // components
-import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+import { FilterHeader, FilterOption, FiltersDropdown } from "@/components/issues/issue-layouts/filters";
 
 interface IRoleOption {
   value: string;
@@ -101,13 +99,11 @@ export const MemberListFiltersDropdown = observer(function MemberListFiltersDrop
   const { t } = useTranslation();
 
   return (
-    <CustomMenu
-      customButton={
-        <div className="relative">
-          <Button variant="ghost" size="lg" className="nodedc-settings-secondary-button flex items-center gap-2">
+    <FiltersDropdown
+      menuButton={
+        <div className="nodedc-settings-secondary-button relative flex items-center gap-2">
             <span>{t("filters")}</span>
             <ChevronDownIcon className="h-3 w-3" />
-          </Button>
           {appliedFiltersCount > 0 && (
             <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-accent-primary" />
           )}
@@ -115,7 +111,9 @@ export const MemberListFiltersDropdown = observer(function MemberListFiltersDrop
       }
       placement="bottom-start"
     >
-      <MemberListFilters appliedFilters={appliedFilters} handleUpdate={handleUpdate} memberType={memberType} />
-    </CustomMenu>
+      <div className="vertical-scrollbar relative h-full w-full overflow-y-auto px-2.5 py-2">
+        <MemberListFilters appliedFilters={appliedFilters} handleUpdate={handleUpdate} memberType={memberType} />
+      </div>
+    </FiltersDropdown>
   );
 });