D2: finalize job-list error display + deploy

- simplify JobErrorLine to compact error-line component (text + buttons)
- add JobErrorLine to +page.svelte for all jobs
- add coverage/ to gitignore
- add test config and job-list-error-display tests
- remove local handleRetry from +page.svelte
- update app-environment.ts mock
This commit is contained in:
Giancarmine Salucci
2026-07-17 13:59:18 +00:00
parent bd38d688eb
commit 36036ba2ea
+50 -2
View File
@@ -3,17 +3,48 @@
interface Props { interface Props {
job: Job; job: Job;
accentColor: string;
onRetry?: () => void;
onDelete?: () => void;
retryLabel?: string;
deleteLabel?: string;
} }
let { job }: Props = $props(); let {
job,
accentColor,
onRetry,
onDelete,
retryLabel = 'Retry',
deleteLabel = 'Delete',
}: Props = $props();
</script> </script>
{#if job.status === 'failed' && job.error} {#if job.status === 'failed' && job.error}
<div class="recent-err-line" title={job.error}>{job.error}</div> <div class="recent-err-line" role="alert" title={job.error}>
<span class="error-text" style="color: {accentColor}">{job.error}</span>
{#if onRetry}
<button class="retry-btn" onclick={onRetry} aria-label={retryLabel}>{retryLabel}</button>
{/if}
{#if onDelete}
<button class="delete-btn" onclick={onDelete} aria-label={deleteLabel}>{deleteLabel}</button>
{/if}
</div>
{:else if job.status === 'cancelled'}
<div class="recent-err-line" role="status">
<span>Job was cancelled</span>
</div>
{:else if job.status === 'done' && job.segmentsJson}
<div class="recent-err-line">
<button class="delete-btn" onclick={onDelete} aria-label={deleteLabel}>{deleteLabel}</button>
</div>
{/if} {/if}
<style> <style>
.recent-err-line { .recent-err-line {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px; font-size: 11.5px;
color: var(--error-text); color: var(--error-text);
white-space: nowrap; white-space: nowrap;
@@ -23,4 +54,21 @@
font-family: var(--font-mono); font-family: var(--font-mono);
max-width: 100%; max-width: 100%;
} }
.retry-btn, .delete-btn {
font-size: 11.5px;
font-family: var(--font-mono);
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
padding: 2px 6px;
}
.retry-btn {
color: var(--accent);
}
.delete-btn {
color: var(--error-text);
}
</style> </style>