mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-21 23:34:31 +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" />
105 lines
3.5 KiB
Vue
105 lines
3.5 KiB
Vue
<template>
|
|
<div class="flex items-center gap-1">
|
|
<Popover :show-arrow="false">
|
|
<template #button>
|
|
<Button
|
|
v-tooltip.top="moreTooltipConfig"
|
|
variant="textonly"
|
|
size="icon"
|
|
:aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
|
|
>
|
|
<i
|
|
class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
|
|
/>
|
|
</Button>
|
|
</template>
|
|
<template #default="{ close }">
|
|
<div class="flex min-w-[14rem] flex-col items-stretch font-inter">
|
|
<Button
|
|
data-testid="docked-job-history-action"
|
|
class="w-full justify-between text-sm font-light"
|
|
variant="textonly"
|
|
size="sm"
|
|
@click="onToggleDockedJobHistory"
|
|
>
|
|
<span class="flex items-center gap-2">
|
|
<i
|
|
class="icon-[lucide--panel-left-close] size-4 text-text-secondary"
|
|
/>
|
|
<span>{{
|
|
t('sideToolbar.queueProgressOverlay.dockedJobHistory')
|
|
}}</span>
|
|
</span>
|
|
<i
|
|
v-if="isQueuePanelV2Enabled"
|
|
class="icon-[lucide--check] size-4"
|
|
/>
|
|
</Button>
|
|
<!-- TODO: Bug in assets sidebar panel derives assets from history, so despite this not deleting the assets, it still effectively shows to the user as deleted -->
|
|
<template v-if="showClearHistoryAction">
|
|
<div class="my-1 border-t border-interface-stroke" />
|
|
<Button
|
|
data-testid="clear-history-action"
|
|
class="h-auto min-h-0 w-full items-start justify-start whitespace-normal"
|
|
variant="textonly"
|
|
size="sm"
|
|
@click="onClearHistoryFromMenu(close)"
|
|
>
|
|
<i
|
|
class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
|
|
/>
|
|
<span
|
|
class="flex flex-col items-start break-words text-left leading-tight"
|
|
>
|
|
<span class="text-sm font-light">
|
|
{{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
|
|
</span>
|
|
<span class="text-xs text-text-secondary font-light">
|
|
{{
|
|
t(
|
|
'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'
|
|
)
|
|
}}
|
|
</span>
|
|
</span>
|
|
</Button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</Popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Popover from '@/components/ui/Popover.vue'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { buildTooltipConfig } from '@/composables/useTooltipConfig'
|
|
import { isCloud } from '@/platform/distribution/types'
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'clearHistory'): void
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
const settingStore = useSettingStore()
|
|
|
|
const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
|
|
const isQueuePanelV2Enabled = computed(() =>
|
|
settingStore.get('Comfy.Queue.QPOV2')
|
|
)
|
|
const showClearHistoryAction = computed(() => !isCloud)
|
|
|
|
const onClearHistoryFromMenu = (close: () => void) => {
|
|
close()
|
|
emit('clearHistory')
|
|
}
|
|
|
|
const onToggleDockedJobHistory = async () => {
|
|
await settingStore.set('Comfy.Queue.QPOV2', !isQueuePanelV2Enabled.value)
|
|
}
|
|
</script>
|