From ba37e9829e9d06e98463f5ee899d96ebea73f46b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 19 Jun 2025 01:54:50 +0100
Subject: [PATCH] Add and update view mode icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update view-single icon with text representation
- Add view-horizontal icon with side scroll indicator
- Add view-two-column icon for two-column layout
- Simplify width-normal and width-wide icons

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/assets/icons/view-horizontal.svg          |  5 ++
 src/assets/icons/view-single.svg              |  5 ++
 src/assets/icons/view-two-column.svg          |  4 ++
 src/assets/icons/width-normal.svg             | 10 +---
 src/assets/icons/width-wide.svg               | 10 +---
 .../components/SingleColumnPhotoGrid.svelte   | 60 +++++++++++++++++++
 6 files changed, 80 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/icons/view-horizontal.svg
 create mode 100644 src/assets/icons/view-single.svg
 create mode 100644 src/assets/icons/view-two-column.svg
 create mode 100644 src/lib/components/SingleColumnPhotoGrid.svelte

diff --git a/src/assets/icons/view-horizontal.svg b/src/assets/icons/view-horizontal.svg
new file mode 100644
index 0000000..f9a0647
--- /dev/null
+++ b/src/assets/icons/view-horizontal.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <!-- Horizontal scroll view -->
+  <rect x="2" y="5" width="14" height="14" rx="3"/>
+  <rect x="18" y="5" width="4" height="14" rx="2"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/view-single.svg b/src/assets/icons/view-single.svg
new file mode 100644
index 0000000..b3b07c4
--- /dev/null
+++ b/src/assets/icons/view-single.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+  <!-- Single column view icon - rounded square with text -->
+  <rect x="5" y="3" width="14" height="14" rx="3"/>
+  <rect x="5" y="19" width="14" height="4" rx="2"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/view-two-column.svg b/src/assets/icons/view-two-column.svg
new file mode 100644
index 0000000..e51fda8
--- /dev/null
+++ b/src/assets/icons/view-two-column.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="4" y="4" width="7" height="16" rx="3" fill="currentColor"/>
+  <rect x="13" y="4" width="7" height="16" rx="3" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/width-normal.svg b/src/assets/icons/width-normal.svg
index 8810d6b..5962567 100644
--- a/src/assets/icons/width-normal.svg
+++ b/src/assets/icons/width-normal.svg
@@ -1,8 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Normal width container -->
-  <rect x="5" y="4" width="10" height="12" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/>
-  <!-- Content lines -->
-  <line x1="7" y1="7" x2="13" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-  <line x1="7" y1="10" x2="11" y2="10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-  <line x1="7" y1="13" x2="13" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <!-- Normal width -->
+  <rect x="8" y="4" width="8" height="16" rx="3"/>
 </svg>
\ No newline at end of file
diff --git a/src/assets/icons/width-wide.svg b/src/assets/icons/width-wide.svg
index 72d850c..a325d99 100644
--- a/src/assets/icons/width-wide.svg
+++ b/src/assets/icons/width-wide.svg
@@ -1,8 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Wide width container -->
-  <rect x="2" y="4" width="16" height="12" rx="1" stroke="currentColor" stroke-width="1.5" fill="none"/>
-  <!-- Content lines -->
-  <line x1="4" y1="7" x2="16" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-  <line x1="4" y1="10" x2="12" y2="10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-  <line x1="4" y1="13" x2="16" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <!-- Wide width -->
+  <rect x="4" y="4" width="16" height="16" rx="3"/>
 </svg>
\ No newline at end of file
diff --git a/src/lib/components/SingleColumnPhotoGrid.svelte b/src/lib/components/SingleColumnPhotoGrid.svelte
new file mode 100644
index 0000000..c21a21a
--- /dev/null
+++ b/src/lib/components/SingleColumnPhotoGrid.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import PhotoItem from './PhotoItem.svelte'
+	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="single-column-grid">
+	{#each photoItems as item}
+		<div class="photo-container">
+			<PhotoItem {item} {albumSlug} />
+			{#if !isAlbum(item) && item.caption}
+				<div class="photo-details">
+					<p class="photo-caption">{item.caption}</p>
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style lang="scss">
+	.single-column-grid {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-4x;
+		width: 100%;
+	}
+
+	.photo-container {
+		width: 100%;
+	}
+
+	.photo-details {
+		padding: $unit-2x 0 0;
+	}
+
+	.photo-caption {
+		margin: 0;
+		font-size: 0.9rem;
+		line-height: 1.6;
+		color: $grey-20;
+	}
+
+	@include breakpoint('phone') {
+		.single-column-grid {
+			gap: $unit-3x;
+		}
+
+		.photo-details {
+			padding: $unit 0;
+		}
+	}
+</style>
\ No newline at end of file