Portal: per-system daily/weekly schedule editor

System picker lists the account's License Keys labelled by System Name
(fallback: key). Schedule type selector (Daily|Weekly) with a confirmation
before switching a populated schedule (daily->weekly prefills all seven
days; otherwise clears). Weekly shows a per-day editor. Blocks use
TimeInput, allow adjacent/midnight-crossing ranges (labelled 'ends next
day'), block empty blocks client-side, default dynamic audio on, and show
title/category/group only. Adds gap helper text and an informational
kiosk-timezone note (browser fallback; no external/paid dependency).

src/lib/components/schedule/BlockModal.svelte

@@ -8,7 +8,7 @@
 		hmToMinutes,
 		isOvernight,
 		toHm,
-		validateBlock,
+		validateBlockAgainstSchedule,
 		type BlockSibling
 	} from '$lib/schedule-utils';
 
@@ -25,10 +25,13 @@
 		open = false,
 		mode = 'create',
 		blockId,
+		day = null,
+		licenseKeyId = '',
 		initialStartMinutes = 9 * 60,
 		initialEndMinutes = 10 * 60,
 		initialProclamationIds = [],
 		initialDynamicAudio = true,
+		scheduleType = 'daily' as 'daily' | 'weekly' | null,
 		categories = [],
 		groups = [],
 		proclamations = [],
@@ -42,10 +45,13 @@
 		open?: boolean;
 		mode?: 'create' | 'edit';
 		blockId?: string;
+		day?: string | null;
+		licenseKeyId?: string;
 		initialStartMinutes?: number;
 		initialEndMinutes?: number;
 		initialProclamationIds?: string[];
 		initialDynamicAudio?: boolean;
+		scheduleType?: 'daily' | 'weekly' | null;
 		categories?: BrowserCategory[];
 		groups?: BrowserGroup[];
 		proclamations?: BrowserProclamation[];
