sendewerk/src/routes/post/+page.svelte

<script lang="ts">
	import { resolve } from '$app/paths';
	import { untrack } from 'svelte';
	import AppIcon from '#lib/components/AppIcon.svelte';
	import PostNavigation from '#lib/components/PostNavigation.svelte';
	import type { PageProps } from './$types';

	let { data }: PageProps = $props();
	let selectedId = $state(untrack(() => data.shows[0]?.showId ?? ''));
	let selected = $derived(
		data.shows.find((show) => show.showId === selectedId) ?? data.shows[0] ?? null
	);

	function date(value: string | null) {
		if (!value) return 'Datum nicht verfügbar';
		return new Intl.DateTimeFormat('de-DE', {
			timeZone: 'Europe/Berlin',
			dateStyle: 'long'
		}).format(new Date(value));
	}
</script>

<svelte:head><title>Postproduktion | Sendewerk</title></svelte:head>

<div class="unified-workspace post-library-workspace">
	<PostNavigation
		query={data.query}
		progress={data.progress}
		sort={data.sort}
		counts={data.counts}
	/>
	<section class="post-show-library workspace-content-pane" aria-labelledby="post-shows-title">
		<header class="page-heading shows-heading post-page-heading">
			<div>
				<h1>Postproduktion</h1>
				<p class="page-intro">YouTube, Social-Clips und Twitch-Highlights vorbereiten.</p>
			</div>
		</header>
		<div class="post-library-content">
			<div class="post-library-heading">
				<div>
					<p class="eyebrow">Abgeschlossene Streams</p>
					<h2 id="post-shows-title">Streams</h2>
				</div>
				<span>{data.shows.length}</span>
			</div>
			{#if data.shows.length}
				<div class="post-show-list">
					{#each data.shows as show (show.showId)}
						<a class="post-show-row" href={resolve('/post/[id]', { id: show.showId })}>
							<div class="post-show-primary">
								<span class="post-progress">{show.progress}</span>
								<h3>{show.title}</h3>
								<p>{date(show.startsAtUtc ?? show.completedAtUtc)}</p>
							</div>
							<dl class="post-show-counts">
								<div>
									<dt>Teile</dt>
									<dd>{show.recordingPartCount}</dd>
								</div>
								<div>
									<dt>Kontext</dt>
									<dd>{show.sourceCount}</dd>
								</div>
								<div>
									<dt>YouTube</dt>
									<dd>{show.youtubeCount}</dd>
								</div>
								<div>
									<dt>Clips</dt>
									<dd>{show.clipCount}</dd>
								</div>
								<div>
									<dt>Highlights</dt>
									<dd>{show.highlightCount}</dd>
								</div>
							</dl>
							<AppIcon name="chevron-right" />
						</a>
					{/each}
				</div>
			{:else}
				<div class="empty-state compact">
					<h2>Keine abgeschlossene Sendung gefunden</h2>
					<p>Postproduktion beginnt mit einer in Live bewusst abgeschlossenen Sendung.</p>
				</div>
			{/if}
		</div>
	</section>
	<aside
		class="content-quick-inspector stream-inspector builder-pane"
		aria-label="Post-Schnellübersicht"
	>
		{#if selected}<header class="stream-inspector-header">
				<div>
					<p class="eyebrow">Schnellübersicht</p>
					<a
						class="inspector-expand-button"
						href={resolve('/post/[id]', { id: selected.showId })}
						aria-label="Postproduktion vollständig öffnen"
						title="Vollständig bearbeiten"><AppIcon name="expand" /></a
					>
				</div>
				<h2>{selected.title}</h2>
				<p>Material, Texte, Schnitt und Veröffentlichung.</p>
			</header>
			<div class="content-quick-inspector-scroll stream-inspector-form post-overview-inspector">
				<section>
					<span class="post-progress">{selected.progress}</span>
					<p>{date(selected.startsAtUtc ?? selected.completedAtUtc)}</p>
				</section>
				<dl class="quick-fact-list">
					<div>
						<dt>Aufzeichnungsteile</dt>
						<dd>{selected.recordingPartCount}</dd>
					</div>
					<div>
						<dt>Kontextdateien</dt>
						<dd>{selected.sourceCount}</dd>
					</div>
					<div>
						<dt>YouTube-Videos</dt>
						<dd>{selected.youtubeCount}</dd>
					</div>
					<div>
						<dt>Social-Clips</dt>
						<dd>{selected.clipCount}</dd>
					</div>
					<div>
						<dt>Twitch-Highlights</dt>
						<dd>{selected.highlightCount}</dd>
					</div>
				</dl>
				<section class="workspace-guidance">
					<h3>Vollständige Bearbeitung</h3>
					<p>
						Material, Texte, Uploads, Schnittdaten und Exporte öffnen in der großen
						Bearbeitungsfläche.
					</p>
				</section>
			</div>
			<footer class="stream-inspector-actions single-action">
				<a class="primary-button" href={resolve('/post/[id]', { id: selected.showId })}
					>Postproduktion öffnen</a
				>
			</footer>
		{:else}<div class="content-inspector-empty">
				<AppIcon name="clapperboard" />
				<h2>Stream auswählen</h2>
				<p>Bearbeitungsstand und Inhalte erscheinen hier.</p>
			</div>{/if}
	</aside>
</div>