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

web/src/components/ArticleDetails.vue

@@ -110,6 +110,7 @@ async function copyUrl() {
 					{{ t('Details') }}
 				</h2>
 			</template>
+			<slot name="meta" :sheet="false" />
 			<dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm">
 				<dt class="text-muted">{{ t('Created') }}</dt>
 				<dd class="text-highlighted">{{ createdLabel }}</dd>
@@ -144,9 +145,28 @@ async function copyUrl() {
 			</div>
 		</UCard>
 
-		<USlideover v-model:open="open" side="right" :title="t('Details')" class="lg:hidden">
+		<USlideover
+			v-model:open="open"
+			side="bottom"
+			:title="t('Details')"
+			:close="{
+				'aria-label': t('Close'),
+				class: 'size-11 justify-center text-muted',
+				ui: { leadingIcon: 'size-4' },
+			}"
+			class="lg:hidden"
+			:ui="{
+				content:
+					'h-23/25 max-h-none pt-3 before:absolute before:top-2 before:left-1/2 before:h-1 before:w-9 before:-translate-x-1/2 before:bg-(--ui-border-accented)',
+				header: 'min-h-0 gap-3 px-4 pt-2 pb-0 sm:px-4',
+				title: 'text-lg/6 font-semibold',
+				description: 'sr-only',
+				body: 'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 pt-3 pb-4 sm:px-4',
+			}"
+		>
 			<template #body>
 				<div class="flex flex-col gap-4 text-sm">
+					<slot name="meta" :sheet="true" />
 					<dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-2">
 						<dt class="text-muted">{{ t('Created') }}</dt>
 						<dd class="text-highlighted">{{ createdLabel }}</dd>
@@ -156,10 +176,6 @@ async function copyUrl() {
 						<dd class="font-mono text-highlighted">
 							{{ article.id }}
 						</dd>
-						<dt class="text-muted">{{ t('Images') }}</dt>
-						<dd class="text-highlighted">
-							{{ formatNumber(imagesCount) }}
-						</dd>
 					</dl>
 					<div class="flex flex-col gap-1.5">
 						<p class="text-muted">{{ t('Public API URL') }}</p>
@@ -177,13 +193,6 @@ async function copyUrl() {
 								@click="copyUrl"
 							/>
 						</div>
-						<p class="text-xs/[18px] text-muted">{{ apiNote }}</p>
-					</div>
-					<div class="flex flex-col gap-1 border-t border-default pt-3">
-						<p class="text-muted">{{ t('Title') }}</p>
-						<p class="text-xs/[18px] text-toned">
-							{{ t(TITLE_NOTE) }}
-						</p>
 					</div>
 				</div>
 			</template>