feat: enhance grouped generation item UI with detailed failure states, delete, and reuse prompt/asset actions.
This commit is contained in:
@@ -736,7 +736,9 @@ const confirmAddToAlbum = async () => {
|
||||
<div v-for="item in groupedHistoryGenerations" :key="item.id"
|
||||
class="aspect-[9/16] relative overflow-hidden bg-slate-800 transition-all duration-300">
|
||||
|
||||
<!-- GROUPED GENERATION -->
|
||||
<!-- ============================================ -->
|
||||
<!-- GROUPED GENERATION (multiple in one slot) -->
|
||||
<!-- ============================================ -->
|
||||
<template v-if="item.isGroup">
|
||||
<!-- Group badge -->
|
||||
<div
|
||||
@@ -744,7 +746,6 @@ const confirmAddToAlbum = async () => {
|
||||
{{ item.children.length }}x
|
||||
</div>
|
||||
|
||||
<!-- All children done or mixed states -->
|
||||
<div class="w-full h-full grid gap-0.5"
|
||||
:class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
|
||||
<div v-for="child in item.children" :key="child.id"
|
||||
@@ -767,10 +768,26 @@ const confirmAddToAlbum = async () => {
|
||||
<i class="pi pi-spin pi-spinner text-violet-500 text-sm relative z-10"></i>
|
||||
</div>
|
||||
|
||||
<!-- Child: failed -->
|
||||
<!-- Child: FAILED -->
|
||||
<div v-else-if="child.status === 'failed'"
|
||||
class="w-full h-full flex items-center justify-center bg-red-500/10">
|
||||
<i class="pi pi-times-circle text-red-500"></i>
|
||||
class="w-full h-full flex flex-col items-center justify-center bg-red-500/10 relative group p-2 text-center"
|
||||
v-tooltip.bottom="item.children.length > 1 ? (child.failed_reason || 'Generation failed') : null">
|
||||
<i class="pi pi-times-circle text-red-500 text-lg mb-0.5"></i>
|
||||
<span
|
||||
class="text-[8px] font-bold text-red-400 uppercase tracking-wide leading-tight">Failed</span>
|
||||
|
||||
<!-- Show error text if only 1 child -->
|
||||
<span v-if="item.children.length === 1 && child.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight">
|
||||
{{ child.failed_reason }}
|
||||
</span>
|
||||
|
||||
<!-- Delete Persistent for failed child -->
|
||||
<div class="absolute top-0 right-0 p-1 z-10">
|
||||
<Button icon="pi pi-trash" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white pointer-events-auto"
|
||||
@click.stop="deleteGeneration(child)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Child: other -->
|
||||
@@ -778,59 +795,93 @@ const confirmAddToAlbum = async () => {
|
||||
<i class="pi pi-image text-lg opacity-20 text-slate-600"></i>
|
||||
</div>
|
||||
|
||||
<!-- Individual child overlay -->
|
||||
<!-- SUCCESS overlay per child (hover) -->
|
||||
<div v-if="child.result_list && child.result_list.length > 0"
|
||||
class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1"
|
||||
:class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== child.id, 'opacity-100': activeOverlayId === child.id }">
|
||||
class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1 z-10"
|
||||
:class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== child.id, 'opacity-100 pointer-events-auto': activeOverlayId === child.id }">
|
||||
|
||||
<div class="flex justify-between items-start z-10">
|
||||
<!-- Top right: edit, album, delete -->
|
||||
<div class="flex justify-end items-start gap-0.5">
|
||||
<Button icon="pi pi-pencil" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
|
||||
@click.stop="useResultAsAsset(child)" />
|
||||
<Button icon="pi pi-folder-plus" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
|
||||
@click.stop="openAlbumPicker(child)" />
|
||||
<Button icon="pi pi-trash" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white"
|
||||
@click.stop="deleteGeneration(child)" />
|
||||
<div class="flex gap-0.5">
|
||||
<Button icon="pi pi-pencil" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
|
||||
@click.stop="useResultAsAsset(child)" />
|
||||
<Button icon="pi pi-folder-plus" size="small"
|
||||
class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
|
||||
@click.stop="openAlbumPicker(child)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center: view button + cost -->
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
|
||||
class="flex-1 flex flex-col items-center justify-center pointer-events-none">
|
||||
<span class="text-[8px] font-bold text-slate-300 font-mono mb-1">{{
|
||||
child.cost }} $</span>
|
||||
<Button icon="pi pi-eye" rounded text
|
||||
class="!bg-black/50 !text-white !w-8 !h-8 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border !border-white/20"
|
||||
@click.stop="openImagePreview(API_URL + '/assets/' + child.result_list[0])" />
|
||||
</div>
|
||||
|
||||
<div class="z-10">
|
||||
<span class="text-[8px] font-bold text-slate-300 font-mono">{{ child.cost }}
|
||||
$</span>
|
||||
<!-- Bottom: reuse prompt + reuse assets -->
|
||||
<div class="flex gap-0.5">
|
||||
<Button icon="pi pi-comment" size="small"
|
||||
class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
|
||||
@click.stop="reusePrompt(child)" />
|
||||
<Button icon="pi pi-images" size="small"
|
||||
class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
|
||||
@click.stop="reuseAsset(child)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- SINGLE GENERATION -->
|
||||
<!-- ============================================ -->
|
||||
<!-- SINGLE GENERATION (full slot) -->
|
||||
<!-- ============================================ -->
|
||||
<template v-else>
|
||||
<div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">
|
||||
|
||||
<!-- SUCCESS: image -->
|
||||
<img v-if="item.result_list && item.result_list.length > 0"
|
||||
:src="API_URL + '/assets/' + item.result_list[0] + '?thumbnail=true'"
|
||||
class="w-full h-full object-cover cursor-pointer"
|
||||
@click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
|
||||
|
||||
<!-- FAILED: error display -->
|
||||
<div v-else-if="item.status === 'failed'"
|
||||
class="w-full h-full flex flex-col items-center justify-center p-2 text-center bg-red-500/10 border border-red-500/20">
|
||||
<i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
|
||||
<span
|
||||
class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
|
||||
<span v-if="item.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-2 leading-tight"
|
||||
v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
|
||||
class="w-full h-full flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20 relative group">
|
||||
|
||||
<!-- Top Right: Delete (Persistent) -->
|
||||
<div class="w-full flex justify-end">
|
||||
<Button icon="pi pi-trash" v-tooltip.right="'Delete'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
|
||||
@click.stop="deleteGeneration(item)" />
|
||||
</div>
|
||||
|
||||
<!-- Center: Error Info -->
|
||||
<div class="flex flex-col items-center justify-center flex-1">
|
||||
<i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
|
||||
<span
|
||||
class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
|
||||
<span v-if="item.failed_reason"
|
||||
class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
|
||||
v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Bottom: Reuse Buttons (Persistent) -->
|
||||
<div class="w-full flex gap-1 z-10">
|
||||
<Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
|
||||
class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="reusePrompt(item)" />
|
||||
<Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
|
||||
class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
|
||||
@click.stop="reuseAsset(item)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROCESSING -->
|
||||
<div v-else-if="['processing', 'starting', 'running'].includes(item.status)"
|
||||
class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20">
|
||||
<div
|
||||
@@ -844,33 +895,23 @@ const confirmAddToAlbum = async () => {
|
||||
}}...</span>
|
||||
<span v-if="item.progress"
|
||||
class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
|
||||
item.progress }}%</span>
|
||||
item.progress }}%</span>
|
||||
</div>
|
||||
|
||||
<!-- EMPTY -->
|
||||
<div v-else
|
||||
class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
|
||||
<i class="pi pi-image text-4xl opacity-20"></i>
|
||||
</div>
|
||||
|
||||
<!-- Single generation overlay -->
|
||||
<div class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2"
|
||||
:class="{ 'opacity-0 group-hover:opacity-100': activeOverlayId !== item.id, 'opacity-100': activeOverlayId === item.id }">
|
||||
<!-- HOVER OVERLAY (for successful single gen state only) -->
|
||||
<div v-if="item.result_list && item.result_list.length > 0"
|
||||
class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
|
||||
:class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== item.id, 'opacity-100 pointer-events-auto': activeOverlayId === item.id }">
|
||||
|
||||
<!-- Top Right: buttons -->
|
||||
<div
|
||||
class="flex justify-between items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
|
||||
<Button icon="pi pi-trash" v-tooltip.right="'Delete'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
|
||||
@click.stop="deleteGeneration(item)" />
|
||||
|
||||
<div class="flex flex-col items-center gap-0.5 pointer-events-none">
|
||||
<span
|
||||
class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
|
||||
item.cost }} $</span>
|
||||
<span v-if="item.execution_time_seconds"
|
||||
class="text-[8px] text-slate-500 font-mono">{{
|
||||
item.execution_time_seconds.toFixed(1) }}s</span>
|
||||
</div>
|
||||
|
||||
class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
|
||||
<div class="flex gap-1">
|
||||
<Button v-if="item.result_list && item.result_list.length > 0"
|
||||
icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
|
||||
@@ -879,17 +920,31 @@ const confirmAddToAlbum = async () => {
|
||||
<Button icon="pi pi-folder-plus" v-tooltip.left="'Add to Album'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
|
||||
@click.stop="openAlbumPicker(item)" />
|
||||
<Button icon="pi pi-trash" v-tooltip.left="'Delete'"
|
||||
class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
|
||||
@click.stop="deleteGeneration(item)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Centered View Button -->
|
||||
<div v-if="item.result_list && item.result_list.length > 0"
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none">
|
||||
<!-- Center: View button + Cost/Time -->
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
|
||||
<!-- Cost & Time -->
|
||||
<div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
|
||||
<span
|
||||
class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
|
||||
item.cost }} $</span>
|
||||
<span v-if="item.execution_time_seconds"
|
||||
class="text-[8px] text-slate-500 font-mono">{{
|
||||
item.execution_time_seconds.toFixed(1) }}s</span>
|
||||
</div>
|
||||
<!-- View Button -->
|
||||
<Button icon="pi pi-eye" rounded text
|
||||
class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
|
||||
@click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
|
||||
</div>
|
||||
|
||||
<!-- Bottom: reuse buttons -->
|
||||
<div
|
||||
class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
|
||||
<div class="flex gap-1 mb-1">
|
||||
|
||||
Reference in New Issue
Block a user