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

apps/space/components/issues/issue-layouts/list/base-list-root.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+// types
+import type { IIssueDisplayProperties, TGroupedIssues } from "@plane/types";
+// constants
+// components
+import { IssueLayoutHOC } from "@/components/issues/issue-layouts/issue-layout-HOC";
+// hooks
+import { useIssue } from "@/hooks/store/use-issue";
+import { List } from "./default";
+
+type Props = {
+  anchor: string;
+};
+
+export const IssuesListLayoutRoot = observer(function IssuesListLayoutRoot(props: Props) {
+  const { anchor } = props;
+  // store hooks
+  const {
+    groupedIssueIds: storeGroupedIssueIds,
+    fetchNextPublicIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+  } = useIssue();
+
+  const groupedIssueIds = storeGroupedIssueIds as TGroupedIssues | undefined;
+  // auth
+  const displayProperties: IIssueDisplayProperties = useMemo(
+    () => ({
+      key: true,
+      state: true,
+      labels: true,
+      priority: true,
+      due_date: true,
+    }),
+    []
+  );
+
+  const loadMoreIssues = useCallback(
+    (groupId?: string) => {
+      fetchNextPublicIssues(anchor, groupId);
+    },
+    [anchor, fetchNextPublicIssues]
+  );
+
+  return (
+    <IssueLayoutHOC getGroupIssueCount={getGroupIssueCount} getIssueLoader={getIssueLoader}>
+      <div className="relative size-full">
+        <List
+          displayProperties={displayProperties}
+          groupBy={"state"}
+          groupedIssueIds={groupedIssueIds ?? {}}
+          loadMoreIssues={loadMoreIssues}
+          getGroupIssueCount={getGroupIssueCount}
+          getPaginationData={getPaginationData}
+          getIssueLoader={getIssueLoader}
+          showEmptyGroup
+        />
+      </div>
+    </IssueLayoutHOC>
+  );
+});

apps/space/components/issues/issue-layouts/list/block.tsx

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import { Link } from "react-router";
+import { useParams, useSearchParams } from "next/navigation";
+// plane types
+import { Tooltip } from "@plane/propel/tooltip";
+import type { IIssueDisplayProperties } from "@plane/types";
+// plane ui
+// plane utils
+import { cn } from "@plane/utils";
+// helpers
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+//
+import { IssueProperties } from "../properties/all-properties";
+
+interface IssueBlockProps {
+  issueId: string;
+  groupId: string;
+  displayProperties: IIssueDisplayProperties | undefined;
+}
+
+export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
+  const { anchor } = useParams();
+  const { issueId, displayProperties } = props;
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board");
+  // ref
+  const issueRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { project_details } = usePublish(anchor.toString());
+  const { getIsIssuePeeked, setPeekId, getIssueById } = useIssueDetails();
+
+  const handleIssuePeekOverview = () => {
+    setPeekId(issueId);
+  };
+
+  const { queryParam } = queryParamGenerator(board ? { board, peekId: issueId } : { peekId: issueId });
+
+  const issue = getIssueById(issueId);
+
+  if (!issue) return null;
+
+  const projectIdentifier = project_details?.identifier;
+
+  return (
+    <div
+      ref={issueRef}
+      className={cn(
+        "group/list-block relative flex min-h-11 flex-col gap-3 border border-transparent border-b-subtle p-3 pl-1.5 text-13 transition-colors hover:bg-layer-transparent-hover md:flex-row md:items-center",
+        {
+          "border-accent-strong!": getIsIssuePeeked(issue.id),
+          "last:border-b-transparent": !getIsIssuePeeked(issue.id),
+        }
+      )}
+    >
+      <div className="flex w-full truncate">
+        <div className="flex grow items-center gap-0.5 truncate">
+          <div className="flex items-center gap-1">
+            {displayProperties && displayProperties?.key && (
+              <div className="shrink-0 px-4 text-11 font-medium text-tertiary">
+                {projectIdentifier}-{issue.sequence_id}
+              </div>
+            )}
+          </div>
+
+          <Link
+            id={`issue-${issue.id}`}
+            to={`?${queryParam}`}
+            onClick={handleIssuePeekOverview}
+            className="w-full cursor-pointer truncate text-13 text-primary"
+          >
+            <Tooltip tooltipContent={issue.name} position="top-start">
+              <p className="truncate">{issue.name}</p>
+            </Tooltip>
+          </Link>
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <IssueProperties
+          className="relative flex flex-wrap items-center gap-2 whitespace-nowrap md:shrink-0 md:grow"
+          issue={issue}
+          displayProperties={displayProperties}
+        />
+      </div>
+    </div>
+  );
+});

