fix: added new image to get started templates, fixed sidebar overlapp…

…ing bug (langflow-ai#4533)

* Fixed flow on top of sidebar

* Fixed get started templates design and bg image

* Fixed build button overflowing

* Changed truncation of list

* Fixed colors on collapse buttons

* Fixed is mobile hook and fixed sidebar not reappearing after hiding it in small screens

* Changed to max char 110

src/frontend/src/components/folderSidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -27,6 +27,7 @@ import { track } from "@/customization/utils/analytics";
 import { createFileUpload } from "@/helpers/create-file-upload";
 import { getObjectsFromFilelist } from "@/helpers/get-objects-from-filelist";
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
+import { useIsMobile } from "@/hooks/use-mobile";
 import { useIsFetching, useIsMutating } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
 import { useLocation, useParams } from "react-router-dom";
@@ -401,8 +402,13 @@ const SideBarFoldersButtonsComponent = ({
     }
   };
 
+  const isMobile = useIsMobile({ maxWidth: 1024 });
+
   return (
-    <Sidebar collapsible="offcanvas" data-testid="folder-sidebar">
+    <Sidebar
+      collapsible={isMobile ? "offcanvas" : "none"}
+      data-testid="folder-sidebar"
+    >
       <SidebarHeader className="p-4">
         <HeaderButtons />
       </SidebarHeader>

src/frontend/src/components/ui/sidebar.tsx

@@ -164,7 +164,14 @@ const Sidebar = React.forwardRef<
     },
     ref,
   ) => {
-    const { state } = useSidebar();
+    const { state, setOpen } = useSidebar();
+
+    React.useEffect(() => {
+      if (collapsible === "none") {
+        console.log("collapsible === none");
+        setOpen(true);
+      }
+    }, [collapsible]);
 
     if (collapsible === "none") {
       return (
@@ -213,7 +220,7 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            "z-45 absolute inset-y-0 flex h-full transition-[left,right,width] duration-200 ease-linear",
+            "absolute inset-y-0 z-50 flex h-full transition-[left,right,width] duration-200 ease-linear",
             // Adjust width based on state and device
             "w-[--sidebar-width]",
             "max-sm:group-data-[state=collapsed]:w-[--sidebar-width-icon]",
@@ -260,7 +267,7 @@ const SidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="ghost"
       size="icon"
-      className={cn("h-8 w-8", className)}
+      className={cn("h-7 w-7 text-muted-foreground", className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();

src/frontend/src/hooks/use-mobile.ts

@@ -2,20 +2,31 @@ import * as React from "react";
 
 const MOBILE_BREAKPOINT = 768;
 
-export function useIsMobile() {
+export function useIsMobile({ maxWidth }: { maxWidth?: number } = {}) {
+  const breakpoint = maxWidth || MOBILE_BREAKPOINT;
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
     undefined,
   );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    const mql = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < breakpoint);
+    };
+
+    // Initial check
+    handleResize();
+
+    // Add both matchMedia and resize listeners
+    mql.addEventListener("change", handleResize);
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      mql.removeEventListener("change", handleResize);
+      window.addEventListener("resize", handleResize);
     };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
+  }, [breakpoint]);
 
   return !!isMobile;
 }

src/frontend/src/modals/baseModal/helpers/switch-case-size.ts

