From 0618e5da74647ea68b4e6c1b0918152cdacdf2e5 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 18 Jun 2025 16:13:20 +0530
Subject: [PATCH] [WIKI-356] fix: space app work item embed card details
 (#3432)

* style: consistent properties height

* fix: state property logic
---
 space/ee/components/pages/index.ts            |  2 +-
 space/ee/components/pages/main-content.tsx    |  4 ++--
 .../{issue-embed.tsx => work-item-embed.tsx}  | 23 +++++++++----------
 space/ee/store/pages/page.ts                  | 14 +++++++----
 4 files changed, 23 insertions(+), 20 deletions(-)
 rename space/ee/components/pages/{issue-embed.tsx => work-item-embed.tsx} (87%)

diff --git a/space/ee/components/pages/index.ts b/space/ee/components/pages/index.ts
index 320b571dbe..92a5cfe9cb 100644
--- a/space/ee/components/pages/index.ts
+++ b/space/ee/components/pages/index.ts
@@ -1,3 +1,3 @@
 export * from "./error";
-export * from "./issue-embed";
 export * from "./main-content";
+export * from "./work-item-embed";
diff --git a/space/ee/components/pages/main-content.tsx b/space/ee/components/pages/main-content.tsx
index 0df6e4ba87..0fcf2bfcad 100644
--- a/space/ee/components/pages/main-content.tsx
+++ b/space/ee/components/pages/main-content.tsx
@@ -13,7 +13,7 @@ import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 import { usePublish } from "@/hooks/store";
 // plane web components
-import { IssueEmbedCard } from "@/plane-web/components/pages";
+import { WorkItemEmbedCard } from "@/plane-web/components/pages";
 // plane web hooks
 import { usePage, usePagesList } from "@/plane-web/hooks/store";
 // local imports
@@ -81,7 +81,7 @@ export const PageDetailsMainContent: React.FC<Props> = observer((props) => {
             }}
             embedHandler={{
               issue: {
-                widgetCallback: ({ issueId }) => <IssueEmbedCard anchor={anchor} issueId={issueId} />,
+                widgetCallback: ({ issueId }) => <WorkItemEmbedCard anchor={anchor} issueId={issueId} />,
               },
               page: {
                 widgetCallback: ({ pageId }) => <PageEmbedCardRoot pageId={pageId} />,
diff --git a/space/ee/components/pages/issue-embed.tsx b/space/ee/components/pages/work-item-embed.tsx
similarity index 87%
rename from space/ee/components/pages/issue-embed.tsx
rename to space/ee/components/pages/work-item-embed.tsx
index 42a8be7784..aa8f9f1da0 100644
--- a/space/ee/components/pages/issue-embed.tsx
+++ b/space/ee/components/pages/work-item-embed.tsx
@@ -5,7 +5,7 @@ import { Loader } from "@plane/ui";
 // components
 import { IssueBlockDate, IssueBlockPriority, IssueBlockState } from "@/components/issues";
 // hooks
-import { usePublish, useStates } from "@/hooks/store";
+import { usePublish } from "@/hooks/store";
 // plane web hooks
 import { usePage } from "@/plane-web/hooks/store";
 
@@ -14,19 +14,18 @@ type Props = {
   issueId: string;
 };
 
-export const IssueEmbedCard: React.FC<Props> = observer((props) => {
+export const WorkItemEmbedCard: React.FC<Props> = observer((props) => {
   const { anchor, issueId } = props;
   // store hooks
   const pageDetails = usePage(anchor);
   const { project_details } = usePublish(anchor);
-  const { getStateById } = useStates();
 
   if (!pageDetails) return null;
 
   // derived values
   const { areIssueEmbedsLoaded, getIssueEmbedDetails, issueEmbedError } = pageDetails;
   const issueDetails = getIssueEmbedDetails(issueId);
-  const stateDetails = issueDetails?.state_id ? getStateById(issueDetails?.state_id) : undefined;
+  const stateDetails = issueDetails?.state_detail;
 
   if (!areIssueEmbedsLoaded && !issueEmbedError)
     return (
@@ -62,21 +61,21 @@ export const IssueEmbedCard: React.FC<Props> = observer((props) => {
       </h5>
       <h4 className="!text-sm !font-medium !mt-1 line-clamp-2 break-words">{issueDetails?.name}</h4>
       <div className="hide-horizontal-scrollbar relative flex w-full flex-grow items-end gap-2 overflow-x-scroll">
-        {/* priority */}
-        {issueDetails?.priority && (
-          <div className="flex-shrink-0">
-            <IssueBlockPriority priority={issueDetails?.priority} />
-          </div>
-        )}
         {/* state */}
         {stateDetails && (
-          <div className="flex-shrink-0">
+          <div className="flex-shrink-0 h-5">
             <IssueBlockState stateId={stateDetails.id} />
           </div>
         )}
+        {/* priority */}
+        {issueDetails?.priority && (
+          <div className="flex-shrink-0 h-5">
+            <IssueBlockPriority priority={issueDetails?.priority} />
+          </div>
+        )}
         {/* due date */}
         {issueDetails?.target_date && (
-          <div className="flex-shrink-0">
+          <div className="flex-shrink-0 h-5">
             <IssueBlockDate due_date={issueDetails?.target_date} stateId={stateDetails?.id} />
           </div>
         )}
diff --git a/space/ee/store/pages/page.ts b/space/ee/store/pages/page.ts
index 93d8f67906..0352ed7f1a 100644
--- a/space/ee/store/pages/page.ts
+++ b/space/ee/store/pages/page.ts
@@ -2,16 +2,20 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 import { computedFn } from "mobx-utils";
 // plane imports
 import { SitesPagePublishService } from "@plane/services";
-import { TLogoProps, TPublicPageResponse } from "@plane/types";
+import { IStateLite, TLogoProps, TPublicPageResponse } from "@plane/types";
 // store
 import { CoreRootStore } from "@/store/root.store";
 // types
 import { IIssue } from "@/types/issue";
 
+export type TIssueEmbed = IIssue & {
+  state_detail?: IStateLite;
+};
+
 export interface IPage extends TPublicPageResponse {
   // observables
   issueEmbedError: boolean;
-  issueEmbedData: IIssue[] | undefined;
+  issueEmbedData: TIssueEmbed[] | undefined;
   // additional properties for subpages
   archived_at: string | null | undefined;
   deleted_at: Date | undefined;
@@ -22,16 +26,16 @@ export interface IPage extends TPublicPageResponse {
   asJSON: TPublicPageResponse | undefined;
   areIssueEmbedsLoaded: boolean;
   // helpers
-  getIssueEmbedDetails: (issueID: string) => IIssue | undefined;
+  getIssueEmbedDetails: (issueID: string) => TIssueEmbed | undefined;
   // actions
-  fetchPageIssueEmbeds: (anchor: string) => Promise<IIssue[]>;
+  fetchPageIssueEmbeds: (anchor: string) => Promise<TIssueEmbed[]>;
   mutateProperties: (data: Partial<TPublicPageResponse>, shouldUpdateName?: boolean) => void;
 }
 
 export class Page implements IPage {
   // observables
   issueEmbedError: boolean = false;
-  issueEmbedData: IIssue[] | undefined = undefined;
+  issueEmbedData: TIssueEmbed[] | undefined = undefined;
   // page properties
   created_at: Date | undefined;
   description_html: string | undefined;