From 5cf2c2130a41a57ff919388c80fb1bb2e5aaed7a Mon Sep 17 00:00:00 2001 From: DCCONSTRUCTIONS Date: Wed, 22 Apr 2026 13:14:18 +0300 Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?= =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?= =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=BC?= =?UTF-8?q?=D0=B8=D0=B3=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20workspace=20sideba?= =?UTF-8?q?r=20=D0=B8=20views=20action-menu=20=D0=BD=D0=B0=20=D0=BE=D0=B1?= =?UTF-8?q?=D1=89=D0=B8=D0=B9=20=D0=BA=D0=B0=D0=BD=D0=BE=D0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navigation/project-actions-menu.tsx | 139 ++++++++------- .../project/settings/member-columns.tsx | 36 ++-- .../settings/invitations-list-item.tsx | 40 +---- .../sidebar/favorites/favorite-folder.tsx | 58 +++---- .../common/favorite-item-quick-action.tsx | 42 ++--- .../sidebar/favorites/favorite-items/root.tsx | 10 +- .../workspace/sidebar/help-section/root.tsx | 151 +++++++++------- .../workspace/sidebar/projects-list-item.tsx | 49 +++--- .../workspace/sidebar/user-menu-root.tsx | 162 +++++++++--------- .../sidebar/workspace-menu-header.tsx | 58 +++---- .../views/default-view-quick-action.tsx | 48 +----- .../workspace/views/quick-action.tsx | 48 +----- .../workspace/views/view-list-item.tsx | 49 +++--- 13 files changed, 396 insertions(+), 494 deletions(-) diff --git a/plane-src/apps/web/core/components/navigation/project-actions-menu.tsx b/plane-src/apps/web/core/components/navigation/project-actions-menu.tsx index b097dc5..df01cd5 100644 --- a/plane-src/apps/web/core/components/navigation/project-actions-menu.tsx +++ b/plane-src/apps/web/core/components/navigation/project-actions-menu.tsx @@ -4,14 +4,15 @@ * See the LICENSE file for details. */ -import { useState, useRef } from "react"; +import { useMemo } from "react"; import { useNavigate } from "react-router"; import { LogOut, MoreHorizontal, Settings, Share2, ArchiveIcon } from "lucide-react"; // plane imports import { MEMBER_TRACKER_ELEMENTS } from "@plane/constants"; import { useTranslation } from "@plane/i18n"; import { LinkIcon } from "@plane/propel/icons"; -import { CustomMenu } from "@plane/ui"; +import type { TContextMenuItem } from "@plane/ui"; +import { ActionDropdown } from "@plane/ui"; type Props = { workspaceSlug: string; @@ -34,85 +35,81 @@ export function ProjectActionsMenu({ onLeaveProject, onPublishModal, }: Props) { - // states - const [isMenuActive, setIsMenuActive] = useState(false); // translation const { t } = useTranslation(); - // refs - const actionSectionRef = useRef(null); // router const navigate = useNavigate(); + const menuItems = useMemo( + () => [ + ...(isAdmin + ? [ + { + key: "publish", + title: t("publish_project"), + icon: Share2, + action: onPublishModal, + }, + ] + : []), + { + key: "copy-link", + title: t("copy_link"), + icon: LinkIcon, + action: onCopyText, + }, + ...(isAuthorized + ? [ + { + key: "archives", + title: t("archives"), + icon: ArchiveIcon, + action: () => { + navigate(`/${workspaceSlug}/projects/${project?.id}/archives/issues`); + }, + }, + ] + : []), + { + key: "settings", + title: t("settings"), + icon: Settings, + action: () => { + navigate(`/${workspaceSlug}/settings/projects/${project?.id}`); + }, + }, + ...(!isAuthorized + ? [ + { + key: "leave-project", + action: onLeaveProject, + customContent: ( +
+ + {t("leave_project")} +
+ ), + }, + ] + : []), + ], + [isAdmin, isAuthorized, navigate, onCopyText, onLeaveProject, onPublishModal, project?.id, t, workspaceSlug] + ); + return ( - setIsMenuActive(!isMenuActive)} - > + } className="flex-shrink-0" - customButtonClassName="grid place-items-center" + buttonClassName="grid place-items-center" placement="bottom-start" - ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")} - useCaptureForOutsideClick - closeOnSelect - onMenuClose={() => setIsMenuActive(false)} - > - {/* Publish project settings */} - {isAdmin && ( - -
-
- -
-
{t("publish_project")}
-
- - )} - - - - {t("copy_link")} - - - {isAuthorized && ( - { - navigate(`/${workspaceSlug}/projects/${project?.id}/archives/issues`); - }} - > -
- - {t("archives")} -
- - )} - { - navigate(`/${workspaceSlug}/settings/projects/${project?.id}`); - }} - > -
- - {t("settings")} -
- - {/* Leave project */} - {!isAuthorized && ( - -
- - {t("leave_project")} -
- - )} - + items={menuItems} + /> ); } diff --git a/plane-src/apps/web/core/components/project/settings/member-columns.tsx b/plane-src/apps/web/core/components/project/settings/member-columns.tsx index 7806e64..6af48e2 100644 --- a/plane-src/apps/web/core/components/project/settings/member-columns.tsx +++ b/plane-src/apps/web/core/components/project/settings/member-columns.tsx @@ -13,7 +13,7 @@ import { Disclosure } from "@headlessui/react"; import { ROLE, EUserPermissions, MEMBER_TRACKER_ELEMENTS } from "@plane/constants"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { EUserProjectRoles, IUser, IWorkspaceMember, TProjectMembership } from "@plane/types"; -import { CustomMenu, CustomSelect } from "@plane/ui"; +import { ActionDropdown, CustomSelect } from "@plane/ui"; import { getFileURL } from "@plane/utils"; // hooks import { useMember } from "@/hooks/store/use-member"; @@ -69,23 +69,25 @@ export function NameColumn(props: NameProps) { {first_name} {last_name} {(isAdmin || id === currentUser?.id) && ( - - -
setRemoveMemberModal(rowData)} - > - - {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "} -
- - + buttonClassName="p-0.5 opacity-0 transition-opacity group-hover:opacity-100" + items={[ + { + key: "remove-member", + action: () => setRemoveMemberModal(rowData), + customContent: ( +
+ + {rowData.member?.id === currentUser?.id ? "Leave " : "Remove "} +
+ ), + }, + ]} + /> )} diff --git a/plane-src/apps/web/core/components/workspace/settings/invitations-list-item.tsx b/plane-src/apps/web/core/components/workspace/settings/invitations-list-item.tsx index cf0db45..4bce4d6 100644 --- a/plane-src/apps/web/core/components/workspace/settings/invitations-list-item.tsx +++ b/plane-src/apps/web/core/components/workspace/settings/invitations-list-item.tsx @@ -13,8 +13,8 @@ import { useTranslation } from "@plane/i18n"; import { LinkIcon, TrashIcon, ChevronDownIcon } from "@plane/propel/icons"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { TContextMenuItem } from "@plane/ui"; -import { CustomSelect, CustomMenu } from "@plane/ui"; -import { cn, copyTextToClipboard } from "@plane/utils"; +import { ActionDropdown, CustomSelect } from "@plane/ui"; +import { copyTextToClipboard } from "@plane/utils"; // components import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-workspace-member-remove"; // hooks @@ -185,41 +185,7 @@ export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitatio })} {isAdmin && ( - - {MENU_ITEMS.map((item) => { - if (item.shouldRender === false) return null; - return ( - { - item.action(); - }} - className={cn( - "flex items-center gap-2", - { - "text-placeholder": item.disabled, - }, - item.className - )} - disabled={item.disabled} - > - {item.icon && } -
-
{item.title}
- {item.description && ( -

- {item.description} -

- )} -
- - ); - })} - + )} diff --git a/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx index 015f6cb..76616f4 100644 --- a/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx +++ b/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx @@ -22,12 +22,11 @@ import { createRoot } from "react-dom/client"; import { Star, MoreHorizontal, GripVertical } from "lucide-react"; import { Disclosure, Transition } from "@headlessui/react"; // plane imports -import { useOutsideClickDetector } from "@plane/hooks"; import { useTranslation } from "@plane/i18n"; import { DraftIcon, FavoriteFolderIcon, ChevronRightIcon } from "@plane/propel/icons"; import { Tooltip } from "@plane/propel/tooltip"; import type { IFavorite, InstructionType } from "@plane/types"; -import { CustomMenu, DropIndicator, DragHandle } from "@plane/ui"; +import { ActionDropdown, DropIndicator, DragHandle } from "@plane/ui"; // helpers import { cn } from "@plane/utils"; // hooks @@ -58,7 +57,6 @@ export function FavoriteFolder(props: Props) { const [folderToRename, setFolderToRename] = useState(null); const [instruction, setInstruction] = useState(undefined); // refs - const actionSectionRef = useRef(null); const elementRef = useRef(null); // translation const { t } = useTranslation(); @@ -135,9 +133,6 @@ export function FavoriteFolder(props: Props) { ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isDragging, favorite.id, isLastChild, favorite.id]); - - useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false)); - return folderToRename ? ( - + } - menuButtonOnClick={() => setIsMenuActive(!isMenuActive)} className={cn( "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100", { "pointer-events-auto opacity-100": isMenuActive, } )} - customButtonClassName="grid place-items-center" + buttonClassName="grid place-items-center" placement="bottom-start" - ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")} - > - handleRemoveFromFavorites(favorite)}> - - - Remove from favorites - - - setFolderToRename(favorite.id)}> -
- - Rename Folder -
- - + onOpenChange={setIsMenuActive} + items={[ + { + key: "remove-favorite-folder", + action: () => handleRemoveFromFavorites(favorite), + customContent: ( + + + Remove from favorites + + ), + }, + { + key: "rename-favorite-folder", + action: () => setFolderToRename(favorite.id), + customContent: ( +
+ + Rename Folder +
+ ), + }, + ]} + /> ; isMenuActive: boolean; favorite: IFavorite; - onChange: (value: boolean) => void; + onOpenChange: (value: boolean) => void; handleRemoveFromFavorites: (favorite: IFavorite) => void; }; export const FavoriteItemQuickAction = observer(function FavoriteItemQuickAction(props: Props) { - const { ref, isMenuActive, onChange, handleRemoveFromFavorites, favorite } = props; - // translation - const { t } = useTranslation(); + const { isMenuActive, onOpenChange, handleRemoveFromFavorites, favorite } = props; return ( - + } - menuButtonOnClick={() => onChange(!isMenuActive)} className={cn( "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100", { "pointer-events-auto opacity-100": isMenuActive, } )} - customButtonClassName="grid place-items-center" + buttonClassName="grid place-items-center" placement="bottom-start" - ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")} - > - handleRemoveFromFavorites(favorite)}> - - - Remove from favorites - - - + onOpenChange={onOpenChange} + items={[ + { + key: "remove-favorite", + action: () => handleRemoveFromFavorites(favorite), + customContent: ( + + + Remove from favorites + + ), + }, + ]} + /> ); }); diff --git a/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx index 1992cd0..3b4d30c 100644 --- a/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx +++ b/plane-src/apps/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx @@ -18,7 +18,6 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree import { observer } from "mobx-react"; import { createRoot } from "react-dom/client"; // plane imports -import { useOutsideClickDetector } from "@plane/hooks"; import type { IFavorite, InstructionType } from "@plane/types"; import { DropIndicator } from "@plane/ui"; // hooks @@ -48,9 +47,6 @@ export const FavoriteRoot = observer(function FavoriteRoot(props: Props) { //ref const elementRef = useRef(null); - const actionSectionRef = useRef(null); - - const handleQuickAction = (value: boolean) => setIsMenuActive(value); // drag and drop useEffect(() => { @@ -121,9 +117,6 @@ export const FavoriteRoot = observer(function FavoriteRoot(props: Props) { ); // eslint-disable-next-line react-hooks/exhaustive-deps }, [elementRef?.current, isDragging, isLastChild, favorite.id]); - - useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false)); - return ( <> {isDragging && } @@ -132,9 +125,8 @@ export const FavoriteRoot = observer(function FavoriteRoot(props: Props) { diff --git a/plane-src/apps/web/core/components/workspace/sidebar/help-section/root.tsx b/plane-src/apps/web/core/components/workspace/sidebar/help-section/root.tsx index dea70d9..6dec46d 100644 --- a/plane-src/apps/web/core/components/workspace/sidebar/help-section/root.tsx +++ b/plane-src/apps/web/core/components/workspace/sidebar/help-section/root.tsx @@ -10,10 +10,9 @@ import { HelpCircle, MessagesSquare, User } from "lucide-react"; import { useTranslation } from "@plane/i18n"; import { PageIcon } from "@plane/propel/icons"; // ui -import { CustomMenu } from "@plane/ui"; +import { ActionDropdown } from "@plane/ui"; // components import { ProductUpdatesModal } from "@/components/global"; -import { AppSidebarItem } from "@/components/sidebar/sidebar-item"; // hooks import { usePowerK } from "@/hooks/store/use-power-k"; import { useChatSupport } from "@/hooks/use-chat-support"; @@ -33,75 +32,99 @@ export const HelpMenuRoot = observer(function HelpMenuRoot() { <> setProductUpdatesModalOpen(false)} /> - , - isActive: isNeedHelpOpen, - }} - /> + +
+ +
+ } - // customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none" - menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)} - onMenuClose={() => setIsNeedHelpOpen(false)} placement="bottom-end" - maxHeight="lg" - closeOnSelect - > - window.open("https://go.plane.so/p-docs", "_blank")}> -
- - {t("documentation")} -
- - {isChatSupportEnabled && ( - + menuClassName="w-64" + onOpenChange={setIsNeedHelpOpen} + items={[]} + menuContent={({ closeDropdown }) => ( + <> - + {isChatSupportEnabled && ( + + )} + +
+ + + +
+ +
+ )} - window.open("mailto:sales@plane.so", "_blank")}> -
- - {t("contact_sales")} -
- -
- - - - - - - window.open("https://forum.plane.so", "_blank", "noopener,noreferrer")}> -
- Forum -
- -
- -
- + /> ); }); diff --git a/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx index c19285d..5f71d6a 100644 --- a/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx +++ b/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx @@ -4,7 +4,7 @@ * See the LICENSE file for details. */ -import { useCallback, useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview"; @@ -24,7 +24,8 @@ import { Logo } from "@plane/propel/emoji-icon-picker"; import { LinkIcon, ArchiveIcon, ChevronRightIcon, WorkItemsIcon } from "@plane/propel/icons"; import { IconButton } from "@plane/propel/icon-button"; import { Tooltip } from "@plane/propel/tooltip"; -import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui"; +import type { TContextMenuItem } from "@plane/ui"; +import { ActionDropdown, DropIndicator, DragHandle, ControlLink } from "@plane/ui"; import { cn } from "@plane/utils"; // components import { DEFAULT_TAB_KEY, getTabUrl } from "@/components/navigation/tab-navigation-utils"; @@ -188,6 +189,21 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem : null, ].filter((item): item is TProjectActionItem => Boolean(item)); + const projectActionMenuItems = useMemo( + () => + projectActionItems.map((item) => ({ + key: item.key, + action: item.onClick, + customContent: ( +
+ {item.icon} + {item.label} +
+ ), + })), + [projectActionItems] + ); + useEffect(() => { const element = projectRef.current; const dragHandleElement = dragHandleRef.current; @@ -405,8 +421,8 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
{!renderInToolbarMenu && ( - @@ -417,34 +433,17 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem "pointer-events-auto opacity-100": isMenuActive, } )} - customButtonClassName={cn( + buttonClassName={cn( "grid size-7 place-items-center rounded-full text-placeholder transition-colors hover:bg-layer-transparent-hover", { "bg-layer-transparent-hover": isMenuActive, } )} placement="bottom-start" - menuItemsClassName={renderInToolbarMenu ? "z-[220]" : ""} portalElement={renderInToolbarMenu && typeof document !== "undefined" ? document.body : undefined} - ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")} - useCaptureForOutsideClick - closeOnSelect - menuButtonOnClick={() => setIsMenuActive((state) => !state)} - onMenuClose={() => setIsMenuActive(false)} - > - {projectActionItems.map((item) => ( - -
- {item.icon} - {item.label} -
- - ))} - + onOpenChange={setIsMenuActive} + items={projectActionMenuItems} + /> )} {isAccordionMode && ( + const renderMenuContent = (closeDropdown: () => void) => ( +
- + +
- + {isUserInstanceAdmin && ( - router.push(GOD_MODE_URL)} - className="bg-accent-primary/20 text-accent-primary hover:bg-accent-primary/30 hover:text-accent-secondary" + )} - +
); - if (isToolbarVariant) { - return ( - - - - - - -
- {menuContent} -
- - - ); - } - return ( - + buttonAsChild + button={ + isToolbarVariant ? ( + + ) : isSidebarUtilityVariant ? ( + ) : ( - - ), - isActive: isUserMenuOpen, - }} - /> + ) } - menuButtonOnClick={() => !isUserMenuOpen && setIsUserMenuOpen(true)} - onMenuClose={() => setIsUserMenuOpen(false)} placement="bottom-end" - maxHeight="2xl" - optionsClassName="w-72 p-3 flex flex-col gap-y-3" - closeOnSelect - > - {menuContent} - + menuClassName="w-72 p-3" + onOpenChange={setIsUserMenuOpen} + items={[]} + menuContent={({ closeDropdown }) => renderMenuContent(closeDropdown)} + /> ); }); diff --git a/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx index a84d752..2a13cd1 100644 --- a/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx +++ b/plane-src/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx @@ -4,18 +4,17 @@ * See the LICENSE file for details. */ -import { useState, useRef } from "react"; +import { useState } from "react"; import { observer } from "mobx-react"; import { useParams, useRouter } from "next/navigation"; import { MoreHorizontal, ArchiveIcon, Settings } from "lucide-react"; import { Disclosure } from "@headlessui/react"; // plane imports import { EUserPermissionsLevel } from "@plane/constants"; -import { useOutsideClickDetector } from "@plane/hooks"; import { useTranslation } from "@plane/i18n"; import { ChevronRightIcon } from "@plane/propel/icons"; import { EUserWorkspaceRoles } from "@plane/types"; -import { CustomMenu } from "@plane/ui"; +import { ActionDropdown } from "@plane/ui"; import { cn } from "@plane/utils"; // store hooks import { useUserPermissions } from "@/hooks/store/user"; @@ -31,16 +30,11 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu const { isWorkspaceMenuOpen, toggleWorkspaceMenu } = props; // state const [isMenuActive, setIsMenuActive] = useState(false); - // refs - const actionSectionRef = useRef(null); // hooks const { workspaceSlug } = useParams(); const router = useRouter(); const { allowPermissions } = useUserPermissions(); const { t } = useTranslation(); - - useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false)); - // TODO: fix types // eslint-disable-next-line @typescript-eslint/no-explicit-any const isAdmin = allowPermissions([EUserWorkspaceRoles.ADMIN] as any, EUserPermissionsLevel.WORKSPACE); @@ -54,15 +48,9 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu > {t("workspace")} - { - setIsMenuActive(!isMenuActive); - }} - > + } @@ -72,25 +60,25 @@ export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenu "pointer-events-auto opacity-100": isMenuActive, } )} - customButtonClassName="grid place-items-center" + buttonClassName="grid place-items-center" placement="bottom-start" - > - router.push(`/${workspaceSlug}/projects/archives`)}> -
- - {t("archives")} -
- - - {isAdmin && ( - router.push(`/${workspaceSlug}/settings`)}> -
- - {t("settings")} -
- - )} - + onOpenChange={setIsMenuActive} + items={[ + { + key: "archives", + title: t("archives"), + icon: ArchiveIcon, + action: () => router.push(`/${workspaceSlug}/projects/archives`), + }, + { + key: "settings", + title: t("settings"), + icon: Settings, + action: () => router.push(`/${workspaceSlug}/settings`), + shouldRender: isAdmin, + }, + ]} + /> - - {MENU_ITEMS.map((item) => { - if (item.shouldRender === false) return null; - return ( - { - item.action(); - }} - className={cn( - "flex items-center gap-2", - { - "text-placeholder": item.disabled, - }, - item.className - )} - disabled={item.disabled} - > - {item.icon && } -
-
{t(item.title || "")}
- {item.description && ( -

- {item.description} -

- )} -
- - ); - })} - + buttonClassName="flex size-[26px] items-center justify-center rounded-sm bg-layer-1/70" + items={MENU_ITEMS} + /> ); }); diff --git a/plane-src/apps/web/core/components/workspace/views/quick-action.tsx b/plane-src/apps/web/core/components/workspace/views/quick-action.tsx index 6e24f79..7702617 100644 --- a/plane-src/apps/web/core/components/workspace/views/quick-action.tsx +++ b/plane-src/apps/web/core/components/workspace/views/quick-action.tsx @@ -10,8 +10,8 @@ import { observer } from "mobx-react"; import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; import { TOAST_TYPE, setToast } from "@plane/propel/toast"; import type { IWorkspaceView } from "@plane/types"; -import { CustomMenu } from "@plane/ui"; -import { copyUrlToClipboard, cn } from "@plane/utils"; +import { ActionDropdown } from "@plane/ui"; +import { copyUrlToClipboard } from "@plane/utils"; // helpers import { useViewMenuItems } from "@/components/common/quick-actions-helper"; // hooks @@ -64,46 +64,12 @@ export const WorkspaceViewQuickActions = observer(function WorkspaceViewQuickAct <> setUpdateViewModal(false)} /> setDeleteViewModal(false)} /> - - {MENU_ITEMS.items.map((item) => { - if (item.shouldRender === false) return null; - return ( - { - item.action(); - }} - className={cn( - "flex items-center gap-2", - { - "text-placeholder": item.disabled, - }, - item.className - )} - disabled={item.disabled} - > - {item.icon && } -
-
{item.title}
- {item.description && ( -

- {item.description} -

- )} -
- - ); - })} - + buttonClassName="flex size-[26px] items-center justify-center rounded-sm bg-layer-1/70" + items={MENU_ITEMS.items} + /> ); }); diff --git a/plane-src/apps/web/core/components/workspace/views/view-list-item.tsx b/plane-src/apps/web/core/components/workspace/views/view-list-item.tsx index 02491e5..4eb4c0c 100644 --- a/plane-src/apps/web/core/components/workspace/views/view-list-item.tsx +++ b/plane-src/apps/web/core/components/workspace/views/view-list-item.tsx @@ -11,7 +11,8 @@ import { useParams } from "next/navigation"; // plane imports import { useTranslation } from "@plane/i18n"; import { EditIcon, TrashIcon } from "@plane/propel/icons"; -import { CustomMenu } from "@plane/ui"; +import type { TContextMenuItem } from "@plane/ui"; +import { ActionDropdown } from "@plane/ui"; import { truncateText } from "@plane/utils"; // hooks import { useGlobalView } from "@/hooks/store/use-global-view"; @@ -36,6 +37,25 @@ export const GlobalViewListItem = observer(function GlobalViewListItem(props: Pr if (!view) return null; + const menuItems: TContextMenuItem[] = [ + { + key: "edit", + title: t("common.actions.edit"), + icon: EditIcon, + action: () => { + setUpdateViewModal(true); + }, + }, + { + key: "delete", + title: t("common.actions.delete"), + icon: TrashIcon, + action: () => { + setDeleteViewModal(true); + }, + }, + ]; + return ( <> setUpdateViewModal(false)} /> @@ -52,28 +72,11 @@ export const GlobalViewListItem = observer(function GlobalViewListItem(props: Pr
- - { - setUpdateViewModal(true); - }} - > - - - {t("common.actions.edit")} - - - { - setDeleteViewModal(true); - }} - > - - - {t("common.actions.delete")} - - - +