trip) add timeline view to trip page (#48)

Co-authored-by: Shaun Campbell <shaun@campbellwireless.net>
Reviewed-on: #48
Co-authored-by: AI Agent <ai-agent@campbellwireless.net>
Co-committed-by: AI Agent <ai-agent@campbellwireless.net>

src/lib/components/TourBadge.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+
+	interface Props {
+		operatorName: string;
+		tourName?: string | null;
+		highlightColor?: string | null;
+		size?: 'sm' | 'md';
+		showName?: boolean;
+	}
+
+	let {
+		operatorName,
+		tourName = null,
+		highlightColor = null,
+		size = 'sm',
+		showName = true
+	}: Props = $props();
+
+	function logoSlug(name: string): string {
+		return name
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '_')
+			.replace(/^_|_$/g, '');
+	}
+
+	let logoVariant = $state<'square' | 'wide' | 'none'>('square');
+
+	const squareLogoUrl = $derived(
+		`${base}/package-tour-logos/${logoSlug(operatorName)}_square.svg`
+	);
+	const wideLogoUrl = $derived(
+		`${base}/package-tour-logos/${logoSlug(operatorName)}_wide.svg`
+	);
+	const logoUrl = $derived(
+		logoVariant === 'square' ? squareLogoUrl : logoVariant === 'wide' ? wideLogoUrl : null
+	);
+
+	const sizeClass = $derived(size === 'md' ? 'h-6 w-6' : 'h-5 w-5');
+	const textSizeClass = $derived(size === 'md' ? 'text-xs' : 'text-[10px]');
+
+	function handleLogoError() {
+		logoVariant = logoVariant === 'square' ? 'wide' : 'none';
+	}
+</script>
+
+<div class="flex items-center gap-2 text-xs text-gray-500">
+	{#if logoUrl}
+		<img
+			src={logoUrl}
+			alt={operatorName}
+			class="{sizeClass} rounded-md object-contain"
+			on:error={handleLogoError}
+		/>
+	{:else}
+		<span
+			class="{sizeClass} {textSizeClass} flex items-center justify-center rounded-md border border-gray-200 font-semibold"
+			style="background-color: {highlightColor ?? '#F3F4F6'}; color: {highlightColor ? '#111827' : '#6B7280'}"
+		>
+			{operatorName.slice(0, 1).toUpperCase()}
+		</span>
+	{/if}
+	{#if showName}
+		<span class="truncate">{operatorName}{tourName ? `: ${tourName}` : ''}</span>
+	{/if}
+</div>