improvement(sidebar): improved collapsed sidebar experience

apps/docs/components/icons.tsx

@@ -4143,11 +4143,12 @@ export function InfisicalIcon(props: SVGProps<SVGSVGElement>) {
     <svg {...props} viewBox='20 25 233 132' xmlns='http://www.w3.org/2000/svg'>
       <path
         d='m191.6 39.4c-20.3 0-37.15 13.21-52.9 30.61-12.99-16.4-29.8-30.61-51.06-30.61-27.74 0-50.44 23.86-50.44 51.33 0 26.68 21.43 51.8 48.98 51.8 20.55 0 37.07-13.86 51.32-31.81 12.69 16.97 29.1 31.41 53.2 31.41 27.13 0 49.85-22.96 49.85-51.4 0-27.12-20.44-51.33-48.95-51.33zm-104.3 77.94c-14.56 0-25.51-12.84-25.51-26.07 0-13.7 10.95-28.29 25.51-28.29 14.93 0 25.71 11.6 37.6 27.34-11.31 15.21-22.23 27.02-37.6 27.02zm104.4 0.25c-15 0-25.28-11.13-37.97-27.37 12.69-16.4 22.01-27.24 37.59-27.24 14.97 0 24.79 13.25 24.79 27.26 0 13-10.17 27.35-24.41 27.35z'
-        fill='currentColor'
+        fill='black'
       />
     </svg>
   )
 }
+
 export function IntercomIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx

@@ -4,11 +4,13 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import type { FolderTreeNode } from '@/stores/folders/types'
@@ -21,6 +23,8 @@ interface CollapsedSidebarMenuProps {
   ariaLabel?: string
   children: React.ReactNode
   className?: string
+  createLabel?: string
+  onCreateClick?: () => void
 }
 
 export function CollapsedSidebarMenu({
@@ -30,6 +34,8 @@ export function CollapsedSidebarMenu({
   ariaLabel,
   children,
   className,
+  createLabel,
+  onCreateClick,
 }: CollapsedSidebarMenuProps) {
   return (
     <div className={cn('flex flex-col px-[8px]', className)}>
@@ -54,6 +60,15 @@ export function CollapsedSidebarMenu({
           </DropdownMenuTrigger>
         </div>
         <DropdownMenuContent side='right' align='start' sideOffset={8} {...hover.contentProps}>
+          {createLabel && onCreateClick && (
+            <>
+              <DropdownMenuItem onSelect={onCreateClick}>
+                <Plus className='h-[14px] w-[14px]' />
+                <span>{createLabel}</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
           {children}
         </DropdownMenuContent>
       </DropdownMenu>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -1109,6 +1109,52 @@ export const Sidebar = memo(function Sidebar() {
                 </div>
               </div>
 
+              {/* Quick-create button (collapsed only) */}
+              {isCollapsed && showCollapsedContent && (
+                <div className='flex flex-shrink-0 flex-col px-[8px] pt-[8px]'>
+                  <DropdownMenu>
+                    <Tooltip.Root>
+                      <Tooltip.Trigger asChild>
+                        <DropdownMenuTrigger asChild>
+                          <button
+                            type='button'
+                            aria-label='Create new'
+                            className='mx-[2px] flex h-[30px] items-center justify-center rounded-[8px] px-[8px] hover:bg-[var(--surface-active)]'
+                          >
+                            <Plus className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                          </button>
+                        </DropdownMenuTrigger>
+                      </Tooltip.Trigger>
+                      <Tooltip.Content side='right'>
+                        <p>Create new</p>
+                      </Tooltip.Content>
+                    </Tooltip.Root>
+                    <DropdownMenuContent side='right' align='start' sideOffset={8}>
+                      <DropdownMenuItem
+                        onSelect={() => navigateToPage(`/workspace/${workspaceId}/home`)}
+                      >
+                        <Blimp className='h-[14px] w-[14px]' />
+                        <span>New task</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onSelect={handleCreateWorkflow}
+                        disabled={!canEdit || isCreatingWorkflow}
+                      >
+                        <div
+                          className='h-[14px] w-[14px] flex-shrink-0 rounded-[3px] border-[2px]'
+                          style={{
+                            backgroundColor: 'var(--text-icon)',
+                            borderColor: 'color-mix(in srgb, var(--text-icon) 60%, transparent)',
+                            backgroundClip: 'padding-box',
+                          }}
+                        />
+                        <span>{isCreatingWorkflow ? 'Creating...' : 'New workflow'}</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              )}
+
               {/* Scrollable Tasks + Workflows */}
               <div
                 ref={isCollapsed ? undefined : scrollContainerRef}
@@ -1149,6 +1195,8 @@ export const Sidebar = memo(function Sidebar() {
                       onClick={() => navigateToPage(`/workspace/${workspaceId}/home`)}
                       ariaLabel='Tasks'
                       className='mt-[6px]'
+                      createLabel='New task'
+                      onCreateClick={() => navigateToPage(`/workspace/${workspaceId}/home`)}
                     >
                       {tasksLoading ? (
                         <DropdownMenuItem disabled>
@@ -1318,6 +1366,8 @@ export const Sidebar = memo(function Sidebar() {
                       onClick={handleCreateWorkflow}
                       ariaLabel='Workflows'
                       className='mt-[6px]'
+                      createLabel='New workflow'
+                      onCreateClick={canEdit ? handleCreateWorkflow : undefined}
                     >
                       {workflowsLoading && regularWorkflows.length === 0 ? (
                         <DropdownMenuItem disabled>

apps/sim/components/icons.tsx

@@ -4143,11 +4143,12 @@ export function InfisicalIcon(props: SVGProps<SVGSVGElement>) {
     <svg {...props} viewBox='20 25 233 132' xmlns='http://www.w3.org/2000/svg'>
       <path
         d='m191.6 39.4c-20.3 0-37.15 13.21-52.9 30.61-12.99-16.4-29.8-30.61-51.06-30.61-27.74 0-50.44 23.86-50.44 51.33 0 26.68 21.43 51.8 48.98 51.8 20.55 0 37.07-13.86 51.32-31.81 12.69 16.97 29.1 31.41 53.2 31.41 27.13 0 49.85-22.96 49.85-51.4 0-27.12-20.44-51.33-48.95-51.33zm-104.3 77.94c-14.56 0-25.51-12.84-25.51-26.07 0-13.7 10.95-28.29 25.51-28.29 14.93 0 25.71 11.6 37.6 27.34-11.31 15.21-22.23 27.02-37.6 27.02zm104.4 0.25c-15 0-25.28-11.13-37.97-27.37 12.69-16.4 22.01-27.24 37.59-27.24 14.97 0 24.79 13.25 24.79 27.26 0 13-10.17 27.35-24.41 27.35z'
-        fill='currentColor'
+        fill='black'
       />
     </svg>
   )
 }
+
 export function IntercomIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg