[WEB-3092] fix: fixed recents + removed home route (#6365)

* fix: fixed recents + removed home route

* Return current users recents

---------

Co-authored-by: sangeethailango <sangeethailango21@gmail.com>

web/core/components/core/content-overflow-HOC.tsx

@@ -23,9 +23,11 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
   // states
   const [containerHeight, setContainerHeight] = useState(0);
   const [showAll, setShowAll] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
 
   // refs
   const contentRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!contentRef?.current) return;
@@ -70,37 +72,72 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
     };
   }, [contentRef?.current]);
 
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const handleTransitionEnd = () => {
+      setIsTransitioning(false);
+    };
+
+    containerRef.current.addEventListener("transitionend", handleTransitionEnd);
+
+    return () => {
+      containerRef.current?.removeEventListener("transitionend", handleTransitionEnd);
+    };
+  }, []);
+
+  const handleToggle = () => {
+    setIsTransitioning(true);
+    setShowAll((prev) => !prev);
+  };
+
   if (!children) return fallback;
 
   return (
     <div
+      ref={containerRef}
       className={cn(
         "relative",
         {
-          [`overflow-hidden`]: !showAll,
-          "overflow-visible": showAll,
+          [`overflow-hidden transition-[height] duration-300 ease-in-out`]: containerHeight > maxHeight,
         },
         containerClassName
       )}
-      style={{ maxHeight: showAll ? "100%" : `${maxHeight}px` }}
+      style={{
+        height: showAll ? `${containerHeight}px` : `${Math.min(maxHeight, containerHeight)}px`,
+      }}
     >
-      <div ref={contentRef}>{children}</div>
+      <div
+        ref={contentRef}
+        className={cn("h-auto", {
+          "pb-6": showAll,
+        })}
+      >
+        {children}
+      </div>
 
       {containerHeight > maxHeight && (
         <div
           className={cn(
-            "bottom-0 left-0 w-full",
+            "bottom-0 left-0 w-full transition-all duration-300 ease-in-out",
             `bg-gradient-to-t from-custom-background-100 to-transparent flex flex-col items-center justify-end`,
             "text-center",
             {
-              "absolute h-[100px]": !showAll,
-              "h-[30px]": showAll,
+              "absolute h-[100px] opacity-100": !showAll,
+              "absolute h-[30px] opacity-70": showAll,
             }
           )}
+          style={{
+            pointerEvents: isTransitioning ? "none" : "auto",
+          }}
         >
           <button
-            className={cn("gap-1 w-full text-custom-primary-100 text-sm font-medium", buttonClassName)}
-            onClick={() => setShowAll((prev) => !prev)}
+            className={cn(
+              "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300",
+              buttonClassName
+            )}
+            onClick={handleToggle}
+            disabled={isTransitioning}
           >
             {showAll ? "Show less" : "Show all"}
           </button>

web/core/components/home/widgets/links/links.tsx

@@ -28,20 +28,21 @@ export const ProjectLinkList: FC<TProjectLinkList> = observer((props) => {
   if (links === undefined) return <WidgetLoader widgetKey={EWidgetKeys.QUICK_LINKS} />;
 
   if (links.length === 0) return <LinksEmptyState handleCreate={() => toggleLinkModal(true)} />;
+
   return (
-    <ContentOverflowWrapper
-      maxHeight={150}
-      containerClassName="pb-2 box-border"
-      fallback={<></>}
-      buttonClassName="bg-custom-background-90/20"
-    >
-      <div>
-        <div className="flex gap-2 mb-2 flex-wrap">
+    <div className="relative">
+      <ContentOverflowWrapper
+        maxHeight={150}
+        containerClassName="box-border min-h-[30px] flex flex-col"
+        fallback={<></>}
+        buttonClassName="bg-custom-background-90/20"
+      >
+        <div className="flex gap-2 mb-2 flex-wrap flex-1">
           {links &&
             links.length > 0 &&
             links.map((linkId) => <ProjectLinkDetail key={linkId} linkId={linkId} linkOperations={linkOperations} />)}
         </div>
-      </div>
-    </ContentOverflowWrapper>
+      </ContentOverflowWrapper>
+    </div>
   );
 });

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

@@ -17,6 +17,7 @@ import { FiltersDropdown } from "./filters";
 import { RecentIssue } from "./issue";
 import { RecentPage } from "./page";
 import { RecentProject } from "./project";
+import { ContentOverflowWrapper } from "@/components/core/content-overflow-HOC";
 
 const WIDGET_KEY = EWidgetKeys.RECENT_ACTIVITY;
 const workspaceService = new WorkspaceService();
@@ -79,7 +80,12 @@ export const RecentActivityWidget: React.FC<THomeWidgetProps> = observer((props)
     );
 
   return (
-    <div ref={ref} className=" max-h-[500px] min-h-[250px]  overflow-y-scroll">
+    <ContentOverflowWrapper
+      maxHeight={415}
+      containerClassName="box-border min-h-[250px]"
+      fallback={<></>}
+      buttonClassName="bg-custom-background-90/20"
+    >
       <div className="flex items-center justify-between mb-2">
         <div className="text-base font-semibold text-custom-text-350">Recents</div>
 
@@ -89,8 +95,10 @@ export const RecentActivityWidget: React.FC<THomeWidgetProps> = observer((props)
         {isLoading && <WidgetLoader widgetKey={WIDGET_KEY} />}
         {!isLoading &&
           recents?.length > 0 &&
-          recents.map((activity: TActivityEntityData) => <div key={activity.id}>{resolveRecent(activity)}</div>)}
+          recents
+            .filter((recent: TActivityEntityData) => recent.entity_data)
+            .map((activity: TActivityEntityData) => <div key={activity.id}>{resolveRecent(activity)}</div>)}
       </div>
-    </div>
+    </ContentOverflowWrapper>
   );
 });