mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-10 15:40:24 +00:00
b3aed9afd0
## Summary Move queue job history into a dedicated sidebar tab (gated by `Comfy.Queue.QPOV2`) and remove mixed job-history UI from the Assets sidebar so assets and job controls are separated. ## Changes - **What**: - Added `JobHistorySidebarTab` with reusable job UI primitives: `JobFilterTabs`, `JobFilterActions`, `JobAssetsList`, and shared `JobHistoryActionsMenu`. - Added reactive `job-history` tab registration in `sidebarTabStore`; prepends above Assets when `Comfy.Queue.QPOV2` is enabled and unregisters cleanly when disabled. - Added debounced search to `useJobList` (filters by job title, metadata, and prompt id). - Extracted clear-history dialog logic to `useQueueClearHistoryDialog` and reused it from queue overlay and job history tab. - Removed active-job rendering and queue-clear controls from assets list/grid/tab views; assets sidebar now focuses on media assets only. - Removed the QPOV2 gate from `MediaAssetViewModeToggle` and updated queue/job localized copy. - Added and updated tests for queue overlay header actions, job filters, search filtering, sidebar tab registration, and assets sidebar behavior. ## Review Focus - Verify QPOV2 toggle behavior: - `Docked Job History` menu action toggles `Comfy.Queue.QPOV2`. - `job-history` tab insertion/removal order and active-tab reset on removal. - Verify behavior split between tabs: - Job controls (cancel/delete/view/filter/search/clear history/clear queue) live in Job History. - Assets sidebar loading/empty states and list/grid rendering remain correct after removing active jobs. ## Screenshots (if applicable) <img width="670" height="707" alt="image" src="https://github.com/user-attachments/assets/3a201fcb-d104-4e95-b5fe-49c4006a30a5" />
88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { MenuItem } from 'primevue/menuitem'
|
|
import {
|
|
PopoverArrow,
|
|
PopoverContent,
|
|
PopoverPortal,
|
|
PopoverRoot,
|
|
PopoverTrigger
|
|
} from 'reka-ui'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
defineOptions({
|
|
inheritAttrs: false
|
|
})
|
|
|
|
const {
|
|
entries,
|
|
icon,
|
|
to,
|
|
showArrow = true
|
|
} = defineProps<{
|
|
entries?: MenuItem[]
|
|
icon?: string
|
|
to?: string | HTMLElement
|
|
showArrow?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<PopoverRoot v-slot="{ close }">
|
|
<PopoverTrigger as-child>
|
|
<slot name="button">
|
|
<Button size="icon">
|
|
<i :class="icon ?? 'icon-[lucide--ellipsis]'" />
|
|
</Button>
|
|
</slot>
|
|
</PopoverTrigger>
|
|
<PopoverPortal :to>
|
|
<PopoverContent
|
|
side="bottom"
|
|
:side-offset="5"
|
|
:collision-padding="10"
|
|
v-bind="$attrs"
|
|
class="z-1700 rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
|
|
>
|
|
<slot :close>
|
|
<div class="flex flex-col p-1">
|
|
<template v-for="item in entries ?? []" :key="item.label">
|
|
<div
|
|
v-if="item.separator"
|
|
class="border-b w-full border-border-subtle"
|
|
/>
|
|
<div
|
|
v-else
|
|
:class="
|
|
cn(
|
|
'flex flex-row gap-4 p-2 rounded-sm my-1',
|
|
item.disabled
|
|
? 'opacity-50 pointer-events-none'
|
|
: item.command &&
|
|
'cursor-pointer hover:bg-secondary-background-hover'
|
|
)
|
|
"
|
|
@click="
|
|
(e) => {
|
|
if (!item.command || item.disabled) return
|
|
item.command({ originalEvent: e, item })
|
|
close()
|
|
}
|
|
"
|
|
>
|
|
<i v-if="item.icon" :class="item.icon" />
|
|
{{ item.label }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</slot>
|
|
<PopoverArrow
|
|
v-if="showArrow"
|
|
class="fill-base-background stroke-border-subtle"
|
|
/>
|
|
</PopoverContent>
|
|
</PopoverPortal>
|
|
</PopoverRoot>
|
|
</template>
|