mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-06 00:02:13 +00:00

Files

T

GuilhemandClaude Opus 5 665f83e1f4 fix(frontend): operator menu opens on hover, pins on click (#10824 )

* fix(frontend): operator menu opens on hover, pins on click

The operator hamburger synthesized a trigger click on every mouseenter, so
melt toggled the menu: re-entering an open menu closed it, and a real click
after a hover-open closed it too.

Hover now opens the menu only when closed and closes it 150ms after the
pointer leaves; the portaled content carries the same handlers so moving
between button and list keeps it open. A click is intercepted in the capture
phase: when hover already opened the menu the click is swallowed (melt would
otherwise toggle it shut) and pins it instead, so it stays open until a click
outside or on the trigger.

Opening and closing both go through a synthetic click on the trigger because
melt's menubar renders content only when rootActiveTrigger is set, which only
the trigger's own click handler does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* refactor(frontend): move hover-open/pin into Menu's openOnHover prop

The hover machinery duplicated what meltComponents/Popover.svelte already
offers as openOnHover. Menu.svelte owns both the trigger wrapper and the
content div, so the grace timeout, the pin flag and the synthetic trigger
click belong there rather than in the consumer.

OperatorMenu is back to its original markup plus `openOnHover`, and the other
Menubar users can opt in. Popover keeps its own implementation: it is built on
createPopover, not the menubar, and does not need the trigger-click detour.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* fix(frontend): show the keyboard highlight on operator menu rows

sidebarClasses.hoverBg only reacts to the pointer, so rows styled with it
alone stayed transparent while melt moved data-highlighted through them:
arrow keys walked the menu invisibly. Affected Home, Runs, Schedules and
Tutorials (MenuLink), plus Account settings, Switch theme and All workspaces.

MenuLink adds the highlight only when it is rendered as a menu item; the
sidebar and settings-menu call sites pass no `item`, so nothing changes there.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* fix(frontend): one highlight state per menu row, accent for the selected one

Menu rows carried a hover rule and a data-highlighted rule at once. Melt moves
data-highlighted with the pointer as well as the keyboard, so the hover rule
was a second, independent state: the row under the pointer and the row the
arrow keys had reached both lit up. Menu rows now style data-highlighted only.
"More triggers" keeps its hover rule — it is a plain div, not a melt item, so
it never receives data-highlighted.

The selected row also painted bg-surface-hover, making the current page
indistinguishable from a highlight. It now uses the accent pair the rest of
the app uses for selection, bg-surface-accent-selected + text-accent.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* fix(frontend): make "More triggers" a real menu item

It was a hand-rolled <div role="button" tabindex="0">. Melt collects the rows
arrow keys walk with querySelectorAll('[data-melt-menu-id="<menuId>"]'), an
attribute only the item builder stamps on, so the row was skipped — and its
tabindex was no help either, since Tab inside an open menu is intercepted to
close it.

It is now a MenuItem. Melt closes the menu on item click unless the click is
defaultPrevented, and Svelte delegates onclick to the root, which runs after
melt's own listener, so the toggle sits in a capture handler on a wrapper
where it reaches the event first.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* Revert "selected sidebar row on the accent tokens"

sidebarClasses drives the whole sidebar and SessionPicker, not just the
operator menu; restore selectedBg/selectedText to their previous values.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* feat(frontend): open the operator menu below the hamburger

Menu defaults to right-start, which put the operator menu alongside the
trigger and over the page header. bottom-start drops it under the hamburger,
left-aligned. Set on this menu only; the shared default is unchanged.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* feat(frontend): show the operator menu trigger as selected while pinned

Nothing distinguished a pinned menu from one that is merely following the
pointer, so a click gave no feedback. Menu hands `pinned` to the triggr
snippet, and the operator hamburger keeps sidebarClasses.selectedBg while it
holds — the tint that hover gives it, now persisting after the pointer leaves.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

* refactor(frontend): address Codex/Claude review on the menu hover changes

Reuse debounce from $lib/utils for the hover grace period instead of a
hand-rolled timer, matching how Popover implements the same delay.

Give the "More triggers" capture wrapper role="none" so it doesn't sit
between role="menu" and role="menuitem" as an unlabelled node, and spell out
in the comment why the listener has to be on an ancestor rather than on the
item itself.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FwLAoY7s9iPkYPGcmnw6UC

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>