diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 62419c1..ae858d3 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -352,6 +352,7 @@
item={selectedItem}
onClose={() => (selectedItem = null)}
onRetry={(id) => { retryItem(id); selectedItem = null; }}
+ onDelete={(id) => { removeItem(id); selectedItem = null; }}
/>
{/if}
diff --git a/src/routes/components/RecipeSheet.svelte b/src/routes/components/RecipeSheet.svelte
index f0845d0..4f50fd7 100644
--- a/src/routes/components/RecipeSheet.svelte
+++ b/src/routes/components/RecipeSheet.svelte
@@ -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
{/if}
+
+
+ {#if onDelete}
+
+ {/if}
@@ -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);
+ }