Comfy-Org / Comfy-Org/ComfyUI_frontend

refactor: extract usePopoverHover composable to deduplicate timer-based hover logic

Open
#9,944 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
developer experience
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Follow-up Refactor

The timer-based hover logic (show/hide scheduling, position calculation, clear/reset timers) is ~60–70% structurally duplicated between `JobAssetsList.vue` and `QueueJobItem.vue`.

Extracting this logic into a shared `usePopoverHover` composable would:
- Eliminate ~80 lines of duplicated code
- Guarantee consistent hover behavior across both components
- Improve maintainability and testability

## Suggested approach

Create a composable (e.g., `src/composables/queue/usePopoverHover.ts`) that encapsulates:
- Show/hide delay timers (`scheduleDetailsShow`, `scheduleDetailsHide`)
- Timer cleanup helpers (`clearHideTimer`, `clearShowTimer`)
- Popover position calculation (`updatePopoverPosition`)
- State reset (`resetActiveDetails`)

Then consume it in both `JobAssetsList.vue` and `QueueJobItem.vue`.

## References

- Identified in PR #9549 (fix: restore queue job details popover)
- Discussion: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9549#discussion_r2925540427
- Requested by @christian-byrne

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9944-refactor-extract-usePopoverHover-composable-to-deduplicate-timer-based-hover-logic-3246d73d3650815aaba1ca5356c597cc) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.