@@ -41,7 +41,7 @@ export const switchCaseModalSize = (size: string) => {
     case "templates":
       minWidth = "w-[97vw] max-w-[1200px]";
       height =
-        "min-h-[700px] lg:min-h-0 h-[90vh] md:h-[80vh] lg:h-[50vw] lg:max-h-[640px]";
+        "min-h-[700px] lg:min-h-0 h-[90vh] md:h-[80vh] lg:h-[50vw] lg:max-h-[620px]";
       break;
     case "three-cards":
       minWidth = "min-w-[1066px]";

src/frontend/src/modals/templatesModal/components/GetStartedComponent/index.tsx

@@ -1,9 +1,13 @@
 import BaseModal from "@/modals/baseModal";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { CardData } from "@/types/templates/types";
-import memoryChatbotSpiral from "../../../../assets/artwork-spiral-1-def.svg";
-import vectorRagSpiral from "../../../../assets/artwork-spiral-2-def.svg";
-import multiAgentSpiral from "../../../../assets/artwork-spiral-3-def.svg";
+import memoryChatbot from "../../../../assets/temp-pat-1.png";
+import vectorRag from "../../../../assets/temp-pat-2.png";
+import multiAgent from "../../../../assets/temp-pat-3.png";
+import memoryChatbotHorizontal from "../../../../assets/temp-pat-m-1.png";
+import vectorRagHorizontal from "../../../../assets/temp-pat-m-2.png";
+import multiAgentHorizontal from "../../../../assets/temp-pat-m-3.png";
+
 import TemplateGetStartedCardComponent from "../TemplateGetStartedCardComponent";
 
 export default function GetStartedComponent() {
@@ -12,22 +16,22 @@ export default function GetStartedComponent() {
   // Define the card data
   const cardData: CardData[] = [
     {
-      bg: "radial-gradient(ellipse at top left, #A3E8EF, #ADF6FD, #9676fd)",
-      spiralImage: memoryChatbotSpiral,
+      bgImage: memoryChatbot,
+      bgHorizontalImage: memoryChatbotHorizontal,
       icon: "MessagesSquare",
       category: "Prompting",
       flow: examples.find((example) => example.name === "Memory Chatbot"),
     },
     {
-      bg: "radial-gradient(ellipse at top right, #f599fe, #de8afa, #9a5af7)",
-      spiralImage: vectorRagSpiral,
+      bgImage: vectorRag,
+      bgHorizontalImage: vectorRagHorizontal,
       icon: "Database",
       category: "RAG",
       flow: examples.find((example) => example.name === "Vector Store RAG"),
     },
     {
-      bg: "radial-gradient(ellipse at top left, #ed93f5, #e0bae9, #a5f0af)",
-      spiralImage: multiAgentSpiral,
+      bgImage: multiAgent,
+      bgHorizontalImage: multiAgentHorizontal,
       icon: "Bot",
       category: "Agents",
       flow: examples.find((example) => example.name === "Dynamic Agent"),

src/frontend/src/modals/templatesModal/components/TemplateGetStartedCardComponent/index.tsx

@@ -4,14 +4,12 @@ import { track } from "@/customization/utils/analytics";
 import useAddFlow from "@/hooks/flows/use-add-flow";
 import { useFolderStore } from "@/stores/foldersStore";
 import { updateIds } from "@/utils/reactflowUtils";
-import { BG_NOISE } from "@/utils/styleUtils";
-import { cn } from "@/utils/utils";
 import { useParams } from "react-router-dom";
 import { CardData } from "../../../../types/templates/types";
 
 export default function TemplateGetStartedCardComponent({
-  bg,
-  spiralImage,
+  bgImage,
+  bgHorizontalImage,
   icon,
   category,
   flow,
@@ -49,23 +47,20 @@ export default function TemplateGetStartedCardComponent({
       onKeyDown={handleKeyDown}
       onClick={handleClick}
     >
-      <div
-        className={cn(
-          "absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] rounded-2xl object-cover brightness-90 saturate-[140%]",
-        )}
-        style={{
-          backgroundImage: BG_NOISE + "," + bg,
-        }}
-      />
       <div className="absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] overflow-hidden rounded-2xl">
         <img
-          src={spiralImage}
+          src={bgImage}
           alt={`${flow.name} Spiral`}
-          className="h-full w-full object-cover opacity-25 transition-all duration-300 group-hover:scale-[102%] group-hover:opacity-60 group-focus-visible:scale-[102%] group-focus-visible:opacity-60"
+          className="hidden h-full w-full object-cover transition-all duration-300 group-hover:scale-[102%] group-focus-visible:scale-[102%] lg:block"
+        />
+        <img
+          src={bgHorizontalImage}
+          alt={`${flow.name} Horizontal`}
+          className="block h-full w-full object-cover transition-all duration-300 group-hover:scale-[102%] group-focus-visible:scale-[102%] lg:hidden"
         />
       </div>
       <div className="card-shine-effect absolute inset-2 flex h-[calc(100%-16px)] min-w-[calc(100%-16px)] flex-col items-start gap-1 rounded-2xl p-4 text-white md:gap-3 lg:gap-4 lg:py-6">
-        <div className="flex items-center gap-2 text-white mix-blend-overlay">
+        <div className="flex items-center gap-2 text-zinc-400 mix-blend-plus-lighter">
           <ForwardedIconComponent name={icon} className="h-4 w-4" />
           <span className="font-mono text-xs font-semibold uppercase tracking-wider">
             {category}

src/frontend/src/pages/MainPage/components/header/index.tsx

@@ -57,7 +57,9 @@ const HeaderComponent = ({
         className="flex items-center pb-8 text-xl font-semibold"
         data-testid="mainpage_title"
       >
-        <div className={cn("w-10 transition-all lg:hidden", open && "md:w-0")}>
+        <div
+          className={cn("h-7 w-10 transition-all lg:hidden", open && "md:w-0")}
+        >
           <div
             className={cn(
               "relative left-0 opacity-100 transition-all",
@@ -68,7 +70,7 @@ const HeaderComponent = ({
               <ForwardedIconComponent
                 name="PanelLeftOpen"
                 aria-hidden="true"
-                className="text-zinc-500 dark:text-zinc-400"
+                className=""
               />
             </SidebarTrigger>
           </div>

src/frontend/src/pages/MainPage/components/list/index.tsx

@@ -144,8 +144,10 @@ const ListComponent = ({ flowData }: { flowData: FlowType }) => {
                 Edited {timeElapsed(flowData.updated_at)} ago
               </div>
             </div>
-            <div className="overflow-hidden truncate text-sm text-primary">
-              {flowData.description}
+            <div className="overflow-hidden text-sm text-primary">
+              <span className="block max-w-[110ch] truncate">
+                {flowData.description}
+              </span>
             </div>
           </div>
         </div>

src/frontend/src/style/applies.css

@@ -322,7 +322,7 @@
     @apply flex flex-col justify-center bg-background transition-all;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center gap-2;
+    @apply flex flex-1 items-center gap-2 overflow-hidden;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;

src/frontend/src/types/templates/types.ts

@@ -12,8 +12,8 @@ export interface Category {
 }
 
 export interface CardData {
-  bg: string;
-  spiralImage: string;
+  bgImage: string;
+  bgHorizontalImage: string;
   icon: string;
   category: string;
   flow: FlowType | undefined;