From 049b6be57f4ca6566fdf81b5c1890066836ca7a2 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 19 Jun 2025 01:55:04 +0100
Subject: [PATCH] Add new photo grid view components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SingleColumnPhotoGrid: Displays photos in a single centered column
- TwoColumnPhotoGrid: Splits photos evenly between two columns
- HorizontalScrollPhotoGrid: Shows photos in a horizontal scrolling view

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../HorizontalScrollPhotoGrid.svelte          | 76 +++++++++++++++++++
 src/lib/components/TwoColumnPhotoGrid.svelte  | 51 +++++++++++++
 2 files changed, 127 insertions(+)
 create mode 100644 src/lib/components/HorizontalScrollPhotoGrid.svelte
 create mode 100644 src/lib/components/TwoColumnPhotoGrid.svelte

diff --git a/src/lib/components/HorizontalScrollPhotoGrid.svelte b/src/lib/components/HorizontalScrollPhotoGrid.svelte
new file mode 100644
index 0000000..a13d7fe
--- /dev/null
+++ b/src/lib/components/HorizontalScrollPhotoGrid.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { PhotoItem as PhotoItemType } from '$lib/types/photos'
+	import { isAlbum } from '$lib/types/photos'
+
+	const {
+		photoItems,
+		albumSlug
+	}: {
+		photoItems: PhotoItemType[]
+		albumSlug?: string
+	} = $props()
+</script>
+
+<div class="horizontal-scroll">
+	{#each photoItems as item}
+		{#if isAlbum(item)}
+			<a href="/photos/{item.slug}" class="photo-link">
+				<img src={item.coverPhoto.src} alt={item.title} />
+				<p class="caption">{item.title}</p>
+			</a>
+		{:else}
+			{@const mediaId = item.id.replace(/^(media|photo)-/, '')}
+			<a href="/photos/{albumSlug ? `${albumSlug}/${mediaId}` : `p/${mediaId}`}" class="photo-link">
+				<img src={item.src} alt={item.alt} />
+				{#if item.caption}
+					<p class="caption">{item.caption}</p>
+				{/if}
+			</a>
+		{/if}
+	{/each}
+</div>
+
+<style lang="scss">
+	.horizontal-scroll {
+		display: flex;
+		gap: $unit-3x;
+		overflow-x: auto;
+		overflow-y: hidden;
+		padding: 0 $unit-3x;
+
+		// Hide scrollbar
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		@include breakpoint('phone') {
+			gap: $unit-2x;
+		}
+	}
+
+	.photo-link {
+		flex: 0 0 auto;
+		display: flex;
+		flex-direction: column;
+		gap: $unit;
+		text-decoration: none;
+		color: inherit;
+
+		img {
+			height: 60vh;
+			width: auto;
+			object-fit: contain;
+			border-radius: $corner-radius-md;
+		}
+	}
+
+	.caption {
+		margin: 0;
+		font-size: 0.875rem;
+		line-height: 1.4;
+		color: $grey-20;
+		padding: $unit 0;
+	}
+</style>
diff --git a/src/lib/components/TwoColumnPhotoGrid.svelte b/src/lib/components/TwoColumnPhotoGrid.svelte
new file mode 100644
index 0000000..866807c
--- /dev/null
+++ b/src/lib/components/TwoColumnPhotoGrid.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import PhotoItem from '$components/PhotoItem.svelte'
+	import type { PhotoItem as PhotoItemType } from '$lib/types/photos'
+
+	const {
+		photoItems,
+		albumSlug
+	}: {
+		photoItems: PhotoItemType[]
+		albumSlug?: string
+	} = $props()
+
+	// Split items into two columns
+	const column1 = $derived(photoItems.filter((_, index) => index % 2 === 0))
+	const column2 = $derived(photoItems.filter((_, index) => index % 2 === 1))
+</script>
+
+<div class="two-column-grid">
+	<div class="column">
+		{#each column1 as item}
+			<PhotoItem {item} {albumSlug} />
+		{/each}
+	</div>
+	<div class="column">
+		{#each column2 as item}
+			<PhotoItem {item} {albumSlug} />
+		{/each}
+	</div>
+</div>
+
+<style lang="scss">
+	.two-column-grid {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: $unit-3x;
+		
+		@include breakpoint('phone') {
+			gap: $unit-2x;
+		}
+	}
+
+	.column {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-3x;
+		
+		@include breakpoint('phone') {
+			gap: $unit-2x;
+		}
+	}
+</style>
\ No newline at end of file