binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: favorites sidebar implementation (#6716)

Browse source 
* chore: code separation for favorites

* chore: error handling
This commit is contained in:
Aaryan Khandelwal 2025-03-07 13:17:13 +05:30 • committed by GitHub
parent 40c0bbcfb4
commit cb344ea1f5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 121 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

76
web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
View file

@ -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<string, JSX.Element> = {
page: <FileText className={iconClassName} />,
project: <Briefcase className={iconClassName} />,
view: <Layers className={iconClassName} />,
module: <DiceIcon className={iconClassName} />,
cycle: <ContrastIcon className={iconClassName} />,
folder: <FavoriteFolderIcon className={iconClassName} />,
};
export const getFavoriteItemIcon = (type: string, logo?: TLogoProps | undefined) => (
<>
<div className="hidden group-hover:flex items-center justify-center size-5">
{FAVORITE_ITEM_ICON[type] || <FileText className={iconClassName} />}
</div>
<div className="flex items-center justify-center size-5 group-hover:hidden">
{logo?.in_use ? (
<Logo logo={logo} size={16} type={type === "project" ? "material" : "lucide"} />
) : (
FAVORITE_ITEM_ICON[type] || <FileText className={iconClassName} />
)}
</div>
</>
);
const entityPaths: Record<string, string> = {
project: "issues",
cycle: "cycles",
module: "modules",
view: "views",
page: "pages",
return (
<>
<div className="hidden group-hover:flex items-center justify-center size-5">
<Icon className="flex-shrink-0 size-4 stroke-[1.5] m-auto" />
</div>
<div className="flex items-center justify-center size-5 group-hover:hidden">
{logo?.in_use ? (
<Logo logo={logo} size={16} type={type === "project" ? "material" : "lucide"} />
) : (
<Icon className="flex-shrink-0 size-4 stroke-[1.5] m-auto" />
)}
</div>
</>
);
};
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}`;
const entityLinkDetails = FAVORITE_ITEM_LINKS[favorite.entity_type];
if (!entityLinkDetails) {
console.error(`Unrecognized favorite entity type: ${favorite.entity_type}`);
return `/${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}`;
}
};