From 23d74ac2bd58907281413770ebf322c8fd44ea08 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Sat, 2 May 2026 18:19:25 -0700
Subject: [PATCH] improvement(sidebar): overlay lock indicator on leading icon
 (#4412)

* improvement(sidebar): overlay lock indicator on leading icon

* fix(sidebar): correct lock indicator HTML nesting and a11y

* improvement(sidebar): swap lock indicator with more button on hover

* fix(sidebar): gate pointer-events on lock and more button visibility

* fix(sidebar): add role=img so lock indicator is announced by AT
---
 .../components/folder-item/folder-item.tsx    | 45 +++++++++++--------
 .../workflow-item/workflow-item.tsx           | 29 +++++++-----
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index bff9ebd4d6..76abe9be07 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -552,26 +552,35 @@ export function FolderItem({
               >
                 {folder.name}
               </span>
-              {folder.locked && (
-                <Lock
-                  className='pointer-events-none h-[12px] w-[12px] flex-shrink-0 text-[var(--text-icon)]'
-                  aria-label='Folder is locked'
-                />
-              )}
             </div>
-            <button
-              type='button'
-              aria-label='Folder options'
-              onPointerDown={handleMorePointerDown}
-              onClick={handleMoreClick}
-              className={clsx(
-                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity',
-                !isAnyDragActive && 'group-hover:opacity-100',
-                isContextMenuOpen && 'opacity-100'
+            <div className='relative h-[18px] w-[18px] flex-shrink-0'>
+              {folder.locked && (
+                <span
+                  role='img'
+                  aria-label='Folder is locked'
+                  className={clsx(
+                    'pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity',
+                    !isAnyDragActive && 'group-hover:opacity-0',
+                    isContextMenuOpen && 'opacity-0'
+                  )}
+                >
+                  <Lock className='h-[14px] w-[14px] text-[var(--text-icon)]' aria-hidden='true' />
+                </span>
               )}
-            >
-              <MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
-            </button>
+              <button
+                type='button'
+                aria-label='Folder options'
+                onPointerDown={handleMorePointerDown}
+                onClick={handleMoreClick}
+                className={clsx(
+                  'pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
+                  !isAnyDragActive && 'group-hover:pointer-events-auto group-hover:opacity-100',
+                  isContextMenuOpen && 'pointer-events-auto opacity-100'
+                )}
+              >
+                <MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
+              </button>
+            </div>
           </div>
         )}
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index 280da1edf0..27c0fdbc12 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -468,31 +468,38 @@ export function WorkflowItem({
                 {workflow.name}
               </div>
             )}
-            {!isEditing && workflow.locked && (
-              <Lock
-                className='pointer-events-none h-[12px] w-[12px] flex-shrink-0 text-[var(--text-icon)]'
-                aria-label='Workflow is locked'
-              />
-            )}
             {!isEditing && <Avatars workflowId={workflow.id} />}
           </div>
         </div>
         {!isEditing && (
-          <>
+          <div className='relative h-[18px] w-[18px] flex-shrink-0'>
+            {workflow.locked && (
+              <span
+                role='img'
+                aria-label='Workflow is locked'
+                className={clsx(
+                  'pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity',
+                  !isAnyDragActive && 'group-hover:opacity-0',
+                  isContextMenuOpen && 'opacity-0'
+                )}
+              >
+                <Lock className='h-[14px] w-[14px] text-[var(--text-icon)]' aria-hidden='true' />
+              </span>
+            )}
             <button
               type='button'
               aria-label='Workflow options'
               onPointerDown={handleMorePointerDown}
               onClick={handleMoreClick}
               className={clsx(
-                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity',
-                !isAnyDragActive && 'group-hover:opacity-100',
-                isContextMenuOpen && 'opacity-100'
+                'pointer-events-none absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity',
+                !isAnyDragActive && 'group-hover:pointer-events-auto group-hover:opacity-100',
+                isContextMenuOpen && 'pointer-events-auto opacity-100'
               )}
             >
               <MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
             </button>
-          </>
+          </div>
         )}
       </Link>