From 6ff2818e7297d3598ef3f2d5ea8820d887efcea1 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 08:45:25 -0400
Subject: [PATCH] feat: extract File and Copy icons as reusable components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create FileIcon.svelte and CopyIcon.svelte components
- Update MediaDetailsModal to use new icon components
- Maintain consistent icon sizing and styling

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/admin/MediaDetailsModal.svelte | 49 ++-----------------
 src/lib/components/icons/CopyIcon.svelte      | 40 +++++++++++++++
 src/lib/components/icons/FileIcon.svelte      | 40 +++++++++++++++
 3 files changed, 84 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/components/icons/CopyIcon.svelte
 create mode 100644 src/lib/components/icons/FileIcon.svelte

diff --git a/src/lib/components/admin/MediaDetailsModal.svelte b/src/lib/components/admin/MediaDetailsModal.svelte
index e6f92cd..fd14cae 100644
--- a/src/lib/components/admin/MediaDetailsModal.svelte
+++ b/src/lib/components/admin/MediaDetailsModal.svelte
@@ -7,6 +7,8 @@
 	import AlbumSelector from './AlbumSelector.svelte'
 	import AlbumIcon from '$icons/album.svg?component'
 	import CloseButton from '$components/icons/CloseButton.svelte'
+	import FileIcon from '$components/icons/FileIcon.svelte'
+	import CopyIcon from '$components/icons/CopyIcon.svelte'
 	import { authenticatedFetch } from '$lib/admin-auth'
 	import { toast } from '$lib/stores/toast'
 	import type { Media } from '@prisma/client'
@@ -237,28 +239,7 @@
 					</div>
 				{:else}
 					<div class="file-placeholder">
-						<svg
-							width="64"
-							height="64"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-							<polyline
-								points="14,2 14,8 20,8"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg>
+						<FileIcon size={64} />
 						<span class="file-type">{getFileType(media.mimeType)}</span>
 					</div>
 				{/if}
@@ -272,29 +253,7 @@
 					<div class="header-actions">
 						{#if !isSaving}
 							<Button variant="ghost" onclick={copyUrl} iconOnly aria-label="Copy URL">
-								<svg
-									slot="icon"
-									width="20"
-									height="20"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<rect
-										x="9"
-										y="9"
-										width="13"
-										height="13"
-										rx="2"
-										stroke="currentColor"
-										stroke-width="2"
-									/>
-									<path
-										d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
-										stroke="currentColor"
-										stroke-width="2"
-									/>
-								</svg>
+								<CopyIcon slot="icon" size={20} />
 							</Button>
 							<Button variant="ghost" onclick={handleClose} iconOnly aria-label="Close modal">
 								<CloseButton slot="icon" />
diff --git a/src/lib/components/icons/CopyIcon.svelte b/src/lib/components/icons/CopyIcon.svelte
new file mode 100644
index 0000000..a509b04
--- /dev/null
+++ b/src/lib/components/icons/CopyIcon.svelte
@@ -0,0 +1,40 @@
+<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"
+>
+	<rect
+		x="9"
+		y="9"
+		width="13"
+		height="13"
+		rx="2"
+		stroke={color}
+		stroke-width={strokeWidth}
+	/>
+	<path
+		d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
+		stroke={color}
+		stroke-width={strokeWidth}
+	/>
+</svg>
\ No newline at end of file
diff --git a/src/lib/components/icons/FileIcon.svelte b/src/lib/components/icons/FileIcon.svelte
new file mode 100644
index 0000000..05c8875
--- /dev/null
+++ b/src/lib/components/icons/FileIcon.svelte
@@ -0,0 +1,40 @@
+<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="M14 2H6A2 2 0 0 0 4 4V20A2 2 0 0 0 6 22H18A2 2 0 0 0 20 20V8L14 2Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<polyline
+		points="14,2 14,8 20,8"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
\ No newline at end of file