@antelopejs/dms-mailing 0.6.1 → 0.7.1

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

@@ -412,208 +412,231 @@ onMounted(() => {
 
 <template>
 	<!--
-		As tall as the side panel's body: the send scrolls inside, the actions
-		stay under it at the bottom, with nothing passing beneath them.
+		The drawer's body is the scroll container and sets the inset: the send
+		adds no padding of its own. It grows in the body's flex column, so the
+		footer sits at the bottom of the drawer, and sticks there once the send
+		scrolls.
 	-->
-	<div class="flex h-full min-h-0 flex-col">
-		<USkeleton v-if="loading && !send" class="m-5 h-64" />
+	<div class="@container flex flex-1 flex-col gap-6" data-send-drawer>
+		<USkeleton v-if="loading && !send" class="h-64" />
 
 		<template v-else-if="send">
-			<div class="min-h-0 flex-1 overflow-y-auto">
-				<header
-					class="border-default flex flex-col gap-1.5 border-b px-5 pb-4 pt-1"
+			<header class="border-default flex flex-col gap-1.5 border-b pb-4">
+				<div class="flex items-center gap-1">
+					<DmsEyebrow
+						class="min-w-0 flex-1"
+						truncate
+						:label="key('eyebrow', { id: shortSendId(send._id) })"
+					/>
+					<UButton
+						icon="i-ph-link"
+						color="neutral"
+						variant="ghost"
+						size="sm"
+						:aria-label="key('copy_link')"
+						@click="copyLink"
+					/>
+				</div>
+				<h3
+					class="text-highlighted flex flex-wrap items-center gap-2 text-lg font-semibold"
 				>
-					<div class="flex items-center gap-1">
-						<DmsEyebrow
-							class="min-w-0 flex-1"
-							truncate
-							:label="key('eyebrow', { id: shortSendId(send._id) })"
-						/>
+					<span class="min-w-0 truncate">
+						{{ send.recipientName || send.recipientEmail }}
+					</span>
+					<DmsStatusPill
+						:tone="SEND_STATUS_TONES[send.status]"
+						:label="t(`dms_mailing.sends.status.${send.status}`)"
+					/>
+					<DmsStatusPill
+						v-if="send.isTest"
+						tone="warning"
+						dot="none"
+						size="sm"
+						uppercase
+						:label="key('test')"
+					/>
+				</h3>
+				<!-- The address gives way first: the date drops to its own line
+					rather than being cut off with it. -->
+				<p
+					class="text-muted flex flex-wrap gap-x-1.5 text-[12.5px]"
+					data-send-recipient
+				>
+					<span class="min-w-0 truncate font-mono" :title="send.recipientEmail">
+						{{ send.recipientEmail }}
+					</span>
+					<span class="whitespace-nowrap">
+						· {{ dateOf(send.createdAt, DATE_FORMAT) }}
+					</span>
+				</p>
+			</header>
+
+			<section class="flex flex-col gap-3">
+				<!-- Three short values: side by side from a 28rem group (a 600px
+				     drawer) rather than the DmsStatGroup's own 36rem (dms#399). -->
+				<DmsStatGroup
+					layout="joined"
+					:columns="3"
+					columns-from="md"
+					:items="stats"
+				/>
+				<DmsBanner
+					v-if="problem"
+					:tone="isResolved ? 'info' : problemTone(problem.kind)"
+					:size="isResolved ? 'sm' : undefined"
+					:icon="problem.icon"
+					:title="t(problem.titleKey, problem.params)"
+					:description="
+						isResolved ? undefined : t(problem.descriptionKey, problem.params)
+					"
+					data-problem-banner
+				/>
+				<DmsBanner
+					v-if="suppression"
+					:tone="suppression.tone"
+					size="sm"
+					:icon="suppression.icon"
+					:title="t(suppression.titleKey, suppression.params)"
+				>
+					<template #description>
+						<span
+							class="text-highlighted block truncate font-mono text-[12px]"
+							:title="suppression.params.email"
+							data-suppressed-address
+						>
+							{{ suppression.params.email }}
+						</span>
+						{{ t(suppression.descriptionKey, suppression.params) }}
+					</template>
+					<template v-if="suppression.hasListLink" #actions>
 						<UButton
-							icon="i-ph-link"
+							size="xs"
 							color="neutral"
-							variant="ghost"
-							size="sm"
-							:aria-label="key('copy_link')"
-							@click="copyLink"
-						/>
-					</div>
-					<h3
-						class="text-highlighted flex flex-wrap items-center gap-2 text-lg font-semibold"
-					>
-						<span class="min-w-0 truncate">
-							{{ send.recipientName || send.recipientEmail }}
-						</span>
-						<DmsStatusPill
-							:tone="SEND_STATUS_TONES[send.status]"
-							:label="t(`dms_mailing.sends.status.${send.status}`)"
+							variant="outline"
+							trailing-icon="i-ph-arrow-right"
+							:label="t('dms_mailing.suppressions.notice.open_list')"
+							@click="openSuppressionList"
 						/>
-						<DmsStatusPill
-							v-if="send.isTest"
-							tone="warning"
-							dot="none"
-							size="sm"
-							uppercase
-							:label="key('test')"
-						/>
-					</h3>
-					<p class="text-muted truncate text-[12.5px]">
-						<span class="font-mono">{{ send.recipientEmail }}</span>
-						· {{ dateOf(send.createdAt, DATE_FORMAT) }}
-					</p>
-				</header>
-
-				<div class="flex flex-1 flex-col gap-6 p-5">
-					<section class="flex flex-col gap-3">
-						<DmsStatGroup layout="joined" :columns="3" :items="stats" />
-						<DmsBanner
-							v-if="problem"
-							:tone="isResolved ? 'info' : problemTone(problem.kind)"
-							:size="isResolved ? 'sm' : undefined"
-							:icon="problem.icon"
-							:title="t(problem.titleKey, problem.params)"
-							:description="
-								isResolved
-									? undefined
-									: t(problem.descriptionKey, problem.params)
-							"
-							data-problem-banner
+					</template>
+				</DmsBanner>
+				<DmsBanner
+					v-for="link in linkedSends"
+					:key="link.id"
+					tone="info"
+					size="sm"
+					icon="i-ph-arrow-clockwise"
+					:title="link.text"
+				>
+					<template #actions>
+						<UButton
+							v-if="showRow"
+							size="xs"
+							color="neutral"
+							variant="outline"
+							trailing-icon="i-ph-arrow-right"
+							:label="key('see_send')"
+							@click="void showSend(link.id)"
 						/>
-						<DmsBanner
-							v-if="suppression"
-							:tone="suppression.tone"
-							size="sm"
-							:icon="suppression.icon"
-							:title="t(suppression.titleKey, suppression.params)"
+					</template>
+				</DmsBanner>
+			</section>
+
+			<!--
+				Side by side once the drawer is resized wide:
+				both are short lists, and the data sent below keeps the full width.
+			-->
+			<div class="@2xl:grid-cols-2 grid gap-6" data-send-details-grid>
+				<section class="flex min-w-0 flex-col gap-2">
+					<DmsEyebrow :label="key('timeline')" />
+					<ol class="flex flex-col">
+						<li
+							v-for="item in timeline"
+							:key="item.id"
+							:class="item.isPending && 'opacity-50'"
 						>
-							<template #description>
+							<DmsActivityItem
+								:icon="item.icon"
+								:icon-color="item.isPending ? 'neutral' : item.tone"
+								:subtitle="
+									item.isPending ? key('pending') : item.detail || undefined
+								"
+								:mono="item.isDetailMono && !item.isPending"
+								:trailing="stepTime(item)"
+								:interactive="false"
+								wrap
+							>
 								<span
-									class="text-highlighted block truncate font-mono text-[12px]"
-									:title="suppression.params.email"
-									data-suppressed-address
+									:class="
+										item.tone === 'error' && !item.isPending
+											? 'text-error'
+											: undefined
+									"
 								>
-									{{ suppression.params.email }}
+									{{ stepTitle(item) }}
 								</span>
-								{{ t(suppression.descriptionKey, suppression.params) }}
-							</template>
-							<template v-if="suppression.hasListLink" #actions>
-								<UButton
-									size="xs"
-									color="neutral"
-									variant="outline"
-									trailing-icon="i-ph-arrow-right"
-									:label="t('dms_mailing.suppressions.notice.open_list')"
-									@click="openSuppressionList"
-								/>
-							</template>
-						</DmsBanner>
-						<DmsBanner
-							v-for="link in linkedSends"
-							:key="link.id"
-							tone="info"
+							</DmsActivityItem>
+						</li>
+					</ol>
+				</section>
+
+				<section class="flex min-w-0 flex-col gap-2">
+					<DmsEyebrow :label="key('origin')" />
+					<div
+						class="border-default divide-default divide-y overflow-hidden rounded-lg border"
+					>
+						<DmsListRow
+							:to="editorLink"
+							icon="i-ph-envelope-simple"
+							icon-size="2xs"
 							size="sm"
-							icon="i-ph-arrow-clockwise"
-							:title="link.text"
+							:title="originTitle"
 						>
-							<template #actions>
-								<UButton
-									v-if="showRow"
-									size="xs"
-									color="neutral"
-									variant="outline"
-									trailing-icon="i-ph-arrow-right"
-									:label="key('see_send')"
-									@click="void showSend(link.id)"
+							<template #trailing>
+								<UIcon
+									name="i-ph-arrow-square-out"
+									class="text-dimmed size-4"
+									aria-hidden="true"
 								/>
 							</template>
-						</DmsBanner>
-					</section>
-
-					<section class="flex flex-col gap-2">
-						<DmsEyebrow :label="key('timeline')" />
-						<ol class="flex flex-col">
-							<li
-								v-for="item in timeline"
-								:key="item.id"
-								:class="item.isPending && 'opacity-50'"
-							>
-								<DmsActivityItem
-									:icon="item.icon"
-									:icon-color="item.isPending ? 'neutral' : item.tone"
-									:subtitle="
-										item.isPending ? key('pending') : item.detail || undefined
-									"
-									:mono="item.isDetailMono && !item.isPending"
-									:trailing="stepTime(item)"
-									:interactive="false"
-								>
-									<span
-										:class="
-											item.tone === 'error' && !item.isPending
-												? 'text-error'
-												: undefined
-										"
-									>
-										{{ stepTitle(item) }}
-									</span>
-								</DmsActivityItem>
-							</li>
-						</ol>
-					</section>
-
-					<section class="flex flex-col gap-2">
-						<DmsEyebrow :label="key('origin')" />
-						<div
-							class="border-default divide-default divide-y overflow-hidden rounded-lg border"
+						</DmsListRow>
+						<!-- The "source" label goes under the value: beside it, a dotted
+							name like `automation.overdue-reminders` broke at its hyphen
+							against the label in a narrow drawer. -->
+						<DmsListRow
+							v-if="send.source"
+							icon="i-ph-code"
+							icon-size="2xs"
+							size="sm"
+							:meta="[key('source')]"
+							data-send-source
 						>
-							<DmsListRow
-								:to="editorLink"
-								icon="i-ph-envelope-simple"
-								icon-size="2xs"
-								size="sm"
-								:title="originTitle"
-							>
-								<template #trailing>
-									<UIcon
-										name="i-ph-arrow-square-out"
-										class="text-dimmed size-4"
-										aria-hidden="true"
-									/>
-								</template>
-							</DmsListRow>
-							<DmsListRow
-								v-if="send.source"
-								icon="i-ph-code"
-								icon-size="2xs"
-								size="sm"
-								:trailing="key('source')"
+							<span
+								class="min-w-0 font-mono text-[12.5px] [overflow-wrap:anywhere]"
 							>
-								<span class="font-mono text-[12.5px]">{{ send.source }}</span>
-							</DmsListRow>
-						</div>
-					</section>
-
-					<section class="flex flex-col gap-2">
-						<div class="flex items-center justify-between gap-2">
-							<DmsEyebrow :label="key('payload')" />
-							<UButton
-								v-if="payload"
-								size="xs"
-								variant="link"
-								:label="key('copy_json')"
-								@click="copyPayload"
-							/>
-						</div>
-						<pre
-							class="bg-elevated/50 border-default text-toned max-h-72 overflow-auto rounded-lg border p-3 font-mono text-[11.5px] leading-relaxed"
-							>{{ payload || '{}' }}</pre>
-					</section>
-				</div>
+								{{ send.source }}
+							</span>
+						</DmsListRow>
+					</div>
+				</section>
 			</div>
 
-			<footer
-				class="bg-default border-default flex shrink-0 items-center gap-2 border-t px-5 py-3"
-			>
+			<section class="flex flex-col gap-2">
+				<div class="flex items-center justify-between gap-2">
+					<DmsEyebrow :label="key('payload')" />
+					<UButton
+						v-if="payload"
+						size="xs"
+						variant="link"
+						:label="key('copy_json')"
+						@click="copyPayload"
+					/>
+				</div>
+				<pre
+					class="bg-elevated/50 border-default text-toned max-h-72 overflow-auto rounded-lg border p-3 font-mono text-[11.5px] leading-relaxed"
+					>{{ payload || '{}' }}</pre>
+			</section>
+
+			<DmsContainerFooter data-send-footer>
 				<UButton
 					v-for="(action, index) in actions"
 					:key="action.id"
@@ -628,7 +651,7 @@ onMounted(() => {
 					:loading="action.id === 'send_again' && sending"
 					@click="ACTION_HANDLERS[action.id]()"
 				/>
-			</footer>
+			</DmsContainerFooter>
 		</template>
 	</div>
 </template>

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

@@ -56,7 +56,7 @@ async function createFrom(starter: StarterSummary): Promise<void> {
 	if (creatingId.value) return
 	creatingId.value = starter.id
 	try {
-		const [id] = await api.createTemplate({
+		const { _id: id } = await api.createTemplate({
 			name: starter.name,
 			slug: starter.slug,
 			category: knownCategory(starter.category),

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

@@ -17,6 +17,9 @@ import type {
 	TemplateStats,
 	TemplateStatus,
 } from '../types/mailing'
+// Imported rather than resolved by name: every module component is a lazy
+// chunk, and a card would first render without its thumbnail.
+import TemplatePreviewFrame from './TemplatePreviewFrame.vue'
 
 interface TemplateCardProps {
 	template: TemplateRow
@@ -172,7 +175,7 @@ function chipLabel(code: string, present: boolean): string {
 			class="bg-elevated/40 relative flex h-[172px] justify-center overflow-hidden bg-[radial-gradient(var(--ui-border)_1px,transparent_1px)] bg-[length:14px_14px] pt-4"
 		>
 			<div class="pointer-events-none rounded-t-md shadow-sm">
-				<MailingTemplatePreviewFrame
+				<TemplatePreviewFrame
 					:template-id="template._id"
 					:version="previewVersion"
 					:width="PREVIEW_WIDTH"

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

@@ -513,7 +513,7 @@ function onResolved(preview: PreviewResponse): void {
 </script>
 
 <template>
-	<div class="flex w-[30rem] max-w-full flex-col">
+	<div class="flex w-[30rem] max-w-full flex-1 flex-col">
 		<USkeleton v-if="loading && !template" class="h-64 w-full" />
 
 		<template v-else-if="template">
@@ -882,9 +882,7 @@ function onResolved(preview: PreviewResponse): void {
 				/>
 			</div>
 
-			<div
-				class="border-default bg-default sticky bottom-0 -mx-1 mt-auto flex items-center gap-2 border-t px-1 py-3"
-			>
+			<DmsContainerFooter data-template-footer>
 				<UButton
 					icon="i-ph-flask"
 					color="neutral"
@@ -905,7 +903,7 @@ function onResolved(preview: PreviewResponse): void {
 					:label="t('dms_mailing.templates.actions.open_editor')"
 					@click="openEditor(locale)"
 				/>
-			</div>
+			</DmsContainerFooter>
 		</template>
 	</div>
 </template>

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

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// Imported rather than resolved by name: every module component is a lazy
+// chunk, and the grid would first render its "new template" tile alone,
+// then move it as the cards arrive.
+import TemplateCard from './TemplateCard.vue'
 import { useTemplateCategories } from '../composables/useTemplateCategories'
 import { useEventListener } from '@vueuse/core'
 import {
@@ -50,7 +54,8 @@ const props = defineProps<TemplateGalleryProps>()
 const { t } = useI18n()
 const overlays = useTemplateDrawer()
 
-const { categories } = useTemplateCategories()
+const { categories, isAnswered: areCategoriesAnswered } =
+	useTemplateCategories()
 const overview = useTemplatesOverview()
 const total = useTemplateTotal()
 
@@ -121,8 +126,20 @@ const search = computed(() => searchTermOf(props.context.query))
 const narrowed = computed(() => isNarrowed(props.context.query))
 const hasNoItems = computed(() => !props.context.items.length)
 
+/**
+ * The cards draw their category group and their figures from reads of their
+ * own: until both answered (a client navigation reads them in the browser),
+ * the cards would come under "Uncategorised", then move to their group.
+ */
+const areCardsReady = computed(
+	() =>
+		(!isGrouped.value || areCategoriesAnswered.value) &&
+		Boolean(overview.data.value || overview.error.value),
+)
+
 const STATE_RULES: StateRule[] = [
 	['loading', () => props.context.loading && hasNoItems.value],
+	['loading', () => !hasNoItems.value && !areCardsReady.value],
 	[
 		'loading',
 		() => hasNoItems.value && !narrowed.value && templateCount.value === null,
@@ -218,24 +235,47 @@ useEventListener(
 
 <template>
 	<div class="flex flex-col gap-6 p-4">
-		<div
+		<!-- Laid out as a group of cards: the heading, the thumbnail and the
+		     card's three lines at their own heights (a zero-width space keeps a
+		     text line's height), so the cards replace it without moving. -->
+		<section
 			v-if="state === 'loading'"
-			class="grid grid-cols-[repeat(auto-fill,minmax(272px,1fr))] gap-4"
+			class="flex flex-col gap-3"
 			aria-busy="true"
+			data-gallery-skeleton
 		>
-			<DmsCard
-				v-for="index in SKELETON_CARDS"
-				:key="index"
-				:padded="false"
-				class="overflow-hidden"
-			>
-				<USkeleton class="h-[172px] w-full rounded-none" />
-				<div class="flex flex-col gap-2 p-3.5">
-					<USkeleton class="h-3 w-3/5" />
-					<USkeleton class="h-2.5 w-2/5" />
-				</div>
-			</DmsCard>
-		</div>
+			<div v-if="isGrouped" class="flex items-center gap-2 text-[13px]">
+				<USkeleton class="size-4" />
+				<USkeleton class="h-3 w-24" />
+				&#8203;
+			</div>
+			<div class="grid grid-cols-[repeat(auto-fill,minmax(272px,1fr))] gap-4">
+				<DmsCard
+					v-for="index in SKELETON_CARDS"
+					:key="index"
+					:padded="false"
+					class="flex flex-col overflow-hidden"
+				>
+					<USkeleton class="h-[172px] w-full rounded-none" />
+					<div
+						class="border-default flex flex-1 flex-col gap-1.5 border-t px-3.5 pb-3 pt-3"
+					>
+						<div class="flex h-6 items-center">
+							<USkeleton class="h-3.5 w-3/5" />
+						</div>
+						<div class="flex h-[18px] items-center">
+							<USkeleton class="h-2.5 w-2/5" />
+						</div>
+						<div
+							class="border-default mt-1 flex items-center gap-3 border-t pt-2 font-mono text-[11.5px]"
+						>
+							<USkeleton class="h-2.5 w-1/2" />
+							&#8203;
+						</div>
+					</div>
+				</DmsCard>
+			</div>
+		</section>
 
 		<MailingStarterGallery
 			v-else-if="state === 'first_run'"
@@ -308,7 +348,7 @@ useEventListener(
 					<span class="bg-(--ui-border) ml-2 h-px flex-1" />
 				</div>
 				<div class="grid grid-cols-[repeat(auto-fill,minmax(272px,1fr))] gap-4">
-					<MailingTemplateCard
+					<TemplateCard
 						v-for="template in group.items"
 						:key="template._id"
 						:template="template"