[WEB-3948] chore: recent work item improvement (#6976)

* chore: issue entity data type updated

* chore: HomePeekOverviewsRoot component added

* chore: recent work item improvement and code refactor

packages/types/src/home.d.ts

@@ -35,6 +35,7 @@ export type TIssueEntityData = {
   sequence_id: number;
   project_id: string;
   project_identifier: string;
+  is_epic: boolean;
 };
 
 export type TActivityEntityData = {

web/ce/components/home/index.ts

@@ -0,0 +1 @@
+export * from "./peek-overviews";

web/ce/components/home/peek-overviews.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { IssuePeekOverview } from "@/components/issues";
+
+export const HomePeekOverviewsRoot = () => (
+  <>
+    <IssuePeekOverview />
+  </>
+);

web/core/components/home/root.tsx

@@ -12,7 +12,7 @@ import { cn } from "@/helpers/common.helper";
 import { useUserProfile, useEventTracker, useUser } from "@/hooks/store";
 import { useHome } from "@/hooks/store/use-home";
 import useSize from "@/hooks/use-window-size";
-import { IssuePeekOverview } from "../issues";
+import { HomePeekOverviewsRoot } from "@/plane-web/components/home";
 import { DashboardWidgets } from "./home-dashboard-widgets";
 import { UserGreetingsView } from "./user-greetings";
 
@@ -57,7 +57,7 @@ export const WorkspaceHomeView = observer(() => {
         </div>
       )}
       <>
-        <IssuePeekOverview />
+        <HomePeekOverviewsRoot />
         <ContentWrapper
           className={cn("gap-6 bg-custom-background-90/20", {
             "vertical-scrollbar scrollbar-lg": windowWidth >= 768,

web/core/components/home/widgets/recents/issue.tsx

@@ -1,3 +1,6 @@
+import { observer } from "mobx-react";
+// plane constants
+import { EIssueServiceType } from "@plane/constants";
 // plane types
 import { TActivityEntityData, TIssueEntityData } from "@plane/types";
 // plane ui
@@ -18,11 +21,12 @@ type BlockProps = {
   ref: React.RefObject<HTMLDivElement>;
   workspaceSlug: string;
 };
-export const RecentIssue = (props: BlockProps) => {
+export const RecentIssue = observer((props: BlockProps) => {
   const { activity, ref, workspaceSlug } = props;
   // hooks
   const { getStateById } = useProjectState();
   const { setPeekIssue } = useIssueDetail();
+  const { setPeekIssue: setPeekEpic } = useIssueDetail(EIssueServiceType.EPICS);
   const { getProjectIdentifierById } = useProject();
   // derived values
   const issueDetails: TIssueEntityData = activity.entity_data as TIssueEntityData;
@@ -38,8 +42,21 @@ export const RecentIssue = (props: BlockProps) => {
     issueId: issueDetails?.id,
     projectIdentifier,
     sequenceId: issueDetails?.sequence_id,
+    isEpic: issueDetails?.is_epic,
   });
 
+  const handlePeekOverview = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const peekDetails = {
+      workspaceSlug,
+      projectId: issueDetails?.project_id,
+      issueId: activity.entity_data.id,
+    };
+    if (issueDetails?.is_epic) setPeekEpic(peekDetails);
+    else setPeekIssue(peekDetails);
+  };
+
   return (
     <ListItem
       key={activity.id}
@@ -109,12 +126,8 @@ export const RecentIssue = (props: BlockProps) => {
       disableLink={false}
       className="bg-transparent my-auto !px-2 border-none py-3"
       itemClassName="my-auto"
-      onItemClick={(e) => {
+      onItemClick={handlePeekOverview}
-        e.preventDefault();
-        e.stopPropagation();
-        setPeekIssue({ workspaceSlug, projectId: issueDetails?.project_id, issueId: activity.entity_data.id });
-      }}
       preventDefaultNProgress
     />
   );
-};
+});

web/ee/components/home/index.ts

@@ -0,0 +1 @@
+export * from "ce/components/home";