Skip to content

Commit 195e0e8

Browse files
emir-karabegemir-karabeg
authored
feat(popover): sections; improvement: tooltip, popover; fix(notifications): loading content (#2676)
1 parent 1673ef9 commit 195e0e8

File tree

18 files changed

+368
-425
lines changed

18 files changed

+368
-425
lines changed

‎apps/sim/app/_styles/globals.css‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@
5050
@layer base {
5151
:root,
5252
.light {
53-
--bg: #fdfdfd; /* main canvas - neutral near-white */
54-
--surface-1: #fcfcfc; /* sidebar, panels */
53+
--bg: #fefefe; /* main canvas - neutral near-white */
54+
--surface-1: #fefefe; /* sidebar, panels */
5555
--surface-2: #ffffff; /* blocks, cards, modals - pure white */
5656
--surface-3: #f7f7f7; /* popovers, headers */
5757
--surface-4: #f5f5f5; /* buttons base */
@@ -70,6 +70,7 @@
7070
--text-muted: #737373;
7171
--text-subtle: #8c8c8c;
7272
--text-inverse: #ffffff;
73+
--text-muted-inverse: #a0a0a0;
7374
--text-error: #ef4444;
7475

7576
/* Borders / dividers */
@@ -186,6 +187,7 @@
186187
--text-muted: #787878;
187188
--text-subtle: #7d7d7d;
188189
--text-inverse: #1b1b1b;
190+
--text-muted-inverse: #b3b3b3;
189191
--text-error: #ef4444;
190192

191193
/* --border-strong: #303030; */
@@ -331,38 +333,38 @@
331333
}
332334

333335
::-webkit-scrollbar-track {
334-
background: var(--surface-1);
336+
background: transparent;
335337
}
336338

337339
::-webkit-scrollbar-thumb {
338-
background-color: var(--surface-7);
340+
background-color: #c0c0c0;
339341
border-radius: var(--radius);
340342
}
341343

342344
::-webkit-scrollbar-thumb:hover {
343-
background-color: var(--surface-7);
345+
background-color: #a8a8a8;
344346
}
345347

346348
/* Dark Mode Global Scrollbar */
347349
.dark ::-webkit-scrollbar-track {
348-
background: var(--surface-4);
350+
background: transparent;
349351
}
350352

351353
.dark ::-webkit-scrollbar-thumb {
352-
background-color: var(--surface-7);
354+
background-color: #5a5a5a;
353355
}
354356

355357
.dark ::-webkit-scrollbar-thumb:hover {
356-
background-color: var(--surface-7);
358+
background-color: #6a6a6a;
357359
}
358360

359361
* {
360362
scrollbar-width: thin;
361-
scrollbar-color: var(--surface-7) var(--surface-1);
363+
scrollbar-color: #c0c0c0 transparent;
362364
}
363365

364366
.dark * {
365-
scrollbar-color: var(--surface-7) var(--surface-4);
367+
scrollbar-color: #5a5a5a transparent;
366368
}
367369

368370
.copilot-scrollable {

‎apps/sim/app/chat/components/message/components/markdown-renderer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function LinkWithPreview({ href, children }: { href: string; children: Re
1616
{children}
1717
</a>
1818
</Tooltip.Trigger>
19-
<Tooltip.Content side='top' align='center' sideOffset={5} className='max-w-sm p-3'>
19+
<Tooltip.Content side='top' align='center' sideOffset={5} className='max-w-sm'>
2020
<span className='truncate font-medium text-xs'>{href}</span>
2121
</Tooltip.Content>
2222
</Tooltip.Root>

‎apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -185,19 +185,17 @@ export function NotificationSettings({
185185

186186
const hasSubscriptions = filteredSubscriptions.length > 0
187187

188+
// Compute form visibility synchronously to avoid empty state flash
189+
// Show form if user explicitly opened it OR if loading is complete with no subscriptions
190+
const displayForm = showForm || (!isLoading && !hasSubscriptions && !editingId)
191+
188192
const getSubscriptionsForTab = useCallback(
189193
(tab: NotificationType) => {
190194
return subscriptions.filter((s) => s.notificationType === tab)
191195
},
192196
[subscriptions]
193197
)
194198

195-
useEffect(() => {
196-
if (!isLoading && !hasSubscriptions && !editingId) {
197-
setShowForm(true)
198-
}
199-
}, [isLoading, hasSubscriptions, editingId, activeTab])
200-
201199
const resetForm = useCallback(() => {
202200
setFormData({
203201
workflowIds: [],
@@ -1210,7 +1208,7 @@ export function NotificationSettings({
12101208
)
12111209

12121210
const renderTabContent = () => {
1213-
if (showForm) {
1211+
if (displayForm) {
12141212
return renderForm()
12151213
}
12161214

@@ -1279,7 +1277,7 @@ export function NotificationSettings({
12791277
</ModalTabs>
12801278

12811279
<ModalFooter>
1282-
{showForm ? (
1280+
{displayForm ? (
12831281
<>
12841282
{hasSubscriptions && (
12851283
<Button

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {
77
Badge,
88
Popover,
99
PopoverContent,
10+
PopoverDivider,
1011
PopoverItem,
11-
PopoverSection,
1212
PopoverTrigger,
1313
} from '@/components/emcn'
1414
import {
@@ -468,7 +468,7 @@ export function OutputSelect({
468468
disablePortal={disablePopoverPortal}
469469
>
470470
<div className='space-y-[2px]'>
471-
{Object.entries(groupedOutputs).map(([blockName, outputs]) => {
471+
{Object.entries(groupedOutputs).map(([blockName, outputs], groupIndex, groupArray) => {
472472
const startIndex = flattenedOutputs.findIndex((o) => o.blockName === blockName)
473473

474474
const firstOutput = outputs[0]
@@ -489,12 +489,10 @@ export function OutputSelect({
489489

490490
return (
491491
<div key={blockName}>
492-
<PopoverSection>
493-
<div className='flex items-center gap-1.5'>
494-
<TagIcon icon={blockIcon} color={blockColor} />
495-
<span>{blockName}</span>
496-
</div>
497-
</PopoverSection>
492+
<div className='flex items-center gap-1.5 px-[6px] py-[4px]'>
493+
<TagIcon icon={blockIcon} color={blockColor} />
494+
<span className='font-medium text-[13px]'>{blockName}</span>
495+
</div>
498496

499497
<div className='flex flex-col gap-[2px]'>
500498
{outputs.map((output, localIndex) => {
@@ -509,14 +507,13 @@ export function OutputSelect({
509507
onClick={() => handleOutputSelection(output.label)}
510508
onMouseEnter={() => setHighlightedIndex(globalIndex)}
511509
>
512-
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)]'>
513-
{output.path}
514-
</span>
510+
<span className='min-w-0 flex-1 truncate'>{output.path}</span>
515511
{isSelectedValue(output) && <Check className='h-3 w-3 flex-shrink-0' />}
516512
</PopoverItem>
517513
)
518514
})}
519515
</div>
516+
{groupIndex < groupArray.length - 1 && <PopoverDivider />}
520517
</div>
521518
)
522519
})}

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/block-context-menu.tsx‎

Lines changed: 33 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
'use client'
22

3-
import { Popover, PopoverAnchor, PopoverContent, PopoverItem } from '@/components/emcn'
3+
import {
4+
Popover,
5+
PopoverAnchor,
6+
PopoverContent,
7+
PopoverDivider,
8+
PopoverItem,
9+
} from '@/components/emcn'
410
import type { BlockContextMenuProps } from './types'
511

612
/**
@@ -48,7 +54,13 @@ export function BlockContextMenu({
4854
}
4955

5056
return (
51-
<Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
57+
<Popover
58+
open={isOpen}
59+
onOpenChange={onClose}
60+
variant='secondary'
61+
size='sm'
62+
colorScheme='inverted'
63+
>
5264
<PopoverAnchor
5365
style={{
5466
position: 'fixed',
@@ -59,7 +71,7 @@ export function BlockContextMenu({
5971
}}
6072
/>
6173
<PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
62-
{/* Copy */}
74+
{/* Clipboard actions */}
6375
<PopoverItem
6476
className='group'
6577
onClick={() => {
@@ -70,8 +82,6 @@ export function BlockContextMenu({
7082
<span>Copy</span>
7183
<span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘C</span>
7284
</PopoverItem>
73-
74-
{/* Paste */}
7585
<PopoverItem
7686
className='group'
7787
disabled={disableEdit || !hasClipboard}
@@ -83,8 +93,6 @@ export function BlockContextMenu({
8393
<span>Paste</span>
8494
<span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘V</span>
8595
</PopoverItem>
86-
87-
{/* Duplicate - hide for starter blocks */}
8896
{!hasStarterBlock && (
8997
<PopoverItem
9098
disabled={disableEdit}
@@ -97,20 +105,8 @@ export function BlockContextMenu({
97105
</PopoverItem>
98106
)}
99107

100-
{/* Delete */}
101-
<PopoverItem
102-
className='group'
103-
disabled={disableEdit}
104-
onClick={() => {
105-
onDelete()
106-
onClose()
107-
}}
108-
>
109-
<span>Delete</span>
110-
<span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌫</span>
111-
</PopoverItem>
112-
113-
{/* Enable/Disable - hide if all blocks are notes */}
108+
{/* Toggle and edit actions */}
109+
{!allNoteBlocks && <PopoverDivider />}
114110
{!allNoteBlocks && (
115111
<PopoverItem
116112
disabled={disableEdit}
@@ -122,8 +118,6 @@ export function BlockContextMenu({
122118
{getToggleEnabledLabel()}
123119
</PopoverItem>
124120
)}
125-
126-
{/* Flip Handles - hide if all blocks are notes */}
127121
{!allNoteBlocks && (
128122
<PopoverItem
129123
disabled={disableEdit}
@@ -135,8 +129,6 @@ export function BlockContextMenu({
135129
Flip Handles
136130
</PopoverItem>
137131
)}
138-
139-
{/* Remove from Subflow - only show when applicable */}
140132
{canRemoveFromSubflow && (
141133
<PopoverItem
142134
disabled={disableEdit}
@@ -149,7 +141,8 @@ export function BlockContextMenu({
149141
</PopoverItem>
150142
)}
151143

152-
{/* Rename - only for single block, not subflows */}
144+
{/* Single block actions */}
145+
{isSingleBlock && <PopoverDivider />}
153146
{isSingleBlock && !isSubflow && (
154147
<PopoverItem
155148
disabled={disableEdit}
@@ -161,8 +154,6 @@ export function BlockContextMenu({
161154
Rename
162155
</PopoverItem>
163156
)}
164-
165-
{/* Open Editor - only for single block */}
166157
{isSingleBlock && (
167158
<PopoverItem
168159
onClick={() => {
@@ -173,6 +164,20 @@ export function BlockContextMenu({
173164
Open Editor
174165
</PopoverItem>
175166
)}
167+
168+
{/* Destructive action */}
169+
<PopoverDivider />
170+
<PopoverItem
171+
className='group'
172+
disabled={disableEdit}
173+
onClick={() => {
174+
onDelete()
175+
onClose()
176+
}}
177+
>
178+
<span>Delete</span>
179+
<span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌫</span>
180+
</PopoverItem>
176181
</PopoverContent>
177182
</Popover>
178183
)

0 commit comments

Comments
 (0)