feat: integration page (PART 3/3)

web/src/components/ApiFieldTable.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import type { ApiField } from '@/data/apiCatalogue'
+
+defineProps<{
+	fields: ApiField[]
+}>()
+
+function fixed(width: string) {
+	return { meta: { class: { th: width, td: width } } }
+}
+
+const columns = computed(() => [
+	{
+		accessorKey: 'name',
+		get header() {
+			return t('Name')
+		},
+		...fixed('w-33'),
+	},
+	{
+		accessorKey: 'type',
+		get header() {
+			return t('Type')
+		},
+		...fixed('w-21'),
+	},
+	{
+		accessorKey: 'required',
+		get header() {
+			return t('Required')
+		},
+		...fixed('w-21'),
+	},
+	{
+		accessorKey: 'rule',
+		get header() {
+			return t('Rule')
+		},
+	},
+])
+</script>
+
+<template>
+	<UTable
+		:data="fields"
+		:columns="columns"
+		:ui="{
+			root: 'border border-default',
+			base: 'table-fixed',
+			thead: 'bg-elevated [&>tr]:border-t-0',
+			separator: 'hidden',
+			th: 'px-2.5 py-1.5 text-sm font-medium text-muted',
+			td: 'px-2.5 py-2 align-top text-sm whitespace-normal text-toned',
+			tbody: 'divide-y-0',
+			tr: 'border-t border-default',
+		}"
+	>
+		<template #name-cell="{ row }">
+			<span class="font-mono text-xs font-medium break-words text-highlighted">{{
+				row.original.name
+			}}</span>
+		</template>
+		<template #type-cell="{ row }">
+			<span class="font-mono text-xs">{{ row.original.type }}</span>
+		</template>
+		<template #required-cell="{ row }">
+			{{ row.original.required ? t('Yes') : t('No') }}
+		</template>
+		<template #rule-cell="{ row }">
+			<span class="text-pretty">{{ row.original.rule }}</span>
+		</template>
+	</UTable>
+</template>

web/src/components/ApiRouteRow.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HttpMethod } from '@/data/apiCatalogue'
+
+defineProps<{
+	method: HttpMethod
+	path: string
+	description: string
+}>()
+</script>
+
+<template>
+	<div
+		class="flex min-h-9 flex-col gap-0.5 px-3.5 py-2 lg:grid lg:grid-cols-[280px_minmax(0,1fr)_auto] lg:items-center lg:gap-4 lg:py-0"
+	>
+		<span class="flex min-w-0 items-center gap-2.5">
+			<span class="w-14 shrink-0 font-mono text-xs font-medium text-muted">{{ method }}</span>
+			<span class="min-w-0 truncate font-mono text-sm leading-4.25 text-toned">{{
+				path
+			}}</span>
+		</span>
+		<span class="text-muted">{{ description }}</span>
+		<slot />
+	</div>
+</template>

web/src/components/CodeBlock.vue

