From df3dd1abd91952ca6ee2b3fe4816bb26ccbf8d47 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 08:40:32 -0400
Subject: [PATCH] feat: create reusable CloseButton icon component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create CloseButton.svelte with configurable size, color, strokeWidth props
- Replace inline close button SVGs in 7 components
- Update Modal, Lightbox, MediaDetailsModal, MediaInput, GalleryManager, AlbumSelectorModal, UnifiedMediaModal

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/Lightbox.svelte            | 16 ++-------
 .../admin/AlbumSelectorModal.svelte           | 16 ++-------
 .../components/admin/GalleryManager.svelte    | 16 ++-------
 .../components/admin/MediaDetailsModal.svelte | 17 ++--------
 src/lib/components/admin/MediaInput.svelte    | 17 ++--------
 src/lib/components/admin/Modal.svelte         | 17 ++--------
 .../components/admin/UnifiedMediaModal.svelte | 16 ++-------
 src/lib/components/icons/CloseButton.svelte   | 33 +++++++++++++++++++
 8 files changed, 47 insertions(+), 101 deletions(-)
 create mode 100644 src/lib/components/icons/CloseButton.svelte

diff --git a/src/lib/components/Lightbox.svelte b/src/lib/components/Lightbox.svelte
index 0098889..1e63967 100644
--- a/src/lib/components/Lightbox.svelte
+++ b/src/lib/components/Lightbox.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte'
 	import { fade, scale } from 'svelte/transition'
+	import CloseButton from '$components/icons/CloseButton.svelte'
 
 	// Convert CSS transition durations to milliseconds for Svelte transitions
 	const TRANSITION_NORMAL_MS = 200 // $transition-normal: 0.2s
@@ -111,20 +112,7 @@
 		</div>
 
 		<button class="lightbox-close" onclick={close} aria-label="Close lightbox">
-			<svg
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M18 6L6 18M6 6l12 12"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-				/>
-			</svg>
+			<CloseButton />
 		</button>
 	</div>
 {/if}
diff --git a/src/lib/components/admin/AlbumSelectorModal.svelte b/src/lib/components/admin/AlbumSelectorModal.svelte
index 2e87aa2..c89fc26 100644
--- a/src/lib/components/admin/AlbumSelectorModal.svelte
+++ b/src/lib/components/admin/AlbumSelectorModal.svelte
@@ -2,6 +2,7 @@
 	import Modal from './Modal.svelte'
 	import AlbumSelector from './AlbumSelector.svelte'
 	import Button from './Button.svelte'
+	import CloseButton from '../icons/CloseButton.svelte'
 	import LoadingSpinner from './LoadingSpinner.svelte'
 	import type { Album } from '@prisma/client'
 
@@ -86,20 +87,7 @@
 			<div class="header-top">
 				<h2>Add to Album</h2>
 				<button class="close-button" onclick={handleClose} aria-label="Close modal">
-					<svg
-						width="20"
-						height="20"
-						viewBox="0 0 24 24"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M6 6L18 18M6 18L18 6"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-					</svg>
+					<CloseButton size={20} />
 				</button>
 			</div>
 			<p class="modal-subtitle">
diff --git a/src/lib/components/admin/GalleryManager.svelte b/src/lib/components/admin/GalleryManager.svelte
index 5dc20f3..c07743f 100644
--- a/src/lib/components/admin/GalleryManager.svelte
+++ b/src/lib/components/admin/GalleryManager.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Button from './Button.svelte'
+	import CloseButton from '../icons/CloseButton.svelte'
 	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
 	import type { Media } from '@prisma/client'
 
@@ -221,20 +222,7 @@
 						onclick={() => removeImage(index)}
 						aria-label="Remove image"
 					>
-						<svg
-							width="14"
-							height="14"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M6 6L18 18M6 18L18 6"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-							/>
-						</svg>
+						<CloseButton size={14} color="currentColor" />
 					</button>
 
 					<!-- Order Indicator -->
diff --git a/src/lib/components/admin/MediaDetailsModal.svelte b/src/lib/components/admin/MediaDetailsModal.svelte
index 1c7a44e..e6f92cd 100644
--- a/src/lib/components/admin/MediaDetailsModal.svelte
+++ b/src/lib/components/admin/MediaDetailsModal.svelte
@@ -6,6 +6,7 @@
 	import SmartImage from '../SmartImage.svelte'
 	import AlbumSelector from './AlbumSelector.svelte'
 	import AlbumIcon from '$icons/album.svg?component'
