diff --git a/web/ce/constants/index.ts b/web/ce/constants/index.ts index 895c18c3dbe..1a86ad1e242 100644 --- a/web/ce/constants/index.ts +++ b/web/ce/constants/index.ts @@ -2,3 +2,4 @@ export * from "./ai"; export * from "./estimates"; export * from "./gantt-chart"; export * from "./project"; +export * from "./sidebar-favorites"; diff --git a/web/ce/constants/sidebar-favorites.ts b/web/ce/constants/sidebar-favorites.ts new file mode 100644 index 00000000000..9fa80e05f47 --- /dev/null +++ b/web/ce/constants/sidebar-favorites.ts @@ -0,0 +1,41 @@ +import { Briefcase, ContrastIcon, FileText, Layers, LucideIcon } from "lucide-react"; +// plane imports +import { IFavorite } from "@plane/types"; +import { DiceIcon, FavoriteFolderIcon, ISvgIcons } from "@plane/ui"; + +export const FAVORITE_ITEM_ICONS: Record | LucideIcon> = { + page: FileText, + project: Briefcase, + view: Layers, + module: DiceIcon, + cycle: ContrastIcon, + folder: FavoriteFolderIcon, +}; + +export const FAVORITE_ITEM_LINKS: { + [key: string]: { + itemLevel: "project" | "workspace"; + getLink: (favorite: IFavorite) => string; + }; +} = { + project: { + itemLevel: "project", + getLink: () => `issues`, + }, + cycle: { + itemLevel: "project", + getLink: (favorite) => `cycles/${favorite.entity_identifier}`, + }, + module: { + itemLevel: "project", + getLink: (favorite) => `modules/${favorite.entity_identifier}`, + }, + view: { + itemLevel: "project", + getLink: (favorite) => `views/${favorite.entity_identifier}`, + }, + page: { + itemLevel: "project", + getLink: (favorite) => `pages/${favorite.entity_identifier}`, + }, +}; diff --git a/web/ce/hooks/use-additional-favorite-item-details.ts b/web/ce/hooks/use-additional-favorite-item-details.ts new file mode 100644 index 00000000000..412f4a39a28 --- /dev/null +++ b/web/ce/hooks/use-additional-favorite-item-details.ts @@ -0,0 +1,26 @@ +// plane imports +import { IFavorite } from "@plane/types"; +// components +import { getFavoriteItemIcon } from "@/components/workspace/sidebar/favorites/favorite-items/common"; + +export const useAdditionalFavoriteItemDetails = () => { + const getAdditionalFavoriteItemDetails = (_workspaceSlug: string, favorite: IFavorite) => { + const { entity_type: favoriteItemEntityType } = favorite; + const favoriteItemName = favorite?.entity_data?.name || favorite?.name; + + let itemIcon; + let itemTitle; + + switch (favoriteItemEntityType) { + default: + itemTitle = favoriteItemName; + itemIcon = getFavoriteItemIcon(favoriteItemEntityType); + break; + } + return { itemIcon, itemTitle }; + }; + + return { + getAdditionalFavoriteItemDetails, + }; +}; diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx index e2f303afe78..670f9ba1164 100644 --- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx +++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx @@ -1,49 +1,45 @@ "use client"; -// lucide -import { Briefcase, FileText, Layers } from "lucide-react"; -// types + +import { FileText } from "lucide-react"; +// plane imports import { IFavorite, TLogoProps } from "@plane/types"; -// ui -import { ContrastIcon, DiceIcon, FavoriteFolderIcon } from "@plane/ui"; +// components import { Logo } from "@/components/common"; +// plane web constants +import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/plane-web/constants"; -const iconClassName = `flex-shrink-0 size-4 stroke-[1.5] m-auto`; +export const getFavoriteItemIcon = (type: string, logo?: TLogoProps | undefined) => { + const Icon = FAVORITE_ITEM_ICONS[type] || FileText; -export const FAVORITE_ITEM_ICON: Record = { - page: , - project: , - view: , - module: , - cycle: , - folder: , + return ( + <> +
+ +
+
+ {logo?.in_use ? ( + + ) : ( + + )} +
+ + ); }; -export const getFavoriteItemIcon = (type: string, logo?: TLogoProps | undefined) => ( - <> -
- {FAVORITE_ITEM_ICON[type] || } -
-
- {logo?.in_use ? ( - - ) : ( - FAVORITE_ITEM_ICON[type] || - )} -
- -); +export const generateFavoriteItemLink = (workspaceSlug: string, favorite: IFavorite) => { + const entityLinkDetails = FAVORITE_ITEM_LINKS[favorite.entity_type]; -const entityPaths: Record = { - project: "issues", - cycle: "cycles", - module: "modules", - view: "views", - page: "pages", -}; + if (!entityLinkDetails) { + console.error(`Unrecognized favorite entity type: ${favorite.entity_type}`); + return `/${workspaceSlug}`; + } -export const generateFavoriteItemLink = (workspaceSlug: string, favorite: IFavorite) => { - const entityPath = entityPaths[favorite.entity_type]; - return entityPath - ? `/${workspaceSlug}/projects/${favorite.project_id}/${entityPath}/${entityPath === "issues" ? "" : favorite.entity_identifier || ""}` - : `/${workspaceSlug}`; + if (entityLinkDetails.itemLevel === "workspace") { + return `/${workspaceSlug}/${entityLinkDetails.getLink(favorite)}`; + } else if (entityLinkDetails.itemLevel === "project") { + return `/${workspaceSlug}/projects/${favorite.project_id}/${entityLinkDetails.getLink(favorite)}`; + } else { + return `/${workspaceSlug}`; + } }; diff --git a/web/core/hooks/use-favorite-item-details.tsx b/web/core/hooks/use-favorite-item-details.tsx index b873ad07b57..343e143ed88 100644 --- a/web/core/hooks/use-favorite-item-details.tsx +++ b/web/core/hooks/use-favorite-item-details.tsx @@ -1,4 +1,4 @@ -// plane types +// plane imports import { IFavorite } from "@plane/types"; // components import { @@ -11,19 +11,22 @@ import { getPageName } from "@/helpers/page.helper"; import { useProject, useProjectView, useCycle, useModule } from "@/hooks/store"; // plane web hooks import { EPageStoreType, usePage } from "@/plane-web/hooks/store"; +import { useAdditionalFavoriteItemDetails } from "@/plane-web/hooks/use-additional-favorite-item-details"; export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorite) => { - const favoriteItemId = favorite?.entity_identifier; - const favoriteItemLogoProps = favorite?.entity_data?.logo_props; + const { + entity_identifier: favoriteItemId, + entity_data: { logo_props: favoriteItemLogoProps }, + entity_type: favoriteItemEntityType, + } = favorite; const favoriteItemName = favorite?.entity_data?.name || favorite?.name; - const favoriteItemEntityType = favorite?.entity_type; - // store hooks const { getViewById } = useProjectView(); const { getProjectById } = useProject(); const { getCycleById } = useCycle(); const { getModuleById } = useModule(); - + // additional details + const { getAdditionalFavoriteItemDetails } = useAdditionalFavoriteItemDetails(); // derived values const pageDetail = usePage({ pageId: favoriteItemId ?? "", @@ -32,7 +35,6 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit const viewDetails = getViewById(favoriteItemId ?? ""); const cycleDetail = getCycleById(favoriteItemId ?? ""); const moduleDetail = getModuleById(favoriteItemId ?? ""); - const currentProjectDetails = getProjectById(favorite.project_id ?? ""); let itemIcon; @@ -60,10 +62,12 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit itemTitle = moduleDetail?.name || favoriteItemName; itemIcon = getFavoriteItemIcon("module"); break; - default: - itemTitle = favoriteItemName; - itemIcon = getFavoriteItemIcon(favoriteItemEntityType); + default: { + const additionalDetails = getAdditionalFavoriteItemDetails(workspaceSlug, favorite); + itemTitle = additionalDetails.itemTitle; + itemIcon = additionalDetails.itemIcon; break; + } } return { itemIcon, itemTitle, itemLink }; diff --git a/web/ee/constants/index.ts b/web/ee/constants/index.ts new file mode 100644 index 00000000000..049f831bdf2 --- /dev/null +++ b/web/ee/constants/index.ts @@ -0,0 +1 @@ +export * from "./sidebar-favorites"; diff --git a/web/ee/constants/sidebar-favorites.ts b/web/ee/constants/sidebar-favorites.ts new file mode 100644 index 00000000000..540c918e739 --- /dev/null +++ b/web/ee/constants/sidebar-favorites.ts @@ -0,0 +1 @@ +export * from "ce/constants/sidebar-favorites"; diff --git a/web/ee/hooks/use-additional-favorite-item-details.ts b/web/ee/hooks/use-additional-favorite-item-details.ts new file mode 100644 index 00000000000..c3e863cea06 --- /dev/null +++ b/web/ee/hooks/use-additional-favorite-item-details.ts @@ -0,0 +1 @@ +export * from "ce/hooks/use-additional-favorite-item-details";