feat(sidebar-controls): added ability to expand on hover (#343)

Author: emir-karabeg

apps/sim/app/api/workflows/[id]/status/route.ts

@@ -26,13 +26,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         validation.workflow.deployedState as any
       )
     }
-
-    logger.info(`[${requestId}] Retrieved status for workflow: ${id}`, {
-      isDeployed: validation.workflow.isDeployed,
-      isPublished: validation.workflow.isPublished,
-      needsRedeployment,
-    })
-
+    
     return createSuccessResponse({
       isDeployed: validation.workflow.isDeployed,
       deployedAt: validation.workflow.deployedAt,

apps/sim/app/globals.css

@@ -140,6 +140,7 @@
 
 /* Custom Animations */
 @layer utilities {
+
   /* Animation containment to avoid layout shifts */
   .animation-container {
     contain: paint layout style;
@@ -150,9 +151,11 @@
     0% {
       box-shadow: 0 0 0 0 hsl(var(--border));
     }
+
     50% {
       box-shadow: 0 0 0 8px hsl(var(--border));
     }
+
     100% {
       box-shadow: 0 0 0 0 hsl(var(--border));
     }
@@ -195,34 +198,37 @@
     0% {
       transform: translateX(-100%);
     }
+
     100% {
       transform: translateX(100%);
     }
   }
 
   @keyframes orbit {
     0% {
-      transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px))
-        rotate(calc(var(--angle) * -1deg));
+      transform: rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg));
     }
+
     100% {
-      transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px))
-        rotate(calc((var(--angle) * -1deg) - 360deg));
+      transform: rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg));
     }
   }
 
   @keyframes marquee {
     from {
       transform: translateX(0);
     }
+
     to {
       transform: translateX(calc(-100% - var(--gap)));
     }
   }
