Skip to content

improvement(sidebar): collapsed sidebar UX, quick-create, hover consistency, and UI polish #3807

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 4 commits into from
Mar 27, 2026
Merged

improvement(sidebar): collapsed sidebar UX, quick-create, hover consistency, and UI polish #3807

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
57f5bf8
improvement(sidebar): collapsed sidebar UX, quick-create, hover consi…
waleedlatif1 Mar 27, 2026
c5fd9a3
Merge remote-tracking branch 'origin/staging' into fix/siden
waleedlatif1 Mar 27, 2026
d48a7fc
fix(sidebar): use stable handlers for root workflow items instead of …
waleedlatif1 Mar 27, 2026
e6c169e
fix(sidebar): reset actionsOpen state before triggering rename in col…
waleedlatif1 Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions apps/sim/app/_styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,8 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
--border-1: #e0e0e0; /* stronger border */
--surface-6: #e5e5e5; /* popovers, elevated surfaces */
--surface-7: #d9d9d9;
--surface-active: #ececec; /* hover/active state */
--surface-hover: #f2f2f2; /* hover state */
--surface-active: #ececec; /* active/selected state */
Comment thread
waleedlatif1 marked this conversation as resolved.

--workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */

Expand Down Expand Up @@ -342,7 +343,8 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
--border-1: #3d3d3d;
--surface-6: #454545;
--surface-7: #505050;
--surface-active: #2c2c2c; /* hover/active state */
--surface-hover: #262626; /* hover state */
--surface-active: #2c2c2c; /* active/selected state */

--workflow-edge: #454545; /* workflow handles/edges - same as surface-6 in dark */

