trips) adding initial commit

src/lib/components/TripList.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import TripTile from './TripTile.svelte';
+	import TripTable from './TripTable.svelte';
+	import type { Trip } from '$lib/server/trips.js';
+
+	interface Props {
+		trips: Trip[];
+		title: string;
+		emptyMessage: string;
+	}
+	let { trips, title, emptyMessage }: Props = $props();
+
+	let view = $state<'tile' | 'table'>('tile');
+</script>
+
+<div class="flex items-center justify-between mb-6">
+	<h1 class="text-2xl font-bold text-gray-900">{title}</h1>
+
+	{#if trips.length > 0}
+		<div class="flex items-center gap-1 rounded-md border border-gray-200 bg-gray-50 p-1">
+			<button
+				onclick={() => view = 'tile'}
+				title="Tile view"
+				class="rounded p-1.5 transition-colors"
+				style={view === 'tile' ? 'background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.08);' : ''}
+			>
+				<!-- Grid icon -->
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={view === 'tile' ? '#111827' : '#9ca3af'} stroke-width="2">
+					<rect x="3" y="3" width="7" height="7" rx="1" />
+					<rect x="14" y="3" width="7" height="7" rx="1" />
+					<rect x="3" y="14" width="7" height="7" rx="1" />
+					<rect x="14" y="14" width="7" height="7" rx="1" />
+				</svg>
+			</button>
+			<button
+				onclick={() => view = 'table'}
+				title="Table view"
+				class="rounded p-1.5 transition-colors"
+				style={view === 'table' ? 'background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.08);' : ''}
+			>
+				<!-- List icon -->
+				<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={view === 'table' ? '#111827' : '#9ca3af'} stroke-width="2">
+					<line x1="3" y1="6" x2="21" y2="6" />
+					<line x1="3" y1="12" x2="21" y2="12" />
+					<line x1="3" y1="18" x2="21" y2="18" />
+				</svg>
+			</button>
+		</div>
+	{/if}
+</div>
+
+{#if trips.length === 0}
+	<p class="text-gray-500">{emptyMessage}</p>
+{:else if view === 'tile'}
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+		{#each trips as trip}
+			<TripTile {trip} />
+		{/each}
+	</div>
+{:else}
+	<TripTable {trips} />
+{/if}