From 4532bb43d491173969a2c9638e60e0e67ca40ecf Mon Sep 17 00:00:00 2001
From: Steve <contact@stevedylan.dev>
Date: Wed, 25 Feb 2026 20:17:24 -0500
Subject: [PATCH] feat: added grid view

---
 src/routes/+page.svelte | 82 +++++++++++++++++++++++++++++++++++------
 1 file changed, 70 insertions(+), 12 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2c65da5..857eb4b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,13 +1,29 @@
 <script lang="ts">
+  import { browser } from "$app/environment";
   import type { PageData } from "./$types";
   import ProgressiveImage from "$lib/components/ProgressiveImage.svelte";
   type ImageItem = PageData["photos"][number];
   let { data }: { data: PageData } = $props();
 
+  let viewMode = $state<'feed' | 'grid'>('feed');
   let photos = $state<ImageItem[]>([]);
   let loading = $state(false);
   let hasMore = $derived(photos.length < data.total);
 
+  if (browser) {
+    const saved = localStorage.getItem('viewMode');
+    if (saved === 'feed' || saved === 'grid') {
+      viewMode = saved;
+    }
+  }
+
+  function toggleViewMode() {
+    viewMode = viewMode === 'feed' ? 'grid' : 'feed';
+    if (browser) {
+      localStorage.setItem('viewMode', viewMode);
+    }
+  }
+
   $effect(() => {
     photos = data.photos;
   });
@@ -49,8 +65,24 @@
 </script>
 
 <div class="bg-[#121113] min-h-screen text-white">
-  <div class="fixed bg-[#121113] w-full py-4 sm:px-8 px-4">
+  <div class="fixed bg-[#121113] w-full py-4 sm:px-8 px-4 flex items-center justify-between z-10">
     <h1 class="text-sm">steve.photo</h1>
+    <button onclick={toggleViewMode} class="text-neutral-400 hover:text-white transition-colors" aria-label="Toggle view mode">
+      {#if viewMode === 'feed'}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="7" height="7"></rect>
+          <rect x="14" y="3" width="7" height="7"></rect>
+          <rect x="3" y="14" width="7" height="7"></rect>
+          <rect x="14" y="14" width="7" height="7"></rect>
+        </svg>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="3" y1="6" x2="21" y2="6"></line>
+          <line x1="3" y1="12" x2="21" y2="12"></line>
+          <line x1="3" y1="18" x2="21" y2="18"></line>
+        </svg>
+      {/if}
+    </button>
   </div>
 
   {#snippet figure(image: ImageItem)}
@@ -78,17 +110,43 @@
     </div>
   {/snippet}
 
-  <div class="flex flex-col gap-2 pt-12">
-    {#each photos as image}
-      {@render figure(image)}
-    {/each}
+  {#if viewMode === 'feed'}
+    <div class="flex flex-col gap-2 pt-12">
+      {#each photos as image}
+        {@render figure(image)}
+      {/each}
+    </div>
+  {:else}
+    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1 pt-12 sm:px-8 px-4">
+      {#each photos as image}
+        <a href="/photo/{image.slug}" class="grid-item block overflow-hidden aspect-[3/2]">
+          <ProgressiveImage
+            class="w-full h-full block"
+            src={image.image}
+            thumb={image.thumb}
+            alt={image.title}
+          />
+        </a>
+      {/each}
+    </div>
+  {/if}
 
-    <div bind:this={sentinel} class="h-4"></div>
+  <div bind:this={sentinel} class="h-4"></div>
 
-    {#if loading}
-      <div class="flex justify-center py-8">
-        <div class="text-neutral-400 text-sm">Loading...</div>
-      </div>
-    {/if}
-  </div>
+  {#if loading}
+    <div class="flex justify-center py-8">
+      <div class="text-neutral-400 text-sm">Loading...</div>
+    </div>
+  {/if}
 </div>
+
+<style>
+  .grid-item :global(.progressive-container) {
+    aspect-ratio: unset !important;
+    height: 100%;
+  }
+
+  .grid-item :global(.progressive-image) {
+    object-fit: cover;
+  }
+</style>
-- 
2.51.2