feat: sites and authors integration into existing screens (& formated all frontend files kinda accidentally)

web/src/components/AuthorStack.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import AuthorAvatar from '@/components/AuthorAvatar.vue'
+import type { Byline } from '@/composables/useArticles'
+
+const props = withDefaults(
+	defineProps<{
+		authors: Byline[]
+		size?: number
+		max?: number
+	}>(),
+	{ size: 24, max: 3 },
+)
+
+const shown = computed(() => props.authors.slice(0, props.max))
+const extra = computed(() => Math.max(0, props.authors.length - props.max))
+</script>
+
+<template>
+	<span class="flex min-w-0 items-center">
+		<UAvatarGroup
+			:ui="{ base: 'ring-0 -me-1.5 first-of-type:me-0' }"
+			data-testid="author-stack"
+		>
+			<AuthorAvatar
+				v-for="author in shown"
+				:key="author.id"
+				:name="author.name"
+				:size="size"
+				ring
+			/>
+		</UAvatarGroup>
+		<span v-if="extra > 0" class="ml-1.5 text-xs text-muted" data-testid="author-stack-more"
+			>+{{ extra }}</span
+		>
+	</span>
+</template>