Release 0.5.10

src/routes/sendungen/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import { formatDuration } from '#lib/format.js';
+	import AppIcon from '#lib/components/AppIcon.svelte';
 	import type { PageProps } from './$types';
 
 	let { data, form }: PageProps = $props();
@@ -27,8 +28,9 @@
 
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
 
-	<section class="show-create-panel">
-		<div>
+	<details class="show-create-panel">
+		<summary><AppIcon name="plus" /> Neue Sendung planen</summary>
+		<div class="show-create-heading">
 			<p class="eyebrow">Neuen Stream planen</p>
 			<h2>Leer starten oder Ablauf übernehmen</h2>
 		</div>
@@ -45,23 +47,29 @@
 			<label
 				>Termin<input name="startsAt" type="datetime-local" value={form?.startsAt ?? ''} /></label
 			>
-			<label
-				>Ausgangspunkt<select name="templateId" value={form?.templateId ?? ''}
-					><option value="">Leer starten</option
-					>{#each data.templates as template (template.id)}<option value={template.id}
-							>{template.name}</option
-						>{/each}</select
-				></label
-			>
+			<fieldset class="show-template-grid">
+				<legend>Ausgangspunkt</legend>
+				<label
+					><input type="radio" name="templateId" value="" checked={!form?.templateId} /><AppIcon
+						name="newspaper"
+					/><span
+						><strong>Leer starten</strong><small>Eine leere Sendung frei aufbauen.</small></span
+					></label
+				>
+				{#each data.templates as template (template.id)}<label
+						><input
+							type="radio"
+							name="templateId"
+							value={template.id}
+							checked={form?.templateId === template.id}
+						/><AppIcon name="list-check" /><span
+							><strong>{template.name}</strong><small>{template.description}</small></span
+						></label
+					>{/each}
+			</fieldset>
 			<button class="primary-button" type="submit">Sendung anlegen</button>
 		</form>
-		<div class="template-notes">
-			{#each data.templates as template (template.id)}<p>
-					<strong>{template.name}:</strong>
-					{template.description}
-				</p>{/each}
-		</div>
-	</section>
+	</details>
 
 	<section class="show-library" aria-labelledby="show-library-title">
 		<header>
@@ -86,16 +94,17 @@
 							<p>{berlinDate(show.startsAtUtc)} Uhr</p>
 						</div>
 						<div class="show-card-facts">
-							<span><strong>{show.sectionCount}</strong> Abschnitte</span><span
-								><strong>{formatDuration(show.totalDurationSeconds)}</strong> Planzeit</span
-							><b aria-hidden="true">→</b>
+							{#if show.sectionCount}<span><strong>{show.sectionCount}</strong> Abschnitte</span
+								>{/if}{#if show.totalDurationSeconds}<span
+									><strong>{formatDuration(show.totalDurationSeconds)}</strong> Planzeit</span
+								>{/if}<b aria-hidden="true"><AppIcon name="arrow-right" /></b>
 						</div>
 					</a>
 				{/each}
 			</div>
 		{:else}
 			<div class="empty-state">
-				<span aria-hidden="true">＋</span>
+				<span aria-hidden="true"><AppIcon name="plus" /></span>
 				<h2>Noch keine Sendung</h2>
 				<p>Oben kann der erste Stream geplant werden.</p>
 			</div>