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

apps/space/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 { Circle } from "lucide-react";
+// types
+import type { TIssueGroupByOptions } from "@plane/types";
+
+interface IHeaderGroupByCard {
+  groupBy: TIssueGroupByOptions | undefined;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+}
+
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
+  const { icon, title, count } = props;
+
+  return (
+    <>
+      <div className="relative flex w-full shrink-0 flex-row items-center gap-2 p-1.5">
+        <div className="flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-xs">
+          {icon ? icon : <Circle width={14} strokeWidth={2} />}
+        </div>
+        <div className="relative flex w-full flex-row items-center gap-1 overflow-hidden">
+          <div className="line-clamp-1 inline-block truncate overflow-hidden font-medium text-primary">{title}</div>
+          <div className="shrink-0 pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
+        </div>
+      </div>
+    </>
+  );
+});

apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 { Circle } from "lucide-react";
+import { ChevronDownOutline, ChevronUpOutline } from "@makeplane/propel/icons";
+// mobx
+
+interface IHeaderSubGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+}
+
+export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props: IHeaderSubGroupByCard) {
+  const { icon, title, count, isExpanded, toggleExpanded } = props;
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 cursor-pointer flex-row items-center gap-2 rounded-xs p-1.5`}
+      onClick={() => toggleExpanded()}
+    >
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
+        {isExpanded ? <ChevronUpOutline width={14} height={14} /> : <ChevronDownOutline width={14} height={14} />}
+      </div>
+
+      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className="flex flex-shrink-0 items-center gap-1 text-13">
+        <div className="line-clamp-1 text-primary">{title}</div>
+        <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
+      </div>
+    </div>
+  );
+});