@antelopejs/dms-mailing 0.4.1 → 0.5.0

package/README.md

@@ -12,7 +12,7 @@ dashboard and settings. It owns the data (tenant-scoped Mongo tables), renders
 e-mails through the DMS html-render chain and sends them through
 `@antelopejs/interface-email`.
 
-The module targets `@antelopejs/dms` 0.7 (0.7.21 or later) and `@antelopejs/dms-frontend` 0.5 (0.5.5 or later).
+The module targets `@antelopejs/dms` 0.9, `@antelopejs/interface-dms` 0.7 and `@antelopejs/dms-frontend` 0.6. Every read goes through the DMS's `useApiData`: what a page renders is read by the server render and handed to the browser; what a drawer, a dialog, a preview frame or the editor shows is read when it opens or asks (`immediate: false`, `useMailingReads`).
 Like every DMS module, its pages live in the module's own sidebar (Mailing:
 Overview, Templates, Sends; Configure: Settings, Suppression list) and are
 reserved to the platform owner. The design decisions behind the v2 screens are recorded in

package/frontend-vue/app/components/CategoriesInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import draggable from 'vuedraggable'
 import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
-import { useMailingApi } from '../composables/useMailingApi'
+import { useCategoryUsage } from '../composables/useMailingReads'
 import { isMarketingCategory } from '../utils/system-variables'
 import {
 	CATEGORY_ICONS,
@@ -53,7 +53,6 @@ const MOVE_FIELD_COMPONENT = 'DmsSelect'
 const LABEL_PART = 'label'
 const ROW_FIELD_UI = { error: 'mt-1 ps-9 text-[12px]' }
 
-const api = useMailingApi()
 const { t } = useI18n()
 const localized = useLocalizedDefaults()
 const { confirm } = useConfirm()
@@ -65,7 +64,11 @@ const root = ref<HTMLElement | null>(null)
 const source = computed(() => props.modelValue ?? props.initialValue ?? [])
 const rows = ref<EditableCategory[]>(toRows(source.value))
 const removed = ref<CategoryEntry[]>(movesOf(source.value))
-const usage = ref<Record<string, number>>({})
+const usageRead = useCategoryUsage()
+/** Templates per category; none known while the read is missing or failed. */
+const usage = computed<Record<string, number>>(() =>
+	usageRead.error.value ? {} : (usageRead.data.value?.counts ?? {}),
+)
 const pickerOpen = ref<string | null>(null)
 let lastEmitted = serializeCategories(currentEntries())
 
@@ -216,14 +219,6 @@ async function moveBy(index: number, offset: number): Promise<void> {
 	handles?.[moved.index]?.focus()
 }
 
-async function loadUsage(): Promise<void> {
-	try {
-		usage.value = (await api.categoryUsage()).counts
-	} catch {
-		usage.value = {}
-	}
-}
-
 watch(source, (value) => {
 	if (serializeCategories(value) === lastEmitted) return
 	rows.value = toRows(value)
@@ -238,11 +233,9 @@ watch(
 		rows.value
 			.filter((row) => row.isNew && saved.has(row.id))
 			.forEach((row) => (row.isNew = false))
-		void loadUsage()
+		void usageRead.refresh()
 	},
 )
-
-onMounted(loadUsage)
 </script>
 
 <template>

package/frontend-vue/app/components/DuplicateModal.vue

@@ -2,6 +2,10 @@
 import FormFieldRow from '../build/components/FormFieldRow.vue'
 import FormRows from '../build/components/FormRows.vue'
 import { useMailingApi } from '../composables/useMailingApi'
+import {
+	useTemplateContentRead,
+	useTemplateListRead,
+} from '../composables/useMailingReads'
 import {
 	HTTP_CONFLICT,
 	apiErrorMessage,
@@ -32,6 +36,8 @@ const { t } = useI18n()
 const { processApiMessage } = useTranslation()
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readTemplates = useTemplateListRead()
+const readContent = useTemplateContentRead(templateId)
 const source = ref<TemplateRow | null>(props.rowData ?? null)
 const takenSlugs = ref(new Set<string>())
 const name = ref('')
@@ -49,13 +55,13 @@ function prefill(template: TemplateRow): void {
 }
 
 onMounted(async () => {
-	const list = await api.listTemplates().catch(() => ({ results: [] }))
+	const list = await readTemplates().catch(() => ({ results: [] }))
 	takenSlugs.value = new Set(list.results.map((row: TemplateRow) => row.slug))
 	source.value ??=
 		list.results.find((row: TemplateRow) => row._id === templateId.value) ??
 		null
 	if (!source.value && templateId.value) {
-		const detail = await api.templateContent(templateId.value).catch(() => null)
+		const detail = await readContent().catch(() => null)
 		source.value = detail?.template ?? null
 	}
 	if (source.value) prefill(source.value)
@@ -174,7 +180,7 @@ async function submit(): Promise<void> {
 						:ui="{ base: 'font-mono' }"
 						:disabled="loading"
 						:trailing-icon="slugIssue ? undefined : 'i-ph-check-circle'"
-						@update:model-value="(value) => onSlugInput(String(value))"
+						@update:model-value="(value: unknown) => onSlugInput(String(value))"
 					/>
 				</template>
 			</FormFieldRow>

package/frontend-vue/app/components/Editor.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import type { TemplateContentResponse } from '../types/mailing'
-import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateContentRead } from '../composables/useMailingReads'
 import { useRecordLabel } from '../composables/useEditorContext'
 import { templateIdFrom } from '../utils/editor-route'
 import { TEMPLATES_PATH } from '../utils/pages'
@@ -15,10 +15,10 @@ const props = defineProps<Props>()
 
 const { t } = useI18n()
 const route = useDmsRoute()
-const api = useMailingApi()
 const setRecordLabel = useRecordLabel()
 
 const templateId = computed(() => templateIdFrom(props.routeParams, route.path))
+const readContent = useTemplateContentRead(templateId)
 const locale = ref<string | null>(
 	route.query.locale ? String(route.query.locale) : null,
 )
@@ -31,7 +31,7 @@ const generation = ref(0)
 async function load(): Promise<void> {
 	failed.value = false
 	try {
-		loaded.value = await api.templateContent(templateId.value)
+		loaded.value = await readContent()
 		setRecordLabel(loaded.value.template.name)
 		generation.value += 1
 	} catch {

package/frontend-vue/app/components/NewTemplateModal.vue

@@ -5,6 +5,10 @@ import FormRows from '../build/components/FormRows.vue'
 import NewTemplateSourceTile from './NewTemplateSourceTile.vue'
 import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
 import { useMailingApi } from '../composables/useMailingApi'
+import {
+	useStartersRead,
+	useTemplateListRead,
+} from '../composables/useMailingReads'
 import {
 	HTTP_CONFLICT,
 	apiErrorMessage,
@@ -85,6 +89,8 @@ const source = ref<SourceChoice>(
 const isSubmitted = ref(false)
 const saving = ref(false)
 const templates = ref<TemplateRow[]>([])
+const readTemplates = useTemplateListRead()
+const readStarters = useStartersRead()
 const localized = useLocalizedDefaults()
 const storedStarters = ref<StarterSummary[]>([])
 const starters = computed(() => localized.starters(storedStarters.value))
@@ -94,8 +100,8 @@ const templateSearch = ref('')
 
 onMounted(async () => {
 	const [templateList, starterList] = await Promise.all([
-		api.listTemplates().catch(() => ({ results: [] as TemplateRow[] })),
-		api.starters().catch(() => ({ starters: [] as StarterSummary[] })),
+		readTemplates().catch(() => ({ results: [] as TemplateRow[] })),
+		readStarters().catch(() => ({ starters: [] as StarterSummary[] })),
 	])
 	templates.value = templateList.results
 	storedStarters.value = starterList.starters
@@ -324,7 +330,7 @@ async function submit(): Promise<void> {
 							:ui="{ base: 'font-mono' }"
 							:trailing-icon="slugIssue ? undefined : 'i-ph-check-circle'"
 							:aria-invalid="Boolean(slugError)"
-							@update:model-value="(value) => onSlugInput(String(value))"
+							@update:model-value="(value: unknown) => onSlugInput(String(value))"
 						/>
 						<UBadge
 							color="neutral"

package/frontend-vue/app/components/OverviewGate.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { useMailingApi } from '../composables/useMailingApi'
-import { useSetupHidesPeriod } from '../composables/useOverviewSetup'
+import { useSetupFacts } from '../composables/useMailingReads'
 import {
 	isSetupComplete,
 	needsSetup,
 	setupSteps,
-	type SetupFacts,
 	type SetupStep,
 	type SetupStepState,
 } from '../utils/overview-setup'
@@ -13,10 +11,10 @@ import type { Component } from 'vue'
 import type { MailingComponentProps } from '../types/component'
 
 defineProps<MailingComponentProps>()
+defineOptions({ inheritAttrs: false })
 
 type GateState = 'loading' | 'error' | 'ready'
 
-const OVERVIEW_PERIOD_SCOPE = 'mailing-overview'
 const NEW_TEMPLATE_MODAL = 'MailingNewTemplateModal'
 const NEW_TEMPLATE_MODAL_SIZE = 'lg'
 const KEY_PREFIX = 'dms_mailing.setup.'
@@ -34,15 +32,25 @@ const STEP_BUTTON_VARIANTS: Record<SetupStepState, 'solid' | 'outline'> = {
 	todo: 'outline',
 }
 
-const api = useMailingApi()
 const { t } = useI18n()
 const { open: openModal } = useModal()
-const hidesPeriod = useSetupHidesPeriod(OVERVIEW_PERIOD_SCOPE)
 
-const facts = ref<SetupFacts | null>(null)
-const state = ref<GateState>('loading')
+const { data: facts, error, status, refresh } = useSetupFacts()
+/**
+ * The header's period selector sets up once the dashboard has: a server
+ * render, which renders the dashboard once the facts are in, would otherwise
+ * set the selector up first and render the cards with a period the browser's
+ * cards do not have yet as they hydrate.
+ */
+const DashboardRendered = holdPageHeaderActions()
 const isResumed = ref(false)
 
+/** A failure shows once its retry is over; the facts read last stay meanwhile. */
+const state = computed<GateState>(() => {
+	if (facts.value) return 'ready'
+	return error.value && status.value !== 'pending' ? 'error' : 'loading'
+})
+
 const steps = computed<SetupStep[]>(() =>
 	facts.value ? setupSteps(facts.value) : [],
 )
@@ -63,40 +71,22 @@ const errorActions = computed(() => [
 	{
 		label: key('retry'),
 		icon: 'i-ph-arrows-clockwise',
-		onClick: () => void load(),
+		onClick: () => void refresh(),
 	},
 ])
 
 const stepDescription = (step: SetupStep): string =>
 	key(`steps.${step.id}.${step.state === 'done' ? 'done' : 'description'}`)
 
-async function load(): Promise<void> {
-	state.value = 'loading'
-	try {
-		facts.value = await api.setupFacts()
-		state.value = 'ready'
-	} catch {
-		state.value = 'error'
-	}
-}
-
 function createTemplate(): void {
 	const modal = openModal({
 		title: t('dms_mailing.setup.create_template'),
 		component: resolveComponent(NEW_TEMPLATE_MODAL) as Component,
 		size: NEW_TEMPLATE_MODAL_SIZE,
 	})
-	void modal.result.then(load, load)
+	const reread = () => refresh()
+	void modal.result.then(reread, reread)
 }
-
-watch(isBlocking, (blocking) => {
-	hidesPeriod.value = blocking
-})
-
-onMounted(load)
-onBeforeUnmount(() => {
-	hidesPeriod.value = false
-})
 </script>
 
 <template>
@@ -217,4 +207,5 @@ onBeforeUnmount(() => {
 
 		<slot v-if="showsDashboard" />
 	</div>
+	<DashboardRendered />
 </template>

package/frontend-vue/app/components/PageHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMailingApi } from '../composables/useMailingApi'
+import { useProviderInfo } from '../composables/useMailingReads'
 import { useSetupHidesPeriod } from '../composables/useOverviewSetup'
 import { presetShortLabelKey } from '../utils/period'
 import type { Component } from 'vue'
@@ -26,13 +26,18 @@ const props = withDefaults(defineProps<PageHeaderProps>(), {
 	showProvider: true,
 })
 
-const api = useMailingApi()
 const { t } = useI18n()
 
 const StatusPill = resolveComponent('DmsStatusPill') as Component
 const PeriodSelector = resolveComponent('DmsPeriodSelector') as Component
 
-const provider = ref<ProviderInfo | null>(null)
+/** Shown as "no provider" when the read fails. */
+const NO_PROVIDER: ProviderInfo = { name: '', connected: false, features: null }
+
+const providerRead = useProviderInfo(() => props.showProvider)
+const provider = computed<ProviderInfo | null>(() =>
+	providerRead.error.value ? NO_PROVIDER : providerRead.data.value,
+)
 const hidesPeriod = useSetupHidesPeriod(props.periodScope)
 
 const presetLabels = computed(() =>
@@ -82,15 +87,6 @@ function renderPeriod() {
 }
 
 usePageHeaderActions(() => [renderProvider(), renderPeriod()])
-
-onMounted(async () => {
-	if (!props.showProvider) return
-	try {
-		provider.value = await api.provider()
-	} catch {
-		provider.value = { name: '', connected: false, features: null }
-	}
-})
 </script>
 
 <template>

package/frontend-vue/app/components/RealSendModal.vue

@@ -4,6 +4,7 @@ import { onBeforeUnmount } from 'vue'
 import FormFieldRow from '../build/components/FormFieldRow.vue'
 import FormRows from '../build/components/FormRows.vue'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useTemplateContentRead } from '../composables/useMailingReads'
 import type { SendResult } from '../composables/useMailingApi'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import { apiErrorMessage } from '../utils/api-error'
@@ -64,6 +65,7 @@ const { uniqueLocales } = useUniqueLocales()
 const overlays = useTemplateDrawer()
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readContent = useTemplateContentRead(templateId)
 const detail = ref<TemplateContentResponse | null>(null)
 const loading = ref(true)
 const recipients = ref<string[]>([])
@@ -104,7 +106,7 @@ const missingRequired = computed(() =>
 onMounted(async () => {
 	if (!templateId.value) return
 	try {
-		detail.value = await api.templateContent(templateId.value)
+		detail.value = await readContent()
 		values.value = initialSendValues(fields.value, detail.value.testData)
 		locale.value = detail.value.fallbackLocale
 	} catch (error) {

package/frontend-vue/app/components/RenderingModal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useMailingApi } from '../composables/useMailingApi'
+import { useSendHtmlRead, useSendRead } from '../composables/useMailingReads'
 import type { SendHtmlResponse, SendRow } from '../types/mailing'
 
 type RenderingView = 'desktop' | 'mobile' | 'html'
@@ -44,7 +44,6 @@ const FRAME_WIDTHS: Record<RenderingView, string> = {
 	html: '100%',
 }
 
-const api = useMailingApi()
 const { t, locale } = useI18n()
 
 const view = ref<RenderingView>('desktop')
@@ -54,6 +53,8 @@ const loading = ref(false)
 const failed = ref(false)
 
 const sendIdValue = computed(() => props.rowData?._id ?? props.sendId ?? '')
+const readSend = useSendRead(sendIdValue)
+const readHtml = useSendHtmlRead(sendIdValue)
 const key = (path: string, params: Record<string, unknown> = {}): string =>
 	t(`${KEY_PREFIX}${path}`, params)
 
@@ -85,7 +86,7 @@ const meta = computed(() => {
 
 async function loadSend(): Promise<void> {
 	if (send.value) return
-	const detail = await api.send(sendIdValue.value)
+	const detail = await readSend()
 	send.value = detail.send
 }
 
@@ -94,10 +95,7 @@ async function load(): Promise<void> {
 	loading.value = true
 	failed.value = false
 	try {
-		const [html] = await Promise.all([
-			api.sendHtml(sendIdValue.value),
-			loadSend(),
-		])
+		const [html] = await Promise.all([readHtml(), loadSend()])
 		rendering.value = html
 	} catch (error) {
 		failed.value = true

package/frontend-vue/app/components/RetentionInput.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useDebounceFn } from '@vueuse/core'
-import { useMailingApi } from '../composables/useMailingApi'
+import { refDebounced } from '@vueuse/core'
+import { useRetentionPreview } from '../composables/useMailingReads'
 import {
 	clampRetention,
-	formatClock,
+	CLOCK_FORMAT,
 	isWithinADay,
 	MAX_RETENTION_DAYS,
 	MIN_RETENTION_DAYS,
@@ -35,8 +35,8 @@ const DATE_FORMAT: Intl.DateTimeFormatOptions = {
 	day: 'numeric',
 }
 
-const api = useMailingApi()
 const { t, locale } = useI18n()
+const { dateTimeFormat } = useRegionalFormat()
 const { confirm } = useConfirm()
 const form = useEnclosingForm()
 
@@ -56,7 +56,13 @@ const isCustom = computed(
 		isCustomPicked.value ||
 		(days.value !== null && retentionChoice(days.value) === RETENTION_CUSTOM),
 )
-const preview = ref<RetentionPreview | null>(null)
+/** The days the preview reads, once the choice holds still. */
+const previewDays = refDebounced(days, PREVIEW_DEBOUNCE_MS)
+const previewRead = useRetentionPreview(previewDays)
+/** A failed read shows no preview. */
+const preview = computed<RetentionPreview | null>(() =>
+	previewRead.error.value ? null : previewRead.data.value,
+)
 
 const key = (
 	path: string,
@@ -99,8 +105,8 @@ function previewParams(value: RetentionPreview): Record<string, unknown> {
 	return {
 		when: isWithinADay(value.nextRunAt, new Date())
 			? key('tonight')
-			: new Date(value.nextRunAt).toLocaleDateString(locale.value, DATE_FORMAT),
-		time: formatClock(value.nextRunAt, locale.value),
+			: dateTimeFormat(DATE_FORMAT).format(new Date(value.nextRunAt)),
+		time: dateTimeFormat(CLOCK_FORMAT).format(new Date(value.nextRunAt)),
 		count: new Intl.NumberFormat(locale.value).format(value.count),
 		duration: key('days', { count: value.days }, value.days),
 	}
@@ -148,22 +154,6 @@ function guardSubmit(): boolean {
 	return false
 }
 
-const loadPreview = useDebounceFn(async (value: number) => {
-	try {
-		preview.value = await api.retentionPreview(value)
-	} catch {
-		preview.value = null
-	}
-}, PREVIEW_DEBOUNCE_MS)
-
-watch(
-	days,
-	(value) => {
-		if (value) void loadPreview(value)
-	},
-	{ immediate: true },
-)
-
 watch(
 	() => props.modelValue,
 	(value) => {

package/frontend-vue/app/components/SendDrawer.vue

@@ -2,6 +2,7 @@
 import { TEMPLATES_PATH } from '../utils/pages'
 import { useClipboard } from '@vueuse/core'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useProviderRead, useSendRead } from '../composables/useMailingReads'
 import { useReplayToast } from '../composables/useReplayToast'
 import {
 	describeProblem,
@@ -90,6 +91,8 @@ const { copy } = useClipboard()
 const KeyValueList = resolveComponent('DmsKeyValueList') as Component
 
 const sendId = computed(() => props.rowData?._id ?? props.sendId ?? '')
+const readSend = useSendRead(sendId)
+const readProvider = useProviderRead()
 const detail = ref<SendDetailResponse | null>(null)
 const tracking = ref<TimelineTracking | null>(null)
 const loading = ref(false)
@@ -231,7 +234,7 @@ async function load(): Promise<void> {
 	if (!sendId.value) return
 	loading.value = true
 	try {
-		detail.value = await api.send(sendId.value)
+		detail.value = await readSend()
 	} catch (error) {
 		useApiError(error)
 	} finally {
@@ -242,7 +245,7 @@ async function load(): Promise<void> {
 /** The provider's tracking, so the timeline waits only for what it reports. */
 async function loadTracking(): Promise<void> {
 	try {
-		const provider = await api.provider()
+		const provider = await readProvider()
 		tracking.value = provider.features
 			? {
 					openTracking: !!provider.features.openTracking,

package/frontend-vue/app/components/StarterGallery.vue

@@ -2,6 +2,7 @@
 import { useTemplateCategories } from '../composables/useTemplateCategories'
 import { useLocalizedDefaults } from '../composables/useLocalizedDefaults'
 import { useMailingApi } from '../composables/useMailingApi'
+import { useStarters } from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import {
 	HTTP_CONFLICT,
@@ -24,18 +25,19 @@ const { processApiMessage } = useTranslation()
 const overlays = useTemplateDrawer()
 
 const localized = useLocalizedDefaults()
-const storedStarters = ref<StarterSummary[]>([])
-const starters = computed(() => localized.starters(storedStarters.value))
+const starterList = useStarters()
+/** The starters, none when the read failed. */
+const starters = computed(() =>
+	localized.starters(
+		starterList.error.value ? [] : (starterList.data.value?.starters ?? []),
+	),
+)
 const { categories } = useTemplateCategories()
-const loading = ref(true)
+const loading = computed(
+	() => !starterList.data.value && !starterList.error.value,
+)
 const creatingId = ref<string | null>(null)
 
-onMounted(async () => {
-	const starterList = await api.starters().catch(() => ({ starters: [] }))
-	storedStarters.value = starterList.starters
-	loading.value = false
-})
-
 function knownCategory(id: string): string | undefined {
 	return categories.value.some((category) => category.id === id)
 		? id

package/frontend-vue/app/components/TemplateCard.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { formatCardDate, formatCardSince, firstName } from '../utils/gallery'
+import {
+	CARD_DATE_FORMAT,
+	formatCardDate,
+	formatCardSince,
+	firstName,
+} from '../utils/gallery'
 import { localeChipClass, localeChips } from '../utils/locales'
 import {
 	cardFooter,
@@ -47,6 +52,7 @@ const emit = defineEmits<{
 }>()
 
 const { t, locale } = useI18n()
+const { dateTimeFormat } = useRegionalFormat()
 const { uniqueLocales } = useUniqueLocales()
 
 const isLive = computed(() => props.template.status === 'live')
@@ -85,8 +91,12 @@ const isNeverSent = computed(() => props.attention.includes('never_sent'))
 const footer = computed(() => cardFooter(props.template, props.stats))
 
 const footerDate = computed(() =>
-	formatCardDate(footer.value.at, new Date(), locale.value, (date) =>
-		t('dms_mailing.common.on_date', { date }),
+	formatCardDate(
+		footer.value.at,
+		new Date(),
+		locale.value,
+		(date) => t('dms_mailing.common.on_date', { date }),
+		dateTimeFormat(CARD_DATE_FORMAT),
 	),
 )
 
@@ -107,7 +117,12 @@ const openRateLabel = computed(() =>
 
 /** "live for 1 hr" within a day, "live since Sep 27" after. */
 const liveSince = computed(() =>
-	formatCardSince(footer.value.at, new Date(), locale.value),
+	formatCardSince(
+		footer.value.at,
+		new Date(),
+		locale.value,
+		dateTimeFormat(CARD_DATE_FORMAT),
+	),
 )
 
 const FOOTER_TEXTS: Partial<Record<CardFooterKind, () => string>> = {

package/frontend-vue/app/components/TemplateDrawer.vue

@@ -5,6 +5,10 @@ import {
 	useMailingApi,
 	type TemplateDetails,
 } from '../composables/useMailingApi'
+import {
+	useTemplateContentRead,
+	useTemplatePerformanceRead,
+} from '../composables/useMailingReads'
 import { useTemplateDrawer } from '../composables/useTemplateDrawer'
 import { apiErrorMessage } from '../utils/api-error'
 import { formatCardDate } from '../utils/gallery'
@@ -106,6 +110,8 @@ const LIFECYCLE: Record<LifecycleAction, LifecycleSpec> = {
 }
 
 const templateId = computed(() => props.rowData?._id ?? props.templateId ?? '')
+const readContent = useTemplateContentRead(templateId)
+const readPerformance = useTemplatePerformanceRead(templateId)
 const detail = ref<TemplateContentResponse | null>(null)
 const performance = ref<TemplatePerformance | null>(null)
 const loading = ref(true)
@@ -129,8 +135,8 @@ async function load(): Promise<void> {
 	loading.value = true
 	try {
 		const [content, stats] = await Promise.all([
-			api.templateContent(templateId.value),
-			api.performance(templateId.value).catch(() => null),
+			readContent(),
+			readPerformance().catch(() => null),
 		])
 		detail.value = content
 		performance.value = stats