snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/issues/header.tsx

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { Circle } from "lucide-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel, SPACE_BASE_PATH, SPACE_BASE_URL } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { NewTabOutline, WorkItemsOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { EIssuesStoreType } from "@plane/types";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { CountChip } from "@/components/common/count-chip";
+// constants
+import { HeaderFilters } from "@/components/issues/filters";
+// helpers
+// hooks
+import { useCommandPalette } from "@/hooks/store/use-command-palette";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web imports
+import { CommonProjectBreadcrumbs } from "@/components/breadcrumbs/common";
+
+export const IssuesHeader = observer(function IssuesHeader() {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const {
+    issues: { getGroupIssueCount },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  // i18n
+  const { t } = useTranslation();
+
+  const { currentProjectDetails, loader } = useProject();
+
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
+  const { isMobile } = usePlatformOS();
+
+  const SPACE_APP_URL =
+    (SPACE_BASE_URL.trim() === "" && typeof window !== "undefined" ? window.location.origin : SPACE_BASE_URL) +
+    SPACE_BASE_PATH;
+  const publishedURL = `${SPACE_APP_URL}/issues/${currentProjectDetails?.anchor}`;
+
+  const issuesCount = getGroupIssueCount(undefined, undefined, false);
+  const canUserCreateIssue = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div className="flex items-center gap-2.5">
+          <Breadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"} className="flex-grow-0">
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Work Items"
+                  href={`/${workspaceSlug}/projects/${projectId}/issues/`}
+                  icon={<WorkItemsOutline className="h-4 w-4 text-tertiary" />}
+                  isLast
+                />
+              }
+              isLast
+            />
+          </Breadcrumbs>
+          {issuesCount && issuesCount > 0 ? (
+            <Tooltip
+              label={`There are ${issuesCount} ${issuesCount > 1 ? "work items" : "work item"} in this project`}
+              layout="stacked"
+              side="bottom"
+              disabled={isMobile}
+            >
+              <CountChip count={issuesCount} />
+            </Tooltip>
+          ) : null}
+        </div>
+        {currentProjectDetails?.anchor ? (
+          <a
+            href={publishedURL}
+            className="group flex items-center gap-1.5 rounded-sm bg-accent-primary/10 px-2.5 py-1 text-11 font-medium text-accent-primary"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Circle className="h-1.5 w-1.5 fill-accent-primary" strokeWidth={2} />
+            {t("workspace_projects.network.public.title")}
+            <NewTabOutline className="hidden h-3 w-3 group-hover:block" />
+          </a>
+        ) : (
+          <></>
+        )}
+      </Header.LeftItem>
+      <Header.RightItem>
+        <div className="hidden gap-2 md:flex">
+          <HeaderFilters
+            projectId={projectId}
+            currentProjectDetails={currentProjectDetails}
+            workspaceSlug={workspaceSlug}
+            canUserCreateIssue={canUserCreateIssue}
+          />
+        </div>
+        {canUserCreateIssue && (
+          <Button
+            variant="primary"
+            size="lg"
+            onClick={() => {
+              toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+            }}
+          >
+            <div className="block sm:hidden">{t("issue.label", { count: 1 })}</div>
+            <div className="hidden sm:block">{t("issue.add.label")}</div>
+          </Button>
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});