Add and update view mode icons

- 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

@@ -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>

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>

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>

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>

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>

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>