frontend: split hive-agent-menu's generic dropdown mechanics into a shared hive-menu component
<hive-agent-menu> bundled two concerns: the agent-specific trigger/item list, and generic "click a trigger, get a positioned dropdown" mechanics (shadow attach, open/close, singleton close-on-open coordination, outside-click/Escape handling). Pulled the latter out into a new @hive/shared/hive-menu.js (<hive-menu>), following the established per-component-directory + ._opts-before-append shadow-DOM pattern (<hive-dialog>). <hive-agent-menu> now just builds the "⋮" trigger and the action list and hands them to an internal <hive-menu> instance. <hive-menu> takes ownership of every <hive-menu> instance in the app for singleton coordination (closeAllMenus, renamed from closeAllAgentMenus) — a deliberate widening from the old per-agent-menu-only tracking, since the mechanism was never agent-specific to begin with. The one subtlety worth spelling out: <hive-menu> projects the caller's opaque trigger/content nodes via named <slot>s rather than moving them into its own shadow root. That's load-bearing, not cosmetic — if it re-parented them into its own shadow tree instead, <hive-agent-menu>'s own classes (.agent-menu-btn, .agent-menu-item, ...) would stop applying, since a <style> only styles elements within the same shadow tree/document it's part of, and only slotting (not re-parenting) keeps the caller's nodes in the caller's own tree for styling purposes. That in turn made <hive-agent-menu>'s own shadow root redundant once it wasn't the thing positioning or owning open/close state anymore, so it's dropped in favor of a plain light-DOM element styled by dashboard.css (already the one page it renders on) — hive-agent-menu.css is gone, its rules folded into dashboard.css's per-agent-menu section, minus the positioning rules that moved into hive-menu.css as the new generic `.menu-dropdown` wrapper. Verified with a standalone esbuild bundle + a cached nix chromium driven over raw CDP (no puppeteer/playwright/python3 available): hover-reveal opacity, dropdown open/close/positioning, outside-click/Escape dismissal, and cross-instance singleton coordination all behave identically to before the split.
This commit is contained in:
parent
f7b19c9d56
commit
395c9a6df2
7 changed files with 272 additions and 203 deletions
32
frontend/packages/shared/src/hive-menu/hive-menu.css
Normal file
32
frontend/packages/shared/src/hive-menu/hive-menu.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/* hive-menu.css — scoped stylesheet for the generic <hive-menu>
|
||||
shadow-DOM custom element (hive-menu.js). Loaded as raw text at build
|
||||
time (esbuild's `text` loader) and appended as a <style> element
|
||||
inside the shadow root — see @hive/shared/shadow-css.js's header
|
||||
comment for why a plain <style> tag and not adoptedStyleSheets.
|
||||
|
||||
`:host` carries only the one truly generic requirement: it's the
|
||||
containing block for the shadow tree's absolutely-positioned dropdown
|
||||
— a shadow host is the containing block for its own shadow tree's
|
||||
positioned descendants, exactly like any other positioned ancestor in
|
||||
the flat tree. Any *layout* role the host plays in a particular
|
||||
caller's own flex row (e.g. <hive-agent-menu>'s placement in
|
||||
`.container-row`) is caller-specific and lives in the caller's own
|
||||
stylesheet instead, not here.
|
||||
|
||||
`.menu-dropdown` is the generic positioning box wrapping the caller's
|
||||
opaque `content` node (projected in via `<slot name="content">` — see
|
||||
hive-menu.js). Only position/z-index/visibility live here; the
|
||||
button/item-row *visual* styling (colors, fonts, hover states) is
|
||||
presentational content the caller's own trigger/content nodes carry,
|
||||
so it lives in the caller's own stylesheet — `<hive-menu>` never sees
|
||||
those class names, only the opaque nodes handed to it. */
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
}
|
||||
.menu-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 2px);
|
||||
z-index: 50;
|
||||
}
|
||||
Loading…
Reference in a new issue