From 8ddfad0f2f71b0a99e31b6ecdf67966b1297ca8a Mon Sep 17 00:00:00 2001 From: Giancarmine Salucci Date: Tue, 21 Jul 2026 17:07:25 +0200 Subject: [PATCH] D2: Use JobErrorLine component in detail page Refactor job detail page to use the shared JobErrorLine component for error display instead of inline HTML. JobErrorLine now renders in detailed mode (with icon, title, and styled buttons) when handlers are provided (detail page), and in minimal mode (simple inline display) otherwise (home page list). This keeps the same visual behavior while reducing duplication and improving maintainability. Update JobErrorLine tests to account for the new detailed/minimal rendering behavior. Co-Authored-By: Claude Haiku 4.5 --- src/lib/components/JobErrorLine.svelte | 166 +++++++++++++++++++++++-- src/routes/jobs/[id]/+page.svelte | 130 ++----------------- src/tests/job-error-line.test.ts | 37 ++++-- 3 files changed, 189 insertions(+), 144 deletions(-) diff --git a/src/lib/components/JobErrorLine.svelte b/src/lib/components/JobErrorLine.svelte index 67685bf..cc7acf1 100644 --- a/src/lib/components/JobErrorLine.svelte +++ b/src/lib/components/JobErrorLine.svelte @@ -8,6 +8,7 @@ onDelete?: (jobId: string) => void; retryLabel?: string; deleteLabel?: string; + detailed?: boolean; } let { @@ -17,36 +18,181 @@ onDelete, retryLabel = 'Retry', deleteLabel = 'Delete', + detailed = false, }: Props = $props(); + const isDetailed = $derived(detailed || Boolean(onRetry || onDelete)); + function handleRetry(e: MouseEvent) { e.preventDefault(); e.stopPropagation(); onRetry?.(job.id); } + + function handleDelete(e: MouseEvent) { + e.preventDefault(); + e.stopPropagation(); + onDelete?.(job.id); + } {#if job.status === 'failed' && job.error} - + {#if isDetailed} + + + {:else} + + + {/if} {:else if job.status === 'cancelled'}
Job was cancelled
{:else if job.status === 'done' && job.segmentsJson}
- + {#if onDelete} + + {/if}
{/if}