refactor: replace promo banner with global navbar and optimize workflow dashboard layout

Author: Praashh

app/app/flow/page.tsx

@@ -13,7 +13,6 @@ import {
   Upload,
   Workflow as WorkflowIcon,
 } from "lucide-react";
-import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
@@ -199,16 +198,17 @@ export default function FlowPage() {
   return (
     <div className="flex-1 p-11 px-14 bg-background">
       {/* Header */}
-      <div className="flex items-start justify-between mb-2">
-        <div>
-          <h1 className="text-[30px] font-semibold text-[#1F1F23] leading-none tracking-tight">
-            Flow
-          </h1>
-          <p className="text-[16px] font-normal text-[#858589] mt-2">
-            Build workflows or run models directly
-          </p>
-        </div>
+      <div className="flex items-center justify-end mb-2">
         <div className="flex items-center gap-2.5">
+          <div className="relative">
+            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 size-[18px] text-[#858589]" />
+            <Input
+              placeholder="Search workflows..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10.5 h-10 w-[280px] text-[15px] bg-[#EFEFEF] border-transparent rounded-[8px] placeholder-[#858589] font-normal focus-visible:ring-0 focus-visible:border-gray-300"
+            />
+          </div>
           <Button
             variant="outline"
             onClick={importWorkflow}
@@ -227,55 +227,11 @@ export default function FlowPage() {
         </div>
       </div>
 
-      {/* System Workflows */}
+      {/* Your Workflows */}
       <section className="mt-11">
-        <h2 className="text-[20px] font-semibold text-gray-900 mb-1 tracking-tight">
-          System Workflows
+        <h2 className="text-[20px] font-semibold text-gray-900 tracking-tight mb-1">
+          Your Workflows
         </h2>
-        <p className="text-[15px] text-[#858589] mb-5">
-          Prebuilt workflow templates - click to open and start using.
-        </p>
-
-        <div className="flex flex-wrap gap-8 max-w-[1300px]">
-          {/* Racing car template */}
-          <button
-            type="button"
-            onClick={() => createWorkflow("racing-car")}
-            className="group text-left bg-[#F3F3F3] rounded-[12px] overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.06)] hover:shadow-md transition-all cursor-pointer flex flex-col w-[320px] shrink-0"
-          >
-            <div className="aspect-[16/11] relative overflow-hidden bg-gray-100 w-full">
-              <Image
-                src="/porsche-rear.png"
-                alt="AI Racing Car Generator"
-                fill
-                className="object-cover group-hover:scale-105 transition-transform duration-300"
-              />
-            </div>
-            <div className="p-4 text-center w-full">
-              <span className="text-[18px] font-medium text-gray-900">
-                AI Racing Car Generator
-              </span>
-            </div>
-          </button>
-        </div>
-      </section>
-
-      {/* Your Workflows */}
-      <section className="mt-14">
-        <div className="flex items-center justify-between mb-1">
-          <h2 className="text-[20px] font-semibold text-gray-900 tracking-tight">
-            Your Workflows
-          </h2>
-          <div className="relative">
-            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 size-[18px] text-[#858589]" />
-            <Input
-              placeholder="Search workflows..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-10.5 h-11 w-[360px] text-[15px] bg-[#EFEFEF] border-transparent rounded-[12px] placeholder-[#858589] font-normal focus-visible:ring-0 focus-visible:border-gray-300"
-            />
-          </div>
-        </div>
         <p className="text-[15px] text-[#858589] mb-5">
           Open one to edit, run, and review history.
         </p>
@@ -304,26 +260,62 @@ export default function FlowPage() {
             No workflows match &quot;{searchQuery}&quot;
           </p>
         ) : (
-          <div className="flex flex-wrap gap-7 max-w-[1300px]">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
             {filtered.map((wf) => (
               <div
                 key={wf.id}
-                className="group flex flex-col bg-[#F3F3F3] rounded-[12px] overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition-all w-[320px] shrink-0 relative"
+                className="group flex flex-col bg-[#F3F3F3] rounded-[12px] overflow-hidden shadow-[0_1px_2px_rgba(0,0,0,0.06)] hover:shadow-md transition-all relative cursor-pointer"
+                onClick={() => router.push(`/app/workflows/${wf.id}`)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") router.push(`/app/workflows/${wf.id}`);
+                }}
               >
-                {/* Card image container */}
-                <div className="relative aspect-[16/11] overflow-hidden w-full">
-                  <Image
-                    src="/porsche-rear.png"
-                    alt={wf.name}
-                    fill
-                    className="object-cover cursor-pointer group-hover:scale-105 transition-transform duration-300"
-                    onClick={() => router.push(`/app/workflows/${wf.id}`)}
-                  />
+                {/* Decorative header */}
+                <div className="relative h-28 bg-gradient-to-br from-[#E8E8ED] via-[#EAEAF0] to-[#E0E0E8] overflow-hidden">
+                  {/* Abstract node graph pattern */}
+                  <svg
+                    className="absolute inset-0 w-full h-full opacity-[0.18]"
+                    viewBox="0 0 320 112"
+                    fill="none"
+                  >
+                    <title>Workflow pattern</title>
+                    <circle cx="80" cy="36" r="14" stroke="#888" strokeWidth="1.5" />
+                    <circle cx="160" cy="56" r="14" stroke="#888" strokeWidth="1.5" />
+                    <circle cx="240" cy="36" r="14" stroke="#888" strokeWidth="1.5" />
+                    <circle cx="200" cy="88" r="10" stroke="#888" strokeWidth="1.5" />
+                    <circle cx="120" cy="84" r="10" stroke="#888" strokeWidth="1.5" />
+                    <line x1="94" y1="36" x2="146" y2="56" stroke="#888" strokeWidth="1.2" />
+                    <line x1="174" y1="56" x2="226" y2="36" stroke="#888" strokeWidth="1.2" />
+                    <line x1="160" y1="70" x2="200" y2="78" stroke="#888" strokeWidth="1.2" />
+                    <line x1="160" y1="70" x2="120" y2="74" stroke="#888" strokeWidth="1.2" />
+                  </svg>
+                  <div className="absolute top-4 left-4">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-[10px] bg-white/70 backdrop-blur-sm shadow-sm">
+                      <WorkflowIcon className="size-5 text-[#555]" />
+                    </div>
+                  </div>
 
-                  {/* Menu on upper right of image */}
-                  <div className="absolute top-3 right-3 z-10">
+                  {/* Running indicator */}
+                  {wf.isRunning && (
+                    <div className="absolute top-3.5 right-12 bg-white/90 backdrop-blur-xs px-2 py-0.5 rounded-full flex items-center gap-1 shadow-xs border border-gray-100">
+                      <span className="relative flex h-1.5 w-1.5">
+                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
+                        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500" />
+                      </span>
+                      <span className="text-[10px] font-semibold text-green-700">
+                        Running
+                      </span>
+                    </div>
+                  )}
+
+                  {/* Menu */}
+                  <div
+                    className="absolute top-3 right-3 z-10"
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  >
                     <DropdownMenu>
-                      <DropdownMenuTrigger className="flex h-7 w-7 items-center justify-center rounded-md bg-white/80 backdrop-blur-xs text-gray-600 hover:bg-white hover:text-gray-900 shadow-xs cursor-pointer">
+                      <DropdownMenuTrigger className="flex h-7 w-7 items-center justify-center rounded-md bg-white/60 backdrop-blur-xs text-gray-500 hover:bg-white hover:text-gray-900 shadow-xs cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity">
                         <MoreHorizontal className="size-4" />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="end" sideOffset={4}>
@@ -365,18 +357,6 @@ export default function FlowPage() {
                       </DropdownMenuContent>
                     </DropdownMenu>
                   </div>
-
-                  {wf.isRunning && (
-                    <div className="absolute top-3 right-12 z-10 bg-white/90 backdrop-blur-xs px-2 py-0.5 rounded-full flex items-center gap-1 shadow-xs border border-gray-100">
-                      <span className="relative flex h-1.5 w-1.5">
-                        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
-                        <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500" />
-                      </span>
-                      <span className="text-[10px] font-semibold text-green-700">
-                        Running
-                      </span>
-                    </div>
-                  )}
                 </div>
 
                 {/* Card content */}
@@ -387,22 +367,20 @@ export default function FlowPage() {
                       className="h-7 text-sm border-gray-300 bg-white"
                       value={renameValue}
                       onChange={(e) => setRenameValue(e.target.value)}
+                      onClick={(e) => e.stopPropagation()}
                       onKeyDown={(e) => {
+                        e.stopPropagation();
                         if (e.key === "Enter") renameWorkflow(wf.id);
                         if (e.key === "Escape") setRenaming(null);
                       }}
                       onBlur={() => renameWorkflow(wf.id)}
                     />
                   ) : (
                     <>
-                      <button
-                        type="button"
-                        onClick={() => router.push(`/app/workflows/${wf.id}`)}
-                        className="text-[18px] font-medium text-gray-900 truncate block w-full text-left hover:text-indigo-600 transition-colors cursor-pointer"
-                      >
+                      <span className="text-[16px] font-medium text-gray-900 truncate block">
                         {wf.name}
-                      </button>
-                      <span className="text-[14px] text-[#858589] mt-1 block font-normal">
+                      </span>
+                      <span className="text-[13px] text-[#858589] mt-1 block font-normal">
                         Edited {timeAgo(wf.updatedAt)}
                       </span>
                     </>

app/app/layout.tsx

@@ -1,7 +1,5 @@
 import type { Metadata } from "next";
-import { AppSidebar } from "@/components/app-sidebar";
-import { PromoBanner } from "@/components/promo-banner";
-import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Navbar } from "@/components/navbar";
 
 export const metadata: Metadata = {
   title: "Workflows",
@@ -11,12 +9,9 @@ export default function AppLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <div className="flex flex-col h-screen overflow-hidden">
-      <PromoBanner />
-      <SidebarProvider className="flex-1 !min-h-0">
-        <AppSidebar />
-        <SidebarInset className="overflow-auto">{children}</SidebarInset>
-      </SidebarProvider>
+    <div className="flex flex-col h-screen overflow-hidden bg-gray-50/30 dark:bg-zinc-950">
+      <Navbar />
+      <main className="flex-1 overflow-auto">{children}</main>
     </div>
   );
 }