+	import CloseButton from '$components/icons/CloseButton.svelte'
 	import { authenticatedFetch } from '$lib/admin-auth'
 	import { toast } from '$lib/stores/toast'
 	import type { Media } from '@prisma/client'
@@ -296,21 +297,7 @@
 								</svg>
 							</Button>
 							<Button variant="ghost" onclick={handleClose} iconOnly aria-label="Close modal">
-								<svg
-									slot="icon"
-									width="24"
-									height="24"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M6 6L18 18M6 18L18 6"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-									/>
-								</svg>
+								<CloseButton slot="icon" />
 							</Button>
 						{/if}
 					</div>
diff --git a/src/lib/components/admin/MediaInput.svelte b/src/lib/components/admin/MediaInput.svelte
index d8aa829..9bf2a4a 100644
--- a/src/lib/components/admin/MediaInput.svelte
+++ b/src/lib/components/admin/MediaInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Button from './Button.svelte'
+	import CloseButton from '../icons/CloseButton.svelte'
 	import UnifiedMediaModal from './UnifiedMediaModal.svelte'
 	import type { Media } from '@prisma/client'
 
@@ -209,21 +210,7 @@
 			<Button variant="ghost" onclick={openModal}>Browse</Button>
 			{#if hasValue}
 				<Button variant="ghost" onclick={handleClear} aria-label="Clear selection">
-					<svg
-						slot="icon"
-						width="16"
-						height="16"
-						viewBox="0 0 24 24"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M6 6L18 18M6 18L18 6"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-					</svg>
+					<CloseButton slot="icon" size={16} />
 				</Button>
 			{/if}
 		</div>
diff --git a/src/lib/components/admin/Modal.svelte b/src/lib/components/admin/Modal.svelte
index 053fc6b..ef5ca73 100644
--- a/src/lib/components/admin/Modal.svelte
+++ b/src/lib/components/admin/Modal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import BaseModal from './BaseModal.svelte'
 	import Button from './Button.svelte'
+	import CloseButton from '$components/icons/CloseButton.svelte'
 
 	interface Props {
 		isOpen: boolean
@@ -41,21 +42,7 @@
 			aria-label="Close modal"
 			class="close-button"
 		>
-			<svg
-				slot="icon"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					d="M6 6L18 18M6 18L18 6"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-				/>
-			</svg>
+			<CloseButton slot="icon" />
 		</Button>
 	{/if}
 
diff --git a/src/lib/components/admin/UnifiedMediaModal.svelte b/src/lib/components/admin/UnifiedMediaModal.svelte
index 3514de5..c96274c 100644
--- a/src/lib/components/admin/UnifiedMediaModal.svelte
+++ b/src/lib/components/admin/UnifiedMediaModal.svelte
@@ -4,6 +4,7 @@
 	import Select from './Select.svelte'
 	import Input from './Input.svelte'
 	import Button from './Button.svelte'
+	import CloseButton from '../icons/CloseButton.svelte'
 	import LoadingSpinner from './LoadingSpinner.svelte'
 	import SmartImage from '../SmartImage.svelte'
 	import { InfiniteLoader, LoaderState } from 'svelte-infinite'
@@ -307,20 +308,7 @@
 			<div class="header-top">
 				<h2>{computedTitle}</h2>
 				<button class="close-button" onclick={handleClose} aria-label="Close modal">
-					<svg
-						width="20"
-						height="20"
-						viewBox="0 0 24 24"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-					>
-						<path
-							d="M6 6L18 18M6 18L18 6"
-							stroke="currentColor"
-							stroke-width="2"
-							stroke-linecap="round"
-						/>
-					</svg>
+					<CloseButton size={20} />
 				</button>
 			</div>
 
diff --git a/src/lib/components/icons/CloseButton.svelte b/src/lib/components/icons/CloseButton.svelte
new file mode 100644
index 0000000..ae2e6bf
--- /dev/null
+++ b/src/lib/components/icons/CloseButton.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	interface Props {
+		size?: number | string
+		color?: string
+		strokeWidth?: number
+		class?: string
+	}
+
+	let {
+		size = 24,
+		color = 'currentColor',
+		strokeWidth = 2,
+		class: className = ''
+	}: Props = $props()
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	class={className}
+	aria-hidden="true"
+>
+	<path
+		d="M18 6L6 18M6 6l12 12"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
\ No newline at end of file