Skip to content

improvement(sidebar): overlay lock indicator on leading icon#4412

Merged
waleedlatif1 merged 5 commits into
stagingfrom
waleedlatif1/sidebar-lock-icon-position
May 3, 2026
Merged

improvement(sidebar): overlay lock indicator on leading icon#4412
waleedlatif1 merged 5 commits into
stagingfrom
waleedlatif1/sidebar-lock-icon-position

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

Summary

  • Move the lock icon on workflow and folder sidebar items from inline (next to the name) to a small overlay on the leading icon (color swatch / folder icon), matching the read/unread indicator pattern used in the conversation list
  • Wrap the indicator in an emcn Tooltip with a "Locked" label and use design tokens (--surface-1 knockout, --text-icon)

Type of Change

  • Improvement

Testing

Tested manually

Checklist

  • Code follows project style guidelines
  • Self-reviewed my changes
  • Tests added/updated and passing
  • No new warnings introduced
  • I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

@vercel
Copy link
Copy Markdown

vercel Bot commented May 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Skipped Skipped May 3, 2026 1:04am

Request Review

@cursor
Copy link
Copy Markdown

cursor Bot commented May 3, 2026

PR Summary

Low Risk
Low risk UI-only change that rearranges sidebar item icons and hover/click hit areas; main risk is minor regressions in accessibility or pointer/hover interaction for the context menu button.

Overview
Updates sidebar FolderItem and WorkflowItem to overlay the lock indicator and the “more” (options) button in the same 18x18 icon slot instead of rendering the lock inline next to the name.

The lock icon now fades out on hover (and when the context menu is open) while the options button fades in and only becomes clickable on hover/context-menu-open via pointer-events/opacity transitions, reducing layout jitter and keeping the locked state visible until the user intends to open the menu.

Reviewed by Cursor Bugbot for commit 90abdb4. Configure here.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 3, 2026

Greptile Summary

This PR relocates the lock indicator on sidebar workflow and folder items from an inline position (next to the name) into the trailing 18 × 18 px slot already occupied by the "More options" button. The two icons cross-fade on hover using group-hover:opacity-* — lock fades out, more button fades in — giving a clean, uncluttered appearance. Note: the PR description states the indicator would be placed as an overlay on the leading icon (color swatch / folder icon) and wrapped in an emcn Tooltip with a "Locked" label; neither of those details is present in the merged implementation (the indicator is in the trailing slot and has only an aria-label, no visual tooltip).

Confidence Score: 5/5

Safe to merge — only a P2 style/completeness gap (missing Tooltip) relative to the PR description; no runtime errors or logic bugs.

All previously flagged issues (invalid HTML nesting, keyboard accessibility, event bubbling) have been addressed. The remaining gap is the emcn Tooltip described in the PR spec but not implemented, which is a P2 completeness issue that does not affect correctness or accessibility for the current release.

Both changed files have the same Tooltip omission; no other files require attention.

Important Files Changed

Filename Overview
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx Moves the lock indicator from an inline sibling to a relative-positioned trailing slot shared with the More button; cross-fade via group-hover:opacity-* works correctly, but the emcn Tooltip called for in the PR description was not implemented.
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx Mirrors the workflow-item change: lock indicator and More button share an 18 × 18 px relative container with opacity-driven cross-fade; same missing Tooltip issue as workflow-item.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Sidebar Item Row] --> B[Leading Icon\nColor Swatch / Folder Icon]
    A --> C[Content Area\nName + Avatars]
    A --> D[Trailing Slot\n18x18px relative container]

    D --> E{item.locked?}
    E -- Yes --> F[Lock span\nrole=img, aria-label\npointer-events-none]
    E -- No --> G[slot empty]

    D --> H[More Button\npointer-events-none by default]

    F --> I{Hover / Context Menu open?}
    I -- Yes --> J[Lock opacity to 0\nMore button opacity to 1\nMore pointer-events auto]
    I -- No --> K[Lock opacity = 1\nMore button opacity = 0]
Loading

Reviews (4): Last reviewed commit: "fix(sidebar): add role=img so lock indic..." | Re-trigger Greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

Reviewed by Cursor Bugbot for commit 90abdb4. Configure here.

@waleedlatif1 waleedlatif1 merged commit 23d74ac into staging May 3, 2026
14 checks passed
@waleedlatif1 waleedlatif1 deleted the waleedlatif1/sidebar-lock-icon-position branch May 3, 2026 01:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant