From 451d5b0f9efba52584d30e326757162e84e2fbf8 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 10 Jun 2025 22:24:24 -0700
Subject: [PATCH] Make back button consistent

---
 src/lib/components/BackButton.svelte          | 75 +++++++++++++++++++
 src/lib/components/DynamicPostContent.svelte  | 48 +-----------
 src/lib/components/PostContent.svelte         | 16 +---
 src/lib/components/ProjectContent.svelte      | 53 +------------
 .../ProjectPasswordProtection.svelte          | 16 +---
 src/routes/labs/[slug]/+page.svelte           | 39 +++++-----
 .../photos/[albumSlug]/[photoId]/+page.svelte | 14 +---
 src/routes/photos/[slug]/+page.svelte         | 14 +---
 src/routes/universe/[slug]/+page.svelte       | 49 +-----------
 src/routes/work/[slug]/+page.svelte           | 42 +++++------
 10 files changed, 129 insertions(+), 237 deletions(-)
 create mode 100644 src/lib/components/BackButton.svelte

diff --git a/src/lib/components/BackButton.svelte b/src/lib/components/BackButton.svelte
new file mode 100644
index 0000000..f72915e
--- /dev/null
+++ b/src/lib/components/BackButton.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { goto } from '$app/navigation'
+	import ArrowLeft from '$icons/arrow-left.svg'
+
+	interface Props {
+		href?: string
+		label: string
+		onclick?: () => void
+		class?: string
+	}
+
+	let { href, label, onclick, class: className = '' }: Props = $props()
+
+	function handleClick() {
+		if (onclick) {
+			onclick()
+		} else if (href) {
+			goto(href)
+		} else {
+			history.back()
+		}
+	}
+</script>
+
+<button class="back-button {className}" onclick={handleClick} type="button">
+	<ArrowLeft class="arrow-icon" />
+	<span>{label}</span>
+</button>
+
+<style lang="scss">
+	@import '$styles/variables.scss';
+	@import '$styles/mixins.scss';
+
+	.back-button {
+		display: inline-flex;
+		align-items: center;
+		gap: $unit-half;
+		padding: $unit $unit-2x;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: $red-60;
+		background: none;
+		border: none;
+		border-radius: $corner-radius-md;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&:hover {
+			background: rgba($red-60, 0.08);
+
+			:global(.arrow-icon) {
+				transform: translateX(-3px);
+			}
+		}
+
+		&:focus {
+			outline: none;
+			box-shadow: 0 0 0 3px rgba($red-60, 0.2);
+		}
+
+		:global(.arrow-icon) {
+			width: 16px;
+			height: 16px;
+			transition: transform 0.2s ease;
+		}
+
+		:global(svg) {
+			stroke: $red-60;
+			fill: none;
+			stroke-width: 2px;
+			stroke-linecap: round;
+			stroke-linejoin: round;
+		}
+	}
+</style>
diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte
index 3fd448f..faf0147 100644
--- a/src/lib/components/DynamicPostContent.svelte
+++ b/src/lib/components/DynamicPostContent.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import LinkCard from './LinkCard.svelte'
 	import Slideshow from './Slideshow.svelte'
+	import BackButton from './BackButton.svelte'
 	import { formatDate } from '$lib/utils/date'
 	import { renderEdraContent } from '$lib/utils/content'
-	import { goto } from '$app/navigation'
-	import ArrowLeft from '$icons/arrow-left.svg'
 
 	let { post }: { post: any } = $props()
 
@@ -82,10 +81,7 @@
 	{/if}
 
 	<footer class="post-footer">
-		<button onclick={() => goto('/universe')} class="back-button">
-			<ArrowLeft class="back-arrow" />
-			Back to Universe
-		</button>
+		<BackButton href="/universe" label="Back to Universe" />
 	</footer>
 </article>
 
@@ -318,44 +314,4 @@
 			}
 		}
 	}
-
-	.back-button {
-		color: $red-60;
-		background-color: transparent;
-		border: 1px solid transparent;
-		font: inherit;
-		font-size: 0.875rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		display: inline-flex;
-		align-items: center;
-		gap: $unit;
-		border-radius: 24px;
-		outline: none;
-
-		&:hover:not(:disabled) :global(.back-arrow) {
-			transform: translateX(-3px);
-		}
-
-		&:focus-visible {
-			box-shadow: 0 0 0 3px rgba($red-60, 0.25);
-		}
-
-		:global(.back-arrow) {
-			width: 16px;
-			height: 16px;
-			flex-shrink: 0;
-			transition: transform 0.2s ease;
-			margin-left: -$unit-half;
-
-			:global(path) {
-				stroke: currentColor;
-				stroke-width: 2.25;
-				stroke-linecap: round;
-				stroke-linejoin: round;
-				fill: none;
-			}
-		}
-	}
 </style>
diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte
index ed8846e..ea0dc07 100644
--- a/src/lib/components/PostContent.svelte
+++ b/src/lib/components/PostContent.svelte
@@ -2,6 +2,7 @@
 	import type { Post } from '$lib/posts'
 	import ImagePost from './ImagePost.svelte'
 	import LinkCard from './LinkCard.svelte'
+	import BackButton from './BackButton.svelte'
 
 	let { post }: { post: Post } = $props()
 
@@ -42,7 +43,7 @@
 	</div>
 
 	<footer class="post-footer">
-		<a href="/universe" class="back-link">← Back to all posts</a>
+		<BackButton href="/universe" label="Back to all posts" />
 	</footer>
 </article>
 
@@ -201,17 +202,4 @@
 		padding-top: $unit-4x;
 		border-top: 1px solid $grey-80;
 	}
-
-	.back-link {
-		color: $red-60;
-		text-decoration: none;
-		font-weight: 500;
-		transition: all 0.2s ease;
-
-		&:hover {
-			text-decoration: underline;
-			text-decoration-style: wavy;
-			text-underline-offset: 0.15em;
-		}
-	}
 </style>
diff --git a/src/lib/components/ProjectContent.svelte b/src/lib/components/ProjectContent.svelte
index fd91111..b0b7a5f 100644
--- a/src/lib/components/ProjectContent.svelte
+++ b/src/lib/components/ProjectContent.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Project } from '$lib/types/project'
-	import ArrowLeft from '$icons/arrow-left.svg'
-	import { goto } from '$app/navigation'
+	import BackButton from './BackButton.svelte'
 
 	interface Props {
 		project: Project
@@ -74,15 +73,9 @@
 	<!-- Navigation -->
 	<footer class="project-footer">
 		{#if project.projectType === 'labs'}
-			<button onclick={() => goto('/labs')} class="back-button">
-				<ArrowLeft class="back-arrow" />
-				Back to labs
-			</button>
+			<BackButton href="/labs" label="Back to Labs" />
 		{:else}
-			<button onclick={() => goto('/')} class="back-button">
-				<ArrowLeft class="back-arrow" />
-				Back to projects
-			</button>
+			<BackButton href="/" label="Back to projects" />
 		{/if}
 	</footer>
 </article>
@@ -178,44 +171,4 @@
 	.project-footer {
 		padding-bottom: $unit-2x;
 	}
-
-	.back-button {
-		color: $red-60;
-		background-color: transparent;
-		border: 1px solid transparent;
-		font: inherit;
-		font-size: 0.875rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		display: inline-flex;
-		align-items: center;
-		gap: $unit;
-		border-radius: 24px;
-		outline: none;
-
-		&:hover:not(:disabled) :global(.back-arrow) {
-			transform: translateX(-3px);
-		}
-
-		&:focus-visible {
-			box-shadow: 0 0 0 3px rgba($red-60, 0.25);
-		}
-
-		:global(.back-arrow) {
-			width: 16px;
-			height: 16px;
-			flex-shrink: 0;
-			transition: transform 0.2s ease;
-			margin-left: -$unit-half;
-
-			:global(path) {
-				stroke: currentColor;
-				stroke-width: 2.25;
-				stroke-linecap: round;
-				stroke-linejoin: round;
-				fill: none;
-			}
-		}
-	}
 </style>
diff --git a/src/lib/components/ProjectPasswordProtection.svelte b/src/lib/components/ProjectPasswordProtection.svelte
index 8013239..25e23fa 100644
--- a/src/lib/components/ProjectPasswordProtection.svelte
+++ b/src/lib/components/ProjectPasswordProtection.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/components/admin/Button.svelte'
+	import BackButton from './BackButton.svelte'
 	import { onMount } from 'svelte'
 
 	interface Props {
@@ -121,9 +122,9 @@
 
 			<div class="back-link-wrapper">
 				{#if projectType === 'labs'}
-					<a href="/labs" class="back-link">← Back to labs</a>
+					<BackButton href="/labs" label="Back to Labs" />
 				{:else}
-					<a href="/" class="back-link">← Back to projects</a>
+					<BackButton href="/" label="Back to projects" />
 				{/if}
 			</div>
 		</div>
@@ -236,16 +237,5 @@
 			text-align: center;
 			width: 100%;
 		}
-
-		.back-link {
-			color: $grey-40;
-			text-decoration: none;
-			font-size: 0.925rem;
-			transition: color 0.2s ease;
-
-			&:hover {
-				color: $grey-20;
-			}
-		}
 	}
 </style>
diff --git a/src/routes/labs/[slug]/+page.svelte b/src/routes/labs/[slug]/+page.svelte
index a499a7a..f3e1e11 100644
--- a/src/routes/labs/[slug]/+page.svelte
+++ b/src/routes/labs/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Page from '$components/Page.svelte'
+	import BackButton from '$components/BackButton.svelte'
 	import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
 	import ProjectHeaderContent from '$lib/components/ProjectHeaderContent.svelte'
 	import ProjectContent from '$lib/components/ProjectContent.svelte'
@@ -13,17 +14,14 @@
 </script>
 
 {#if error}
-	<Page>
-		{#snippet header()}
-			<div class="error-header">
-				<h1>Error</h1>
+	<div class="error-wrapper">
+		<Page>
+			<div class="error-content">
+				<p>{error}</p>
+				<BackButton href="/labs" label="Back to Labs" />
 			</div>
-		{/snippet}
-		<div class="error-content">
-			<p>{error}</p>
-			<a href="/labs" class="back-link">← Back to labs</a>
-		</div>
-	</Page>
+		</Page>
+	</div>
 {:else if !project}
 	<Page>
 		<div class="loading">Loading project...</div>
@@ -37,7 +35,7 @@
 		{/snippet}
 		<div class="error-content">
 			<p>This project is not yet available for viewing. Please check back later.</p>
-			<a href="/labs" class="back-link">← Back to labs</a>
+			<BackButton href="/labs" label="Back to Labs" />
 		</div>
 	</Page>
 {:else if project.status === 'password-protected' || project.status === 'published'}
@@ -67,6 +65,14 @@
 
 <style lang="scss">
 	/* Error and Loading States */
+	.error-wrapper {
+		width: 100%;
+		max-width: 700px;
+		margin: 0 auto;
+		padding: 0 $unit-2x;
+		box-sizing: border-box;
+	}
+
 	.error-header h1 {
 		color: $red-60;
 		font-size: 2rem;
@@ -88,17 +94,6 @@
 		padding: $unit-4x;
 	}
 
-	.back-link {
-		color: $grey-40;
-		text-decoration: none;
-		font-size: 0.925rem;
-		transition: color 0.2s ease;
-
-		&:hover {
-			color: $grey-20;
-		}
-	}
-
 	/* Project Wrapper */
 	.project-wrapper {
 		width: 100%;
diff --git a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
index f4e334b..28f99cd 100644
--- a/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
+++ b/src/routes/photos/[albumSlug]/[photoId]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import BackButton from '$components/BackButton.svelte'
 	import type { PageData } from './$types'
 
 	let { data }: { data: PageData } = $props()
@@ -84,7 +85,7 @@
 		<div class="error-content">
 			<h1>Photo Not Found</h1>
 			<p>{error || "The photo you're looking for doesn't exist."}</p>
-			<a href="/photos" class="back-link">← Back to Photos</a>
+			<BackButton href="/photos" label="Back to Photos" />
 		</div>
 	</div>
 {:else}
@@ -265,17 +266,6 @@
 		}
 	}
 
-	.back-link {
-		color: $grey-40;
-		text-decoration: none;
-		font-size: 0.925rem;
-		transition: color 0.2s ease;
-
-		&:hover {
-			color: $grey-20;
-		}
-	}
-
 	.photo-page {
 		min-height: 100vh;
 		display: grid;
diff --git a/src/routes/photos/[slug]/+page.svelte b/src/routes/photos/[slug]/+page.svelte
index 854bb6e..d2c5622 100644
--- a/src/routes/photos/[slug]/+page.svelte
+++ b/src/routes/photos/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import PhotoGrid from '$components/PhotoGrid.svelte'
+	import BackButton from '$components/BackButton.svelte'
 	import type { PageData } from './$types'
 
 	let { data }: { data: PageData } = $props()
@@ -43,7 +44,7 @@
 		<div class="error-message">
 			<h1>Album Not Found</h1>
 			<p>{error}</p>
-			<a href="/photos" class="back-link">← Back to Photos</a>
+			<BackButton href="/photos" label="Back to Photos" />
 		</div>
 	</div>
 {:else if album}
@@ -107,17 +108,6 @@
 		}
 	}
 
-	.back-link {
-		color: $grey-40;
-		text-decoration: none;
-		font-size: 0.925rem;
-		transition: color 0.2s ease;
-
-		&:hover {
-			color: $grey-20;
-		}
-	}
-
 	.album-page {
 		width: 100%;
 		max-width: 900px;
diff --git a/src/routes/universe/[slug]/+page.svelte b/src/routes/universe/[slug]/+page.svelte
index 9f17d40..e4f4a98 100644
--- a/src/routes/universe/[slug]/+page.svelte
+++ b/src/routes/universe/[slug]/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import Page from '$components/Page.svelte'
+	import BackButton from '$components/BackButton.svelte'
 	import DynamicPostContent from '$components/DynamicPostContent.svelte'
 	import { getContentExcerpt } from '$lib/utils/content'
-	import { goto } from '$app/navigation'
-	import ArrowLeft from '$icons/arrow-left.svg'
 	import type { PageData } from './$types'
 
 	let { data }: { data: PageData } = $props()
@@ -44,12 +43,8 @@
 		<Page>
 			<div class="error-container">
 				<div class="error-content">
-					<h1>Post Not Found</h1>
 					<p>{error || "The post you're looking for doesn't exist."}</p>
-					<button onclick={() => goto('/universe')} class="back-button">
-						<ArrowLeft class="back-arrow" />
-						Back to Universe
-					</button>
+					<BackButton href="/universe" label="Back to Universe" />
 				</div>
 			</div>
 		</Page>
@@ -90,45 +85,5 @@
 			color: $grey-40;
 			line-height: 1.5;
 		}
-
-		.back-button {
-			color: $red-60;
-			background-color: transparent;
-			border: 1px solid transparent;
-			font: inherit;
-			font-size: 0.875rem;
-			font-weight: 500;
-			cursor: pointer;
-			transition: all 0.15s ease;
-			display: inline-flex;
-			align-items: center;
-			gap: $unit;
-			border-radius: 24px;
-			outline: none;
-
-			&:hover:not(:disabled) :global(.back-arrow) {
-				transform: translateX(-3px);
-			}
-
-			&:focus-visible {
-				box-shadow: 0 0 0 3px rgba($red-60, 0.25);
-			}
-
-			:global(.back-arrow) {
-				width: 16px;
-				height: 16px;
-				flex-shrink: 0;
-				transition: transform 0.2s ease;
-				margin-left: -$unit-half;
-
-				:global(path) {
-					stroke: currentColor;
-					stroke-width: 2.25;
-					stroke-linecap: round;
-					stroke-linejoin: round;
-					fill: none;
-				}
-			}
-		}
 	}
 </style>
diff --git a/src/routes/work/[slug]/+page.svelte b/src/routes/work/[slug]/+page.svelte
index ee54671..b3f829a 100644
--- a/src/routes/work/[slug]/+page.svelte
+++ b/src/routes/work/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Page from '$components/Page.svelte'
+	import BackButton from '$components/BackButton.svelte'
 	import ProjectPasswordProtection from '$lib/components/ProjectPasswordProtection.svelte'
 	import ProjectHeaderContent from '$lib/components/ProjectHeaderContent.svelte'
 	import ProjectContent from '$lib/components/ProjectContent.svelte'
@@ -50,15 +51,17 @@
 </script>
 
 {#if error}
-	<Page>
-		<div slot="header" class="error-header">
-			<h1>Error</h1>
-		</div>
-		<div class="error-content">
-			<p>{error}</p>
-			<a href="/" class="back-link">← Back to home</a>
-		</div>
-	</Page>
+	<div class="error-container">
+		<Page>
+			<div slot="header" class="error-header">
+				<h1>Error</h1>
+			</div>
+			<div class="error-content">
+				<p>{error}</p>
+				<BackButton href="/" label="Back to projects" />
+			</div>
+		</Page>
+	</div>
 {:else if !project}
 	<Page>
 		<div class="loading">Loading project...</div>
@@ -70,7 +73,7 @@
 		</div>
 		<div class="error-content">
 			<p>This project is not yet available for viewing. Please check back later.</p>
-			<a href="/" class="back-link">← Back to projects</a>
+			<BackButton href="/" label="Back to projects" />
 		</div>
 	</Page>
 {:else if project.status === 'password-protected' || project.status === 'published'}
@@ -122,6 +125,14 @@
 
 <style lang="scss">
 	/* Error and Loading States */
+	.error-container {
+		width: 100%;
+		max-width: 700px;
+		margin: 0 auto;
+		box-sizing: border-box;
+		padding: 0 $unit-2x;
+	}
+
 	.error-header h1 {
 		color: $red-60;
 		font-size: 2rem;
@@ -143,17 +154,6 @@
 		padding: $unit-4x;
 	}
 
-	.back-link {
-		color: $grey-40;
-		text-decoration: none;
-		font-size: 0.925rem;
-		transition: color 0.2s ease;
-
-		&:hover {
-			color: $grey-20;
-		}
-	}
-
 	/* Project Wrapper */
 	.project-wrapper {
 		width: 100%;