improvement: popover, tooltip, notifications

[emir-karabeg]

Summary

Feat(popover): sections

Improvement: tooltip, popover

Fix(notifications): loading content

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

Testing

Solo.

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]

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

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Jan 4, 2026 0:47am

[greptile-apps]

Greptile Summary

This PR adds several improvements to the popover and tooltip components in the EMCN library:

New Features:

• Added PopoverDivider component for visual separation between menu sections
• Introduced colorScheme prop with support for 'inverted' mode (dark background in light mode)
• Added --text-muted-inverse CSS variable for inverted color scheme text styling

Improvements:

• Reorganized popover styling constants into a more maintainable STYLES object structure
• Applied inverted color scheme to all context menus (block, pane, workflow) for better visual hierarchy
• Removed redundant custom padding from Tooltip.Content usages across the codebase, now handled internally
• Improved menu item grouping with logical dividers separating clipboard, edit, navigation, and destructive actions

Bug Fix:

• Fixed flash of empty content in notifications modal by computing displayForm synchronously instead of in useEffect

Minor Changes:

• Updated scrollbar colors to use hardcoded values instead of CSS variables for more consistent appearance
• Added maxZoom: 1.0 to workflow canvas fit view options
• Updated connection line color to use --workflow-edge variable
• Refined skeleton loading state in settings modal

The changes follow established EMCN component patterns and improve visual consistency across context menus. However, the PR includes globals.css modifications which violate project guidelines.

Confidence Score: 4/5

• This PR is safe to merge with one style guideline violation
• The implementation is clean and follows established patterns for EMCN components. The new PopoverDivider component is well-integrated, the inverted color scheme is properly structured, and the notifications bug fix is a solid improvement. However, the PR includes changes to globals.css which violates custom instruction c3b5e4b0-6580-4307-83aa-ba28f105b3c4 about avoiding globals.css edits. The scrollbar styling changes could potentially be scoped to components instead of being global.
• apps/sim/app/_styles/globals.css - contains changes that violate custom instruction about avoiding globals.css edits

Important Files Changed

Filename	Overview
apps/sim/app/_styles/globals.css	Updated color variables and scrollbar styles - violates custom instruction about avoiding globals.css edits
apps/sim/components/emcn/components/popover/popover.tsx	Added PopoverDivider component and inverted color scheme with improved styling structure
apps/sim/components/emcn/components/tooltip/tooltip.tsx	Updated default padding from px-[8px] py-[3.5px] to use internal padding only
apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx	Fixed flash of empty state by computing displayForm synchronously instead of in useEffect
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/block-context-menu.tsx	Added PopoverDivider to group menu items logically and applied inverted color scheme

Sequence Diagram

sequenceDiagram
    participant User
    participant ContextMenu as Context Menu Component
    participant Popover as Popover Root
    participant PopoverContent
    participant PopoverItem
    
    User->>ContextMenu: Right-click (block/pane/workflow)
    ContextMenu->>Popover: Set open={true}, colorScheme='inverted'
    Popover->>PopoverContent: Render with inverted styles
    PopoverContent->>PopoverContent: Apply colorScheme colors from STYLES
    
    Note over PopoverContent: Groups separated by PopoverDivider
    
    PopoverContent->>PopoverItem: Render menu items
    PopoverItem->>PopoverItem: Apply getItemStateClasses(variant, colorScheme)
    
    alt User hovers item
        User->>PopoverItem: Mouse enter
        PopoverItem->>PopoverItem: Apply hover state from STYLES.states.inverted
    end
    
    User->>PopoverItem: Click action
    PopoverItem->>ContextMenu: Execute callback (onCopy, onDelete, etc)
    ContextMenu->>Popover: Set open={false}
    Popover->>PopoverContent: Unmount

Loading

[greptile-apps]

Additional Comments (1)

1. apps/sim/app/_styles/globals.css, line 50-100 (link)

   style: violates custom instruction about avoiding globals.css edits

   Custom instruction states: "Avoid editing the globals.css file unless absolutely necessary. Move style changes to local component files instead."

   Consider moving the scrollbar styling changes to local component styles. The --text-muted-inverse variable addition is reasonable for the inverted color scheme.

   _{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

   Context Used: Context from dashboard - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... (source)

_{17 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}