From c615791090afdedbcd17d5f8966f649dec8579c0 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 12 Jun 2025 03:28:05 -0700
Subject: [PATCH] Fix slug

---
 src/lib/components/admin/AlbumForm.svelte | 27 +++++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/admin/AlbumForm.svelte b/src/lib/components/admin/AlbumForm.svelte
index 1e0e6b8..f73b955 100644
--- a/src/lib/components/admin/AlbumForm.svelte
+++ b/src/lib/components/admin/AlbumForm.svelte
@@ -12,6 +12,7 @@
 		postId?: number
 		initialData?: {
 			title?: string
+			slug?: string
 			content?: JSONContent
 			gallery?: Media[]
 			status: 'draft' | 'published'
@@ -29,6 +30,7 @@
 
 	// Form data
 	let title = $state(initialData?.title || '')
+	let slug = $state(initialData?.slug || '')
 	let content = $state<JSONContent>({ type: 'doc', content: [] })
 	let gallery = $state<Media[]>([])
 	let tags = $state(initialData?.tags?.join(', ') || '')
@@ -36,6 +38,16 @@
 	// Editor ref
 	let editorRef: any
 
+	// Auto-generate slug from title
+	$effect(() => {
+		if (title && !slug) {
+			slug = title
+				.toLowerCase()
+				.replace(/[^a-z0-9]+/g, '-')
+				.replace(/^-+|-+$/g, '')
+		}
+	})
+
 	// Initialize data for edit mode
 	$effect(() => {
 		if (initialData && mode === 'edit') {
@@ -114,7 +126,7 @@
 		try {
 			const postData = {
 				title: title.trim(),
-				slug: generateSlug(title),
+				slug: slug,
 				postType: 'album',
 				status: newStatus,
 				content,
@@ -155,12 +167,6 @@
 		}
 	}
 
-	function generateSlug(title: string): string {
-		return title
-			.toLowerCase()
-			.replace(/[^a-z0-9]+/g, '-')
-			.replace(/^-+|-+$/g, '')
-	}
 
 	function handleCancel() {
 		if (hasChanges() && !confirm('Are you sure you want to cancel? Your changes will be lost.')) {
@@ -242,6 +248,13 @@
 					required={true}
 					error={title.trim().length === 0 ? 'Title is required' : undefined}
 				/>
+
+				<Input
+					label="Slug"
+					bind:value={slug}
+					placeholder="album-url-slug"
+					helpText="URL-friendly version of the title"
+				/>
 			</div>
 
 			<div class="form-section">