feat: SEO SPA editor integration

web/src/composables/useMediaNames.ts

@@ -0,0 +1,34 @@
+import { ref } from 'vue'
+import { useApi } from '@/composables/useApi'
+import type { MediaItem, MediaListResponse } from '@/composables/useMedia'
+
+const LOOKUP_QUERY = 'page=1&size=100&sort=newest'
+
+export function useMediaNames() {
+	const { request } = useApi()
+	const items = ref<Record<number, MediaItem>>({})
+
+	function remember(item: MediaItem) {
+		items.value = { ...items.value, [item.id]: item }
+	}
+
+	async function resolve(ids: (number | null | undefined)[]) {
+		const wanted = ids.filter((id): id is number => typeof id === 'number')
+		if (wanted.every((id) => id in items.value)) {
+			return
+		}
+		try {
+			const page = await request<MediaListResponse>(`/v1/media/?${LOOKUP_QUERY}`)
+			const found = (page?.items ?? []).filter((item) => wanted.includes(item.id))
+			found.forEach(remember)
+		} catch {
+			return
+		}
+	}
+
+	function itemOf(id: number | null | undefined) {
+		return typeof id === 'number' ? (items.value[id] ?? null) : null
+	}
+
+	return { itemOf, remember, resolve }
+}