From 01720039931c7d1948645994c6b7bc5c30765385 Mon Sep 17 00:00:00 2001
From: wilson <wilson@thomaswilson.xyz>
Date: Tue, 31 Mar 2026 07:22:58 +0100
Subject: [PATCH] feat: Add the ArticlePreview.svelte component to frontend

---
 .../app/jobs/[job_id]/ArticlePreview.svelte   | 127 ++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte

diff --git a/frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte b/frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte
new file mode 100644
index 0000000..fb2a6ee
--- /dev/null
+++ b/frontend/src/routes/app/jobs/[job_id]/ArticlePreview.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { formatLanguage } from '$lib/formatters';
+	import type { GetArticleBffArticlesArticleIdGetResponse } from '../../../../client/types.gen';
+
+	interface Props {
+		article: GetArticleBffArticlesArticleIdGetResponse | null;
+		fullAudioUrl?: string;
+	}
+
+	const { article, fullAudioUrl }: Props = $props();
+</script>
+
+{#if article}
+	<section class="content-section">
+		{#if fullAudioUrl}
+			<section class="content-section">
+				<h2 class="section-title">Audio</h2>
+				<audio class="audio-player" controls src={fullAudioUrl}>
+					Your browser does not support the audio element.
+				</audio>
+			</section>
+		{/if}
+		<h2 class="section-title">
+			Generated Text
+			<span class="section-lang">{formatLanguage(article.target_language)}</span>
+		</h2>
+		<div class="prose prose-target">{article.target_body}</div>
+	</section>
+
+	<section class="content-section">
+		<h2 class="section-title">
+			Translation
+			<span class="section-lang">{formatLanguage(article.source_language)}</span>
+		</h2>
+		<div class="prose prose-translated">{article.source_body}</div>
+	</section>
+
+	<section class="content-section">
+		<h2 class="section-title">Audio Transcript</h2>
+		<div class="pos-text">{JSON.stringify(article.target_body_transcript, null, 2)}</div>
+	</section>
+
+	<section class="content-section">
+		<h2 class="section-title">Generated Text with POS Tags</h2>
+		<div class="pos-text">{JSON.stringify(article.target_body_pos, null, 2)}</div>
+	</section>
+
+	<section class="content-section">
+		<h2 class="section-title">Translated Text with POS Tags</h2>
+		<div class="pos-text">{JSON.stringify(article.source_body_pos, null, 2)}</div>
+	</section>
+{/if}
+
+<style>
+	/* --- 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);
+	}
+
+	/* --- Audio --- */
+
+	.audio-player {
+		width: 100%;
+		accent-color: var(--color-primary);
+	}
+
+	.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;
+	}
+</style>