hermes - 💡(How to fix) Fix [Bug]: Profile color picker flickers and closes immediately on right-click → Color… (ContextMenu + Popover nesting conflict)

Description

On the Hermes Desktop app, right-clicking a profile square and selecting "Color…" from the context menu causes the color picker to briefly flicker and close immediately. The color swatches never remain visible, making the feature unusable.

Same behavior occurs with the long-press gesture (hold the profile square) — the picker flashes and disappears.

Root Cause

The ProfileSquare component nests Radix UI's Popover and ContextMenu primitives as siblings sharing the same trigger element through asChild prop chains:

<Popover onOpenChange={setPickerOpen} open={pickerOpen}>
  <ContextMenu>
    <PopoverAnchor asChild>
      <ContextMenuTrigger asChild>
        <TooltipTrigger asChild>
          <button />

When the ContextMenu closes (after selecting an item), Radix triggers onOpenChange(false) on the Popover, which overrides the programmatic setPickerOpen(true) called from the ContextMenu item handler. The Popover opens and immediately closes in the same frame.

Fix

PR #[TBD] decouples the two primitives entirely. The ContextMenu handles right-click independently. The color picker is rendered via createPortal as an independent floating panel with a backdrop overlay, positioned at the button's coordinates. No shared Radix state to conflict.

Environment

• Hermes Desktop (any build with the profile rail, ~v0.15.1+)
• macOS (likely all platforms)

Related

• The profile color feature was introduced in recent commits (profile-rail, profile-switcher)