Release 0.5.8

src/routes/fundus/+page.server.ts

@@ -3,12 +3,12 @@ import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import {
 	createPiece,
+	deletePieceTemplate,
 	duplicatePiece,
 	getTaxonomy,
 	listPieces,
-	pieceTemplates,
-	setPieceArchived,
-	type PieceTemplateId
+	listPieceTemplates,
+	setPieceArchived
 } from '#lib/server/content.js';
 import { getPieceUsageContexts } from '#lib/server/shows.js';
 
@@ -39,7 +39,7 @@ export const load: PageServerLoad = ({ locals, url }) => {
 	return {
 		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
 		taxonomy: getTaxonomy(),
-		templates: pieceTemplates,
+		templates: listPieceTemplates(),
 		filters
 	};
 };
@@ -57,12 +57,22 @@ export const actions = {
 		const data = await request.formData();
 		let id: string;
 		try {
-			id = createPiece(String(data.get('template') || 'blank') as PieceTemplateId);
+			id = createPiece(String(data.get('template') || 'blank'));
 		} catch (cause) {
 			return fail(400, { intent: 'create', error: actionError(cause) });
 		}
 		redirect(303, `/fundus/${id}`);
 	},
+	deleteTemplate: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			deletePieceTemplate(String(data.get('templateId') || ''), Number(data.get('revision')));
+			return { intent: 'deleteTemplate', success: 'Vorlage gelöscht.' };
+		} catch (cause) {
+			return fail(409, { intent: 'deleteTemplate', error: actionError(cause) });
+		}
+	},
 	duplicate: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();

src/routes/fundus/+page.svelte

@@ -65,15 +65,35 @@
 			</div>
 			<details class="template-picker">
 				<summary><span aria-hidden="true">＋</span> Neues Piece</summary>
