Add view on site button

src/lib/components/admin/ProjectForm.svelte

@@ -236,6 +236,7 @@
 							show: formData.status !== 'password-protected'
 						}
 					]}
+					viewUrl={project?.slug ? `/work/${project.slug}` : undefined}
 				/>
 			{/if}
 		</div>
@@ -314,6 +315,7 @@
 			width: 250px;
 			display: flex;
 			justify-content: flex-end;
+			gap: $unit-2x;
 		}
 	}
 
@@ -336,6 +338,7 @@
 		}
 	}
 
+
 	.admin-container {
 		width: 100%;
 		margin: 0 auto;

src/lib/components/admin/StatusDropdown.svelte

@@ -17,6 +17,7 @@
 			status: string
 			show?: boolean
 		}>
+		viewUrl?: string
 	}
 
 	let {
@@ -25,7 +26,8 @@
 		disabled = false,
 		isLoading = false,
 		primaryAction,
-		dropdownActions = []
+		dropdownActions = [],
+		viewUrl
 	}: Props = $props()
 
 	let isDropdownOpen = $state(false)
@@ -62,6 +64,9 @@
 	const availableActions = $derived(
 		dropdownActions.filter((action) => action.show !== false && action.status !== currentStatus)
 	)
+
+	const showViewInDropdown = $derived(viewUrl && currentStatus === 'published')
+	const hasDropdownContent = $derived(availableActions.length > 0 || showViewInDropdown)
 </script>
 
 <div class="status-dropdown">
@@ -74,7 +79,7 @@
 		{isLoading ? `${primaryAction.label.replace(/e$/, 'ing')}...` : primaryAction.label}
 	</Button>
 
-	{#if availableActions.length > 0}
+	{#if hasDropdownContent}
 		<Button
 			variant="ghost"
 			iconOnly
@@ -100,6 +105,14 @@
 						{action.label}
 					</DropdownItem>
 				{/each}
+				{#if showViewInDropdown}
+					{#if availableActions.length > 0}
+						<div class="dropdown-divider"></div>
+					{/if}
+					<a href={viewUrl} target="_blank" rel="noopener noreferrer" class="dropdown-item view-link">
+						View on site
+					</a>
+				{/if}
 			</DropdownMenuContainer>
 		{/if}
 	{/if}
@@ -113,4 +126,28 @@
 		display: flex;
 		gap: $unit-half;
 	}
+
+	.dropdown-divider {
+		height: 1px;
+		background-color: $grey-90;
+		margin: $unit-half 0;
+	}
+
+	.dropdown-item.view-link {
+		display: block;
+		width: 100%;
+		padding: $unit-2x $unit-3x;
+		background: none;
+		border: none;
+		text-align: left;
+		font-size: 0.875rem;
+		color: $grey-20;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+		text-decoration: none;
+
+		&:hover {
+			background-color: $grey-95;
+		}
+	}
 </style>

src/routes/admin/albums/[id]/edit/+page.svelte

@@ -603,6 +603,7 @@
 						? { label: 'Save', status: 'published' }
 						: { label: 'Publish', status: 'published' }}
 					dropdownActions={[{ label: 'Save as Draft', status: 'draft', show: status !== 'draft' }]}
+					viewUrl={slug ? `/photos/${slug}` : undefined}
 				/>
 			</div>
 		{/if}
@@ -768,22 +769,6 @@
 		}
 	}
 
-	.btn {
-		padding: $unit-2x $unit-3x;
-		border: none;
-		border-radius: 50px;
-		font-size: 0.925rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		display: flex;
-		align-items: center;
-		gap: $unit;
-
-		&:disabled {
-			opacity: 0.6;
-			cursor: not-allowed;
-		}
-	}
 
 	.loading-container {
 		display: flex;

src/routes/admin/posts/[id]/edit/+page.svelte

@@ -366,6 +366,7 @@
 						? { label: 'Save', status: 'published' }
 						: { label: 'Publish', status: 'published' }}
 					dropdownActions={[{ label: 'Save as Draft', status: 'draft', show: status !== 'draft' }]}
+					viewUrl={slug ? `/universe/${slug}` : undefined}
 				/>
 			</div>
 		{/if}
@@ -489,27 +490,6 @@
 		}
 	}
 
-	.btn {
-		padding: $unit-2x $unit-3x;
-		border: none;
-		border-radius: 50px;
-		font-size: 0.925rem;
-		cursor: pointer;
-		transition: all 0.2s ease;
-		display: flex;
-		align-items: center;
-		gap: $unit;
-
-		&:disabled {
-			opacity: 0.6;
-			cursor: not-allowed;
-		}
-
-		&.btn-small {
-			padding: $unit $unit-2x;
-			font-size: 0.875rem;
-		}
-	}
 
 	.dropdown-menu {
 		position: absolute;