Expand Down
9 changes: 6 additions & 3 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1138,9 +1138,12 @@ export function Document({
<span className='font-medium text-[var(--text-primary)]'>
{effectiveDocumentName}
</span>
? This will permanently delete the document and all {documentData?.chunkCount ?? 0}{' '}
chunk
{documentData?.chunkCount === 1 ? '' : 's'} within it.{' '}
?{' '}
<span className='text-[var(--text-error)]'>
This will permanently delete the document and all {documentData?.chunkCount ?? 0}{' '}
chunk
{documentData?.chunkCount === 1 ? '' : 's'} within it.
</span>{' '}
{documentData?.connectorId ? (
<span className='text-[var(--text-error)]'>
This document is synced from a connector. Deleting it will permanently exclude it
Expand Down
15 changes: 11 additions & 4 deletions apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1106,8 +1106,10 @@ export function KnowledgeBase({
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{knowledgeBaseName}</span>?
The knowledge base and all {pagination.total} document
{pagination.total === 1 ? '' : 's'} within it will be removed.{' '}
<span className='text-[var(--text-error)]'>
The knowledge base and all {pagination.total} document
{pagination.total === 1 ? '' : 's'} within it will be removed.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
Expand Down Expand Up @@ -1147,7 +1149,9 @@ export function KnowledgeBase({
it from future syncs. To temporarily hide it from search, disable it instead.
</span>
) : (
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
<span className='text-[var(--text-error)]'>
This will permanently delete the document.
</span>
)}
</p>
)
Expand Down Expand Up @@ -1177,7 +1181,10 @@ export function KnowledgeBase({
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete {selectedDocuments.size} document
{selectedDocuments.size === 1 ? '' : 's'}?{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
<span className='text-[var(--text-error)]'>
This will permanently delete the selected document
{selectedDocuments.size === 1 ? '' : 's'}.
</span>
</p>
</ModalBody>
<ModalFooter>
Expand Down
8 changes: 5 additions & 3 deletions ...app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,9 +416,11 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
<ModalBody>
<div className='space-y-2'>
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
remove this tag from {selectedTagUsage?.documentCount || 0} document
{selectedTagUsage?.documentCount !== 1 ? 's' : ''}.{' '}
Are you sure you want to delete the "{selectedTag?.displayName}" tag?{' '}
<span className='text-[var(--text-error)]'>
This will remove this tag from {selectedTagUsage?.documentCount || 0} document
{selectedTagUsage?.documentCount !== 1 ? 's' : ''}.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
</p>

Expand Down
9 changes: 7 additions & 2 deletions ...rkspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,8 +206,13 @@ export function ConnectorsSection({
<ModalHeader>Delete Connector</ModalHeader>
<ModalBody>
<p className='text-[var(--text-secondary)] text-sm'>
Are you sure you want to remove this connected source? Documents already synced will
remain in the knowledge base.
Are you sure you want to remove this connected source?{' '}
<span className='text-[var(--text-error)]'>
This will stop future syncs from this source.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
Documents already synced will remain in the knowledge base.
</span>
</p>
</ModalBody>
<ModalFooter>
Expand Down
11 changes: 9 additions & 2 deletions ...spaceId]/knowledge/components/delete-knowledge-base-modal/delete-knowledge-base-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,17 @@ export function DeleteKnowledgeBaseModal({
<>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{knowledgeBaseName}</span>?
All associated documents, chunks, and embeddings will be removed.
<span className='text-[var(--text-error)]'>
All associated documents, chunks, and embeddings will be removed.
</span>
</>
) : (
'Are you sure you want to delete this knowledge base? All associated documents, chunks, and embeddings will be removed.'
<>
Are you sure you want to delete this knowledge base?{' '}
<span className='text-[var(--text-error)]'>
All associated documents, chunks, and embeddings will be removed.
</span>
</>
)}{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
Expand Down
4 changes: 3 additions & 1 deletion ...ace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1268,7 +1268,9 @@ export const NotificationSettings = memo(function NotificationSettings({
<ModalHeader>Delete Notification</ModalHeader>
<ModalBody>
<p className='text-[var(--text-secondary)] text-caption'>
This will permanently remove the notification and stop all deliveries.{' '}
<span className='text-[var(--text-error)]'>
This will permanently remove the notification and stop all deliveries.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
</p>
</ModalBody>
Expand Down
6 changes: 4 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,8 +371,10 @@ export function ApiKeys() {
<ModalBody>
<p className='text-[var(--text-secondary)]'>
Deleting{' '}
<span className='font-medium text-[var(--text-primary)]'>{deleteKey?.name}</span> will
immediately revoke access for any integrations using it.{' '}
<span className='font-medium text-[var(--text-primary)]'>{deleteKey?.name}</span>{' '}
<span className='text-[var(--text-error)]'>
will immediately revoke access for any integrations using it.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
</p>
</ModalBody>
Expand Down
5 changes: 4 additions & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,10 @@ export function BYOK() {
<span className='font-medium text-[var(--text-primary)]'>
{PROVIDERS.find((p) => p.id === deleteConfirmProvider)?.name}
</span>{' '}
API key? This workspace will revert to using platform hosted keys.
API key?{' '}
<span className='text-[var(--text-error)]'>
This workspace will revert to using platform hosted keys.
</span>
</p>
</ModalBody>
<ModalFooter>
Expand Down
4 changes: 3 additions & 1 deletion apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -366,7 +366,9 @@ export function Copilot() {
<span className='font-medium text-[var(--text-primary)]'>
{deleteKey?.name || 'Unnamed Key'}
</span>{' '}
will immediately revoke access for any integrations using it.{' '}
<span className='text-[var(--text-error)]'>
will immediately revoke access for any integrations using it.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
</p>
</ModalBody>
Expand Down
6 changes: 4 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,8 +164,10 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
)}
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
{isSingleRow ? 'this row' : `these ${deleteCount} rows`}? This will permanently remove
all data in {isSingleRow ? 'this row' : 'these rows'}.{' '}
{isSingleRow ? 'this row' : `these ${deleteCount} rows`}?{' '}
<span className='text-[var(--text-error)]'>
This will permanently remove all data in {isSingleRow ? 'this row' : 'these rows'}.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
</p>
</ModalBody>
Expand Down
9 changes: 7 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1809,6 +1809,9 @@ export function Table({
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{tableData?.name}</span>?{' '}
<span className='text-[var(--text-error)]'>
All {tableData?.rowCount ?? 0} rows will be removed.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
Expand Down Expand Up @@ -1845,8 +1848,10 @@ export function Table({
<ModalBody>
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{deletingColumn}</span>? This
will remove all data in this column.{' '}
<span className='font-medium text-[var(--text-primary)]'>{deletingColumn}</span>?{' '}
<span className='text-[var(--text-error)]'>
This will remove all data in this column.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
</p>
</ModalBody>
Expand Down
6 changes: 4 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,8 +320,10 @@ export function Tables() {
<ModalBody>
<p className='text-[var(--text-secondary)]'>
Are you sure you want to delete{' '}
<span className='font-medium text-[var(--text-primary)]'>{activeTable?.name}</span>?
All {activeTable?.rowCount} rows will be removed.{' '}
<span className='font-medium text-[var(--text-primary)]'>{activeTable?.name}</span>?{' '}
<span className='text-[var(--text-error)]'>
All {activeTable?.rowCount} rows will be removed.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -929,7 +929,7 @@ export function Chat() {
>
{shouldShowConfigureStartInputsButton && (
<div
className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-2.5 py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-active)]'
title='Add chat inputs to Start block'
onMouseDown={(e) => {
e.stopPropagation()
Expand Down
2 changes: 1 addition & 1 deletion ...flowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -883,7 +883,7 @@ console.log(data);`
</p>
{missingFields.any && (
<div
className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-active)]'
title='Add required A2A input fields to Start block'
onClick={handleAddA2AInputs}
>
Expand Down
2 changes: 1 addition & 1 deletion ...]/components/panel/components/editor/components/sub-block/components/env-var-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@ export const EnvVarDropdown: React.FC<EnvVarDropdownProps> = ({
}

return (
<Popover open={visible} onOpenChange={(open) => !open && onClose?.()}>
<Popover open={visible} onOpenChange={(open) => !open && onClose?.()} colorScheme='inverted'>
<PopoverAnchor asChild>
<div
className={cn('pointer-events-none', className)}
Expand Down
2 changes: 1 addition & 1 deletion ...nents/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,7 +553,7 @@ export function FileUpload({
return (
<div
key={fileKey}
className='relative rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover-hover:bg-[var(--border-1)]'
className='relative rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 hover-hover:bg-[var(--surface-active)] dark:bg-[var(--surface-5)]'
>
<div className='truncate pr-6 text-sm' title={file.name}>
<span className='text-[var(--text-primary)]'>{truncateMiddle(file.name)}</span>
Expand Down
2 changes: 1 addition & 1 deletion ...ts/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function GroupedCheckboxList({
disabled={disabled}
className={cn(
'flex w-full cursor-pointer items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
'hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
'hover-hover:bg-[var(--surface-active)]'
)}
>
<span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
Expand Down
8 changes: 6 additions & 2 deletions ...onents/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1061,6 +1061,7 @@ try {
setShowSchemaParams(false)
}
}}
colorScheme='inverted'
>
<PopoverAnchor asChild>
<div
Expand Down Expand Up @@ -1178,8 +1179,11 @@ try {
<ModalHeader>Delete Custom Tool</ModalHeader>
<ModalBody>
<p className='text-[var(--text-secondary)]'>
This will permanently delete the tool and remove it from any workflows that are using
it. <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
<span className='text-[var(--text-error)]'>
This will permanently delete the tool and remove it from any workflows that are
using it.
</span>{' '}
<span className='text-[var(--text-error)]'>This action cannot be undone.</span>
</p>
</ModalBody>
<ModalFooter>
Expand Down
5 changes: 4 additions & 1 deletion apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -874,7 +874,10 @@ export const Panel = memo(function Panel() {
<span className='font-medium text-[var(--text-primary)]'>
{currentWorkflow?.name ?? 'this workflow'}
</span>
? All associated blocks, executions, and configuration will be removed.{' '}
?{' '}
<span className='text-[var(--text-error)]'>
All associated blocks, executions, and configuration will be removed.
</span>{' '}
<span className='text-[var(--text-tertiary)]'>
You can restore it from Recently Deleted in Settings.
</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1822,7 +1822,7 @@ export function useWorkflowExecution() {
try {
const pointer = await loadExecutionPointer(reconnectWorkflowId)
if (cleanupRan) return
if (pointer && pointer.executionId) {
if (pointer?.executionId) {
executionId = pointer.executionId
fromEventId = pointer.lastEventId
}
Expand Down
Loading