feat(ui): add delete button to RecipeSheet + fix NaNd ago + full QueueItem in POST response
All checks were successful
Build & Push Docker Image / test-and-build (push) Successful in 1m1s

- RecipeSheet: add onDelete prop and 'Remove from queue' button at bottom of sheet
- +page.svelte: wire onDelete -> removeItem in RecipeSheet
- POST /api/queue: return full QueueItem (with createdAt, phases) instead of stripped subset
- TimelineRow: defensive relTime() handles undefined/NaN, uses createdAt ?? enqueuedAt

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Giancarmine Salucci
2026-05-12 23:05:44 +02:00
parent 1f3bfe2119
commit 561c2843b1
2 changed files with 31 additions and 1 deletions

View File

@@ -352,6 +352,7 @@
item={selectedItem}
onClose={() => (selectedItem = null)}
onRetry={(id) => { retryItem(id); selectedItem = null; }}
onDelete={(id) => { removeItem(id); selectedItem = null; }}
/>
{/if}
</div>

View File

@@ -14,8 +14,9 @@
item: QueueItem | null;
onClose?: () => void;
onRetry?: (id: string) => void;
onDelete?: (id: string) => void;
}
let { item, onClose, onRetry }: Props = $props();
let { item, onClose, onRetry, onDelete }: Props = $props();
const PALETTE = ['#E1306C', '#FD7E14', '#FCAF45', '#833AB4', '#C13584'];
function strHash(s: string): number {
@@ -164,6 +165,14 @@
Open in Tandoor <External size={16} color="#fff" />
</a>
{/if}
<!-- Delete button -->
{#if onDelete}
<button class="ic-btn-reset delete-btn" onclick={() => { onDelete?.(item!.id); onClose?.(); }}>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>
Remove from queue
</button>
{/if}
</div>
</div>
</div>
@@ -432,4 +441,24 @@
box-shadow: var(--shadow-lg);
text-decoration: none;
}
.delete-btn {
width: 100%;
margin-top: 12px;
padding: 14px;
border-radius: 99px;
background: transparent;
color: var(--muted);
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: 1px solid var(--border);
}
.delete-btn:active {
background: rgba(255, 59, 48, 0.08);
color: var(--status-error);
border-color: var(--status-error);
}
</style>