improvement(sidebar): overlay lock indicator on leading icon

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx

@@ -6,6 +6,7 @@ import { generateId } from '@sim/utils/id'
 import clsx from 'clsx'
 import { ChevronRight, Folder, FolderOpen, MoreHorizontal } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { Tooltip } from '@/components/emcn'
 import { Lock } from '@/components/emcn/icons'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { getNextWorkflowColor } from '@/lib/workflows/colors'
@@ -513,17 +514,28 @@ export function FolderItem({
           )}
           aria-hidden='true'
         />
-        {isExpanded ? (
-          <FolderOpen
-            className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]'
-            aria-hidden='true'
-          />
-        ) : (
-          <Folder
-            className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]'
-            aria-hidden='true'
-          />
-        )}
+        <span className='relative flex-shrink-0'>
+          {isExpanded ? (
+            <FolderOpen className='h-[16px] w-[16px] text-[var(--text-icon)]' aria-hidden='true' />
+          ) : (
+            <Folder className='h-[16px] w-[16px] text-[var(--text-icon)]' aria-hidden='true' />
+          )}
+          {folder.locked && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <span className='-right-[4px] -bottom-[4px] absolute flex h-[12px] w-[12px] items-center justify-center rounded-full bg-[var(--surface-1)]'>
+                  <Lock
+                    className='pointer-events-none h-[10px] w-[10px] text-[var(--text-icon)]'
+                    aria-hidden='true'
+                  />
+                </span>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='bottom'>
+                <span>Locked</span>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          )}
+        </span>
         {isEditing ? (
           <input
             ref={inputRef}
@@ -552,12 +564,6 @@ 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'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
+import { Tooltip } from '@/components/emcn'
 import { Lock } from '@/components/emcn/icons'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { workflowBorderColor } from '@/lib/workspaces/colors'
@@ -431,14 +432,31 @@ export function WorkflowItem({
         onClick={handleClick}
         onContextMenu={handleContextMenu}
       >
-        <div
-          className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
-          style={{
-            backgroundColor: workflow.color,
-            borderColor: workflowBorderColor(workflow.color),
-            backgroundClip: 'padding-box',
-          }}
-        />
+        <span className='relative flex-shrink-0'>
+          <div
+            className='h-[16px] w-[16px] rounded-sm border-[2.5px]'
+            style={{
+              backgroundColor: workflow.color,
+              borderColor: workflowBorderColor(workflow.color),
+              backgroundClip: 'padding-box',
+            }}
+          />
+          {workflow.locked && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <span className='-right-[4px] -bottom-[4px] absolute flex h-[12px] w-[12px] items-center justify-center rounded-full bg-[var(--surface-1)]'>
+                  <Lock
+                    className='pointer-events-none h-[10px] w-[10px] text-[var(--text-icon)]'
+                    aria-hidden='true'
+                  />
+                </span>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='bottom'>
+                <span>Locked</span>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          )}
+        </span>
         <div className='min-w-0 flex-1'>
           <div className='flex min-w-0 items-center gap-2'>
             {isEditing ? (
@@ -468,12 +486,6 @@ 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>