-				<div class="template-grid">
-					{#each data.templates as template (template.id)}
-						<form method="POST" action="?/create">
-							<input type="hidden" name="template" value={template.id} />
-							<button type="submit"
-								><strong>{template.name}</strong><span>{template.description}</span></button
-							>
-						</form>
-					{/each}
+				<div class="template-popover">
+					<div class="template-grid">
+						{#each data.templates as template (template.id)}
+							<form method="POST" action="?/create">
+								<input type="hidden" name="template" value={template.id} />
+								<button type="submit"
+									><strong>{template.name}</strong><span>{template.description}</span></button
+								>
+							</form>
+						{/each}
+					</div>
+					{#if data.templates.some((template) => template.id !== 'blank')}<details
+							class="template-management"
+						>
+							<summary>Vorlagen verwalten</summary>
+							{#each data.templates.filter((template) => template.id !== 'blank') as template (template.id)}
+								<form
+									method="POST"
+									action="?/deleteTemplate"
+									onsubmit={(event) =>
+										!confirm(`Vorlage „${template.name}“ löschen?`) && event.preventDefault()}
+								>
+									<input type="hidden" name="templateId" value={template.id} />
+									<input type="hidden" name="revision" value={template.revision} />
+									<span>{template.name}</span>
+									<button class="text-button danger-text" type="submit">Löschen</button>
+								</form>
+							{/each}
+						</details>{/if}
 				</div>
 			</details>
 		</div>

src/routes/fundus/[id]/+page.server.ts

@@ -6,8 +6,10 @@ import {
 	duplicatePiece,
 	getPiece,
 	getTaxonomy,
+	listPieceTemplates,
 	loadPiecePresentationMetadata,
 	savePiece,
+	savePieceAsTemplate,
 	setPieceArchived,
 	uploadPieceImage,
 	type EditablePieceStatus,
@@ -57,6 +59,7 @@ function pieceInput(data: FormData): PieceInput {
 	}
 	return {
 		title: text(data, 'title'),
+		outputTitle: text(data, 'outputTitle'),
 		summary: text(data, 'summary'),
 		formatId: text(data, 'formatId') || null,
 		status: text(data, 'status') as EditablePieceStatus,
@@ -120,7 +123,12 @@ export const load: PageServerLoad = ({ locals, params }) => {
 	const piece = getPiece(params.id);
 	if (!piece) error(404, 'Piece nicht gefunden');
 	if (piece.status === 'archived') redirect(303, '/archiv');
-	return { piece, taxonomy: getTaxonomy(), rendered: renderedFields(piece) };
+	return {
+		piece,
+		taxonomy: getTaxonomy(),
+		templates: listPieceTemplates().filter((template) => template.id !== 'blank'),
+		rendered: renderedFields(piece)
+	};
 };
 
 export const actions = {
@@ -161,6 +169,25 @@ export const actions = {
 		}
 		redirect(303, `/fundus/${params.id}`);
 	},
+	saveTemplate: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const reference = text(data, 'templateRef');
+		const [templateId, revision] = reference.split('|');
+		try {
+			savePieceAsTemplate(
+				params.id,
+				text(data, 'templateName'),
+				text(data, 'templateDescription'),
+				templateId || undefined,
+				revision ? Number(revision) : undefined
+			);
+			return { intent: 'saveTemplate', success: 'Vorlage gespeichert.' };
+		} catch (cause) {
+			const problem = saveError(cause);
+			return fail(problem.status, { intent: 'saveTemplate', ...problem });
+		}
+	},
 	upload: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();

src/routes/fundus/[id]/+page.svelte

@@ -44,7 +44,7 @@
 	);
 	let previewContent = $derived<PresentationContent>({
 		mode: draft.presentationMode,
-		title: draft.title,
+		title: draft.outputTitle || draft.title,
 		html: rendered.presentation,
 		source: featuredSource
 			? {
@@ -413,6 +413,14 @@
 				</div>
 				<div class="piece-presentation-layout">
 					<div class="piece-presentation-controls">
+						<label
+							>Präsentationstitel<input
+								name="outputTitle"
+								maxlength="300"
+								placeholder="Optional, sonst interner Titel"
+								bind:value={draft.outputTitle}
+							/></label
+						>
 						<MarkdownEditorField
 							name="presentationText"
 							label="Öffentlicher Text"
@@ -443,7 +451,7 @@
 								></label
 							>
 							<label
-								>Titel<input
+								>Kartentitel<input
 									name="presentationTitle"
 									maxlength="300"
 									placeholder="Optionaler Anzeigetitel"
@@ -565,6 +573,24 @@
 
 		{#snippet footer()}
 			<div class="piece-dialog-secondary-actions">
+				<details class="template-save-menu">
+					<summary>Als Vorlage speichern</summary>
+					<form method="POST" action="?/saveTemplate">
+						<label
+							>Vorlage<select name="templateRef">
+								<option value="">Neue Vorlage</option>
+								{#each data.templates as template (template.id)}<option
+										value={`${template.id}|${template.revision}`}>{template.name}</option
+									>{/each}
+							</select></label
+						>
+						<label>Name<input name="templateName" required maxlength="120" /></label>
+						<label>Beschreibung<input name="templateDescription" maxlength="500" /></label>
+						<button class="text-button" type="submit" disabled={actionsBlocked}
+							>Vorlage speichern</button
+						>
+					</form>
+				</details>
 				<form method="POST" action="?/duplicate">
 					<button class="text-button" type="submit" disabled={actionsBlocked}>Duplizieren</button>
 				</form>

src/routes/fundus/[id]/praesentation/+page.server.ts

@@ -18,7 +18,7 @@ export const load: PageServerLoad = ({ locals, params }) => {
 		images: { id: string; altText: string }[];
 	} = {
 		mode: piece.presentationMode,
-		title: piece.title,
+		title: piece.outputTitle || piece.title,
 		html: renderMarkdown(piece.presentationText),
 		source,
 		previewTitle: piece.presentationTitle,

src/routes/heinzlive/[token]/+page.server.ts

@@ -1,9 +1,10 @@
-import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { getPresentationView } from '#lib/server/live.js';
+import { getPresentationChannelView, presentationChannelAccess } from '#lib/server/live.js';
 
-export const load: PageServerLoad = ({ params }) => {
-	const view = getPresentationView(params.token);
-	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
-	return { view };
+export const load: PageServerLoad = ({ params, cookies }) => {
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
+	const view = presentationChannelAccess(params.token, accessKey)
+		? getPresentationChannelView(params.token)
+		: null;
+	return { view, channelId: params.token };
 };

src/routes/heinzlive/[token]/+page.svelte

@@ -5,8 +5,10 @@
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
-	let view = $state(untrack(() => data.view));
-	let connection = $state<'connected' | 'waiting' | 'interrupted'>('connected');
+	let view = $state(untrack(() => data.view ?? { revision: -1, content: null }));
+	let connection = $state<'connected' | 'waiting' | 'interrupted'>(
+		untrack(() => (data.view ? 'connected' : 'waiting'))
+	);
 
 	onMount(() => {
 		let stopped = false;
@@ -26,8 +28,22 @@
 			}
 			if (!stopped) timer = setTimeout(refresh, connection === 'interrupted' ? 3000 : 1000);
 		}
-		connection = 'waiting';
-		timer = setTimeout(refresh, 500);
+		async function connect() {
+			const accessKey = decodeURIComponent(location.hash.slice(1));
+			if (accessKey) {
+				const response = await fetch(`/heinzlive/${data.channelId}/access`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({ key: accessKey })
+				});
+				if (!response.ok) {
+					connection = 'interrupted';
+					return;
+				}
+			}
+			timer = setTimeout(refresh, 0);
+		}
+		void connect();
 		return () => {
 			stopped = true;
 			clearTimeout(timer);

src/routes/heinzlive/[token]/access/+server.ts

@@ -0,0 +1,18 @@
+import { error, json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { presentationChannelAccess } from '#lib/server/live.js';
+
+export const POST: RequestHandler = async ({ params, request, cookies, url }) => {
+	const body = (await request.json().catch(() => null)) as { key?: unknown } | null;
+	const accessKey = typeof body?.key === 'string' ? body.key : '';
+	if (!presentationChannelAccess(params.token, accessKey)) {
+		error(404, 'Präsentationsausgabe nicht gefunden');
+	}
+	cookies.set(`sendewerk-output-${params.token}`, accessKey, {
+		path: `/heinzlive/${params.token}`,
+		httpOnly: true,
+		sameSite: 'strict',
+		secure: url.protocol === 'https:'
+	});
+	return json({ success: true }, { headers: { 'Cache-Control': 'no-store' } });
+};

src/routes/heinzlive/[token]/media/[id]/+server.ts

@@ -1,11 +1,13 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { getPresentationMedia } from '#lib/server/live.js';
+import { getPresentationMedia, presentationChannelAccess } from '#lib/server/live.js';
 
-export const GET: RequestHandler = async ({ params }) => {
-	const media = await getPresentationMedia(params.token, params.id);
+export const GET: RequestHandler = async ({ params, cookies }) => {
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
+	if (!presentationChannelAccess(params.token, accessKey)) error(404, 'Bild nicht gefunden');
+	const media = await getPresentationMedia(accessKey, params.id);
 	if (!media) error(404, 'Bild nicht gefunden');
-	return new Response(media.data, {
+	return new Response(new Uint8Array(media.data), {
 		headers: {
 			'Content-Type': media.mimeType,
 			'Content-Length': String(media.byteSize),

src/routes/heinzlive/[token]/preview-image/+server.ts

@@ -1,9 +1,12 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { getPresentationPreviewImage } from '#lib/server/live.js';
+import { getPresentationPreviewImage, presentationChannelAccess } from '#lib/server/live.js';
 
-export const GET: RequestHandler = async ({ params }) => {
-	const image = await getPresentationPreviewImage(params.token);
+export const GET: RequestHandler = async ({ params, cookies }) => {
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
+	if (!presentationChannelAccess(params.token, accessKey))
+		error(404, 'Vorschaubild nicht verfügbar');
+	const image = await getPresentationPreviewImage(accessKey);
 	if (!image) error(404, 'Vorschaubild nicht verfügbar');
 	return new Response(new Uint8Array(image.data), {
 		headers: {

src/routes/heinzlive/[token]/state/+server.ts

@@ -1,9 +1,12 @@
 import { error, json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { getPresentationView } from '#lib/server/live.js';
+import { getPresentationChannelView, presentationChannelAccess } from '#lib/server/live.js';
 
-export const GET: RequestHandler = ({ params }) => {
-	const view = getPresentationView(params.token);
+export const GET: RequestHandler = ({ params, cookies }) => {
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
+	if (!presentationChannelAccess(params.token, accessKey))
+		error(404, 'Präsentationsausgabe nicht gefunden');
+	const view = getPresentationChannelView(params.token);
 	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
 	return json(view, { headers: { 'Cache-Control': 'no-store' } });
 };

src/routes/live/+page.server.ts

@@ -4,11 +4,14 @@ import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import {
 	completeCurrent,
+	clearPresentationChannel,
 	getLiveView,
 	goBack,
 	issuePresentationAccess,
 	moveOpenUsage,
 	presentUsage,
+	rotatePresentationChannelKey,
+	selectUsage,
 	skipCurrent,
 	startOrResumeLive
 } from '#lib/server/live.js';
@@ -26,6 +29,8 @@ function actionError(cause: unknown) {
 			error: 'Der Live-Stand wurde bereits geändert. Die Ansicht wurde erneuert.'
 		};
 	if (code === 'NO_CURRENT') return { status: 409, error: 'Es ist kein aktuelles Piece aktiv.' };
+	if (code === 'NOT_STARTED')
+		return { status: 409, error: 'Die Sendung muss vor der Auswahl gestartet werden.' };
 	if (code === 'NO_PREVIOUS') return { status: 409, error: 'Es gibt kein vorheriges Piece.' };
 	if (code === 'LIVE_ORDER_LOCKED')
 		return {
@@ -91,6 +96,18 @@ export const actions = {
 			goBack(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
 		);
 	},
+	select: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('select', () =>
+			selectUsage(
+				text(data, 'showId'),
+				text(data, 'usageId'),
+				text(data, 'commandId'),
+				Number(data.get('revision'))
+			)
+		);
+	},
 	present: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
@@ -118,10 +135,25 @@ export const actions = {
 		const data = await request.formData();
 		try {
 			const token = issuePresentationAccess(text(data, 'showId'));
-			return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/${token}` };
+			return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/default#${token}` };
 		} catch (cause) {
 			const problem = actionError(cause);
 			return fail(problem.status, { intent: 'createOutput', ...problem });
 		}
+	},
+	rotateOutput: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			const token = rotatePresentationChannelKey(text(data, 'showId'));
+			return { intent: 'rotateOutput', success: true, outputUrl: `/heinzlive/default#${token}` };
+		} catch (cause) {
+			const problem = actionError(cause);
+			return fail(problem.status, { intent: 'rotateOutput', ...problem });
+		}
+	},
+	clearOutput: async ({ locals }) => {
+		requireUser(locals.user);
+		return attempt('clearOutput', () => clearPresentationChannel());
 	}
 } satisfies Actions;

src/routes/live/+page.svelte

@@ -161,8 +161,20 @@
 		</form>
 		<form method="POST" action={liveAction('createOutput')} use:enhance={enhanceOutput}>
 			<input type="hidden" name="showId" value={data.live.show.id} />
-			<button class="secondary-button" type="submit">Präsentationsfenster öffnen</button>
+			<button class="secondary-button" type="submit">Ausgabe verbinden und öffnen</button>
 		</form>
+		<details class="live-output-settings">
+			<summary>Ausgabekanal</summary>
+			<div>
+				<form method="POST" action={liveAction('rotateOutput')} use:enhance={enhanceOutput}>
+					<input type="hidden" name="showId" value={data.live.show.id} />
+					<button class="text-button" type="submit">Schlüssel widerrufen und erneuern</button>
+				</form>
+				<form method="POST" action={liveAction('clearOutput')} use:enhance={enhanceCommand}>
+					<button class="text-button danger-text" type="submit">Ausgabekanal leeren</button>
+				</form>
+			</div>
+		</details>
 		<div class="live-session-summary">
 			<strong>{data.live.completedCount} / {data.live.totalCount}</strong>
 			<span>{progress}% bearbeitet</span>
@@ -221,6 +233,17 @@
 								: 'Präsentieren'}
 						</button>
 					</form>
+					{#if data.live.presentationUsageId}<form
+							method="POST"
+							action={liveAction('present')}
+							use:enhance={enhanceCommand}
+						>
+							<input type="hidden" name="showId" value={data.live.show.id} />
+							<input type="hidden" name="usageId" value="" />
+							<input type="hidden" name="revision" value={data.live.liveRevision} />
+							<input type="hidden" name="commandId" value={data.commandId} />
+							<button class="text-button" type="submit">Präsentation leeren</button>
+						</form>{/if}
 					<form method="POST" action={liveAction('skip')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
@@ -288,6 +311,18 @@
 									<strong>{usage.title}</strong><small>{usage.status}</small>
 								</div>
 								<div class="live-run-actions">
+									<form method="POST" action={liveAction('select')} use:enhance={enhanceCommand}>
+										<input type="hidden" name="showId" value={data.live.show.id} />
+										<input type="hidden" name="usageId" value={usage.id} />
+										<input type="hidden" name="revision" value={data.live.liveRevision} />
+										<input type="hidden" name="commandId" value={data.commandId} />
+										<button
+											class="text-button"
+											type="submit"
+											disabled={!data.live.startedAtUtc || usage.id === data.live.current?.id}
+											aria-label={`${usage.title} als aktuelles Piece auswählen`}>Aktuell</button
+										>
+									</form>
 									{#if usage.status === 'open'}
 										<form
 											method="POST"

src/routes/sendungen/[id]/+page.server.ts

@@ -1,10 +1,12 @@
+import { randomUUID } from 'node:crypto';
 import { error, fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
-import { getTaxonomy, listPieces } from '#lib/server/content.js';
+import { getTaxonomy, listPieces, listPieceTemplates } from '#lib/server/content.js';
 import {
 	addPieceUsage,
 	addShowSection,
+	createAndAddPieceUsage,
 	duplicatePieceUsage,
 	getShow,
 	getPieceUsageContexts,
@@ -123,6 +125,8 @@ export const load: PageServerLoad = ({ locals, params, url }) => {
 		startsAtLocal: berlinInput(show.startsAtUtc),
 		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
 		taxonomy: getTaxonomy(),
+		pieceTemplates: listPieceTemplates(),
+		createCommandId: randomUUID(),
 		filters: {
 			query: url.searchParams.get('q') ?? '',
 			categoryId: url.searchParams.get('category') ?? '',
@@ -197,12 +201,24 @@ export const actions = {
 			})
 		);
 	},
+	createUsage: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('createUsage', () =>
+			createAndAddPieceUsage(params.id, Number(data.get('revision')), text(data, 'commandId'), {
+				title: text(data, 'title'),
+				templateId: text(data, 'templateId') || 'blank',
+				sectionId: text(data, 'sectionId') || null
+			})
+		);
+	},
 	updateUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('updateUsage', () =>
 			updatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
 				title: text(data, 'title'),
+				outputTitle: text(data, 'outputTitle'),
 				durationSeconds: pieceDurationInSeconds(data),
 				ownNotes: text(data, 'ownNotes'),
 				intro: text(data, 'intro'),

src/routes/sendungen/[id]/+page.svelte

@@ -22,9 +22,11 @@
 	let moveSectionForm: HTMLFormElement;
 	let moveUsageForm: HTMLFormElement;
 	let addUsageForm: HTMLFormElement;
+	let removeUsageForm: HTMLFormElement;
 	let draggedSectionId = $state('');
 	let draggedUsageId = $state('');
 	let draggedPieceId = $state('');
+	let removedUsageId = $state('');
 	let dropSectionId = $state('');
 	let dropPosition = $state(0);
 	let copyMessage = $state('');
@@ -165,6 +167,17 @@
 		setTimeout(() => moveUsageForm.requestSubmit());
 	}
 
+	function removeDraggedUsage() {
+		if (dragged?.kind !== 'usage') return;
+		if (!confirm('Piece aus dieser Sendung entfernen?')) {
+			finishDrag();
+			return;
+		}
+		removedUsageId = dragged.id;
+		finishDrag();
+		setTimeout(() => removeUsageForm.requestSubmit());
+	}
+
 	const enhanceCommand: SubmitFunction = ({ formElement, submitter }) => {
 		const affected = formElement.closest<HTMLElement>(
 			'.run-section, .editable-reserve, .builder-source-card, .show-settings, .add-section-form'
@@ -287,8 +300,18 @@
 	<div class="builder-workspace">
 		<section
 			class="builder-pane source-pane"
+			class:drop-ready={dropTarget === 'source'}
 			class:mobile-hidden={mobilePane !== 'fundus'}
 			aria-labelledby="source-title"
+			ondragover={(event) => {
+				if (dragged?.kind !== 'usage') return;
+				event.preventDefault();
+				dropTarget = 'source';
+			}}
+			ondrop={(event) => {
+				event.preventDefault();
+				removeDraggedUsage();
+			}}
 		>
 			<header class="pane-heading">
 				<div>
@@ -297,6 +320,33 @@
 				</div>
 				<span>{visiblePieces.length}</span>
 			</header>
+			{#if dropTarget === 'source'}<div class="drag-remove-target">
+					<strong>Aus Sendung entfernen</strong><span>Das Fundus-Original bleibt erhalten.</span>
+				</div>{/if}
+			<details class="plan-piece-create">
+				<summary>Neues Piece direkt einplanen</summary>
+				<form use:enhance={enhanceCommand} method="POST" action="?/createUsage">
+					<input type="hidden" name="revision" value={data.show.revision} />
+					<input type="hidden" name="commandId" value={data.createCommandId} />
+					<label>Titel<input name="title" required maxlength="200" /></label>
+					<label
+						>Vorlage<select name="templateId">
+							{#each data.pieceTemplates as template (template.id)}<option value={template.id}
+									>{template.name}</option
+								>{/each}
+						</select></label
+					>
+					<label
+						>Ziel<select name="sectionId">
+							<option value="">Reservebank</option>
+							{#each data.show.sections as section (section.id)}<option value={section.id}
+									>{section.name}</option
+								>{/each}
+						</select></label
+					>
+					<button class="secondary-button" type="submit">Anlegen und einplanen</button>
+				</form>
+			</details>
 			<form id="builder-filters" method="GET" class="builder-filter">
 				<label
 					><span class="sr-only">Fundus durchsuchen</span><input
@@ -770,7 +820,13 @@
 									></label
 								><button class="secondary-button" type="submit">Einplanen</button>
 							</form>
-							<form use:enhance={enhanceCommand} method="POST" action="?/removeUsage">
+							<form
+								use:enhance={enhanceCommand}
+								method="POST"
+								action="?/removeUsage"
+								onsubmit={(event) =>
+									!confirm('Piece aus dieser Sendung entfernen?') && event.preventDefault()}
+							>
 								<input type="hidden" name="revision" value={data.show.revision} /><input
 									type="hidden"
 									name="usageId"
@@ -778,7 +834,7 @@
 								/><button
 									class="text-button danger-text"
 									type="submit"
-									aria-label={`${usage.title} aus Reserve entfernen`}>Entfernen</button
+									aria-label={`${usage.title} aus Sendung entfernen`}>Aus Sendung entfernen</button
 								>
 							</form>
 							<UsageEditorDialog
@@ -847,4 +903,14 @@
 			value={draggedPieceId}
 		/><input type="hidden" name="sectionId" value={dropSectionId} />
 	</form>
+	<form
+		bind:this={removeUsageForm}
+		use:enhance={enhanceCommand}
+		method="POST"
+		action="?/removeUsage"
+		class="hidden-command-form"
+	>
+		<input type="hidden" name="revision" value={data.show.revision} />
+		<input type="hidden" name="usageId" value={removedUsageId} />
+	</form>
 </div>