@mundogamernetwork/shared-ui 1.8.16 → 1.8.17

package/pages/key-campaigns/[slug].vue

@@ -13,6 +13,7 @@ import {
 	unfollowCampaign,
 } from "../../services/campaignService"
 import { fetchDetailGame, fetchDetailGameImage } from "../../services/gamesService"
+import { formatEmbargoDateTime } from "../../utils/embargo"
 
 // Injected by each front — provide in app.vue / a plugin
 const mgPlatform = inject<string>("mgPlatform", "MGTV")
@@ -278,6 +279,13 @@ const updateCountdown = () => {
 	}, 1000)
 }
 
+// Embargo is shown with day AND time in the timezone the campaign creator set
+// it in — formatDate() below renders in the viewer's own zone, which turns one
+// deadline into a different one for every country.
+const embargoDateTime = computed(() =>
+	formatEmbargoDateTime(campaign.value?.embargo_date, campaign.value?.embargo_timezone, locale.value),
+)
+
 const formatDate = (dateString: string | null | undefined): string => {
 	if (!dateString) return "-"
 	const date = new Date(dateString)
@@ -870,6 +878,20 @@ onMounted(async () => {
 							{{ following ? $t("keys.campaigns.campaign.following") : $t("keys.campaigns.campaign.follow_campaign") }}
 						</button>
 
+						<div class="embargo-notice" v-if="campaign?.embargo_active">
+							<MGIcon size="1x" icon="lock" />
+							<div class="embargo-notice-text">
+								<strong>{{ $t("keys.campaigns.embargo_warning_title") }}</strong>
+								<!-- Client-only: this page is server-rendered, and the line
+								     includes the viewer's own timezone. Rendered on the
+								     server it would be formatted in the SERVER's zone and
+								     then disagree with the client on hydration. -->
+								<ClientOnly>
+									<p>{{ $t("keys.campaigns.embargo_warning_desc", { date: embargoDateTime }) }}</p>
+								</ClientOnly>
+							</div>
+						</div>
+
 						<div class="requirements">
 							{{ $t("keys.campaigns.campaign.requirements") }}
 							<div class="tags">
@@ -975,7 +997,7 @@ onMounted(async () => {
 						<div class="actions">
 							{{ $t("keys.campaigns.campaign.created_by") }}
 							<div class="company">
-								<div class="badge-tag">
+								<div class="badge-tag badge-tag--company">
 									<div class="image">
 										<img :src="campaign?.logo || '/imgs/no-cover-img.jpg'" alt="Logo" />
 									</div>
@@ -1477,6 +1499,26 @@ onMounted(async () => {
 					}
 				}
 
+				.embargo-notice {
+					display: flex;
+					align-items: flex-start;
+					gap: 10px;
+					padding: 12px;
+					background-color: var(--bg-app-badge);
+					border: 1px solid var(--button-secondary-default-bg);
+					color: var(--key-accent, var(--primary, #D297FF));
+
+					.embargo-notice-text {
+						display: flex;
+						flex-direction: column;
+						gap: 4px;
+						font-size: 13px;
+
+						strong { color: var(--card-article-title); }
+						p { margin: 0; color: var(--secondary-info-fg); font-weight: 400; }
+					}
+				}
+
 				.actions {
 					display: flex;
 					flex-direction: column;
@@ -1573,6 +1615,7 @@ onMounted(async () => {
 
 					.company {
 						display: flex;
+						flex-wrap: wrap;
 						gap: 12px;
 						.w-48 { max-width: 48px; }
 						.badge-tag {
@@ -1583,7 +1626,8 @@ onMounted(async () => {
 							gap: 12px;
 							font-size: 12px;
 							color: var(--secondary-info-fg);
-							width: -webkit-fill-available;
+							width: fit-content;
+							flex: 0 0 auto;
 							.image { width: 32px; height: 32px; img { width: 100%; border-radius: 100%; } }
 							.texts {
 								display: flex;
@@ -1594,6 +1638,11 @@ onMounted(async () => {
 								.small { color: var(--secondary-info-fg); }
 							}
 						}
+						.badge-tag--company {
+							padding: 6px 12px 6px 6px;
+							gap: 8px;
+							.image { width: 24px; height: 24px; }
+						}
 					}
 				}
 			}

package/pages/key-campaigns/key-materials.vue

@@ -134,7 +134,11 @@
 						<div class="bottom">
 							<div class="buttons">
 								<div v-if="formError" class="form-error">{{ formError }}</div>
+								<div v-if="sessionExpired" class="btn button-submit" @click="goToLogin">
+									<span>{{ $t("keys.campaigns.login_again") }}</span>
+								</div>
 								<div
+									v-else
 									class="btn button-submit"
 									:class="{ disabled: submitting }"
 									@click="submitForm"
@@ -195,7 +199,13 @@
 import { ref, computed, inject, onMounted, unref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useI18n } from "#imports"
-import { submitMaterial, fetchMaterialsByRequest, fetchKeyRequestById } from "../../services/campaignService"
+import {
+	submitMaterial,
+	fetchMaterialsByRequest,
+	fetchKeyRequestById,
+	isSessionExpired,
+	buildReLoginUrl,
+} from "../../services/campaignService"
 
 definePageMeta({
 	middleware: [
@@ -211,6 +221,11 @@ definePageMeta({
 
 // Consuming front injects current user id (or null if not logged in)
 const currentUserId = inject<number | null>("currentUserId", null)
+const loginUrl = inject<string>("loginUrl", "/")
+
+function goToLogin() {
+	navigateTo(buildReLoginUrl(loginUrl), { external: true })
+}
 
 const props = defineProps<{ goBackPage?: string | null }>()
 
@@ -244,6 +259,9 @@ const submitting = ref(false)
 const submittedMaterials = ref<any[]>([])
 const urlError = ref<string | null>(null)
 const formError = ref<string | null>(null)
+// The session died between page load and submit (persisted auth state kept the
+// UI looking logged in) — show a re-login CTA instead of a generic failure.
+const sessionExpired = ref(false)
 const showSuccessModal = ref(false)
 
 // Submission deadline — counts down from the request's approval date, using
@@ -316,6 +334,7 @@ const submitForm = async () => {
 	submitting.value = true
 	urlError.value = null
 	formError.value = null
+	sessionExpired.value = false
 
 	try {
 		forms.value.forEach((form) => {
@@ -360,7 +379,12 @@ const submitForm = async () => {
 		showSuccessModal.value = true
 	} catch (error) {
 		console.error("[key-materials] Submit error:", error)
-		formError.value = t("keys.materials.submit_error")
+		if (isSessionExpired(error)) {
+			sessionExpired.value = true
+			formError.value = t("keys.campaigns.error_session_expired")
+		} else {
+			formError.value = t("keys.materials.submit_error")
+		}
 	} finally {
 		submitting.value = false
 	}

package/pages/key-campaigns/redeem-key-approved.vue

@@ -2,7 +2,13 @@
 import { ref, inject, onMounted, unref } from "vue"
 import { useRoute, navigateTo } from "#app"
 import { useNuxtApp } from "#app"
-import { revealKey, fetchKeyRequestById } from "../../services/campaignService"
+import {
+	revealKey,
+	fetchKeyRequestById,
+	isSessionExpired,
+	buildReLoginUrl,
+} from "../../services/campaignService"
+import { formatEmbargoDateTime, formatEmbargoCountdown, isEmbargoActive } from "../../utils/embargo"
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
@@ -18,6 +24,9 @@ const loading = ref(true)
 const revealing = ref(false)
 const keyCode = ref<string | null>(null)
 const error = ref("")
+// The session died while the page was open (persisted auth state kept the UI
+// looking logged in) — show a re-login CTA instead of a raw API message.
+const sessionExpired = ref(false)
 const requestData = ref<any>(null)
 const copied = ref(false)
 const platform = ref("")
@@ -72,8 +81,13 @@ onMounted(async () => {
 		// Platform the user chose at request time — shown as a fallback/preview
 		// even before reveal, in case the assigned key item has no platform set.
 		platform.value = requestData.value?.platforms?.[0]?.name || ""
-	} catch {
-		error.value = $i18n.t("keys.campaigns.error_loading")
+	} catch (e: any) {
+		if (isSessionExpired(e)) {
+			sessionExpired.value = true
+			error.value = $i18n.t("keys.campaigns.error_session_expired")
+		} else {
+			error.value = $i18n.t("keys.campaigns.error_loading")
+		}
 	} finally {
 		loading.value = false
 	}
@@ -82,6 +96,7 @@ onMounted(async () => {
 async function reveal(acknowledgeEmbargo = false) {
 	revealing.value = true
 	error.value = ""
+	sessionExpired.value = false
 	try {
 		const res = await revealKey(requestId, acknowledgeEmbargo)
 		const data = res?.data?.data || res?.data || null
@@ -97,7 +112,13 @@ async function reveal(acknowledgeEmbargo = false) {
 		const body = e?.response?.data || {}
 		const code = body.message || ""
 		const errorCode = body.error_code || ""
-		if (errorCode === "embargo_acknowledgment_required") {
+		if (isSessionExpired(e)) {
+			// Never surface the backend's own "Unauthorized" here: it is
+			// untranslated and reads as a permission problem when it is really an
+			// expired session.
+			sessionExpired.value = true
+			error.value = $i18n.t("keys.campaigns.error_session_expired")
+		} else if (errorCode === "embargo_acknowledgment_required") {
 			needsEmbargoAck.value = true
 			embargoAckDate.value = body.embargo_date || null
 		} else if (code === "NO_KEYS_AVAILABLE" || code === "KEY_ITEM_NOT_FOUND") {
@@ -128,6 +149,25 @@ async function copyCode() {
 	}
 }
 
+/**
+ * Embargo shown with day AND time, in the timezone the campaign creator set it
+ * in — a date alone is not something a creator can comply with.
+ */
+function formatEmbargo(dateString: string | null | undefined): string {
+	return formatEmbargoDateTime(dateString, requestData.value?.key?.embargo_timezone, locale.value)
+}
+
+// Embargo state stays on screen AFTER the code is revealed and on every later
+// visit to this page. Creators routinely request a key days before release, so
+// the acknowledgment they gave once is not enough — the deadline has to be
+// where they come back to fetch the code.
+const embargoDate = computed<string | null>(() => requestData.value?.key?.embargo_date ?? null)
+const embargoIsActive = computed(() => isEmbargoActive(embargoDate.value))
+const embargoMoment = computed(() => formatEmbargo(embargoDate.value))
+// Recomputed on every reveal/visit; a live ticker would be noise on a page the
+// user opens, copies from and leaves.
+const embargoCountdown = computed(() => formatEmbargoCountdown(embargoDate.value, locale.value))
+
 function formatDate(dateString: string | null | undefined): string {
 	if (!dateString) return "-"
 	const date = new Date(dateString)
@@ -135,6 +175,10 @@ function formatDate(dateString: string | null | undefined): string {
 	return new Intl.DateTimeFormat(locale.value, { day: "numeric", month: "long", year: "numeric" }).format(date)
 }
 
+function goToLogin() {
+	navigateTo(buildReLoginUrl(loginUrl), { external: true })
+}
+
 function goBack() {
 	if (typeof window !== "undefined" && window.history.length > 1) {
 		window.history.back()
@@ -158,6 +202,12 @@ function goBack() {
 				<div class="skeleton" v-for="i in 2" :key="i" />
 			</div>
 
+			<div v-else-if="sessionExpired && !requestData" class="state error">
+				<p>{{ $t("keys.campaigns.error_session_expired") }}</p>
+				<p class="session-expired-help">{{ $t("keys.campaigns.error_session_expired_help") }}</p>
+				<button class="btn" @click="goToLogin">{{ $t("keys.campaigns.login_again") }}</button>
+			</div>
+
 			<div v-else-if="error && !requestData" class="state error">{{ error }}</div>
 
 			<div v-else class="content">
@@ -172,12 +222,21 @@ function goBack() {
 					<p v-if="platform" class="platform-name">{{ $t("keys.campaigns.platform") }}: {{ platform }}</p>
 				</div>
 
-				<div v-if="requestData && !keyCode" class="embargo-warning" :class="{ 'embargo-warning--none': !requestData?.key?.embargo_date }">
-					<MGIcon size="1x" :icon="requestData?.key?.embargo_date ? 'lock' : 'unlock'" />
+				<!-- Stays visible after the code is revealed and on every later
+				     visit: the key is often taken days before the embargo lifts. -->
+				<div v-if="requestData" class="embargo-warning" :class="{ 'embargo-warning--none': !embargoIsActive }">
+					<MGIcon size="1x" :icon="embargoIsActive ? 'lock' : 'unlock'" />
 					<div class="embargo-warning-text">
-						<template v-if="requestData?.key?.embargo_date">
+						<template v-if="embargoIsActive">
 							<strong>{{ $t("keys.campaigns.embargo_warning_title") }}</strong>
-							<p>{{ $t("keys.campaigns.embargo_warning_desc", { date: formatDate(requestData.key.embargo_date) }) }}</p>
+							<p>{{ $t("keys.campaigns.embargo_warning_desc", { date: embargoMoment }) }}</p>
+							<p v-if="embargoCountdown" class="embargo-countdown">
+								{{ $t("keys.campaigns.embargo_countdown", { relative: embargoCountdown }) }}
+							</p>
+						</template>
+						<template v-else-if="embargoDate">
+							<strong>{{ $t("keys.campaigns.embargo_lifted_title") }}</strong>
+							<p>{{ $t("keys.campaigns.no_embargo_desc") }}</p>
 						</template>
 						<template v-else>
 							<strong>{{ $t("keys.campaigns.no_embargo_title") }}</strong>
@@ -195,7 +254,7 @@ function goBack() {
 									<div class="embargo-ack" v-if="!keyCode && needsEmbargoAck">
 										<label class="embargo-ack-label">
 											<input type="checkbox" v-model="embargoAckChecked" />
-											{{ $t("keys.campaigns.embargo_ack_label", { date: formatDate(embargoAckDate) }) }}
+											{{ $t("keys.campaigns.embargo_ack_label", { date: formatEmbargo(embargoAckDate) }) }}
 										</label>
 										<button
 											class="btn"
@@ -222,7 +281,19 @@ function goBack() {
 										</button>
 									</div>
 
-									<div v-if="error" class="req-error">{{ error }}</div>
+									<!-- Right where the code is copied: the one moment the
+									     creator is guaranteed to be looking at this page. -->
+									<div v-if="keyCode && embargoIsActive" class="embargo-reminder">
+										<MGIcon size="1x" icon="lock" />
+										<span>{{ $t("keys.campaigns.embargo_reminder_short", { date: embargoMoment }) }}</span>
+									</div>
+
+									<div v-if="error" class="req-error">
+										{{ error }}
+										<button v-if="sessionExpired" type="button" class="btn login-again" @click="goToLogin">
+											{{ $t("keys.campaigns.login_again") }}
+										</button>
+									</div>
 
 									<div class="info">
 										<MGIcon size="1x" icon="version" />
@@ -448,7 +519,20 @@ function goBack() {
 		}
 	}
 
-	.req-error { font-size: 12px; color: var(--danger, #e53935); margin-top: 4px; }
+	.req-error {
+		font-size: 12px;
+		color: var(--danger, #e53935);
+		margin-top: 4px;
+
+		.login-again {
+			display: block;
+			margin-top: 8px;
+			font-size: 13px;
+			padding: 8px 16px;
+		}
+	}
+
+	.session-expired-help { font-size: 13px; color: var(--secondary-info-fg); margin: 8px 0 16px; }
 
 	.embargo-warning {
 		display: flex;
@@ -464,6 +548,12 @@ function goBack() {
 		.embargo-warning-text {
 			strong { display: block; color: var(--danger, #e53935); font-size: 14px; margin-bottom: 4px; }
 			p { margin: 0; font-size: 13px; color: var(--text-secondary, #ccc); }
+
+			.embargo-countdown {
+				margin-top: 4px;
+				font-weight: 600;
+				color: var(--danger, #e53935);
+			}
 		}
 
 		&--none {
@@ -475,6 +565,22 @@ function goBack() {
 		}
 	}
 
+	.embargo-reminder {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		margin-top: 10px;
+		padding: 10px 12px;
+		font-size: 12px;
+		font-weight: 600;
+		line-height: 1.4;
+		color: var(--danger, #e53935);
+		background: rgba(229, 57, 53, 0.1);
+		border: 1px solid var(--danger, #e53935);
+
+		svg { flex-shrink: 0; margin-top: 1px; }
+	}
+
 	.embargo-ack {
 		display: flex;
 		flex-direction: column;

package/pages/key-campaigns/redeem-key.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, computed, inject, onMounted, unref } from "vue"
+import { ref, computed, inject, onMounted, unref, watch } from "vue"
 import { useRoute, navigateTo } from "#app"
 import { useNuxtApp } from "#app"
 import {
@@ -9,7 +9,10 @@ import {
 	fetchAvailableOptions,
 	requestKey,
 	enableKeyCampaignNotifications,
+	isSessionExpired,
+	buildReLoginUrl,
 } from "../../services/campaignService"
+import { formatEmbargoDateTime } from "../../utils/embargo"
 
 const route = useRoute()
 const { $i18n } = useNuxtApp()
@@ -33,15 +36,26 @@ const submitting = ref(false)
 const error = ref("")
 const success = ref(false)
 const requestError = ref("")
+// The session died between page load and submit (persisted auth state kept the
+// UI looking logged in). Shows a re-login CTA instead of a raw API message.
+const sessionExpired = ref(false)
 
 const selectedPlatformId = ref<number | null>(null)
 const selectedRegionId = ref<number | null>(null)
 const description = ref("")
 const quantity = ref<number | null>(1)
 const notifyKeyCampaigns = ref(true)
+// Embargoed campaigns: the creator must confirm they saw the day/time the
+// embargo lifts BEFORE asking for the key, not only at reveal.
+const embargoAckChecked = ref(false)
 
 const maxKeysForUser = computed(() => campaign.value?.max_keys_for_user ?? 1)
 
+const embargoDateTime = computed(() =>
+	formatEmbargoDateTime(campaign.value?.embargo_date, campaign.value?.embargo_timezone, locale.value),
+)
+const hasEmbargo = computed(() => !!embargoDateTime.value)
+
 function clampQuantity() {
 	if (quantity.value === null) return
 	if (quantity.value < 1) quantity.value = 1
@@ -89,6 +103,21 @@ onMounted(async () => {
 	}
 })
 
+// The guard above runs on mount, when the auth store has usually only been
+// hydrated from localStorage (`signedIn` is persisted) — the app's own
+// /auth/user probe resolves a moment later. If that probe comes back
+// unauthenticated, the user is sitting on a form that will be rejected on
+// submit; surface it right away instead of waiting for the POST to fail.
+watch(
+	() => unref(currentUser),
+	(user, previous) => {
+		if (previous && !user) {
+			sessionExpired.value = true
+			requestError.value = $i18n.t("keys.campaigns.error_session_expired")
+		}
+	},
+)
+
 // True once options finished loading and either list came back empty — every
 // platform/region combo this campaign ever had is now fully redeemed.
 const soldOut = computed(() => !loading.value && (platforms.value.length === 0 || regions.value.length === 0))
@@ -122,13 +151,22 @@ const existingRequestStatus = computed(() => {
 const isRefused = computed(() => campaign.value?.request_status === 6)
 const refusedReason = computed(() => campaign.value?.request_admin_notes || "")
 
+function goToLogin() {
+	navigateTo(buildReLoginUrl(loginUrl), { external: true })
+}
+
 async function submit() {
 	if (!canSubmit.value) return
 	requestError.value = ""
+	sessionExpired.value = false
 	if (!selectedPlatformId.value || !selectedRegionId.value || !quantity.value || !description.value?.trim()) {
 		requestError.value = $i18n.t("keys.campaigns.required_fields")
 		return
 	}
+	if (hasEmbargo.value && !embargoAckChecked.value) {
+		requestError.value = $i18n.t("keys.campaigns.embargo_ack_required")
+		return
+	}
 	submitting.value = true
 	try {
 		const response = await requestKey({
@@ -137,6 +175,9 @@ async function submit() {
 			region_ids: [selectedRegionId.value],
 			description: description.value || "-",
 			quantity_keys: Number(quantity.value) || 1,
+			// Recorded on the request so the acknowledgment is provable, not just
+			// a checkbox the browser forgot about.
+			acknowledge_embargo: hasEmbargo.value && embargoAckChecked.value,
 		})
 		const created = response?.data?.data ?? response?.data ?? {}
 
@@ -158,7 +199,13 @@ async function submit() {
 	} catch (e: any) {
 		const status = e?.response?.status
 		const errorCode = e?.response?.data?.error_code
-		if (status === 409) {
+		if (isSessionExpired(e)) {
+			// The API rejected the request as unauthenticated. Never surface the
+			// backend's own wording here ("Unauthorized"): it is untranslated and
+			// reads as a permission problem when it is really an expired session.
+			sessionExpired.value = true
+			requestError.value = $i18n.t("keys.campaigns.error_session_expired")
+		} else if (status === 409) {
 			requestError.value = $i18n.t("keys.campaigns.error_duplicate")
 		} else if (status === 403 && errorCode === "user_key_blocked") {
 			requestError.value = $i18n.t("keys.campaigns.error_user_blocked")
@@ -302,9 +349,39 @@ function goBack() {
 						</div>
 					</div>
 
-					<div v-if="requestError" class="req-error">{{ requestError }}</div>
+					<!-- Embargo: the creator confirms the day/time before asking
+					     for the key, not only when revealing it. -->
+					<div v-if="hasEmbargo" class="embargo-box">
+						<div class="embargo-box-head">
+							<MGIcon size="1x" icon="lock" class="notice-icon" />
+							<div class="notice-texts">
+								<div class="notice-title">{{ $t("keys.campaigns.embargo_warning_title") }}</div>
+								<div class="notice-status">
+									{{ $t("keys.campaigns.embargo_warning_desc", { date: embargoDateTime }) }}
+								</div>
+							</div>
+						</div>
+						<label class="checkbox-label embargo-ack">
+							<input type="checkbox" v-model="embargoAckChecked" />
+							{{ $t("keys.campaigns.embargo_ack_label", { date: embargoDateTime }) }}
+						</label>
+					</div>
+
+					<div v-if="sessionExpired" class="session-expired">
+						<MGIcon size="1x" icon="version" class="notice-icon" />
+						<div class="notice-texts">
+							<div class="notice-title">{{ $t("keys.campaigns.error_session_expired") }}</div>
+							<div class="notice-status">{{ $t("keys.campaigns.error_session_expired_help") }}</div>
+						</div>
+						<button type="button" class="btn notice-back" @click="goToLogin">
+							{{ $t("keys.campaigns.login_again") }}
+						</button>
+					</div>
+
+					<div v-else-if="requestError" class="req-error">{{ requestError }}</div>
 
 					<button
+						v-if="!sessionExpired"
 						type="submit"
 						class="btn"
 						:class="{ disabled: !canSubmit }"
@@ -410,7 +487,29 @@ function goBack() {
 		svg.rotate { transform: rotate(180deg); }
 	}
 
-	.existing-request-notice {
+	.embargo-box {
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+		padding: 20px;
+		margin-top: 16px;
+		background: var(--bg-app-badge);
+		border: 1px solid var(--key-accent, var(--primary, #D297FF));
+
+		.embargo-box-head { display: flex; align-items: flex-start; gap: 14px; }
+
+		.embargo-ack {
+			display: flex;
+			align-items: flex-start;
+			gap: 8px;
+			font-size: 13px;
+			line-height: 1.4;
+			cursor: pointer;
+		}
+	}
+
+	.existing-request-notice,
+	.session-expired {
 		display: flex;
 		align-items: flex-start;
 		gap: 14px;

package/plugins/seo-tag-priority.ts

@@ -0,0 +1,67 @@
+// Hoists the social/SEO tags to the top of <head> on every front that extends
+// this layer.
+//
+// Why this exists (measured in production 2026-08-02): unhead 2.x applies Capo
+// sorting by default, and its weight table (unhead/dist/shared/*.mjs) gives
+// sync <style> a weight of 60 while a generic <meta> gets the default 100 —
+// so *every* inline stylesheet is emitted before any og:*/twitter:* tag. With
+// Nuxt's `features.inlineStyles` on (its default) that meant ~545KB of inlined
+// CSS ahead of the OG tags, pushing them to byte 384.000-553.000 across all six
+// fronts. Link-preview scrapers (WhatsApp, Facebook, X, LinkedIn, Telegram)
+// truncate the HTML they fetch well before that and stop at </head>, so none of
+// them ever saw an og:image — only Discord, which reads the full document, did.
+//
+// `features.inlineStyles: false` in each app's nuxt.config.ts is the primary
+// fix; this plugin is the belt-and-braces so the problem cannot silently come
+// back if some future component or config re-introduces a large inline <style>.
+// Doing it here rather than per-page also covers the 100+ pages across the six
+// fronts that set their own og tags, plus every page added from now on.
+//
+// -5 sits above <style> (60), <link rel=stylesheet> (60) and <title> (10), but
+// still below <meta charset> (-20), <meta name=viewport> (-15) and the CSP meta
+// (-30), so charset stays inside the first 1024 bytes as the spec requires.
+const SEO_TAG_PRIORITY = -5;
+
+function isSeoTag(tag: { tag: string; props?: Record<string, any> }): boolean {
+	const props = tag.props || {};
+
+	if (tag.tag === "meta") {
+		const key = props.property ?? props.name;
+		return (
+			typeof key === "string"
+			&& (key.startsWith("og:") || key.startsWith("twitter:") || key === "description")
+		);
+	}
+
+	// The canonical rides along: it is cheap and some scrapers resolve the
+	// preview against it rather than against the requested URL.
+	return tag.tag === "link" && props.rel === "canonical";
+}
+
+export default defineNuxtPlugin({
+	name: "shared-ui-seo-tag-priority",
+	// Must run before any page's useHead/useSeoMeta entry is normalized.
+	enforce: "pre",
+	setup(nuxtApp) {
+		const head = injectHead(nuxtApp as any);
+		if (!head) return;
+
+		head.use({
+			key: "shared-ui-seo-tag-priority",
+			hooks: {
+				// `entries:normalize` is the correct seam: unhead computes each
+				// tag's weight (`t._w = tagWeight(head, t)`) immediately *after*
+				// this hook returns, and `tagWeight` short-circuits on a numeric
+				// `tagPriority`. Mutating in `tags:resolve` instead would be too
+				// late — the sort has already run by then.
+				"entries:normalize": ({ tags }: { tags: any[] }) => {
+					for (const tag of tags) {
+						// Never override an explicit priority set by a page.
+						if (tag.tagPriority !== undefined) continue;
+						if (isSeoTag(tag)) tag.tagPriority = SEO_TAG_PRIORITY;
+					}
+				},
+			},
+		});
+	},
+});