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

apps/web/core/components/issues/preview-card/date.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { CalendarOutline, DueDateOutline, StartDateOutline } from "@makeplane/propel/icons";
+// plane imports
+import type { TStateGroups } from "@plane/types";
+import { cn, renderFormattedDate, shouldHighlightIssueDueDate } from "@plane/utils";
+
+type Props = {
+  startDate: string | null;
+  stateGroup: TStateGroups;
+  targetDate: string | null;
+};
+
+export function WorkItemPreviewCardDate(props: Props) {
+  const { startDate, stateGroup, targetDate } = props;
+  // derived values
+  const isDateRangeEnabled = Boolean(startDate && targetDate);
+  const shouldHighlightDate = shouldHighlightIssueDueDate(targetDate, stateGroup);
+
+  if (!startDate && !targetDate) return null;
+
+  return (
+    <div className="h-full rounded-sm px-1 text-11 text-secondary">
+      {isDateRangeEnabled ? (
+        <div
+          className={cn("flex h-full items-center gap-1", {
+            "text-danger-primary": shouldHighlightDate,
+          })}
+        >
+          <CalendarOutline className="size-3 shrink-0" />
+          <span>
+            {renderFormattedDate(startDate)} - {renderFormattedDate(targetDate)}
+          </span>
+        </div>
+      ) : startDate ? (
+        <div className="flex h-full items-center gap-1">
+          <StartDateOutline className="size-3 shrink-0" />
+          <span>{renderFormattedDate(startDate)}</span>
+        </div>
+      ) : (
+        <div
+          className={cn("flex h-full items-center gap-1", {
+            "text-danger-primary": shouldHighlightDate,
+          })}
+        >
+          <DueDateOutline className="size-3 shrink-0" />
+          <span>{renderFormattedDate(targetDate)}</span>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/core/components/issues/preview-card/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./root";

apps/web/core/components/issues/preview-card/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 { observer } from "mobx-react";
+// plane imports
+import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import type { TIssue, TStateGroups } from "@plane/types";
+// hooks
+import { useProject } from "@/hooks/store/use-project";
+import { useProjectState } from "@/hooks/store/use-project-state";
+// components
+import { IssueIdentifier } from "@/components/issues/issue-detail/issue-identifier";
+// local imports
+import { WorkItemPreviewCardDate } from "./date";
+
+type Props = {
+  projectId: string;
+  stateDetails: {
+    group?: TStateGroups;
+    id?: string;
+    name?: string;
+  };
+  workItem: Pick<TIssue, "id" | "name" | "sequence_id" | "priority" | "start_date" | "target_date" | "type_id">;
+};
+
+export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props: Props) {
+  const { projectId, stateDetails, workItem } = props;
+  // store hooks
+  const { getProjectIdentifierById } = useProject();
+  const { getStateById } = useProjectState();
+  // derived values
+  const projectIdentifier = getProjectIdentifierById(projectId);
+  const fallbackStateDetails = stateDetails.id ? getStateById(stateDetails.id) : undefined;
+  const stateGroup = stateDetails?.group ?? fallbackStateDetails?.group ?? "backlog";
+  const stateName = stateDetails?.name ?? fallbackStateDetails?.name;
+
+  return (
+    <div className="w-72 space-y-2 rounded-lg border-[0.5px] border-strong bg-surface-1 p-3 shadow-raised-200">
+      <div className="flex items-center justify-between gap-3 text-secondary">
+        <IssueIdentifier
+          size="xs"
+          variant="secondary"
+          projectId={projectId}
+          projectIdentifier={projectIdentifier}
+          issueSequenceId={workItem.sequence_id}
+          issueTypeId={workItem.type_id}
+        />
+        <div className="flex shrink-0 items-center gap-1">
+          <StateGroupIcon stateGroup={stateGroup} className="size-3 shrink-0" />
+          <p className="text-11 font-medium">{stateName}</p>
+        </div>
+      </div>
+      <div>
+        <h6 className="text-13 wrap-break-word">{workItem.name}</h6>
+      </div>
+      <div className="flex h-5 items-center gap-1">
+        <PriorityIcon priority={workItem.priority} withContainer />
+        <WorkItemPreviewCardDate
+          startDate={workItem.start_date}
+          stateGroup={stateGroup}
+          targetDate={workItem.target_date}
+        />
+      </div>
+    </div>
+  );
+});