Skip to content

Commit 7842c72

Browse files
emir-karabegemir-karabeg
committed
improvement(sidebar): consolidate header, simplify workspace menu
Move branding and sidebar expand controls into workspace header, drop the workspace search/billing UI, and clean up unused hover/status states across sidebar components.
1 parent d4cc376 commit 7842c72

10 files changed

Lines changed: 418 additions & 627 deletions

File tree

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

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -94,33 +94,15 @@ function FlyoutMoreButton({
9494
)
9595
}
9696

97-
function TaskStatusIcon({
98-
isActive,
99-
isUnread,
100-
hideStatusOnHover = false,
101-
}: {
102-
isActive?: boolean
103-
isUnread?: boolean
104-
hideStatusOnHover?: boolean
105-
}) {
97+
function TaskStatusIcon({ isActive, isUnread }: { isActive?: boolean; isUnread?: boolean }) {
10698
return (
10799
<span className='relative flex-shrink-0'>
108100
<Blimp className='h-[16px] w-[16px] text-[var(--text-icon)]' />
109101
{isActive && (
110-
<span
111-
className={cn(
112-
'-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-amber-400',
113-
hideStatusOnHover && 'group-hover:hidden'
114-
)}
115-
/>
102+
<span className='-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-amber-400' />
116103
)}
117104
{!isActive && isUnread && (
118-
<span
119-
className={cn(
120-
'-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--indicator-online)]',
121-
hideStatusOnHover && 'group-hover:hidden'
122-
)}
123-
/>
105+
<span className='-right-[1px] -bottom-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--indicator-online)]' />
124106
)}
125107
</span>
126108
)
@@ -162,7 +144,7 @@ export function CollapsedSidebarMenu({
162144
<button
163145
type='button'
164146
aria-label={ariaLabel}
165-
className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 hover-hover:bg-[var(--surface-hover)]'
147+
className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 hover-hover:bg-[var(--surface-active)]'
166148
>
167149
{icon}
168150
</button>
@@ -235,7 +217,7 @@ export function CollapsedTaskFlyoutItem({
235217
href={task.href}
236218
className={cn(
237219
'flex min-w-0 cursor-default select-none items-center rounded-[5px] px-2 py-2 pr-[30px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors',
238-
!(isCurrentRoute || isMenuOpen) && 'group-hover:bg-[var(--surface-hover)]',
220+
!(isCurrentRoute || isMenuOpen) && 'group-hover:bg-[var(--surface-active)]',
239221
(isCurrentRoute || isMenuOpen) && 'bg-[var(--surface-active)]'
240222
)}
241223
onContextMenu={
@@ -317,7 +299,7 @@ export function CollapsedWorkflowFlyoutItem({
317299
href={href}
318300
className={cn(
319301
'flex min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] px-2 py-2 pr-[30px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors',
320-
!(isCurrentRoute || actionsOpen) && 'group-hover:bg-[var(--surface-hover)]',
302+
!(isCurrentRoute || actionsOpen) && 'group-hover:bg-[var(--surface-active)]',
321303
(isCurrentRoute || actionsOpen) && 'bg-[var(--surface-active)]'
322304
)}
323305
onContextMenu={
@@ -424,7 +406,7 @@ export function CollapsedFolderItems({
424406

425407
return (
426408
<DropdownMenuSub key={folder.id}>
427-
<DropdownMenuSubTrigger className='focus:bg-[var(--surface-hover)] data-[state=open]:bg-[var(--surface-hover)]'>
409+
<DropdownMenuSubTrigger className='focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)]'>
428410
<Folder className='h-[14px] w-[14px]' />
429411
<span className='truncate'>{folder.name}</span>
430412
</DropdownMenuSubTrigger>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -439,7 +439,7 @@ export function SearchModal({
439439
aria-hidden={!open}
440440
aria-label='Search'
441441
className={cn(
442-
'-translate-x-1/2 fixed top-[15%] z-50 w-[500px] rounded-xl border-[4px] border-black/[0.06] bg-[var(--bg)] shadow-[0_24px_80px_-16px_rgba(0,0,0,0.15)] dark:border-white/[0.06] dark:shadow-[0_24px_80px_-16px_rgba(0,0,0,0.4)]',
442+
'-translate-x-1/2 fixed top-[15%] z-50 w-[500px] rounded-xl border-none bg-[var(--bg)] shadow-2xl ring-4 ring-[color-mix(in_srgb,var(--surface-5)_80%,transparent)] dark:ring-[color-mix(in_srgb,var(--surface-4)_80%,transparent)]',
443443
open ? 'visible opacity-100' : 'invisible opacity-0'
444444
)}
445445
style={{
@@ -449,7 +449,7 @@ export function SearchModal({
449449
}}
450450
>
451451
<Command label='Search' shouldFilter={false}>
452-
<div className='mx-2 mt-2 mb-1 flex items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
452+
<div className='mx-2 mt-2 flex items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
453453
<Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)]' />
454454
<Command.Input
455455
ref={inputRef}
@@ -459,7 +459,7 @@ export function SearchModal({
459459
className='w-full bg-transparent py-1.5 font-base text-[var(--text-primary)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
460460
/>
461461
</div>
462-
<Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-2 [&_[cmdk-group]+[cmdk-group]]:mt-2.5'>
462+
<Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-2 [&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col [&_[cmdk-group-items]]:gap-0.5 [&_[cmdk-group]+[cmdk-group]]:mt-3.5'>
463463
<Command.Empty className='flex items-center justify-center px-4 py-6 text-[var(--text-subtle)] text-sm'>
464464
No results found.
465465
</Command.Empty>

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,12 @@ export interface CommandItemProps {
5454
}
5555

5656
export const GROUP_HEADING_CLASSNAME =
57-
'[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-0.5 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-[12px] [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
57+
'[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-small [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
5858

5959
export const COMMAND_ITEM_CLASSNAME =
60-
'group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
60+
'group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-[8px] border border-transparent mx-0.5 px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-active)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50'
6161

62-
export function scoreMatch(value: string, search: string): number {
62+
function scoreMatch(value: string, search: string): number {
6363
if (!search) return 1
6464
const valueLower = value.toLowerCase()
6565
const searchLower = search.toLowerCase()

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -253,12 +253,12 @@ export function SettingsSidebar({
253253
return (
254254
<>
255255
{/* Back button */}
256-
<div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
256+
<div className='mt-3 flex flex-shrink-0 flex-col gap-0.5 px-2'>
257257
<SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
258258
<button
259259
type='button'
260260
onClick={handleBack}
261-
className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-hover)]'
261+
className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-active)]'
262262
>
263263
<div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
264264
<ChevronDown className='h-[10px] w-[10px] rotate-90' />
@@ -271,7 +271,7 @@ export function SettingsSidebar({
271271
{/* Settings sections */}
272272
<div
273273
className={cn(
274-
'mt-3.5 flex flex-1 flex-col gap-3.5 pb-2',
274+
'mt-3 flex flex-1 flex-col gap-3 pb-2',
275275
!isCollapsed && 'overflow-y-auto overflow-x-hidden'
276276
)}
277277
>
@@ -282,7 +282,7 @@ export function SettingsSidebar({
282282
(!isHosted && isLoadingSSO)
283283
? SKELETON_SECTIONS.map((count, i) => (
284284
<div key={i} className='flex flex-shrink-0 flex-col'>
285-
<div className='sidebar-collapse-hide px-4 pb-1.5'>
285+
<div className='sidebar-collapse-hide px-4 pb-2'>
286286
<Skeleton className='h-[14px] w-[64px] rounded-sm' />
287287
</div>
288288
<div className='flex flex-col gap-0.5 px-2'>
@@ -301,8 +301,8 @@ export function SettingsSidebar({
301301

302302
return (
303303
<div key={key} className='flex flex-shrink-0 flex-col'>
304-
<div className='px-4 pb-1.5'>
305-
<div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
304+
<div className='px-4 pb-2'>
305+
<div className='font-base text-[var(--text-muted)] text-small'>{title}</div>
306306
</div>
307307
<div className='flex flex-col gap-0.5 px-2'>
308308
{sectionItems.map((item) => {
@@ -311,7 +311,7 @@ export function SettingsSidebar({
311311
const isLocked = item.requiresMax && !subscriptionAccess.hasUsableMaxAccess
312312
const itemClassName = cn(
313313
'group mx-0.5 flex h-[30px] items-center gap-2 rounded-[8px] px-2 text-[14px]',
314-
!active && 'hover-hover:bg-[var(--surface-hover)]',
314+
!active && 'hover-hover:bg-[var(--surface-active)]',
315315
active && 'bg-[var(--surface-active)]'
316316
)
317317
const content = (

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ const logger = createLogger('FolderItem')
4545

4646
interface FolderItemProps {
4747
folder: FolderTreeNode
48-
level: number
4948
dragDisabled?: boolean
5049
hoverHandlers?: {
5150
onDragEnter?: (e: React.DragEvent<HTMLElement>) => void
@@ -58,7 +57,6 @@ interface FolderItemProps {
5857

5958
export function FolderItem({
6059
folder,
61-
level,
6260
dragDisabled = false,
6361
hoverHandlers,
6462
onFolderClick,
@@ -472,7 +470,7 @@ export function FolderItem({
472470
!isSelected &&
473471
!isContextMenuOpen &&
474472
!isAnyDragActive &&
475-
'hover-hover:bg-[var(--surface-hover)]',
473+
'hover-hover:bg-[var(--surface-active)]',
476474
(isSelected || isContextMenuOpen) && 'bg-[var(--surface-active)]',
477475
(isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
478476
)}

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
4242
interface WorkflowItemProps {
4343
workflow: WorkflowMetadata
4444
active: boolean
45-
level: number
4645
dragDisabled?: boolean
4746
onWorkflowClick: (workflowId: string, shiftKey: boolean) => void
4847
onDragStart?: () => void
@@ -59,7 +58,6 @@ interface WorkflowItemProps {
5958
export function WorkflowItem({
6059
workflow,
6160
active,
62-
level,
6361
dragDisabled = false,
6462
onWorkflowClick,
6563
onDragStart: onDragStartProp,
@@ -427,7 +425,7 @@ export function WorkflowItem({
427425
!isContextMenuOpen &&
428426
!(isSelected && selectedWorkflows.size > 1) &&
429427
!isAnyDragActive &&
430-
'hover-hover:bg-[var(--surface-hover)]',
428+
'hover-hover:bg-[var(--surface-active)]',
431429
(isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
432430
)}
433431
draggable={!isEditing && !dragDisabled}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -380,7 +380,6 @@ export const WorkflowList = memo(function WorkflowList({
380380
<WorkflowItem
381381
workflow={workflow}
382382
active={isWorkflowActive(workflow.id)}
383-
level={level}
384383
dragDisabled={dragDisabled}
385384
onWorkflowClick={handleWorkflowClick}
386385
onDragStart={() => handleDragStart(folderId)}
@@ -460,7 +459,6 @@ export const WorkflowList = memo(function WorkflowList({
460459
>
461460
<FolderItem
462461
folder={folder}
463-
level={level}
464462
dragDisabled={dragDisabled}
465463
onFolderClick={handleFolderClick}
466464
onDragStart={() => handleDragStart(parentFolderId)}

0 commit comments

Comments
 (0)