fix: visuals reference matching overhaul and better workflow

web/src/views/PendingView.vue

@@ -7,6 +7,7 @@ import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import ResultPanel from '@/components/ResultPanel.vue'
 import { ApiError, useApi } from '@/composables/useApi'
 import { registrationCancelledToast } from '@/lib/registrationToasts'
+import { VERIFIED_REDIRECT_DELAY_MS, wait } from '@/lib/verifiedRedirect'
 import { useSessionStore } from '@/stores/session'
 
 const router = useRouter()
@@ -18,6 +19,7 @@ const toast = useToast()
 const pendingEmail = ref<string | null>(null)
 const loggingOut = ref(false)
 const cancelOutcome = ref<'cancelled' | 'alreadyVerified' | null>(null)
+const verified = ref(false)
 
 onMounted(() => {
 	pendingEmail.value = sessionStorage.getItem('renewcms:pendingEmail')
@@ -88,13 +90,15 @@ async function cancelRegistration() {
 	}
 
 	if (cancelOutcome.value === 'alreadyVerified') {
-		await router.push('/home')
+		verified.value = true
 		toast.add({
 			color: 'info',
 			icon: 'i-lucide-info',
 			title: 'Your account is already verified',
 			description: "There's nothing to cancel.",
 		})
+		await wait(VERIFIED_REDIRECT_DELAY_MS)
+		await router.push('/home')
 	}
 }
 
@@ -119,13 +123,22 @@ const actions = computed(() => [
 <template>
 	<AuthShell title="">
 		<ResultPanel
+			v-if="verified"
+			tone="success"
+			icon="i-lucide-shield-check"
+			title="You're verified"
+			description="Taking you to your dashboard…"
+			:actions="[]"
+		/>
+		<ResultPanel
+			v-else
 			tone="success"
 			icon="i-lucide-mail-check"
 			title="Check your email"
 			:description="description"
 			:actions="actions"
 		>
-			<p class="text-toned text-sm">
+			<p class="text-sm text-pretty text-muted">
 				Opened it on another device? That works too; you'll log in there first. Can't find
 				it? Check your spam folder. If the link has expired, cancel your registration and
 				start again.