feat(popover): sections; improvement: tooltip, popover; fix(notifications): loading content (#2676)

Author: emir-karabeg

apps/sim/app/_styles/globals.css

@@ -50,8 +50,8 @@
 @layer base {
   :root,
   .light {
-    --bg: #fdfdfd; /* main canvas - neutral near-white */
-    --surface-1: #fcfcfc; /* sidebar, panels */
+    --bg: #fefefe; /* main canvas - neutral near-white */
+    --surface-1: #fefefe; /* sidebar, panels */
     --surface-2: #ffffff; /* blocks, cards, modals - pure white */
     --surface-3: #f7f7f7; /* popovers, headers */
     --surface-4: #f5f5f5; /* buttons base */
@@ -70,6 +70,7 @@
     --text-muted: #737373;
     --text-subtle: #8c8c8c;
     --text-inverse: #ffffff;
+    --text-muted-inverse: #a0a0a0;
     --text-error: #ef4444;
 
     /* Borders / dividers */
@@ -186,6 +187,7 @@
     --text-muted: #787878;
     --text-subtle: #7d7d7d;
     --text-inverse: #1b1b1b;
+    --text-muted-inverse: #b3b3b3;
     --text-error: #ef4444;
 
     /* --border-strong: #303030; */
@@ -331,38 +333,38 @@
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--surface-1);
+    background: transparent;
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: var(--surface-7);
+    background-color: #c0c0c0;
     border-radius: var(--radius);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--surface-7);
+    background-color: #a8a8a8;
   }
 
   /* Dark Mode Global Scrollbar */
   .dark ::-webkit-scrollbar-track {
-    background: var(--surface-4);
+    background: transparent;
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background-color: var(--surface-7);
+    background-color: #5a5a5a;
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--surface-7);
+    background-color: #6a6a6a;
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--surface-7) var(--surface-1);
+    scrollbar-color: #c0c0c0 transparent;
   }
 
   .dark * {
-    scrollbar-color: var(--surface-7) var(--surface-4);
+    scrollbar-color: #5a5a5a transparent;
   }
 
   .copilot-scrollable {

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

@@ -16,7 +16,7 @@ export function LinkWithPreview({ href, children }: { href: string; children: Re
           {children}
         </a>
       </Tooltip.Trigger>
-      <Tooltip.Content side='top' align='center' sideOffset={5} className='max-w-sm p-3'>
+      <Tooltip.Content side='top' align='center' sideOffset={5} className='max-w-sm'>
         <span className='truncate font-medium text-xs'>{href}</span>
       </Tooltip.Content>
     </Tooltip.Root>

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

@@ -185,19 +185,17 @@ export function NotificationSettings({
 
   const hasSubscriptions = filteredSubscriptions.length > 0
 
+  // Compute form visibility synchronously to avoid empty state flash
+  // Show form if user explicitly opened it OR if loading is complete with no subscriptions
+  const displayForm = showForm || (!isLoading && !hasSubscriptions && !editingId)
+
   const getSubscriptionsForTab = useCallback(
     (tab: NotificationType) => {
       return subscriptions.filter((s) => s.notificationType === tab)
     },
     [subscriptions]
   )
 
-  useEffect(() => {
-    if (!isLoading && !hasSubscriptions && !editingId) {
-      setShowForm(true)
-    }
-  }, [isLoading, hasSubscriptions, editingId, activeTab])
-
   const resetForm = useCallback(() => {
     setFormData({
       workflowIds: [],
@@ -1210,7 +1208,7 @@ export function NotificationSettings({
   )
 
   const renderTabContent = () => {
-    if (showForm) {
+    if (displayForm) {
       return renderForm()
     }
 
@@ -1279,7 +1277,7 @@ export function NotificationSettings({
           </ModalTabs>
 
           <ModalFooter>
-            {showForm ? (
+            {displayForm ? (
               <>
                 {hasSubscriptions && (
                   <Button

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

@@ -7,8 +7,8 @@ import {
   Badge,
   Popover,
   PopoverContent,
+  PopoverDivider,
   PopoverItem,
-  PopoverSection,
   PopoverTrigger,
 } from '@/components/emcn'
 import {
@@ -468,7 +468,7 @@ export function OutputSelect({
         disablePortal={disablePopoverPortal}
       >
         <div className='space-y-[2px]'>
-          {Object.entries(groupedOutputs).map(([blockName, outputs]) => {
+          {Object.entries(groupedOutputs).map(([blockName, outputs], groupIndex, groupArray) => {
             const startIndex = flattenedOutputs.findIndex((o) => o.blockName === blockName)
 
             const firstOutput = outputs[0]
@@ -489,12 +489,10 @@ export function OutputSelect({
 
             return (
               <div key={blockName}>
-                <PopoverSection>
-                  <div className='flex items-center gap-1.5'>
-                    <TagIcon icon={blockIcon} color={blockColor} />
-                    <span>{blockName}</span>
-                  </div>
-                </PopoverSection>
+                <div className='flex items-center gap-1.5 px-[6px] py-[4px]'>
+                  <TagIcon icon={blockIcon} color={blockColor} />
+                  <span className='font-medium text-[13px]'>{blockName}</span>
+                </div>
 
                 <div className='flex flex-col gap-[2px]'>
                   {outputs.map((output, localIndex) => {
@@ -509,14 +507,13 @@ export function OutputSelect({
                         onClick={() => handleOutputSelection(output.label)}
                         onMouseEnter={() => setHighlightedIndex(globalIndex)}
                       >
-                        <span className='min-w-0 flex-1 truncate text-[var(--text-primary)]'>
-                          {output.path}
-                        </span>
+                        <span className='min-w-0 flex-1 truncate'>{output.path}</span>
                         {isSelectedValue(output) && <Check className='h-3 w-3 flex-shrink-0' />}
                       </PopoverItem>
                     )
                   })}
                 </div>
+                {groupIndex < groupArray.length - 1 && <PopoverDivider />}
               </div>
             )
           })}

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

@@ -1,6 +1,12 @@
 'use client'
 
-import { Popover, PopoverAnchor, PopoverContent, PopoverItem } from '@/components/emcn'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+} from '@/components/emcn'
 import type { BlockContextMenuProps } from './types'
 
 /**
@@ -48,7 +54,13 @@ export function BlockContextMenu({
   }
 
   return (
-    <Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
+    <Popover
+      open={isOpen}
+      onOpenChange={onClose}
+      variant='secondary'
+      size='sm'
+      colorScheme='inverted'
+    >
       <PopoverAnchor
         style={{
           position: 'fixed',
@@ -59,7 +71,7 @@ export function BlockContextMenu({
         }}
       />
       <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
-        {/* Copy */}
+        {/* Clipboard actions */}
         <PopoverItem
           className='group'
           onClick={() => {
@@ -70,8 +82,6 @@ export function BlockContextMenu({
           <span>Copy</span>
           <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘C</span>
         </PopoverItem>
-
-        {/* Paste */}
         <PopoverItem
           className='group'
           disabled={disableEdit || !hasClipboard}
@@ -83,8 +93,6 @@ export function BlockContextMenu({
           <span>Paste</span>
           <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘V</span>
         </PopoverItem>
-
-        {/* Duplicate - hide for starter blocks */}
         {!hasStarterBlock && (
           <PopoverItem
             disabled={disableEdit}
@@ -97,20 +105,8 @@ export function BlockContextMenu({
           </PopoverItem>
         )}
 
-        {/* Delete */}
-        <PopoverItem
-          className='group'
-          disabled={disableEdit}
-          onClick={() => {
-            onDelete()
-            onClose()
-          }}
-        >
-          <span>Delete</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌫</span>
-        </PopoverItem>
-
-        {/* Enable/Disable - hide if all blocks are notes */}
+        {/* Toggle and edit actions */}
+        {!allNoteBlocks && <PopoverDivider />}
         {!allNoteBlocks && (
           <PopoverItem
             disabled={disableEdit}
@@ -122,8 +118,6 @@ export function BlockContextMenu({
             {getToggleEnabledLabel()}
           </PopoverItem>
         )}
-
-        {/* Flip Handles - hide if all blocks are notes */}
         {!allNoteBlocks && (
           <PopoverItem
             disabled={disableEdit}
@@ -135,8 +129,6 @@ export function BlockContextMenu({
             Flip Handles
           </PopoverItem>
         )}
-
-        {/* Remove from Subflow - only show when applicable */}
         {canRemoveFromSubflow && (
           <PopoverItem
             disabled={disableEdit}
@@ -149,7 +141,8 @@ export function BlockContextMenu({
           </PopoverItem>
         )}
 
-        {/* Rename - only for single block, not subflows */}
+        {/* Single block actions */}
+        {isSingleBlock && <PopoverDivider />}
         {isSingleBlock && !isSubflow && (
           <PopoverItem
             disabled={disableEdit}
@@ -161,8 +154,6 @@ export function BlockContextMenu({
             Rename
           </PopoverItem>
         )}
-
-        {/* Open Editor - only for single block */}
         {isSingleBlock && (
           <PopoverItem
             onClick={() => {
@@ -173,6 +164,20 @@ export function BlockContextMenu({
             Open Editor
           </PopoverItem>
         )}
+
+        {/* Destructive action */}
+        <PopoverDivider />
+        <PopoverItem
+          className='group'
+          disabled={disableEdit}
+          onClick={() => {
+            onDelete()
+            onClose()
+          }}
+        >
+          <span>Delete</span>
+          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌫</span>
+        </PopoverItem>
       </PopoverContent>
     </Popover>
   )