refactor: booking flow components with shared utilities and auto-select

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
2026-05-28 16:30:07 +01:00
parent 7ee77d6bff
commit efbcfbaaf0
5 changed files with 318 additions and 200 deletions
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator';
+	import type { LunchProtectionResult } from '$lib/lunchProtection';
+
+	interface Props {
+		selectedDate: string;
+		selectedTime: string;
+		endTime: string;
+		duration: number;
+		protection: LunchProtectionResult | undefined;
+	}
+
+	let { selectedDate, selectedTime, endTime, duration, protection }: Props = $props();
+</script>
+
+<Separator class="my-4" />
+{#if protection?.showWarning || protection?.isBlocked}
+	<div class="rounded-lg border {protection?.isBlocked ? 'border-red-200 bg-red-50' : 'border-amber-200 bg-amber-50'} p-4">
+		<div class="flex items-start gap-2">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mt-0.5 shrink-0 {protection?.isBlocked ? 'text-red-600' : 'text-amber-600'}" viewBox="0 0 20 20" fill="currentColor">
+				<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+			</svg>
+			<div>
+				<div class="text-sm font-medium {protection?.isBlocked ? 'text-red-800' : 'text-amber-800'}">
+					{protection?.isBlocked ? 'Lunch break conflict' : 'Lunch break warning'}
+				</div>
+				<div class="mt-1 text-sm {protection?.isBlocked ? 'text-red-700' : 'text-amber-700'}">
+					{protection?.warningMessage}
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}
+<div class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 {protection?.showWarning || protection?.isBlocked ? 'mt-3' : ''}">
+	<div class="text-sm font-medium text-emerald-800">
+		{#if protection?.isBlocked}Booking conflict{:else if protection?.showWarning}Lunch warning{:else}Time selected{/if}
+	</div>
+	<div class="mt-1 text-sm text-emerald-700">
+		{selectedDate} at {selectedTime}
+		{' — '}
+		{endTime}
+		{' ('}{duration} min)
+	</div>
+</div>