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

web/src/views/IntegrationView.vue

@@ -35,7 +35,10 @@ const sessionRouteCount = SESSION_GROUPS.reduce((total, group) => total + group.
 
 const sections = computed(() => [
 	{ id: 'auth', label: t('Authentication') },
-	...API_GROUPS.map((group) => ({ id: group.key, label: translate(group.title) })),
+	...API_GROUPS.map((group) => ({
+		id: group.key,
+		label: translate(group.title),
+	})),
 	{ id: 'images', label: t('Images and variants') },
 	{ id: 'session', label: t('Session only') },
 	{ id: 'errors', label: t('Errors') },
@@ -204,7 +207,9 @@ const CARD_TITLE = 'text-md/6 font-semibold text-highlighted'
 					aria-labelledby="h-auth"
 					:class="[SECTION_CLASS, 'gap-3.5']"
 				>
-					<h2 id="h-auth" :class="SECTION_TITLE">{{ t('Authentication') }}</h2>
+					<h2 id="h-auth" :class="SECTION_TITLE">
+						{{ t('Authentication') }}
+					</h2>
 					<div class="grid items-start gap-3 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
 						<div :class="AUTH_CARD">
 							<div class="flex items-center gap-2">
@@ -302,7 +307,9 @@ const CARD_TITLE = 'text-md/6 font-semibold text-highlighted'
 
 				<section data-anchor="session" aria-labelledby="h-session" :class="SECTION_CLASS">
 					<div class="flex flex-wrap items-baseline gap-2.5">
-						<h2 id="h-session" :class="SECTION_TITLE">{{ t('Session only') }}</h2>
+						<h2 id="h-session" :class="SECTION_TITLE">
+							{{ t('Session only') }}
+						</h2>
 						<span class="text-muted">{{
 							t('{0} routes, made for a browser session', [sessionRouteCount])
 						}}</span>
@@ -311,7 +318,9 @@ const CARD_TITLE = 'text-md/6 font-semibold text-highlighted'
 				</section>
 
 				<section data-anchor="errors" aria-labelledby="h-errors" :class="SECTION_CLASS">
-					<h2 id="h-errors" :class="SECTION_TITLE">{{ t('Errors') }}</h2>
+					<h2 id="h-errors" :class="SECTION_TITLE">
+						{{ t('Errors') }}
+					</h2>
 					<span class="text-pretty text-toned">{{
 						t(
 							'Every error is a plain-text body with a single sentence. The status code is in the HTTP status line, and the Content-Type is text/plain.',
@@ -360,7 +369,9 @@ const CARD_TITLE = 'text-md/6 font-semibold text-highlighted'
 				</section>
 
 				<section data-anchor="notes" aria-labelledby="h-notes" :class="SECTION_CLASS">
-					<h2 id="h-notes" :class="SECTION_TITLE">{{ t('Notes') }}</h2>
+					<h2 id="h-notes" :class="SECTION_TITLE">
+						{{ t('Notes') }}
+					</h2>
 					<div class="flex flex-col gap-2.5 text-base text-toned">
 						<div v-for="note in notes" :key="note" class="flex gap-2.5">
 							<UIcon name="i-lucide-info" :class="NOTE_ICON" />