+
   @keyframes marquee-vertical {
     from {
       transform: translateY(0);
     }
+
     to {
       transform: translateY(calc(-100% - var(--gap)));
     }
@@ -234,30 +240,27 @@
 
   .streaming-effect::after {
     content: '';
-    @apply pointer-events-none absolute top-0 left-0 h-full w-full;
-    background: linear-gradient(
-      90deg,
-      rgba(128, 128, 128, 0) 0%,
-      rgba(128, 128, 128, 0.1) 50%,
-      rgba(128, 128, 128, 0) 100%
-    );
+    @apply pointer-events-none absolute left-0 top-0 h-full w-full;
+    background: linear-gradient(90deg,
+        rgba(128, 128, 128, 0) 0%,
+        rgba(128, 128, 128, 0.1) 50%,
+        rgba(128, 128, 128, 0) 100%);
     animation: code-shimmer 1.5s infinite;
     z-index: 10;
   }
 
   .dark .streaming-effect::after {
-    background: linear-gradient(
-      90deg,
-      rgba(180, 180, 180, 0) 0%,
-      rgba(180, 180, 180, 0.1) 50%,
-      rgba(180, 180, 180, 0) 100%
-    );
+    background: linear-gradient(90deg,
+        rgba(180, 180, 180, 0) 0%,
+        rgba(180, 180, 180, 0.1) 50%,
+        rgba(180, 180, 180, 0) 100%);
   }
 
   @keyframes fadeIn {
     from {
       opacity: 0;
     }
+
     to {
       opacity: 1;
     }
@@ -270,8 +273,10 @@
 
 /* Dark mode error badge styling */
 .dark .error-badge {
-  background-color: hsl(0, 70%, 20%) !important; /* Darker red background for dark mode */
-  color: hsl(0, 0%, 100%) !important; /* Pure white text for better contrast */
+  background-color: hsl(0, 70%, 20%) !important;
+  /* Darker red background for dark mode */
+  color: hsl(0, 0%, 100%) !important;
+  /* Pure white text for better contrast */
 }
 
 /* Input Overrides */
@@ -293,10 +298,12 @@ input[type='search']::-ms-clear {
 
 /* Code Prompt Bar Placeholder Animation */
 @keyframes placeholder-pulse {
+
   0%,
   100% {
     opacity: 0.5;
   }
+
   50% {
     opacity: 0.8;
   }
@@ -319,3 +326,9 @@ input[type='search']::-ms-clear {
 .font-geist-mono {
   font-family: var(--font-geist-mono);
 }
+
+/* Sidebar overlay styles */
+.main-content-overlay {
+  z-index: 40;
+  /* Higher z-index to appear above content */
+}

apps/sim/app/w/[id]/components/control-bar/control-bar.tsx

@@ -76,7 +76,6 @@ const RUN_COUNT_OPTIONS = [1, 5, 10, 25, 50, 100]
 export function ControlBar() {
   const router = useRouter()
   const { data: session } = useSession()
-  const { isCollapsed: isSidebarCollapsed } = useSidebarStore()
 
   // Store hooks
   const {

apps/sim/app/w/[id]/components/toolbar/toolbar.tsx

@@ -14,8 +14,13 @@ import { ToolbarTabs } from './components/toolbar-tabs/toolbar-tabs'
 export function Toolbar() {
   const [activeTab, setActiveTab] = useState<BlockCategory>('blocks')
   const [searchQuery, setSearchQuery] = useState('')
-  const [isCollapsed, setIsCollapsed] = useState(false)
-  const { isCollapsed: isSidebarCollapsed } = useSidebarStore()
+  const { mode, isExpanded } = useSidebarStore()
+  // In hover mode, act as if sidebar is always collapsed for layout purposes
+  const isSidebarCollapsed =
+    mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'
+
+  // State to track if toolbar is open - independent of sidebar state
+  const [isToolbarOpen, setIsToolbarOpen] = useState(true)
 
   const blocks = useMemo(() => {
     const filteredBlocks = !searchQuery.trim() ? getBlocksByCategory(activeTab) : getAllBlocks()
@@ -31,13 +36,14 @@ export function Toolbar() {
     })
   }, [searchQuery, activeTab])
 
-  if (isCollapsed) {
+  // Show toolbar button when it's closed, regardless of sidebar state
+  if (!isToolbarOpen) {
     return (
       <Tooltip>
         <TooltipTrigger asChild>
           <button
-            onClick={() => setIsCollapsed(false)}
-            className={`fixed transition-left duration-200 ${isSidebarCollapsed ? 'left-20' : 'left-64'} bottom-[18px] z-10 flex h-9 w-9 items-center justify-center rounded-lg bg-background text-muted-foreground hover:text-foreground hover:bg-accent border`}
+            onClick={() => setIsToolbarOpen(true)}
+            className={`fixed transition-all duration-200 ${isSidebarCollapsed ? 'left-20' : 'left-64'} bottom-[18px] z-10 flex h-9 w-9 items-center justify-center rounded-lg bg-background text-muted-foreground hover:text-foreground hover:bg-accent border`}
           >
             <PanelRight className="h-5 w-5" />
             <span className="sr-only">Open Toolbar</span>
@@ -50,7 +56,7 @@ export function Toolbar() {
 
   return (
     <div
-      className={`fixed transition-left duration-200 ${isSidebarCollapsed ? 'left-14' : 'left-60'} top-16 z-10 h-[calc(100vh-4rem)] w-60 border-r bg-background sm:block`}
+      className={`fixed transition-all duration-200 ${isSidebarCollapsed ? 'left-14' : 'left-60'} top-16 z-10 h-[calc(100vh-4rem)] w-60 border-r bg-background sm:block`}
     >
       <div className="flex flex-col h-full">
         <div className="px-4 pt-4 pb-1 sticky top-0 bg-background z-20">
@@ -89,7 +95,7 @@ export function Toolbar() {
           <Tooltip>
             <TooltipTrigger asChild>
               <button
-                onClick={() => setIsCollapsed(true)}
+                onClick={() => setIsToolbarOpen(false)}
                 className="absolute right-4 bottom-[18px] flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent"
               >
                 <PanelLeftClose className="h-5 w-5" />

apps/sim/app/w/[id]/workflow.tsx

@@ -48,7 +48,10 @@ function WorkflowContent() {
   // State
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null)
   const [isInitialized, setIsInitialized] = useState(false)
-  const { isCollapsed: isSidebarCollapsed } = useSidebarStore()
+  const { mode, isExpanded } = useSidebarStore()
+  // In hover mode, act as if sidebar is always collapsed for layout purposes
+  const isSidebarCollapsed =
+    mode === 'expanded' ? !isExpanded : mode === 'collapsed' || mode === 'hover'
 
   // Hooks
   const params = useParams()
@@ -478,8 +481,8 @@ function WorkflowContent() {
     <div className="flex flex-col h-screen w-full overflow-hidden">
       <div className={`transition-all duration-200 ${isSidebarCollapsed ? 'ml-14' : 'ml-60'}`}>
         <ControlBar />
-        <Toolbar />
       </div>
+      <Toolbar />
       <div
         className={`flex-1 relative w-full h-full transition-all duration-200 ${isSidebarCollapsed ? 'pl-14' : 'pl-60'}`}
       >

apps/sim/app/w/components/sidebar/components/sidebar-control/sidebar-control.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useState } from 'react'
+import { PanelRight } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { SidebarMode, useSidebarStore } from '@/stores/sidebar/store'
+
+// This component ONLY controls sidebar state, not toolbar state
+export function SidebarControl() {
+  const { mode, setMode, toggleExpanded, isExpanded } = useSidebarStore()
+  const [open, setOpen] = useState(false)
+
+  const handleModeChange = (value: SidebarMode) => {
+    // When selecting expanded mode, ensure it's expanded
+    if (value === 'expanded' && !isExpanded) {
+      toggleExpanded()
+    }
+
+    // Set the new mode
+    setMode(value)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="flex h-8 w-8 p-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/50 cursor-pointer"
+        >
+          <PanelRight className="h-[18px] w-[18px] text-muted-foreground" />
+          <span className="sr-only text-sm">Sidebar control</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-44 p-0 shadow-md border overflow-hidden rounded-lg bg-background"
+        side="top"
+        align="start"
+        sideOffset={5}
+      >
+        <div className="border-b py-[10px] px-4">
+          <h4 className="text-xs font-[480] text-muted-foreground">Sidebar control</h4>
+        </div>
+        <div className="px-2 pt-1 pb-2">
+          <div className="flex flex-col gap-[1px]">
+            <button
+              className={cn(
+                'w-full text-left py-1.5 px-2 text-xs rounded hover:bg-accent/50 text-muted-foreground font-medium'
+              )}
+              onClick={() => handleModeChange('expanded')}
+            >
+              <span className="flex items-center">
+                <span
+                  className={cn(
+                    'h-1 w-1 rounded-full mr-1.5',
+                    mode === 'expanded' ? 'bg-muted-foreground' : 'bg-transparent'
+                  )}
+                ></span>
+                Expanded
+              </span>
+            </button>
+            <button
+              className={cn(
+                'w-full text-left py-1.5 px-2 text-xs rounded hover:bg-accent/50 text-muted-foreground font-medium'
+              )}
+              onClick={() => handleModeChange('collapsed')}
+            >
+              <span className="flex items-center">
+                <span
+                  className={cn(
+                    'h-1 w-1 rounded-full mr-1.5',
+                    mode === 'collapsed' ? 'bg-muted-foreground' : 'bg-transparent'
+                  )}
+                ></span>
+                Collapsed
+              </span>
+            </button>
+            <button
+              className={cn(
+                'w-full text-left py-1.5 px-2 text-xs rounded hover:bg-accent/50 text-muted-foreground font-medium'
+              )}
+              onClick={() => handleModeChange('hover')}
+            >
+              <span className="flex items-center">
+                <span
+                  className={cn(
+                    'h-1 w-1 rounded-full mr-1.5',
+                    mode === 'hover' ? 'bg-muted-foreground' : 'bg-transparent'
+                  )}
+                ></span>
+                Expand on hover
+              </span>
+            </button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}