fix: multiple fixes all accross the SPA, missing buttons actions, styling etc.

web/src/components/ArticleDetails.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useToast } from '@nuxt/ui/composables'
 import type { Article } from '@/composables/useArticles'
 
 const props = defineProps<{ article: Article }>()
 
-defineEmits<{ 'copy-url': [] }>()
+const emit = defineEmits<{ 'copy-url': [] }>()
+
+const toast = useToast()
 
 const open = defineModel<boolean>('open', { default: false })
 
@@ -55,6 +58,28 @@ const apiNote = computed(() =>
 		? 'Live. Your website can read this article.'
 		: 'Returns 404 until the article is online.',
 )
+
+async function copyUrl() {
+	const url = `${window.location.origin}${publicUrl.value}`
+	try {
+		await navigator.clipboard.writeText(url)
+		toast.add({
+			id: `article-link-copied-${props.article.id}`,
+			color: 'success',
+			icon: 'i-lucide-circle-check',
+			title: 'Link copied',
+			description: `The API URL for "${props.article.title}" is on your clipboard.`,
+		})
+		emit('copy-url')
+	} catch {
+		toast.add({
+			id: `article-link-copy-failed-${props.article.id}`,
+			color: 'error',
+			icon: 'i-lucide-circle-x',
+			title: "Couldn't copy the link",
+		})
+	}
+}
 </script>
 
 <template>
@@ -89,7 +114,15 @@ const apiNote = computed(() =>
 					class="flex items-center gap-1.5 bg-elevated px-2 py-1.5 font-mono text-xs"
 				>
 					<span class="flex-1">{{ publicUrl }}</span>
-					<UIcon name="i-lucide-copy" class="size-3.5" />
+					<UButton
+						icon="i-lucide-copy"
+						color="neutral"
+						variant="ghost"
+						size="sm"
+						aria-label="Copy the public API URL"
+						class="size-5 p-0"
+						@click="copyUrl"
+					/>
 				</div>
 				<p class="text-xs/[18px] text-muted">{{ apiNote }}</p>
 			</div>
@@ -127,7 +160,15 @@ const apiNote = computed(() =>
 							class="flex items-center gap-1.5 bg-elevated px-2 py-1.5 font-mono text-xs"
 						>
 							<span class="flex-1">{{ publicUrl }}</span>
-							<UIcon name="i-lucide-copy" class="size-3.5" />
+							<UButton
+								icon="i-lucide-copy"
+								color="neutral"
+								variant="ghost"
+								size="sm"
+								aria-label="Copy the public API URL"
+								class="size-5 p-0"
+								@click="copyUrl"
+							/>
 						</div>
 						<p class="text-xs/[18px] text-muted">{{ apiNote }}</p>
 					</div>