From 48c654d342fd7074e729dcbaadc3bd19526db0e3 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Fri, 27 Mar 2026 21:29:08 -0700
Subject: [PATCH 1/3] improvement(ui): sidebar

---
 .../collapsed-sidebar-menu.tsx                |  4 +-
 .../settings-sidebar/settings-sidebar.tsx     |  2 +-
 .../workspace-header/workspace-header.tsx     |  2 +-
 .../w/components/sidebar/sidebar.tsx          | 66 +++++++++----------
 apps/sim/lib/auth/hybrid.ts                   |  2 +-
 5 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index 2aa727b68af..0685c0a8b76 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -128,7 +128,7 @@ function TaskStatusIcon({
 function WorkflowColorSwatch({ color }: { color: string }) {
   return (
     <div
-      className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
+      className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
       style={{
         backgroundColor: color,
         borderColor: `${color}60`,
@@ -161,7 +161,7 @@ export function CollapsedSidebarMenu({
             <button
               type='button'
               aria-label={ariaLabel}
-              className='mx-0.5 flex h-[30px] items-center rounded-[8px] px-2 hover-hover:bg-[var(--surface-hover)]'
+              className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 hover-hover:bg-[var(--surface-hover)]'
             >
               {icon}
             </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index 9792e3ed574..a21344fe3f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -210,7 +210,7 @@ export function SettingsSidebar({
       {/* Settings sections */}
       <div
         className={cn(
-          'mt-3.5 flex flex-1 flex-col gap-3.5',
+          'mt-3.5 flex flex-1 flex-col gap-3.5 pb-2',
           !isCollapsed && 'overflow-y-auto overflow-x-hidden'
         )}
       >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index ce5b8c67b57..fe33dc9ab00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -343,7 +343,7 @@ export function WorkspaceHeader({
                 type='button'
                 aria-label='Switch workspace'
                 className={cn(
-                  'group flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-1.5 transition-colors hover-hover:bg-[var(--surface-5)]',
+                  'group flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-[5px] transition-colors hover-hover:bg-[var(--surface-5)]',
                   isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-2 pr-2'
                 )}
                 title={activeWorkspace?.name || 'Loading...'}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index a48982e5631..876ea55ee59 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -101,8 +101,9 @@ const logger = createLogger('Sidebar')
 
 function SidebarItemSkeleton() {
   return (
-    <div className='sidebar-collapse-hide mx-0.5 flex h-[30px] items-center px-2'>
-      <Skeleton className='h-[24px] w-full rounded-sm' />
+    <div className='sidebar-collapse-hide mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2'>
+      <Skeleton className='h-[16px] w-[16px] flex-shrink-0 rounded-sm' />
+      <Skeleton className='h-[14px] w-full rounded-sm' />
     </div>
   )
 }
@@ -1027,7 +1028,7 @@ export const Sidebar = memo(function Sidebar() {
   const workflowsCollapsedIcon = useMemo(
     () => (
       <div
-        className='h-[16px] w-[16px] flex-shrink-0 rounded-[3px] border-[2px]'
+        className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
         style={workflowIconStyle}
       />
     ),
@@ -1053,6 +1054,14 @@ export const Sidebar = memo(function Sidebar() {
   // Stable no-op for collapsed workflow context menu delete (never changes)
   const noop = useCallback(() => {}, [])
 
+  const handleExpandSidebar = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      toggleCollapsed()
+    },
+    [toggleCollapsed]
+  )
+
   // Stable callback for the "New task" button in expanded mode
   const handleNewTask = useCallback(
     () => navigateToPage(`/workspace/${workspaceId}/home`),
@@ -1171,34 +1180,14 @@ export const Sidebar = memo(function Sidebar() {
         <div className='flex h-full flex-col pt-3'>
           {/* Top bar: Logo + Collapse toggle */}
           <div className='flex flex-shrink-0 items-center pr-2 pb-2 pl-2.5'>
-            <div className='relative flex h-[30px] items-center'>
-              <Link
-                href={`/workspace/${workspaceId}/home`}
-                className='sidebar-collapse-hide sidebar-collapse-remove flex h-[30px] items-center rounded-[8px] px-1.5 hover-hover:bg-[var(--surface-hover)]'
-                tabIndex={isCollapsed ? -1 : 0}
-              >
-                {brand.logoUrl ? (
-                  <Image
-                    src={brand.logoUrl}
-                    alt={brand.name}
-                    width={16}
-                    height={16}
-                    className='h-[16px] w-[16px] object-contain'
-                    unoptimized
-                  />
-                ) : (
-                  <Wordmark className='h-[16px] w-auto text-[var(--text-body)]' />
-                )}
-              </Link>
-
+            <div className='flex h-[30px] items-center'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <button
-                    type='button'
-                    onClick={toggleCollapsed}
-                    className='sidebar-collapse-show group absolute left-0 flex h-[30px] w-[30px] items-center justify-center rounded-[8px] hover-hover:bg-[var(--surface-hover)]'
-                    aria-label='Expand sidebar'
-                    tabIndex={isCollapsed ? 0 : -1}
+                  <Link
+                    href={`/workspace/${workspaceId}/home`}
+                    onClick={isCollapsed ? handleExpandSidebar : undefined}
+                    className='group flex h-[30px] items-center rounded-[8px] px-1.5 hover-hover:bg-[var(--surface-hover)]'
+                    aria-label={isCollapsed ? 'Expand sidebar' : brand.name}
                   >
                     {brand.logoUrl ? (
                       <Image
@@ -1206,16 +1195,23 @@ export const Sidebar = memo(function Sidebar() {
                         alt={brand.name}
                         width={16}
                         height={16}
-                        className='h-[16px] w-[16px] object-contain group-hover:hidden'
+                        className={cn(
+                          'h-[16px] w-[16px] flex-shrink-0 object-contain',
+                          isCollapsed && 'group-hover:hidden'
+                        )}
                         unoptimized
                       />
+                    ) : isCollapsed ? (
+                      <Sim className='h-[16px] w-[16px] flex-shrink-0 group-hover:hidden' />
                     ) : (
-                      <Sim className='h-[16px] w-[16px] text-[var(--text-icon)] group-hover:hidden' />
+                      <Wordmark className='h-[16px] w-auto text-[var(--text-body)]' />
+                    )}
+                    {isCollapsed && (
+                      <PanelLeft className='hidden h-[16px] w-[16px] flex-shrink-0 rotate-180 text-[var(--text-icon)] group-hover:block' />
                     )}
-                    <PanelLeft className='hidden h-[16px] w-[16px] rotate-180 text-[var(--text-icon)] group-hover:block' />
-                  </button>
+                  </Link>
                 </Tooltip.Trigger>
-                {isCollapsed && (
+                {showCollapsedTooltips && (
                   <Tooltip.Content side='right'>
                     <p>Expand sidebar</p>
                   </Tooltip.Content>
@@ -1245,7 +1241,7 @@ export const Sidebar = memo(function Sidebar() {
           </div>
 
           {/* Workspace Header */}
-          <div className='flex-shrink-0 px-2.5'>
+          <div className='flex-shrink-0 pr-2.5 pl-[9px]'>
             <WorkspaceHeader
               activeWorkspace={activeWorkspace}
               workspaceId={workspaceId}
diff --git a/apps/sim/lib/auth/hybrid.ts b/apps/sim/lib/auth/hybrid.ts
index 3f2311e7927..c793fe5d900 100644
--- a/apps/sim/lib/auth/hybrid.ts
+++ b/apps/sim/lib/auth/hybrid.ts
@@ -25,7 +25,7 @@ const BEARER_PREFIX = 'Bearer '
 export function hasExternalApiCredentials(headers: Headers): boolean {
   if (headers.has(API_KEY_HEADER)) return true
   const auth = headers.get('authorization')
-  return auth !== null && auth.startsWith(BEARER_PREFIX)
+  return auth?.startsWith(BEARER_PREFIX)
 }
 
 export interface AuthResult {

From dd76308bdd9840d990c482172a2cba134ad197db Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sat, 28 Mar 2026 14:57:53 -0700
Subject: [PATCH 2/3] fix(sidebar): restore collapse button removed during
 conflict resolution

---
 .../w/components/sidebar/sidebar.tsx          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 7e10a76c366..df8f68cff4d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -1245,6 +1245,26 @@ export const Sidebar = memo(function Sidebar() {
                   )}
                 </Tooltip.Root>
               </div>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type='button'
+                    onClick={toggleCollapsed}
+                    className={cn(
+                      'sidebar-collapse-btn ml-auto flex h-[30px] items-center justify-center overflow-hidden rounded-lg transition-all duration-200 hover-hover:bg-[var(--surface-hover)]',
+                      isCollapsed ? 'w-0 opacity-0' : 'w-[30px] opacity-100'
+                    )}
+                    aria-label='Collapse sidebar'
+                  >
+                    <PanelLeft className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                  </button>
+                </Tooltip.Trigger>
+                {!isCollapsed && (
+                  <Tooltip.Content side='bottom'>
+                    <p>Collapse sidebar</p>
+                  </Tooltip.Content>
+                )}
+              </Tooltip.Root>
             </div>
 
             {/* Workspace Header */}

From a8edee26e187acde91d8efcf1aeffff3f7daf007 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sat, 28 Mar 2026 15:05:18 -0700
Subject: [PATCH 3/3] fix(sidebar): remove no-op gap-2 from single-child
 collapsed menu button

---
 .../collapsed-sidebar-menu/collapsed-sidebar-menu.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index 0685c0a8b76..79aeab6f1ca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -161,7 +161,7 @@ export function CollapsedSidebarMenu({
             <button
               type='button'
               aria-label={ariaLabel}
-              className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 hover-hover:bg-[var(--surface-hover)]'
+              className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 hover-hover:bg-[var(--surface-hover)]'
             >
               {icon}
             </button>