@@ -105,10 +111,11 @@
 
 	function validate(): string | null {
 		if (!startValid || !endValid) return 'Enter a valid start and end time.';
-		const result = validateBlock(
-			{ startMinutes, endMinutes, proclamationIds: selectedIds },
-			siblings,
-			{ isCreate: mode === 'create' }
+		if (scheduleType === null) return 'Set a schedule type first.';
+		const result = validateBlockAgainstSchedule(
+			scheduleType,
+			{ day, startMinutes, endMinutes, proclamationIds: selectedIds },
+			siblings
 		);
 		return result.ok ? null : result.error;
 	}
@@ -193,6 +200,10 @@
 				{#if mode === 'edit' && blockId}
 					<input type="hidden" name="id" value={blockId} />
 				{/if}
+				<input type="hidden" name="licenseKeyId" value={licenseKeyId} />
+				{#if day}
+					<input type="hidden" name="day" value={day} />
+				{/if}
 				<input type="hidden" name="startMinutes" value={startMinutes} />
 				<input type="hidden" name="endMinutes" value={endMinutes} />
 				<input type="hidden" name="proclamationIds" value={JSON.stringify(selectedIds)} />
@@ -280,7 +291,7 @@
 								<h3 class="text-sm font-semibold text-slate-800 dark:text-slate-200">Review</h3>
 								<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
 									{formatTime(startMinutes)} – {formatTime(endMinutes)}{overnight
-										? ' (next day)'
+										? ' (ends next day)'
 										: ''}
 								</p>
 								{#if selectedTitles.length === 0}

src/lib/components/schedule/BlockModal.svelte.spec.ts

@@ -100,7 +100,7 @@ describe('BlockModal', () => {
 	it('marks an overnight block in the review', async () => {
 		mount({ initialStartMinutes: 21 * 60, initialEndMinutes: 9 * 60 });
 
-		await expect.element(page.getByText('9:00 PM – 9:00 AM (next day)')).toBeInTheDocument();
+		await expect.element(page.getByText('9:00 PM – 9:00 AM (ends next day)')).toBeInTheDocument();
 	});
 
 	it('rejects an overlapping time range with the specific error', async () => {

src/lib/components/schedule/DaySchedule.svelte

@@ -10,6 +10,16 @@
 
 	type ScheduleBlockView = {
 		id: string;
+		day?: string | null;
+		startMinutes: number;
+		endMinutes: number;
+		dynamicAudio: boolean;
+		proclamations: { id: string; name: string }[];
+	};
+
+	type OpenBlock = {
+		id: string;
+		day: string | null;
 		startMinutes: number;
 		endMinutes: number;
 		dynamicAudio: boolean;
@@ -18,12 +28,14 @@
 
 	let {
 		blocks = [],
+		label,
 		onCreate,
 		onEdit
 	}: {
 		blocks?: ScheduleBlockView[];
+		label?: string;
 		onCreate?: (startMinutes: number, endMinutes: number) => void;
-		onEdit?: (block: ScheduleBlockView) => void;
+		onEdit?: (block: OpenBlock) => void;
 	} = $props();
 
 	const hourMarks = Array.from({ length: 24 }, (_, i) => i);
@@ -97,6 +109,10 @@
 	);
 </script>
 
+<div class="flex flex-col gap-1">
+	{#if label}
+		<p class="text-sm font-semibold text-slate-700 dark:text-slate-200">{label}</p>
+	{/if}
 	<div class="flex gap-2">
 		<div class="relative h-[720px] w-14 shrink-0" aria-hidden="true">
 			{#each hourMarks as hour (hour)}
@@ -140,7 +156,7 @@
 						onpointerdown={(event) => event.stopPropagation()}
 						onclick={(event) => {
 							event.stopPropagation();
-						onEdit?.(view.block);
+							onEdit?.({ ...view.block, day: view.block.day ?? null });
 						}}
 						aria-label={`Block ${formatTime(view.block.startMinutes)} to ${formatTime(view.block.endMinutes)}`}
 						class="absolute inset-x-1 overflow-hidden rounded-md border border-indigo-300 bg-indigo-50 px-2 py-1 text-left text-xs text-indigo-900 shadow-sm transition hover:bg-indigo-100 dark:border-indigo-800 dark:bg-indigo-950/60 dark:text-indigo-200 dark:hover:bg-indigo-900"
@@ -171,3 +187,4 @@
 			{/if}
 		</div>
 	</div>
+</div>

src/lib/schedule-utils.ts

@@ -177,7 +177,7 @@ export function validateSchedule(type: ScheduleType, blocks: ValidationBlock[]):
 	}
 	const overlap = findScheduleOverlap(type, blocks);
 	if (overlap) {
-		return { ok: false, error: overlapError(overlap.a, overlap.b) };
+		return { ok: false, error: overlapError(overlap.a) };
 	}
 	return { ok: true };
 }
@@ -195,12 +195,12 @@ export function validateBlockAgainstSchedule(
 	if (!shape.ok) return shape;
 	const overlap = findScheduleOverlap(type, [...siblings, candidate]);
 	if (overlap) {
-		return { ok: false, error: overlapError(overlap.a, overlap.b) };
+		return { ok: false, error: overlapError(overlap.a) };
 	}
 	return { ok: true };
 }
 
-function overlapError(a: ValidationBlock, b: ValidationBlock): string {
+function overlapError(a: ValidationBlock): string {
 	return `This overlaps with your ${formatTime(a.startMinutes)}–${formatTime(a.endMinutes)} block.`;
 }
 

src/routes/(protected)/(user)/schedule/+page.svelte

@@ -1,23 +1,109 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	import type { PageProps } from './$types';
 	import DaySchedule from '$lib/components/schedule/DaySchedule.svelte';
 	import BlockModal from '$lib/components/schedule/BlockModal.svelte';
 
 	let { data }: PageProps = $props();
 
+	const WEEK_DAYS: { key: string; label: string }[] = [
+		{ key: 'mon', label: 'Monday' },
+		{ key: 'tue', label: 'Tuesday' },
+		{ key: 'wed', label: 'Wednesday' },
+		{ key: 'thu', label: 'Thursday' },
+		{ key: 'fri', label: 'Friday' },
+		{ key: 'sat', label: 'Saturday' },
+		{ key: 'sun', label: 'Sunday' }
+	];
+
+	type BlockView = {
+		id: string;
+		day: string | null;
+		startMinutes: number;
+		endMinutes: number;
+		dynamicAudio: boolean;
+		proclamations: { id: string; name: string; categoryId: number; groupId: number | null }[];
+	};
+
+	// Local mirrors so the UI updates after actions. They reset whenever the
+	// selected system (and therefore the loaded schedule) changes.
+	let type = $state<'daily' | 'weekly' | null>(null);
+	let blocks = $state<BlockView[]>([]);
+	let lastLicenseId = $state<string | null>(null);
+	$effect(() => {
+		if (data.selectedLicenseId !== lastLicenseId) {
+			lastLicenseId = data.selectedLicenseId;
+			type = data.type;
+			blocks = data.blocks;
+			showTypeConfirm = false;
+		}
+	});
+	let typePending = $state<'daily' | 'weekly' | null>(null);
+	let showTypeConfirm = $state(false);
+	let successMessage = $state('');
+	let errorMessage = $state('');
+
 	let modalOpen = $state(false);
 	let modalMode = $state<'create' | 'edit'>('create');
+	let modalDay = $state<string | null>(null);
 	let editingId = $state<string | undefined>(undefined);
 	let initialStart = $state(9 * 60);
 	let initialEnd = $state(10 * 60);
 	let initialIds = $state<string[]>([]);
-	let initialDynamicAudio = $state(false);
-	let successMessage = $state('');
+	let initialDynamicAudio = $state(true);
+
+	let typeForm: HTMLFormElement | undefined = $state();
 	let closeTimer: ReturnType<typeof setTimeout> | undefined;
 
-	function openCreate(startMinutes: number, endMinutes: number) {
+	const selectedLicense = $derived(
+		data.licenses.find((l) => l.id === data.selectedLicenseId) ?? null
+	);
+	const licenseLabel = $derived(
+		selectedLicense ? (selectedLicense.systemName ?? selectedLicense.key) : 'No systems'
+	);
+	const dailyBlocks = $derived(blocks.filter((b) => b.day === null));
+	const hasBlocks = $derived(blocks.length > 0);
+
+	function blocksForDay(day: string): BlockView[] {
+		return blocks.filter((b) => b.day === day);
+	}
+
+	function flash(message: string) {
+		successMessage = message;
+		clearTimeout(closeTimer);
+		closeTimer = setTimeout(() => (successMessage = ''), 1500);
+	}
+
+	function selectSystem(licenseKeyId: string) {
+		const url = new URL(window.location.href);
+		if (licenseKeyId) url.searchParams.set('license', licenseKeyId);
+		else url.searchParams.delete('license');
+		window.location.href = url.toString();
+	}
+
+	function requestType(next: 'daily' | 'weekly' | null) {
+		if (next === type) return;
+		if (hasBlocks && type !== null && next !== null) {
+			typePending = next;
+			showTypeConfirm = true;
+			return;
+		}
+		applyType(next);
+	}
+
+	function applyType(next: 'daily' | 'weekly' | null) {
+		showTypeConfirm = false;
+		const form = typeForm;
+		if (!form) return;
+		(form.querySelector('input[name="type"]') as HTMLInputElement).value = next ?? '';
+		(form.querySelector('input[name="confirm"]') as HTMLInputElement).value = 'true';
+		form.requestSubmit();
+	}
+
+	function openCreate(day: string | null, startMinutes: number, endMinutes: number) {
 		modalMode = 'create';
 		editingId = undefined;
+		modalDay = day;
 		initialStart = startMinutes;
 		initialEnd = endMinutes;
 		initialIds = [];
@@ -27,6 +113,7 @@
 
 	function openEdit(block: {
 		id: string;
+		day: string | null;
 		startMinutes: number;
 		endMinutes: number;
 		dynamicAudio: boolean;
@@ -34,9 +121,10 @@
 	}) {
 		modalMode = 'edit';
 		editingId = block.id;
+		modalDay = block.day;
 		initialStart = block.startMinutes;
 		initialEnd = block.endMinutes;
-		initialIds = block.proclamations.map((proclamation) => proclamation.id);
+		initialIds = block.proclamations.map((p) => p.id);
 		initialDynamicAudio = block.dynamicAudio;
 		modalOpen = true;
 	}
@@ -47,12 +135,17 @@
 
 	function handleSaved() {
 		modalOpen = false;
-		successMessage = modalMode === 'edit' ? 'Block saved.' : 'Block created.';
-		clearTimeout(closeTimer);
-		closeTimer = setTimeout(() => (successMessage = ''), 1500);
+		flash(modalMode === 'edit' ? 'Block saved.' : 'Block created.');
 	}
 </script>
 
+{#if typeForm === undefined}{/if}
+<form method="POST" action="?/setType" use:enhance bind:this={typeForm} class="hidden">
+	<input type="hidden" name="licenseKeyId" value={data.selectedLicenseId ?? ''} />
+	<input type="hidden" name="type" value="" />
+	<input type="hidden" name="confirm" value="false" />
+</form>
+
 <div>
 	<div class="flex flex-wrap items-end justify-between gap-3">
 		<div>
@@ -60,14 +153,23 @@
 				Schedule
 			</h1>
 			<p class="mt-1 text-sm text-slate-500 sm:text-base dark:text-slate-400">
-				Build your daily listening schedule. Up to 4 blocks per day.
+				Build a listening schedule for a system. Up to 4 blocks per day.
 			</p>
 		</div>
-		<span
-			class="rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+		{#if data.licenses.length > 0}
+			<label class="flex items-center gap-2 text-sm">
+				<span class="text-slate-500 dark:text-slate-400">System</span>
+				<select
+					class="rounded-md border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
+					value={data.selectedLicenseId ?? ''}
+					onchange={(e) => selectSystem(e.currentTarget.value)}
 				>
-			{data.blocks.length} of 4 blocks
-		</span>
+					{#each data.licenses as license (license.id)}
+						<option value={license.id}>{license.systemName ?? license.key}</option>
+					{/each}
+				</select>
+			</label>
+		{/if}
 	</div>
 
 	{#if successMessage}
@@ -77,15 +179,114 @@
 			{successMessage}
 		</div>
 	{/if}
-
-	<div class="mt-6">
-		<DaySchedule blocks={data.blocks} onCreate={openCreate} onEdit={openEdit} />
+	{#if errorMessage}
+		<div
+			class="mt-4 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600 dark:border-red-900 dark:bg-red-950/50 dark:text-red-400"
+			role="alert"
+		>
+			{errorMessage}
 		</div>
+	{/if}
+
+	{#if !selectedLicense}
+		<div
+			class="mt-6 rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-900"
+		>
+			<p class="text-sm text-slate-600 dark:text-slate-400">
+				You don't have any systems yet. A system appears here once a Kiosk validates its License
+				Key.
+			</p>
+		</div>
+	{:else}
+		<!-- System + mode -->
+		<div class="mt-6 flex flex-wrap items-center gap-4">
+			<div>
+				<span class="text-sm font-medium text-slate-700 dark:text-slate-300">System</span>
+				<p class="text-sm text-slate-500 dark:text-slate-400">
+					{licenseLabel}
+					{#if !selectedLicense.systemName}
+						<span class="text-slate-400 dark:text-slate-500">(unnamed system)</span>
+					{/if}
+				</p>
+			</div>
+			<div>
+				<span class="text-sm font-medium text-slate-700 dark:text-slate-300">Schedule type</span>
+				<div
+					class="mt-1 inline-flex overflow-hidden rounded-md border border-slate-300 dark:border-slate-700"
+				>
+					<button
+						type="button"
+						class="px-3 py-1.5 text-sm {type === 'daily'
+							? 'bg-indigo-600 text-white'
+							: 'bg-white text-slate-700 dark:bg-slate-900 dark:text-slate-300'}"
+						onclick={() => requestType('daily')}>Daily</button
+					>
+					<button
+						type="button"
+						class="px-3 py-1.5 text-sm {type === 'weekly'
+							? 'bg-indigo-600 text-white'
+							: 'bg-white text-slate-700 dark:bg-slate-900 dark:text-slate-300'}"
+						onclick={() => requestType('weekly')}>Weekly</button
+					>
+				</div>
+				{#if type !== null}
+					<button
+						type="button"
+						class="ml-2 text-sm text-red-600 hover:underline dark:text-red-400"
+						onclick={() => requestType(null)}>Delete schedule</button
+					>
+				{/if}
+			</div>
+		</div>
+
+		{#if type === null}
+			<div
+				class="mt-6 rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-900"
+			>
+				<p class="text-sm text-slate-600 dark:text-slate-400">
+					No schedule. Choose Daily or Weekly to start.
+				</p>
+			</div>
+			<div
+				class="mt-4 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300"
+			>
+				Times run in the Kiosk's own timezone ({selectedLicense.systemName ?? selectedLicense.key}
+				sets its own timezone). They are not tied to your browser's timezone.
+			</div>
+		{:else if type === 'daily'}
+			<div class="mt-6">
+				<DaySchedule
+					blocks={dailyBlocks}
+					onCreate={(s, e) => openCreate(null, s, e)}
+					onEdit={openEdit}
+				/>
+			</div>
+		{:else}
+			<div class="mt-6 flex flex-col gap-6">
+				{#each WEEK_DAYS as day (day.key)}
+					<DaySchedule
+						blocks={blocksForDay(day.key)}
+						label={day.label}
+						onCreate={(s, e) => openCreate(day.key, s, e)}
+						onEdit={openEdit}
+					/>
+				{/each}
+			</div>
+		{/if}
+
+		<p class="mt-4 text-sm text-slate-500 dark:text-slate-400">
+			Gaps between blocks are fine: the Kiosk plays its locally selected Proclamations during a gap.
+			Times run in the Kiosk's own timezone ({selectedLicense.systemName ?? selectedLicense.key}),
+			not your browser's.
+		</p>
 
 		<BlockModal
 			open={modalOpen}
 			mode={modalMode}
 			blockId={editingId}
+			day={modalDay}
+			licenseKeyId={data.selectedLicenseId ?? ''}
+			scheduleType={type}
 			initialStartMinutes={initialStart}
 			initialEndMinutes={initialEnd}
 			initialProclamationIds={initialIds}
@@ -93,8 +294,39 @@
 			categories={data.categories}
 			groups={data.groups}
 			proclamations={data.proclamations}
-		existingBlocks={data.blocks}
+			existingBlocks={blocks}
 			onClose={closeModal}
 			onSaved={handleSaved}
 		/>
+	{/if}
 </div>
+
+{#if showTypeConfirm}
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
+		<div
+			class="relative z-10 w-full max-w-md rounded-2xl border border-slate-200 bg-white p-6 shadow-xl dark:border-slate-800 dark:bg-slate-900"
+		>
+			<h2 class="text-lg font-bold text-slate-900 dark:text-slate-100">Change schedule type?</h2>
+			<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
+				Switching type replaces the current blocks.
+				{#if typePending === 'weekly'}
+					The Daily blocks will be copied to all seven days.
+				{:else}
+					The existing blocks will be cleared.
+				{/if}
+			</p>
+			<div class="mt-4 flex justify-end gap-3">
+				<button
+					type="button"
+					class="rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300"
+					onclick={() => (showTypeConfirm = false)}>Cancel</button
+				>
+				<button
+					type="button"
+					class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
+					onclick={() => applyType(typePending)}>Continue</button
+				>
+			</div>
+		</div>
+	</div>
+{/if}