feat: home page uplift

src/backend/base/langflow/worker.py

@@ -28,11 +28,6 @@ def build_vertex(self, vertex: Vertex) -> Vertex:
 
 
 @celery_app.task(acks_late=True)
-def process_graph_cached_task(
-    data_graph: dict[str, Any],
-    inputs: dict | list[dict] | None = None,
-    clear_cache=False,  # noqa: FBT002
-    session_id=None,
-) -> dict[str, Any]:
+def process_graph_cached_task() -> dict[str, Any]:
     msg = "This task is not implemented yet"
     raise NotImplementedError(msg)

src/frontend/index.html

@@ -7,6 +7,10 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap"
       rel="stylesheet"

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,5 +1,5 @@
 import { Cross2Icon } from "@radix-ui/react-icons";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import {
   Popover,
@@ -13,6 +13,8 @@ import SingleAlert from "./components/singleAlertComponent";
 
 export default function AlertDropdown({
   children,
+  notificationRef,
+  onClose,
 }: AlertDropdownType): JSX.Element {
   const notificationList = useAlertStore((state) => state.notificationList);
   const clearNotificationList = useAlertStore(
@@ -27,16 +29,29 @@ export default function AlertDropdown({
 
   const [open, setOpen] = useState(false);
 
+  useEffect(() => {
+    if (!open) {
+      onClose?.();
+    }
+  }, [open]);
+
   return (
     <Popover
+      data-testid="notification-dropdown"
       open={open}
       onOpenChange={(target) => {
         setOpen(target);
-        if (target) setNotificationCenter(false);
+        if (target) {
+          setNotificationCenter(false);
+        }
       }}
     >
       <PopoverTrigger>{children}</PopoverTrigger>
-      <PopoverContent className="noflow nowheel nopan nodelete nodrag flex h-[500px] w-[500px] flex-col">
+      <PopoverContent
+        ref={notificationRef}
+        data-testid="notification-dropdown-content"
+        className="noflow nowheel nopan nodelete nodrag z-10 flex h-[500px] w-[500px] flex-col"
+      >
         <div className="text-md flex flex-row justify-between pl-3 font-medium text-foreground">
           Notifications
           <div className="flex gap-3 pr-3">

src/frontend/src/components/appHeaderComponent/components/AccountMenu/index.tsx

@@ -1,3 +1,4 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
 import { useLogout } from "@/controllers/API/queries/auth";
 import { CustomFeedbackDialog } from "@/customization/components/custom-feedback-dialog";
 import { CustomHeaderMenuItemsTitle } from "@/customization/components/custom-header-menu-items-title";
@@ -50,8 +51,10 @@ export const AccountMenu = () => {
         <HeaderMenuItems position="right">
           {ENABLE_DATASTAX_LANGFLOW && <CustomHeaderMenuItemsTitle />}
           <HeaderMenuItemsSection>
-            <div className="flex h-[46px] w-full items-center justify-between pl-2">
-              <div className="text-sm text-zinc-500">Version {version}</div>
+            <div className="flex h-[46px] w-full items-center justify-between px-3">
+              <div className="text-xs font-medium text-zinc-500">
+                Version {version}
+              </div>
               <ThemeButtons />
             </div>
             {ENABLE_DATASTAX_LANGFLOW ? (
@@ -60,6 +63,7 @@ export const AccountMenu = () => {
               </HeaderMenuItemLink>
             ) : (
               <HeaderMenuItemButton
+                icon="arrow-right"
                 onClick={() => {
                   navigate("/settings");
                 }}
@@ -106,19 +110,19 @@ export const AccountMenu = () => {
               </HeaderMenuItemLink>
             )}
             <HeaderMenuItemLink newPage href="https://twitter.com/langflow_ai">
-              Follow {ENABLE_DATASTAX_LANGFLOW ? "Langflow" : "us"} on X
+              Follow Langflow on X
             </HeaderMenuItemLink>
             <HeaderMenuItemLink newPage href="https://discord.gg/EqksyE2EX9">
-              Join our Discord
+              Join the Langflow Discord
             </HeaderMenuItemLink>
           </HeaderMenuItemsSection>
           <HeaderMenuItemsSection>
             {ENABLE_DATASTAX_LANGFLOW ? (
-              <HeaderMenuItemLink href="/session/logout">
+              <HeaderMenuItemLink href="/session/logout" icon="log-out">
                 Logout
               </HeaderMenuItemLink>
             ) : (
-              <HeaderMenuItemButton onClick={handleLogout}>
+              <HeaderMenuItemButton onClick={handleLogout} icon="log-out">
                 Logout
               </HeaderMenuItemButton>
             )}

src/frontend/src/components/appHeaderComponent/components/FlowMenu/index.tsx

@@ -64,13 +64,15 @@ export const MenuBar = ({}: {}): JSX.Element => {
     customStringify(currentFlow) !== customStringify(currentSavedFlow);
 
   const savedText =
-    updatedAt && changesNotSaved
-      ? SAVED_HOVER +
-        new Date(updatedAt).toLocaleString("en-US", {
-          hour: "numeric",
-          minute: "numeric",
-        })
-      : "Saved";
+    updatedAt && changesNotSaved ? (
+      SAVED_HOVER +
+      new Date(updatedAt).toLocaleString("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+      })
+    ) : (
+      <div className="text-[#059669]">Saved</div>
+    );
 
   function handleAddFlow() {
     try {
@@ -91,11 +93,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
 
   function printByBuildStatus() {
     if (isBuilding) {
-      return "Building...";
+      return <div className="truncate">Building...</div>;
     } else if (saveLoading) {
-      return "Saving...";
+      return <div className="truncate">Saving...</div>;
     }
-    return savedText;
+    // return savedText;
+    return <div className="truncate text-[#059669]">Saved</div>;
   }
 
   const handleSave = () => {
@@ -108,36 +111,44 @@ export const MenuBar = ({}: {}): JSX.Element => {
   useHotkeys(changes, handleSave, { preventDefault: true });
 
   return currentFlow && onFlowPage ? (
-    <div className="flex items-center">
-      <div className="header-menu-bar">
+    <div className="flex items-baseline gap-2 truncate">
+      <div className="header-menu-bar w-full justify-end truncate">
         {currentFolder?.name && (
-          <>
+          <div className="flex hidden truncate md:flex">
             <div
-              className="cursor-pointer whitespace-nowrap font-normal text-zinc-500 dark:text-zinc-400"
+              className="cursor-pointer truncate text-muted-foreground hover:text-primary"
               onClick={() => {
                 navigate("/");
               }}
             >
               {currentFolder?.name}
             </div>
-            <div className="px-2 font-normal text-zinc-500">/</div>
-          </>
+          </div>
         )}
+      </div>
+      <div className="hidden w-fit font-normal text-muted-foreground md:flex">
+        /
+      </div>
+
+      <div className="w-fit truncate text-sm sm:overflow-visible sm:whitespace-normal">
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <div className="header-menu-bar-display-2">
+            <div className="header-menu-bar-display-2 group truncate">
               <div
-                className="header-menu-flow-name-2 flex"
+                className="header-menu-flow-name-2 truncate"
                 data-testid="flow-configuration-button"
               >
                 <div
-                  className="whitespace-nowrap font-semibold text-black dark:text-[white]"
+                  className="truncate font-semibold group-hover:text-primary dark:text-[white]"
                   data-testid="flow_name"
                 >
                   {currentFlow.name}
                 </div>
               </div>
-              <IconComponent name="ChevronDown" className="w-4 text-zinc-500" />
+              <IconComponent
+                name="ChevronDown"
+                className="flex h-5 w-5 text-muted-foreground group-hover:text-primary"
+              />
             </div>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-44 bg-white dark:bg-black">
@@ -268,7 +279,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
         ></FlowSettingsModal>
         <FlowLogsModal open={openLogs} setOpen={setOpenLogs}></FlowLogsModal>
       </div>
-      <div className="flex items-center">
+      <div className="hidden w-full items-center truncate sm:flex">
         {!autoSaving && (
           <Button
             variant="primary"
@@ -309,14 +320,16 @@ export const MenuBar = ({}: {}): JSX.Element => {
             )
           }
           side="bottom"
-          styleClasses="cursor-default"
+          styleClasses="cursor-default z-10"
         >
-          <div className="ml-2 flex cursor-default items-center gap-2 text-sm text-muted-foreground transition-all">
-            <div className="flex cursor-default items-center gap-2 text-sm text-zinc-500 transition-all">
-              <div>{printByBuildStatus()}</div>
+          <div className="mr-3 flex cursor-default items-center gap-2 truncate text-sm text-muted-foreground">
+            <div className="flex cursor-default items-center gap-2 truncate text-sm text-zinc-500">
+              <div className="w-full truncate text-xs">
+                {printByBuildStatus()}
+              </div>
             </div>
             <button
-              data-testid="stop_building_button"
+              data-testid="stop_building_button "
               disabled={!isBuilding}
               onClick={(_) => {
                 if (isBuilding) {
@@ -325,7 +338,7 @@ export const MenuBar = ({}: {}): JSX.Element => {
               }}
               className={
                 isBuilding
-                  ? "flex items-center gap-1.5 text-status-red transition-all"
+                  ? "flex hidden items-center gap-1.5 text-xs text-status-red sm:flex"
                   : "hidden"
               }
             >

src/frontend/src/components/appHeaderComponent/components/GithubStarButton/index.tsx

@@ -1,17 +1,22 @@
+import ShadTooltip from "@/components/shadTooltipComponent";
 import { useDarkStore } from "@/stores/darkStore";
 import { FaGithub } from "react-icons/fa";
 
 export const GithubStarComponent = () => {
   const stars = useDarkStore((state) => state.stars);
 
   return (
-    <div className="header-github-link gap-1 bg-zinc-100 dark:bg-zinc-900 dark:hover:bg-zinc-900">
-      <FaGithub className="h-4 w-4 text-black dark:text-[white]" />
-      <div className="hidden text-black dark:text-[white] lg:block">Star</div>
-      <div className="header-github-display text-black dark:text-[white]">
-        {stars?.toLocaleString() ?? 0}
+    <ShadTooltip content="Go to Github repo" side="bottom" styleClasses="z-10">
+      <div className="header-github-link-box gap-1 bg-muted hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800">
+        <FaGithub className="h-4 w-4 text-black dark:text-[white]" />
+        <div className="hidden text-xs font-semibold text-black dark:text-[white] lg:block">
+          Star
+        </div>
+        <div className="header-github-display text-xs font-semibold text-black dark:text-[white]">
+          {stars.toLocaleString() ?? 0}
+        </div>
       </div>
-    </div>
+    </ShadTooltip>
   );
 };
 

src/frontend/src/components/appHeaderComponent/components/HeaderMenu/index.tsx

@@ -1,3 +1,4 @@
+import ForwardedIconComponent from "@/components/genericIconComponent";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Menu, Transition } from "@headlessui/react";
 import { ChevronsUpDown } from "lucide-react";
@@ -54,28 +55,36 @@ export const HeaderMenuSelector = ({
 );
 
 const BASE_ITEM_STYLES =
-  "group flex w-full items-center justify-between h-[46px] rounded-md pl-2 py-2 text-sm text-gray-900 dark:text-[white] dark:hover:bg-zinc-800 hover:bg-gray-100";
+  "group flex w-full items-center justify-between h-[40px] my-1 rounded-md px-3 text-sm text-gray-900 dark:text-[white] dark:hover:bg-zinc-800 hover:bg-gray-100";
 
 export const HeaderMenuItemLink = ({
   href = "#",
   selected = false,
   children,
   newPage = false,
+  icon = "external-link",
 }) => (
   <Menu.Item>
     {({ active }) => (
       <a
-        className={`${selected ? "bg-gray-50" : ""} ${BASE_ITEM_STYLES}`}
+        className={`group ${selected ? "bg-gray-50" : ""} ${BASE_ITEM_STYLES}`}
         href={href}
         {...(newPage ? { rel: "noreferrer", target: "_blank" } : {})}
       >
         {children}
+        {icon && (
+          <ForwardedIconComponent
+            name={icon}
+            className="side-bar-button-size hidden h-[18px] w-[18px] group-hover:block" // Use group-hover:block to show on hover
+          />
+        )}
       </a>
     )}
   </Menu.Item>
 );
 
 export const HeaderMenuItemButton = ({
+  icon = "",
   onClick,
   selected = false,
   children,
@@ -87,6 +96,12 @@ export const HeaderMenuItemButton = ({
         onClick={onClick}
       >
         {children}
+        {icon && (
+          <ForwardedIconComponent
+            name={icon}
+            className="side-bar-button-size hidden h-[18px] w-[18px] group-hover:block" // Use group-hover:block to show on hover
+          />
+        )}
       </button>
     )}
   </Menu.Item>
@@ -108,7 +123,7 @@ export const HeaderMenuItems = ({
       leaveTo="transform opacity-0 scale-95"
     >
       <Menu.Items
-        className={`absolute dark:bg-black ${positionClass} z-[999] mt-2 w-[20rem] origin-top-right rounded-md bg-[white] shadow-lg ring-1 ring-black/5 focus:outline-none`}
+        className={`absolute dark:bg-black ${positionClass} z-[999] mt-2 w-[20rem] origin-top-right rounded-md border bg-[white] shadow-lg ring-1 ring-black/5 focus:outline-none dark:border-zinc-800`}
       >
         {children}
       </Menu.Items>
@@ -118,7 +133,7 @@ export const HeaderMenuItems = ({
 
 export const HeaderMenuItemsSection = ({ children }) => (
   <>
-    <div className="m-1 p-1">{children}</div>
+    <div className="px-1">{children}</div>
     <hr className="border-gray-200 last:hidden dark:border-zinc-700" />
   </>
 );