apps/space/components/issues/issue-layouts/list/blocks-list.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+// types
+import type { IIssueDisplayProperties } from "@plane/types";
+import { IssueBlock } from "./block";
+
+interface Props {
+  issueIds: string[] | undefined;
+  groupId: string;
+  displayProperties?: IIssueDisplayProperties;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+}
+
+export function IssueBlocksList(props: Props) {
+  const { issueIds = [], groupId, displayProperties } = props;
+
+  return (
+    <div className="relative size-full">
+      {issueIds?.map((issueId) => (
+        <IssueBlock key={issueId} issueId={issueId} displayProperties={displayProperties} groupId={groupId} />
+      ))}
+    </div>
+  );
+}

apps/space/components/issues/issue-layouts/list/default.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useRef } from "react";
+import { observer } from "mobx-react";
+// types
+import type {
+  GroupByColumnTypes,
+  TGroupedIssues,
+  IIssueDisplayProperties,
+  TIssueGroupByOptions,
+  TPaginationData,
+  TLoader,
+} from "@plane/types";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useLabel } from "@/hooks/store/use-label";
+import { useMember } from "@/hooks/store/use-member";
+import { useModule } from "@/hooks/store/use-module";
+import { useStates } from "@/hooks/store/use-state";
+//
+import { getGroupByColumns } from "../utils";
+import { ListGroup } from "./list-group";
+
+export interface IList {
+  groupedIssueIds: TGroupedIssues;
+  groupBy: TIssueGroupByOptions | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+  showEmptyGroup?: boolean;
+  loadMoreIssues: (groupId?: string) => void;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
+}
+
+export const List = observer(function List(props: IList) {
+  const {
+    groupedIssueIds,
+    groupBy,
+    displayProperties,
+    showEmptyGroup,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const member = useMember();
+  const label = useLabel();
+  const cycle = useCycle();
+  const modules = useModule();
+  const state = useStates();
+
+  const groupList = getGroupByColumns(groupBy as GroupByColumnTypes, cycle, modules, label, state, member, true);
+
+  if (!groupList) return null;
+
+  return (
+    <div className="relative flex size-full flex-col">
+      {groupList && (
+        <>
+          <div
+            ref={containerRef}
+            className="vertical-scrollbar vertical-scrollbar-margin-top-md relative scrollbar-lg size-full overflow-auto"
+          >
+            {groupList.map((group) => (
+              <ListGroup
+                key={group.id}
+                groupIssueIds={groupedIssueIds?.[group.id]}
+                groupBy={groupBy}
+                group={group}
+                displayProperties={displayProperties}
+                showEmptyGroup={showEmptyGroup}
+                loadMoreIssues={loadMoreIssues}
+                getGroupIssueCount={getGroupIssueCount}
+                getPaginationData={getPaginationData}
+                getIssueLoader={getIssueLoader}
+                containerRef={containerRef}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+});

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

@@ -0,0 +1,39 @@
+/**
+ * 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 { CircleDashed } from "lucide-react";
+
+interface IHeaderGroupByCard {
+  groupID: string;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  toggleListGroup: (id: string) => void;
+}
+
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
+  const { groupID, icon, title, count, toggleListGroup } = props;
+
+  return (
+    <>
+      <div
+        className="group/list-header relative flex w-full shrink-0 items-center gap-2 px-2 py-1 py-1.5 hover:bg-layer-transparent-hover"
+        onClick={() => toggleListGroup(groupID)}
+        role="button"
+      >
+        <div className="grid size-3.5 shrink-0 place-items-center overflow-hidden">
+          {icon ?? <CircleDashed className="size-3.5" strokeWidth={2} />}
+        </div>
+
+        <div className="relative flex w-full cursor-pointer items-center gap-1 overflow-hidden">
+          <div className="line-clamp-1 inline-block truncate font-medium text-primary">{title}</div>
+          <div className="pl-2 text-13 font-medium text-tertiary">{count || 0}</div>
+        </div>
+      </div>
+    </>
+  );
+});

apps/space/components/issues/issue-layouts/list/list-group.tsx

@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { MutableRefObject } from "react";
+import { Fragment, forwardRef, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// plane types
+import type {
+  IGroupByColumn,
+  TIssueGroupByOptions,
+  IIssueDisplayProperties,
+  TPaginationData,
+  TLoader,
+} from "@plane/types";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+//
+import { IssueBlocksList } from "./blocks-list";
+import { HeaderGroupByCard } from "./headers/group-by-card";
+
+interface Props {
+  groupIssueIds: string[] | undefined;
+  group: IGroupByColumn;
+  groupBy: TIssueGroupByOptions | undefined;
+  displayProperties: IIssueDisplayProperties | undefined;
+  containerRef: MutableRefObject<HTMLDivElement | null>;
+  showEmptyGroup?: boolean;
+  loadMoreIssues: (groupId?: string) => void;
+  getGroupIssueCount: (
+    groupId: string | undefined,
+    subGroupId: string | undefined,
+    isSubGroupCumulative: boolean
+  ) => number | undefined;
+  getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
+}
+
+// List loader component
+const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
+  props: Record<string, unknown>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div ref={ref} className="flex h-11 items-center justify-between border-b border-subtle p-3">
+      <div className="flex items-center gap-3">
+        <span className="h-5 w-10 animate-pulse rounded-sm bg-layer-1" />
+        <span className={`h-5 w-52 animate-pulse rounded-sm bg-layer-1`} />
+      </div>
+      <div className="flex items-center gap-2">
+        {[...Array(6)].map((_, index) => (
+          <Fragment key={index}>
+            <span key={index} className="h-5 w-5 animate-pulse rounded-sm bg-layer-1" />
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+});
+ListLoaderItemRow.displayName = "ListLoaderItemRow";
+
+export const ListGroup = observer(function ListGroup(props: Props) {
+  const {
+    groupIssueIds = [],
+    group,
+    groupBy,
+    displayProperties,
+    containerRef,
+    showEmptyGroup,
+    loadMoreIssues,
+    getGroupIssueCount,
+    getPaginationData,
+    getIssueLoader,
+  } = props;
+  const [isExpanded, setIsExpanded] = useState(true);
+  const groupRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { t } = useTranslation();
+
+  const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
+
+  const groupIssueCount = getGroupIssueCount(group.id, undefined, false) ?? 0;
+  const nextPageResults = getPaginationData(group.id, undefined)?.nextPageResults;
+  const isPaginating = !!getIssueLoader(group.id);
+
+  useIntersectionObserver(containerRef, isPaginating ? null : intersectionElement, loadMoreIssues, `100% 0% 100% 0%`);
+
+  const shouldLoadMore =
+    nextPageResults === undefined && groupIssueCount !== undefined && groupIssueIds
+      ? groupIssueIds.length < groupIssueCount
+      : !!nextPageResults;
+
+  const loadMore = isPaginating ? (
+    <ListLoaderItemRow />
+  ) : (
+    <div
+      className={
+        "relative flex h-11 cursor-pointer items-center gap-3 border border-transparent border-t-subtle-1 bg-surface-1 p-3 pl-6 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline"
+      }
+      onClick={() => loadMoreIssues(group.id)}
+      role="button"
+    >
+      {t("common.load_more")} &darr;
+    </div>
+  );
+
+  const validateEmptyIssueGroups = (issueCount: number = 0) => {
+    if (!showEmptyGroup && issueCount <= 0) return false;
+    return true;
+  };
+
+  const toggleListGroup = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
+  const shouldExpand = (!!groupIssueCount && isExpanded) || !groupBy;
+
+  return validateEmptyIssueGroups(groupIssueCount) ? (
+    <div ref={groupRef} className={cn(`relative flex shrink-0 flex-col border-[1px] border-transparent`)}>
+      <div className="sticky top-0 z-2 w-full shrink-0 border-b border-subtle">
+        <HeaderGroupByCard
+          groupID={group.id}
+          icon={group.icon}
+          title={group.name || ""}
+          count={groupIssueCount}
+          toggleListGroup={toggleListGroup}
+        />
+      </div>
+      {shouldExpand && (
+        <div className="relative">
+          {groupIssueIds && (
+            <IssueBlocksList
+              issueIds={groupIssueIds}
+              groupId={group.id}
+              displayProperties={displayProperties}
+              containerRef={containerRef}
+            />
+          )}
+
+          {shouldLoadMore && (groupBy ? <>{loadMore}</> : <ListLoaderItemRow ref={setIntersectionElement} />)}
+        </div>
+      )}
+    </div>
+  ) : null;
+});