Show translated article preview on job page

frontend/src/routes/app/jobs/[job_id]/+page.server.ts

@@ -1,5 +1,5 @@
 import { error, type ServerLoad } from '@sveltejs/kit';
-import { getJobApiJobsJobIdGet } from '../../../../client/sdk.gen.ts';
+import { getJobApiJobsJobIdGet, getArticleBffArticlesArticleIdGet } from '../../../../client/sdk.gen.ts';
 import { PUBLIC_API_BASE_URL } from '$env/static/public';
 
 export const load: ServerLoad = async ({ params, locals }) => {
@@ -8,10 +8,23 @@ export const load: ServerLoad = async ({ params, locals }) => {
 		path: { job_id: params.job_id as string }
 	});
 
+	let translatedArticle = null;
+
 	if (!data || response.status !== 200) {
 		error(response.status === 404 ? 404 : 500, 'Job not found');
 	}
 
+	if (data.translated_article_id) {
+		const articleResponse = await getArticleBffArticlesArticleIdGet({
+			headers: { Authorization: `Bearer ${locals.authToken ?? ''}` },
+			path: { article_id: data.translated_article_id as string }
+		});
+
+		if (articleResponse.data) {
+			translatedArticle = articleResponse.data;
+		}
+	}
+
 	const fullAudioUrl = `${PUBLIC_API_BASE_URL}/media/${data.audio_url}`;
-	return { job: data, fullAudioUrl };
+	return { job: data, fullAudioUrl, translatedArticle };
 };

frontend/src/routes/app/jobs/[job_id]/+page.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">
+	import { formatLanguage } from '$lib/formatters';
 	import type { PageProps } from './$types';
+	import ArticlePreview from './ArticlePreview.svelte';
 
 	const { data }: PageProps = $props();
-	const { job } = data;
+	const { job, fullAudioUrl, translatedArticle } = data;
-
-	const languageNames: Record<string, string> = {
-		en: 'English',
-		fr: 'French',
-		es: 'Spanish',
-		it: 'Italian',
-		de: 'German'
-	};
-
-	const lang = (code: string) => languageNames[code] ?? code.toUpperCase();
 
 	const fmt = (iso: string | null | undefined) => {
 		if (!iso) return null;
@@ -42,10 +34,6 @@
 	</header>
 
 	<dl class="meta-grid">
-		<div class="meta-item">
-			<dt class="field-label">Language Pair</dt>
-			<dd class="meta-value">{lang(job.source_language)} → {lang(job.target_language)}</dd>
-		</div>
 		<div class="meta-item">
 			<dt class="field-label">Complexity</dt>
 			<dd class="meta-value">{job.complexity_level}</dd>
@@ -80,62 +68,7 @@
 		</div>
 	{/if}
 
-	{#if job.input_summary}
+	<ArticlePreview article={translatedArticle} {fullAudioUrl} />
-		<section class="content-section">
-			<h2 class="section-title">Input Summary</h2>
-			<div class="prose">{job.input_summary}</div>
-		</section>
-	{/if}
-
-	{#if job.generated_text}
-		<section class="content-section">
-			<h2 class="section-title">
-				Generated Text
-				<span class="section-lang">{lang(job.target_language)}</span>
-			</h2>
-			{#if job.audio_url}
-				<section class="content-section">
-					<h2 class="section-title">Audio</h2>
-					<audio class="audio-player" controls src={data.fullAudioUrl}>
-						Your browser does not support the audio element.
-					</audio>
-				</section>
-			{/if}
-			<div class="prose prose-target">{job.generated_text}</div>
-		</section>
-	{/if}
-
-	{#if job.translated_text}
-		<section class="content-section">
-			<h2 class="section-title">
-				Translation
-				<span class="section-lang">{lang(job.source_language)}</span>
-			</h2>
-			<div class="prose prose-translated">{job.translated_text}</div>
-		</section>
-	{/if}
-
-	<!-- POS is JSON data about parts-of-speech -->
-	{#if job.audio_transcript}
-		<section class="content-section">
-			<h2 class="section-title">Audio Transcript</h2>
-			<div class="pos-text">{JSON.stringify(job.audio_transcript, null, 2)}</div>
-		</section>
-	{/if}
-
-	{#if job.generated_text_pos}
-		<section class="content-section">
-			<h2 class="section-title">Generated Text with POS Tags</h2>
-			<div class="pos-text">{JSON.stringify(job.generated_text_pos, null, 2)}</div>
-		</section>
-	{/if}
-
-	{#if job.translated_text_pos}
-		<section class="content-section">
-			<h2 class="section-title">Translated Text with POS Tags</h2>
-			<div class="pos-text">{JSON.stringify(job.translated_text_pos, null, 2)}</div>
-		</section>
-	{/if}
 </div>
 
 <style>
@@ -251,79 +184,6 @@
 		}
 	}
 
-	/* --- Content sections --- */
-
-	.content-section {
-		display: flex;
-		flex-direction: column;
-		gap: var(--space-3);
-		padding-top: var(--space-4);
-		border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 30%, transparent);
-	}
-
-	.section-title {
-		font-family: var(--font-display);
-		font-size: var(--text-title-lg);
-		font-weight: var(--weight-semibold);
-		color: var(--color-on-surface);
-		display: flex;
-		align-items: baseline;
-		gap: var(--space-2);
-	}
-
-	.section-lang {
-		font-family: var(--font-label);
-		font-size: var(--text-label-md);
-		font-weight: var(--weight-medium);
-		letter-spacing: var(--tracking-wide);
-		text-transform: uppercase;
-		color: var(--color-on-surface-variant);
-	}
-
-	/* --- Prose --- */
-
-	.prose {
-		font-family: var(--font-body);
-		font-size: var(--text-body-lg);
-		line-height: var(--leading-relaxed);
-		color: var(--color-on-surface);
-		white-space: pre-wrap;
-	}
-
-	.prose-target {
-		padding: var(--space-5) var(--space-6);
-		background-color: var(--color-surface-container-low);
-		border-radius: var(--radius-lg);
-		font-size: calc(var(--text-body-lg) * 1.05);
-	}
-
-	.prose-translated {
-		color: var(--color-on-surface-variant);
-		font-size: var(--text-body-md);
-		font-style: italic;
-	}
-
-	.pos-text {
-		font-family: var(--font-mono);
-		font-size: var(--text-body-sm);
-		line-height: var(--leading-relaxed);
-		color: var(--color-on-surface);
-		background-color: var(--color-surface-container-low);
-		padding: var(--space-4);
-		border-radius: var(--radius-md);
-		overflow-x: auto;
-		overflow-y: scroll;
-		max-height: 300px;
-		white-space: pre-wrap;
-	}
-
-	/* --- Audio --- */
-
-	.audio-player {
-		width: 100%;
-		accent-color: var(--color-primary);
-	}
-
 	/* --- Responsive --- */
 
 	@media (max-width: 640px) {