From 293aff850866c33adbf9298ff1de5f415d2a72ff Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 28 Jan 2025 21:06:33 -0800
Subject: [PATCH] Added search to toolbar and added collapse/open toggle

---
 app/w/[id]/workflow.tsx                      |  2 +-
 app/w/components/control-bar/control-bar.tsx |  6 +--
 app/w/components/toolbar/toolbar.tsx         | 40 +++++++++++++++++++-
 app/w/layout.tsx                             | 20 +++++-----
 4 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/app/w/[id]/workflow.tsx b/app/w/[id]/workflow.tsx
index cd192da18c..b603a192e1 100644
--- a/app/w/[id]/workflow.tsx
+++ b/app/w/[id]/workflow.tsx
@@ -259,7 +259,7 @@ function WorkflowCanvas() {
   // }, [])
 
   return (
-    <div className="relative w-full h-[calc(100vh-56px)]">
+    <div className="relative w-full h-[calc(100vh-4rem)]">
       <NotificationList />
       <style>{keyframeStyles}</style>
       <ReactFlow
diff --git a/app/w/components/control-bar/control-bar.tsx b/app/w/components/control-bar/control-bar.tsx
index ac32dcf880..0c8a3ad6d7 100644
--- a/app/w/components/control-bar/control-bar.tsx
+++ b/app/w/components/control-bar/control-bar.tsx
@@ -29,7 +29,7 @@ export function ControlBar() {
   }, [])
 
   return (
-    <div className="flex h-16 w-full items-center justify-between bg-background px-6 border-b">
+    <div className="flex h-16 w-full items-center justify-between bg-background px-6 border-b transition-all duration-300">
       {/* Left Section - Workflow Info */}
       <div className="flex flex-col gap-[2px]">
         <h2 className="font-semibold text-sm">Workflow 1</h2>
@@ -112,8 +112,8 @@ export function ControlBar() {
           )}
         </DropdownMenu>
 
-        <Button 
-          className="gap-2 bg-[#7F2FFF] hover:bg-[#7F2FFF]/90" 
+        <Button
+          className="gap-2 bg-[#7F2FFF] hover:bg-[#7F2FFF]/90"
           onClick={handleRunWorkflow}
           disabled={isExecuting}
         >
diff --git a/app/w/components/toolbar/toolbar.tsx b/app/w/components/toolbar/toolbar.tsx
index d6abe1c5eb..bed1b931f5 100644
--- a/app/w/components/toolbar/toolbar.tsx
+++ b/app/w/components/toolbar/toolbar.tsx
@@ -2,15 +2,21 @@
 
 import { useState, useMemo } from 'react'
 import { Input } from '@/components/ui/input'
-import { Search } from 'lucide-react'
+import { Search, PanelRightClose, PanelRight } from 'lucide-react'
 import { ToolbarTabs } from './components/toolbar-tabs/toolbar-tabs'
 import { ToolbarBlock } from './components/toolbar-block/toolbar-block'
 import { getBlocksByCategory, getAllBlocks } from '../../../../blocks'
 import { BlockCategory, BlockConfig } from '../../../../blocks/types'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 
 export function Toolbar() {
   const [activeTab, setActiveTab] = useState<BlockCategory>('basic')
   const [searchQuery, setSearchQuery] = useState('')
+  const [isCollapsed, setIsCollapsed] = useState(false)
 
   const blocks = useMemo(() => {
     if (!searchQuery.trim()) {
@@ -25,8 +31,25 @@ export function Toolbar() {
     )
   }, [searchQuery, activeTab])
 
+  if (isCollapsed) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={() => setIsCollapsed(false)}
+            className="fixed left-20 bottom-[18px] z-10 flex h-9 w-9 items-center justify-center rounded-lg bg-background text-muted-foreground transition-colors hover:text-foreground hover:bg-accent border"
+          >
+            <PanelRight className="h-5 w-5" />
+            <span className="sr-only">Open Toolbar</span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right">Open Toolbar</TooltipContent>
+      </Tooltip>
+    )
+  }
+
   return (
-    <div className="fixed left-14 top-0 z-1 hidden h-full w-64 border-r bg-background sm:block">
+    <div className="relative z-1 hidden h-[calc(100vh-4rem)] overflow-y-auto w-64 border-r bg-background sm:block">
       <div className="px-4 pt-4">
         <div className="relative">
           <Search className="absolute left-3 top-[50%] h-4 w-4 -translate-y-[50%] text-muted-foreground" />
@@ -50,6 +73,19 @@ export function Toolbar() {
           ))}
         </div>
       </div>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={() => setIsCollapsed(true)}
+            className="absolute right-4 bottom-5 flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground hover:bg-accent"
+          >
+            <PanelRightClose className="h-5 w-5" />
+            <span className="sr-only">Close Toolbar</span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="left">Close Toolbar</TooltipContent>
+      </Tooltip>
     </div>
   )
 }
diff --git a/app/w/layout.tsx b/app/w/layout.tsx
index 37ebbae523..dcf8fba26a 100644
--- a/app/w/layout.tsx
+++ b/app/w/layout.tsx
@@ -10,17 +10,17 @@ export default function WorkspaceLayout({
 }) {
   return (
     <Providers>
-      <div className="flex min-h-screen w-full flex-col bg-muted/40">
-        <nav className="flex">
-          <Sidebar />
-          <Toolbar />
-          <div className="fixed top-0 left-[312px] right-0 z-30">
-            <ControlBar />
+      <div className="flex min-h-screen w-full">
+        <Sidebar />
+        <div className="flex-1 flex flex-col pl-14">
+          <ControlBar />
+          <div className="flex flex-1 h-16">
+            <Toolbar />
+            <main className="flex-1 grid items-start gap-2 bg-muted/40 h-[calc(100vh-4rem)]">
+              {children}
+            </main>
           </div>
-        </nav>
-        <main className="flex-1 grid items-start gap-2 sm:gap-4 sm:py-0 md:gap-4 sm:pt-[56px] sm:pl-[312px] bg-muted/40">
-          {children}
-        </main>
+        </div>
       </div>
     </Providers>
   )