feat: init

apps/web/ce/components/breadcrumbs/common.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { FC } from "react";
+// plane imports
+import type { EProjectFeatureKey } from "@plane/constants";
+// local components
+import { ProjectBreadcrumb } from "./project";
+import { ProjectFeatureBreadcrumb } from "./project-feature";
+
+type TCommonProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  featureKey?: EProjectFeatureKey;
+  isLast?: boolean;
+};
+
+export const CommonProjectBreadcrumbs: FC<TCommonProjectBreadcrumbProps> = (props) => {
+  const { workspaceSlug, projectId, featureKey, isLast = false } = props;
+  return (
+    <>
+      <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />
+      {featureKey && (
+        <ProjectFeatureBreadcrumb
+          workspaceSlug={workspaceSlug?.toString()}
+          projectId={projectId?.toString()}
+          featureKey={featureKey}
+          isLast={isLast}
+        />
+      )}
+    </>
+  );
+};

apps/web/ce/components/breadcrumbs/project-feature.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import type { FC } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EProjectFeatureKey } from "@plane/constants";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { BreadcrumbNavigationDropdown, Breadcrumbs } from "@plane/ui";
+// components
+import { SwitcherLabel } from "@/components/common/switcher-label";
+import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+// local imports
+import { getProjectFeatureNavigation } from "../projects/navigation/helper";
+
+type TProjectFeatureBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  featureKey: EProjectFeatureKey;
+  isLast?: boolean;
+  additionalNavigationItems?: TNavigationItem[];
+};
+
+export const ProjectFeatureBreadcrumb = observer((props: TProjectFeatureBreadcrumbProps) => {
+  const { workspaceSlug, projectId, featureKey, isLast = false, additionalNavigationItems } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { getPartialProjectById } = useProject();
+  // derived values
+  const project = getPartialProjectById(projectId);
+
+  if (!project) return null;
+
+  const navigationItems = getProjectFeatureNavigation(workspaceSlug, projectId, project);
+
+  // if additional navigation items are provided, add them to the navigation items
+  const allNavigationItems = [...(additionalNavigationItems || []), ...navigationItems];
+
+  return (
+    <>
+      <Breadcrumbs.Item
+        component={
+          <BreadcrumbNavigationDropdown
+            selectedItemKey={featureKey}
+            navigationItems={allNavigationItems
+              .filter((item) => item.shouldRender)
+              .map((item) => ({
+                key: item.key,
+                title: item.name,
+                customContent: <SwitcherLabel name={item.name} LabelIcon={item.icon as FC<ISvgIcons>} />,
+                action: () => router.push(item.href),
+                icon: item.icon as FC<ISvgIcons>,
+              }))}
+            handleOnClick={() => {
+              router.push(
+                `/${workspaceSlug}/projects/${projectId}/${featureKey === EProjectFeatureKey.WORK_ITEMS ? "issues" : featureKey}/`
+              );
+            }}
+            isLast={isLast}
+          />
+        }
+        showSeparator={false}
+        isLast={isLast}
+      />
+    </>
+  );
+});

apps/web/ce/components/breadcrumbs/project.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { ProjectIcon } from "@plane/propel/icons";
+// plane imports
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
+// components
+import { Logo } from "@/components/common/logo";
+import { SwitcherLabel } from "@/components/common/switcher-label";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+import type { TProject } from "@/plane-web/types";
+
+type TProjectBreadcrumbProps = {
+  workspaceSlug: string;
+  projectId: string;
+  handleOnClick?: () => void;
+};
+
+export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
+  const { workspaceSlug, projectId, handleOnClick } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { joinedProjectIds, getPartialProjectById } = useProject();
+  const currentProjectDetails = getPartialProjectById(projectId);
+
+  // store hooks
+
+  if (!currentProjectDetails) return null;
+
+  // derived values
+  const switcherOptions = joinedProjectIds
+    .map((projectId) => {
+      const project = getPartialProjectById(projectId);
+      return {
+        value: projectId,
+        query: project?.name,
+        content: (
+          <SwitcherLabel
+            name={project?.name}
+            logo_props={project?.logo_props}
+            LabelIcon={ProjectIcon}
+            type="material"
+          />
+        ),
+      };
+    })
+    .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
+
+  // helpers
+  const renderIcon = (projectDetails: TProject) => (
+    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+      <Logo logo={projectDetails.logo_props} size={14} />
+    </span>
+  );
+
+  return (
+    <>
+      <Breadcrumbs.Item
+        component={
+          <BreadcrumbNavigationSearchDropdown
+            selectedItem={currentProjectDetails.id}
+            navigationItems={switcherOptions}
+            onChange={(value: string) => {
+              router.push(`/${workspaceSlug}/projects/${value}/issues`);
+            }}
+            title={currentProjectDetails?.name}
+            icon={renderIcon(currentProjectDetails)}
+            handleOnClick={() => {
+              if (handleOnClick) handleOnClick();
+              else router.push(`/${workspaceSlug}/projects/${currentProjectDetails.id}/issues/`);
+            }}
+            shouldTruncate
+          />
+        }
+        showSeparator={false}
+      />
+    </>
+  );
+});