From 58977e02e258f68280663ceaa5a393b4b8ddfa83 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Thu, 30 Jan 2025 13:17:31 +0530
Subject: [PATCH] fix: recents widget title truncate

---
 web/core/components/core/list/list-item.tsx   | 14 ++++---
 .../components/home/widgets/recents/issue.tsx | 23 ++++++++----
 .../components/home/widgets/recents/page.tsx  | 37 +++++++++----------
 .../home/widgets/recents/project.tsx          | 25 +++++++------
 4 files changed, 56 insertions(+), 43 deletions(-)

diff --git a/web/core/components/core/list/list-item.tsx b/web/core/components/core/list/list-item.tsx
index 223879334b8..104cf3eb89f 100644
--- a/web/core/components/core/list/list-item.tsx
+++ b/web/core/components/core/list/list-item.tsx
@@ -8,7 +8,7 @@ import { cn } from "@/helpers/common.helper";
 import { useAppRouter } from "@/hooks/use-app-router";
 
 interface IListItemProps {
-  title: string;
+  title?: string;
   itemLink: string;
   onItemClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
   prependTitleElement?: JSX.Element;
@@ -72,10 +72,14 @@ export const ListItem: FC<IListItemProps> = (props) => {
             disabled={disableLink}
           >
             <div className="flex items-center gap-4 truncate">
-              {prependTitleElement && <span className="flex items-center flex-shrink-0">{prependTitleElement}</span>}
-              <Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
-                <span className="truncate text-sm">{title}</span>
-              </Tooltip>
+              {prependTitleElement && (
+                <span className="flex items-center flex-shrink-0 truncate">{prependTitleElement}</span>
+              )}
+              {title && (
+                <Tooltip tooltipContent={title} position="top" isMobile={isMobile}>
+                  <span className="truncate text-sm">{title}</span>
+                </Tooltip>
+              )}
             </div>
             {appendTitleElement && <span className="flex items-center flex-shrink-0">{appendTitleElement}</span>}
           </ControlLink>
diff --git a/web/core/components/home/widgets/recents/issue.tsx b/web/core/components/home/widgets/recents/issue.tsx
index 77e90447223..af08942818b 100644
--- a/web/core/components/home/widgets/recents/issue.tsx
+++ b/web/core/components/home/widgets/recents/issue.tsx
@@ -1,9 +1,15 @@
+// plane types
 import { TActivityEntityData, TIssueEntityData } from "@plane/types";
+// plane ui
 import { LayersIcon, PriorityIcon, StateGroupIcon, Tooltip } from "@plane/ui";
+// components
 import { ListItem } from "@/components/core/list";
 import { MemberDropdown } from "@/components/dropdowns";
+// helpers
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
+// hooks
 import { useIssueDetail, useProjectState } from "@/hooks/store";
+// plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
 
 type BlockProps = {
@@ -24,9 +30,9 @@ export const RecentIssue = (props: BlockProps) => {
     <ListItem
       key={activity.id}
       itemLink=""
-      title={""}
+      title={issueDetails?.name}
       prependTitleElement={
-        <div className="flex flex-shrink-0 items-center justify-center rounded-md gap-4 ">
+        <div className="flex-shrink-0 flex items-center gap-2">
           {issueDetails.type ? (
             <IssueIdentifier
               size="lg"
@@ -38,16 +44,19 @@ export const RecentIssue = (props: BlockProps) => {
             />
           ) : (
             <div className="flex gap-2 items-center justify-center">
-              <div className="flex flex-shrink-0 items-center justify-center rounded gap-4 bg-custom-background-80 w-[25.5px] h-[25.5px]">
-                <LayersIcon className="w-4 h-4 text-custom-text-350" />
+              <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+                <LayersIcon className="size-4 text-custom-text-350" />
               </div>
-              <div className="font-medium text-custom-sidebar-text-400 text-sm whitespace-nowrap">
+              <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
                 {issueDetails?.project_identifier}-{issueDetails?.sequence_id}
               </div>
             </div>
           )}
-          <div className="text-custom-text-200 font-medium text-sm whitespace-nowrap">{issueDetails?.name}</div>
-          <div className="font-medium text-xs text-custom-text-400">{calculateTimeAgo(activity.visited_at)}</div>
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+          {calculateTimeAgo(activity.visited_at)}
         </div>
       }
       quickActionElement={
diff --git a/web/core/components/home/widgets/recents/page.tsx b/web/core/components/home/widgets/recents/page.tsx
index 41d73a1e556..95f78737ae8 100644
--- a/web/core/components/home/widgets/recents/page.tsx
+++ b/web/core/components/home/widgets/recents/page.tsx
@@ -37,29 +37,26 @@ export const RecentPage = (props: BlockProps) => {
     <ListItem
       key={activity.id}
       itemLink=""
-      title={""}
+      title={getPageName(pageDetails?.name)}
       prependTitleElement={
-        <div className="flex flex-shrink-0 items-center justify-center rounded-md gap-4 ">
-          <div className="flex gap-2 items-center justify-center">
-            <div className="flex flex-shrink-0 items-center justify-center rounded gap-2 bg-custom-background-80 w-[25.5px] h-[25.5px]">
-              <>
-                {pageDetails?.logo_props?.in_use ? (
-                  <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
-                ) : (
-                  <FileText className="h-4 w-4 text-custom-text-350" />
-                )}
-              </>
-            </div>
-            {pageDetails?.project_identifier && (
-              <div className="font-medium text-custom-sidebar-text-400 text-sm whitespace-nowrap">
-                {pageDetails?.project_identifier}
-              </div>
+        <div className="flex-shrink-0 flex items-center gap-2">
+          <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+            {pageDetails?.logo_props?.in_use ? (
+              <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
+            ) : (
+              <FileText className="size-4 text-custom-text-350" />
             )}
           </div>
-          <div className="text-custom-text-200 font-medium text-sm whitespace-nowrap">
-            {getPageName(pageDetails?.name)}
-          </div>
-          <div className="font-medium text-xs text-custom-text-400">{calculateTimeAgo(activity.visited_at)}</div>
+          {pageDetails?.project_identifier && (
+            <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
+              {pageDetails?.project_identifier}
+            </div>
+          )}
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+          {calculateTimeAgo(activity.visited_at)}
         </div>
       }
       quickActionElement={
diff --git a/web/core/components/home/widgets/recents/project.tsx b/web/core/components/home/widgets/recents/project.tsx
index 92d5cd45e8c..1663b6bf474 100644
--- a/web/core/components/home/widgets/recents/project.tsx
+++ b/web/core/components/home/widgets/recents/project.tsx
@@ -1,8 +1,12 @@
 import { useRouter } from "next/navigation";
+// plane types
 import { TActivityEntityData, TProjectEntityData } from "@plane/types";
+// plane ui
 import { Logo } from "@plane/ui";
+// components
 import { ListItem } from "@/components/core/list";
 import { MemberDropdown } from "@/components/dropdowns";
+// helpers
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
 
 type BlockProps = {
@@ -21,19 +25,18 @@ export const RecentProject = (props: BlockProps) => {
     <ListItem
       key={activity.id}
       itemLink=""
-      title={""}
+      title={projectDetails?.name}
       prependTitleElement={
-        <div className="flex flex-shrink-0 items-center justify-center rounded-md gap-4 ">
-          <div className="flex gap-2 items-center justify-center">
-            <div className="flex flex-shrink-0 items-center justify-center rounded gap-4 bg-custom-background-80 w-[25.5px] h-[25.5px]">
-              <Logo logo={projectDetails?.logo_props} size={16} />
-            </div>
-            <div className="font-medium text-custom-sidebar-text-400 text-sm whitespace-nowrap">
-              {projectDetails?.identifier}
-            </div>
+        <div className="flex-shrink-0 flex items-center gap-2">
+          <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+            <Logo logo={projectDetails?.logo_props} size={16} />
           </div>
-          <div className="text-custom-text-200 font-medium text-sm whitespace-nowrap">{projectDetails?.name}</div>
-          <div className="font-medium text-xs text-custom-text-400">{calculateTimeAgo(activity.visited_at)}</div>
+          <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">{projectDetails?.identifier}</div>
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+          {calculateTimeAgo(activity.visited_at)}
         </div>
       }
       quickActionElement={