@@ -30,7 +30,7 @@ function onCopy() {
 
 <template>
 	<div class="bg-elevated">
-		<div class="flex h-8 items-center justify-between border-b border-default pr-2 pl-4">
+		<div class="flex h-8 items-center justify-between border-b border-default pr-1 pl-3">
 			<span class="font-mono text-xs leading-tight font-medium text-muted">{{
 				label ?? lang
 			}}</span>
@@ -41,7 +41,7 @@ function onCopy() {
 				size="xs"
 				:aria-label="t('Copy {0} example', [label ?? lang])"
 				aria-live="polite"
-				class="gap-1.5 px-1.5 font-medium text-toned"
+				class="gap-1.5 px-2 font-medium text-toned"
 				:ui="{ leadingIcon: 'size-3.5' }"
 				@click="onCopy"
 			>
@@ -51,13 +51,13 @@ function onCopy() {
 		<div
 			v-if="highlightedHtml"
 			tabindex="0"
-			class="shiki-block overflow-x-auto px-4 py-3.5 font-mono text-code whitespace-pre"
+			class="shiki-block overflow-x-auto px-3 py-3 font-mono text-code whitespace-pre"
 			v-html="highlightedHtml"
 		/>
 		<pre
 			v-else
 			tabindex="0"
-			class="overflow-x-auto px-4 py-3.5 font-mono text-code whitespace-pre text-default"
+			class="overflow-x-auto px-3 py-3 font-mono text-code whitespace-pre text-default"
 			>{{ code }}</pre
 		>
 	</div>

web/src/components/CodeText.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { splitInlineCode } from '@/lib/apiReference'
+
+defineProps<{
+	text: string
+}>()
+</script>
+
+<template>
+	<template v-for="(part, index) in splitInlineCode(text)" :key="index">
+		<code v-if="part.code" class="font-mono text-xs text-highlighted">{{ part.value }}</code>
+		<template v-else>{{ part.value }}</template>
+	</template>
+</template>

web/src/components/EndpointCard.vue

@@ -1,18 +1,42 @@
 <script setup lang="ts">
-import { t } from '@/i18n'
+import { t, translate } from '@/i18n'
 
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
+import ApiFieldTable from '@/components/ApiFieldTable.vue'
 import CodeBlock from '@/components/CodeBlock.vue'
+import {
+	RATE_LIMIT_SENTENCE,
+	NO_CONTENT_RESPONSE,
+	endpointExamples,
+	type ApiEndpoint,
+} from '@/data/apiCatalogue'
+import { CHIP_CLASS, METHOD_CLASS, endpointAnchor } from '@/lib/apiReference'
 
-defineProps<{
-	method: 'GET'
-	path: string
-	description: string
-	examples: { fetch: string; curl: string; response: string }
+const props = defineProps<{
+	endpoint: ApiEndpoint
+	origin: string
 }>()
 
+const open = ref(false)
 const activeTab = ref('fetch')
 
+const examples = computed(() => endpointExamples(props.endpoint, props.origin))
+const rowLabel = computed(
+	() => `${props.endpoint.method} ${props.endpoint.path}. ${props.endpoint.description}`,
+)
+const bodyTitle = computed(() => {
+	if (props.endpoint.bodyKind === 'multipart') {
+		return t('Request body · multipart/form-data, 1 file field')
+	}
+	return props.endpoint.bodyKind === 'json' ? t('Request body · JSON') : t('Request body')
+})
+const responseLabel = computed(() =>
+	props.endpoint.response === NO_CONTENT_RESPONSE ? 'HTTP' : 'JSON',
+)
+const responseLang = computed(() =>
+	props.endpoint.response === NO_CONTENT_RESPONSE ? 'text' : 'json',
+)
+
 const tabItems = [
 	{ label: 'fetch', value: 'fetch' },
 	{ label: 'curl', value: 'curl' },
@@ -26,55 +50,131 @@ const tabItems = [
 </script>
 
 <template>
-	<UCard
-		:ui="{
-			root: 'border border-default ring-0 divide-default',
-			header: 'p-4 sm:p-4',
-			body: 'p-0 sm:p-0',
-		}"
+	<UCollapsible
+		v-model:open="open"
+		:data-anchor="endpointAnchor(endpoint.id)"
+		class="scroll-mt-22 lg:scroll-mt-14 border-t border-default first:border-t-0"
+		:ui="{ content: 'border-t border-muted' }"
 	>
-		<template #header>
-			<div class="flex flex-col gap-2">
-				<div class="flex flex-wrap items-center gap-2.5">
-					<UBadge :label="method" color="neutral" variant="solid" class="font-mono" />
-					<span class="font-mono text-base font-medium text-highlighted">{{ path }}</span>
+		<button
+			type="button"
+			:aria-label="rowLabel"
+			class="flex min-h-11 w-full cursor-pointer flex-col items-stretch gap-1.5 px-3 py-3 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary lg:grid lg:grid-cols-[300px_minmax(0,1fr)_auto_16px] lg:items-center lg:gap-4 lg:px-4 lg:py-0"
+			:class="open ? 'bg-muted' : ''"
+		>
+			<span class="flex min-w-0 items-center gap-2.5">
+				<UBadge
+					:label="endpoint.method"
+					color="neutral"
+					variant="outline"
+					:class="METHOD_CLASS[endpoint.method]"
+				/>
+				<span class="min-w-0 truncate font-mono text-sm font-medium text-highlighted">{{
+					endpoint.path
+				}}</span>
+				<span class="flex-1 lg:hidden" />
+				<UIcon
+					:name="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+					class="size-4 shrink-0 text-muted lg:hidden"
+				/>
+			</span>
+			<span class="min-w-0 text-toned lg:truncate">{{ endpoint.description }}</span>
+			<span class="flex flex-wrap gap-1.5">
+				<UBadge
+					:label="translate(endpoint.access)"
+					color="neutral"
+					variant="outline"
+					:class="
+						endpoint.access === 'Owner only' ? CHIP_CLASS.strong : CHIP_CLASS.neutral
+					"
+				/>
+				<UBadge
+					:label="t('API key OK')"
+					icon="i-lucide-check"
+					color="success"
+					variant="soft"
+					:class="CHIP_CLASS.success"
+					:ui="{ leadingIcon: 'size-3' }"
+				/>
+			</span>
+			<UIcon
+				:name="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+				class="hidden size-4 text-muted lg:block"
+			/>
+		</button>
+
+		<template #content>
+			<div class="flex flex-col gap-3.5 px-3 pt-2.5 pb-4 lg:px-4">
+				<div class="flex flex-col gap-1.5">
+					<span class="font-semibold text-highlighted">{{ t('Query parameters') }}</span>
+					<ApiFieldTable v-if="endpoint.query.length > 0" :fields="endpoint.query" />
+					<span v-else class="text-muted">{{ t('No query parameters.') }}</span>
+				</div>
+
+				<div class="flex flex-col gap-1.5">
+					<span class="font-semibold text-highlighted">{{ bodyTitle }}</span>
+					<ApiFieldTable v-if="endpoint.body.length > 0" :fields="endpoint.body" />
+					<span v-else class="text-muted">{{ t('No request body.') }}</span>
+				</div>
+
+				<UTabs
+					v-model="activeTab"
+					:items="tabItems"
+					variant="link"
+					color="primary"
+					:ui="{
+						root: 'gap-0 border border-default',
+						list: 'gap-4 border-b border-default px-3 py-0 before:hidden',
+						trigger:
+							'h-9 grow-0 px-0 text-sm font-medium data-[state=inactive]:font-medium data-[state=inactive]:text-toned max-lg:h-11',
+						content: 'mt-0',
+					}"
+				>
+					<template #content="{ item }">
+						<CodeBlock
+							v-if="item.value === 'fetch'"
+							label="JavaScript"
+							lang="javascript"
+							:code="examples.fetch"
+						/>
+						<CodeBlock
+							v-else-if="item.value === 'curl'"
+							label="Shell"
+							lang="shell"
+							:code="examples.curl"
+						/>
+						<CodeBlock
+							v-else
+							:label="responseLabel"
+							:lang="responseLang"
+							:code="examples.response"
+						/>
+					</template>
+				</UTabs>
+
+				<div v-if="endpoint.rateLimited" class="flex gap-2.5 text-toned">
+					<UIcon name="i-lucide-info" class="mt-0.5 size-4 shrink-0 text-info" />
+					<span class="text-pretty">{{ translate(RATE_LIMIT_SENTENCE) }}</span>
+				</div>
+
+				<div class="flex flex-col gap-1.5">
+					<span class="font-semibold text-highlighted">{{ t('Errors') }}</span>
+					<div
+						v-for="error in endpoint.errors"
+						:key="`${error.status}-${error.caption}`"
+						:title="error.caption"
+						class="flex items-baseline gap-2.5"
+					>
+						<UBadge
+							:label="String(error.status)"
+							color="neutral"
+							variant="outline"
+							class="h-5 w-9 shrink-0 justify-center rounded-none border border-accented px-0 py-0 font-mono text-xs font-medium text-toned ring-0"
+						/>
+						<span class="min-w-0 text-pretty text-toned">{{ error.caption }}</span>
+					</div>
 				</div>
-				<span class="text-toned">{{ description }}</span>
 			</div>
 		</template>
-
-		<UTabs
-			v-model="activeTab"
-			:items="tabItems"
-			variant="link"
-			color="primary"
-			:ui="{
-				root: 'gap-0',
-				list: 'gap-5 border-b border-default px-4 py-0 before:hidden',
-				trigger: 'h-9 grow-0 px-0 text-sm font-normal data-[state=active]:font-medium',
-				content: 'mt-0',
-			}"
-		>
-			<template #content="{ item }">
-				<CodeBlock
-					v-if="item.value === 'fetch'"
-					label="JavaScript"
-					lang="javascript"
-					:code="examples.fetch"
-				/>
-				<pre
-					v-else-if="item.value === 'curl'"
-					tabindex="0"
-					class="overflow-x-auto bg-elevated px-4 py-3.5 font-mono text-code whitespace-pre text-default"
-					>{{ examples.curl }}</pre
-				>
-				<pre
-					v-else
-					tabindex="0"
-					class="overflow-x-auto bg-elevated px-4 py-3.5 font-mono text-code whitespace-pre text-default"
-					>{{ examples.response }}</pre
-				>
-			</template>
-		</UTabs>
-	</UCard>
+	</UCollapsible>
 </template>

web/src/components/SectionIndex.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+
+export interface IndexSection {
+	id: string
+	label: string
+}
+
+const props = defineProps<{
+	sections: IndexSection[]
+	active: string
+}>()
+
+const emit = defineEmits<{ select: [id: string] }>()
+
+const activeLabel = computed(
+	() => props.sections.find((section) => section.id === props.active)?.label ?? '',
+)
+
+function onJump(id: string) {
+	emit('select', id)
+}
+</script>
+
+<template>
+	<nav
+		:aria-label="t('On this page')"
+		class="sticky top-0 hidden w-42 shrink-0 flex-col gap-0.5 self-start border-l border-default lg:flex"
+	>
+		<span
+			class="px-3 pb-1.5 text-xs leading-5 font-medium tracking-wide text-muted uppercase"
+			>{{ t('On this page') }}</span
+		>
+		<button
+			v-for="section in sections"
+			:key="section.id"
+			type="button"
+			:aria-current="section.id === active ? 'true' : undefined"
+			class="-ml-px flex h-7 cursor-pointer items-center border-l-2 px-3 text-left hover:text-highlighted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"
+			:class="
+				section.id === active
+					? 'border-primary font-medium text-highlighted'
+					: 'border-transparent text-toned'
+			"
+			@click="onJump(section.id)"
+		>
+			{{ section.label }}
+		</button>
+	</nav>
+
+	<div
+		class="sticky -top-5 z-5 order-first -mx-4 -mt-5 mb-5 border-b border-default bg-default px-4 py-2 lg:hidden"
+	>
+		<USelectMenu
+			:model-value="active"
+			:items="sections"
+			value-key="id"
+			label-key="label"
+			trailing-icon="i-lucide-chevrons-up-down"
+			:search-input="false"
+			:aria-label="t('Jump to section')"
+			color="neutral"
+			variant="outline"
+			class="w-full"
+			:ui="{
+				base: 'h-11 rounded-none border border-accented bg-default px-3 text-base ring-0 hover:bg-default',
+				trailingIcon: 'size-4 text-muted',
+				content: 'max-h-none w-(--reka-popper-anchor-width) border border-default',
+				item: 'h-11 px-2.5 text-base text-highlighted',
+			}"
+			@update:model-value="onJump($event as string)"
+		>
+			<span class="flex min-w-0 flex-1 items-center gap-2">
+				<span class="text-muted">{{ t('Jump to') }}</span>
+				<span class="flex-1 truncate text-left font-medium text-highlighted">{{
+					activeLabel
+				}}</span>
+			</span>
+		</USelectMenu>
+	</div>
+</template>

web/src/components/SessionOnlyGroup.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { t, translate } from '@/i18n'
+
+import ApiRouteRow from '@/components/ApiRouteRow.vue'
+import type { PublicRow, SessionGroup } from '@/data/apiCatalogue'
+import { CHIP_CLASS } from '@/lib/apiReference'
+
+defineProps<{
+	groups: SessionGroup[]
+	publicRows: PublicRow[]
+}>()
+
+const SUBGROUP_TITLE_CLASS =
+	'px-3.5 pt-2 pb-1 text-xs font-medium tracking-wide text-muted uppercase'
+</script>
+
+<template>
+	<div class="flex flex-col gap-3">
+		<div class="border border-dashed border-accented bg-muted">
+			<div class="flex gap-2.5 px-3.5 py-3 text-pretty text-toned">
+				<UIcon name="i-lucide-lock" class="mt-0.5 size-4 shrink-0 text-muted" />
+				<span>{{
+					t(
+						'These routes are made for a signed-in browser session. With an API key, verify, DELETE /auth/register, /api-key/* and /system/* answer 403 "This action needs a real session."',
+					)
+				}}</span>
+			</div>
+			<div
+				v-for="group in groups"
+				:key="group.title"
+				class="border-t border-dashed border-accented"
+			>
+				<div :class="SUBGROUP_TITLE_CLASS">{{ translate(group.title) }}</div>
+				<ApiRouteRow
+					v-for="row in group.rows"
+					:key="`${row.method} ${row.path}`"
+					:method="row.method"
+					:path="row.path"
+					:description="row.description"
+					data-session-row
+				>
+					<UBadge
+						v-if="row.answers403"
+						:label="t('Session only')"
+						icon="i-lucide-lock"
+						color="neutral"
+						variant="outline"
+						:class="[CHIP_CLASS.dashed, 'self-start lg:self-center']"
+						:ui="{ leadingIcon: 'size-3' }"
+					/>
+				</ApiRouteRow>
+			</div>
+		</div>
+
+		<div class="border border-default bg-default">
+			<div :class="SUBGROUP_TITLE_CLASS">{{ t('Public auth flow') }}</div>
+			<ApiRouteRow
+				v-for="row in publicRows"
+				:key="`${row.method} ${row.path}`"
+				:method="row.method"
+				:path="row.path"
+				:description="row.description"
+				data-public-row
+			>
+				<UBadge
+					:label="t('Public')"
+					color="neutral"
+					variant="outline"
+					:class="[CHIP_CLASS.neutral, 'self-start lg:self-center']"
+				/>
+			</ApiRouteRow>
+		</div>
+	</div>
+</template>