@mundogamernetwork/shared-ui 1.8.22 → 1.9.0

package/components/keys/KeyBrowser.vue

@@ -36,6 +36,10 @@ const platforms = ref<{ id: number; name: string }[]>([])
 const loadingPools = ref(true)
 const loadingRequests = ref(true)
 const requesting = ref<number | null>(null)
+// Per-pool refusal message. The catch below only ever handled 401, so every
+// other refusal — quota reached, campaign closed, not eligible — left the
+// button doing nothing at all with no explanation.
+const requestErrors = ref<Record<number, string>>({})
 const activeTab = ref<'available' | 'mine'>('available')
 const isAuthenticated = ref(true) // assume true; set false on 401
 
@@ -114,6 +118,7 @@ function redirectToLogin() {
 
 async function doRequestKey(pool: KeyPool) {
   requesting.value = pool.id
+  delete requestErrors.value[pool.id]
   try {
     const form = requestForms.value[pool.id] ?? { platform_ids: [], description: '' }
     const body: Record<string, any> = {
@@ -129,8 +134,22 @@ async function doRequestKey(pool: KeyPool) {
       _checkNotifPrompt()
     }
   } catch (err: any) {
-    if (err?.response?.status === 401) {
+    const status = err?.response?.status
+    const errorCode = err?.response?.data?.error_code
+
+    if (status === 401) {
       isAuthenticated.value = false
+    } else if (status === 409) {
+      requestErrors.value[pool.id] = t('keys.campaigns.error_duplicate')
+    } else if (status === 403 && errorCode === 'user_key_blocked') {
+      requestErrors.value[pool.id] = t('keys.campaigns.error_user_blocked')
+    } else if (status === 403) {
+      requestErrors.value[pool.id] = t('keys.campaigns.error_not_eligible')
+    } else if (status === 422 && errorCode === 'pending_limit_reached') {
+      requestErrors.value[pool.id] = t('keys.campaigns.error_pending_limit')
+    } else {
+      requestErrors.value[pool.id] =
+        err?.response?.data?.message || t('keys.campaigns.error_request')
     }
   } finally {
     requesting.value = null
@@ -325,6 +344,10 @@ function statusColor(slug: string): string {
                 {{ requesting === pool.id ? $t('common.sending') : $t('keys.browser.request_btn') }}
               </button>
             </div>
+
+            <p v-if="requestErrors[pool.id]" class="kb__request-error" role="alert">
+              {{ requestErrors[pool.id] }}
+            </p>
           </div>
         </div>
       </div>
@@ -399,7 +422,7 @@ function statusColor(slug: string): string {
   &__auth-wall {
     padding: 40px;
     text-align: center;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -430,7 +453,7 @@ function statusColor(slug: string): string {
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -455,7 +478,7 @@ function statusColor(slug: string): string {
   &__empty {
     padding: 40px;
     text-align: center;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     font-size: 0.9rem;
   }
 
@@ -484,13 +507,13 @@ function statusColor(slug: string): string {
 
   &__pool-availability { font-size: 0.82rem; }
   &__avail-ok { color: var(--success, #22c55e); }
-  &__avail-empty { color: var(--text-secondary, #888); }
+  &__avail-empty { color: var(--secondary-info-fg); }
 
   &__platform-sel { display: flex; flex-direction: column; gap: 6px; }
 
   &__label {
     font-size: 0.75rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
   }
 
   &__platform-chips {
@@ -503,7 +526,7 @@ function statusColor(slug: string): string {
     padding: 4px 10px;
     font-size: 0.78rem;
     border: 1px solid var(--border-color, #2a2a2a);
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     transition: border-color 0.15s, color 0.15s;
 
@@ -551,6 +574,13 @@ function statusColor(slug: string): string {
     color: var(--success, #22c55e);
   }
 
+  &__request-error {
+    margin: 8px 0 0;
+    font-size: 0.8rem;
+    line-height: 1.45;
+    color: var(--danger, #ef4444);
+  }
+
   &__request-list {
     display: flex;
     flex-direction: column;
@@ -577,7 +607,7 @@ function statusColor(slug: string): string {
 
   &__request-platform {
     font-size: 0.78rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
   }
 
   &__status-chip {
@@ -613,7 +643,7 @@ function statusColor(slug: string): string {
 
   &__pending-label {
     font-size: 0.8rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     font-style: italic;
   }
 
@@ -647,7 +677,7 @@ function statusColor(slug: string): string {
     p {
       margin: 0;
       font-size: 0.82rem;
-      color: var(--text-secondary, #888);
+      color: var(--secondary-info-fg);
       line-height: 1.4;
     }
   }
@@ -664,7 +694,7 @@ function statusColor(slug: string): string {
     font-weight: 600;
     border: 1px solid var(--border-color, #2a2a2a);
     background: none;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     transition: opacity 0.15s, border-color 0.15s, color 0.15s;
 

package/components/keys/KeyCampaignCommentItem.vue

@@ -0,0 +1,303 @@
+<template>
+	<article class="campaign-comment" :class="{ 'campaign-comment--hidden': comment.is_hidden }">
+		<div class="campaign-comment__head">
+			<img
+				v-if="comment.author?.avatar"
+				:src="comment.author.avatar"
+				:alt="comment.author?.name || ''"
+				class="campaign-comment__avatar"
+				loading="lazy"
+			>
+			<div class="campaign-comment__meta">
+				<strong class="campaign-comment__author">
+					{{ comment.author?.name || comment.author?.nickname || $t("keys.campaigns.comments.unknown_author") }}
+				</strong>
+				<span class="campaign-comment__date">
+					{{ formattedDate }}
+					<em v-if="comment.edited">· {{ $t("keys.campaigns.comments.edited") }}</em>
+				</span>
+			</div>
+
+			<!-- Only shown to studio/admin: the public never learns a comment
+			     was hidden, which is the point of hiding rather than deleting. -->
+			<span v-if="comment.is_hidden" class="campaign-comment__hidden-badge">
+				{{ $t("keys.campaigns.comments.hidden_badge") }}
+			</span>
+		</div>
+
+		<p v-if="!editing" class="campaign-comment__body">{{ comment.body }}</p>
+
+		<form v-else class="campaign-comment__edit" @submit.prevent="saveEdit">
+			<textarea v-model="editDraft" class="campaign-comment__edit-input" rows="3" :maxlength="2200" />
+			<div class="campaign-comment__actions">
+				<button type="submit" class="campaign-comment__action">{{ $t("keys.campaigns.comments.save") }}</button>
+				<button type="button" class="campaign-comment__action" @click="cancelEdit">{{ $t("keys.campaigns.comments.cancel") }}</button>
+			</div>
+		</form>
+
+		<div class="campaign-comment__actions">
+			<button v-if="canReply" type="button" class="campaign-comment__action" @click="replying = !replying">
+				{{ $t("keys.campaigns.comments.reply") }}
+			</button>
+			<button v-if="comment.can_edit && !editing" type="button" class="campaign-comment__action" @click="startEdit">
+				{{ $t("keys.campaigns.comments.edit") }}
+			</button>
+			<button v-if="comment.can_delete" type="button" class="campaign-comment__action" @click="confirmDelete">
+				{{ $t("keys.campaigns.comments.delete") }}
+			</button>
+			<button
+				v-if="canModerate && !comment.is_hidden"
+				type="button"
+				class="campaign-comment__action"
+				@click="emit('hide', { uuid: comment.uuid })"
+			>
+				{{ $t("keys.campaigns.comments.hide") }}
+			</button>
+			<button
+				v-if="canModerate && comment.is_hidden"
+				type="button"
+				class="campaign-comment__action"
+				@click="emit('unhide', comment.uuid)"
+			>
+				{{ $t("keys.campaigns.comments.unhide") }}
+			</button>
+		</div>
+
+		<form v-if="replying" class="campaign-comment__reply" @submit.prevent="sendReply">
+			<textarea
+				v-model="replyDraft"
+				class="campaign-comment__edit-input"
+				rows="2"
+				:maxlength="2200"
+				:placeholder="$t('keys.campaigns.comments.reply_placeholder')"
+			/>
+			<button type="submit" class="campaign-comment__action" :disabled="replyDraft.trim().length < 2">
+				{{ $t("keys.campaigns.comments.send") }}
+			</button>
+		</form>
+
+		<ul v-if="comment.replies?.length" class="campaign-comment__replies">
+			<li v-for="reply in comment.replies" :key="reply.uuid" class="campaign-comment__reply-item">
+				<div class="campaign-comment__head">
+					<img
+						v-if="reply.author?.avatar"
+						:src="reply.author.avatar"
+						:alt="reply.author?.name || ''"
+						class="campaign-comment__avatar campaign-comment__avatar--small"
+						loading="lazy"
+					>
+					<div class="campaign-comment__meta">
+						<strong class="campaign-comment__author">
+							{{ reply.author?.name || reply.author?.nickname }}
+						</strong>
+					</div>
+				</div>
+				<p class="campaign-comment__body">{{ reply.body }}</p>
+			</li>
+		</ul>
+	</article>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue"
+import type { CampaignComment } from "../../services/campaignService"
+
+const props = defineProps<{
+	comment: CampaignComment
+	canModerate?: boolean
+	canReply?: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: "edit", payload: { uuid: string; body: string }): void
+	(e: "delete", uuid: string): void
+	(e: "reply", payload: { uuid: string; body: string }): void
+	(e: "hide", payload: { uuid: string; reason?: string }): void
+	(e: "unhide", uuid: string): void
+}>()
+
+const editing = ref(false)
+const replying = ref(false)
+const editDraft = ref("")
+const replyDraft = ref("")
+
+const formattedDate = computed(() => {
+	if (!props.comment.created_at) return ""
+	try {
+		return new Date(props.comment.created_at).toLocaleDateString(undefined, {
+			day: "2-digit",
+			month: "short",
+			year: "numeric",
+		})
+	} catch (_) {
+		return ""
+	}
+})
+
+function startEdit() {
+	editDraft.value = props.comment.body
+	editing.value = true
+}
+
+function cancelEdit() {
+	editing.value = false
+	editDraft.value = ""
+}
+
+function saveEdit() {
+	if (editDraft.value.trim().length < 2) return
+	emit("edit", { uuid: props.comment.uuid, body: editDraft.value.trim() })
+	editing.value = false
+}
+
+function confirmDelete() {
+	emit("delete", props.comment.uuid)
+}
+
+function sendReply() {
+	if (replyDraft.value.trim().length < 2) return
+	emit("reply", { uuid: props.comment.uuid, body: replyDraft.value.trim() })
+	replyDraft.value = ""
+	replying.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+/* Theme tokens only — see KeyCampaignComments.vue for why no literal colours. */
+.campaign-comment {
+	padding: 1rem;
+	background: var(--card-article-bg);
+	border: 1px solid var(--card-article-border);
+}
+
+.campaign-comment--hidden {
+	opacity: 0.55;
+}
+
+.campaign-comment__head {
+	display: flex;
+	align-items: center;
+	gap: 0.625rem;
+	margin-bottom: 0.5rem;
+}
+
+.campaign-comment__avatar {
+	width: 2.25rem;
+	height: 2.25rem;
+	flex-shrink: 0;
+	object-fit: cover;
+}
+
+.campaign-comment__avatar--small {
+	width: 1.75rem;
+	height: 1.75rem;
+}
+
+.campaign-comment__meta {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+	line-height: 1.3;
+}
+
+.campaign-comment__author {
+	font-size: 0.9375rem;
+	color: var(--card-article-title);
+}
+
+.campaign-comment__date {
+	font-size: 0.75rem;
+	color: var(--secondary-info-fg);
+}
+
+.campaign-comment__hidden-badge {
+	margin-left: auto;
+	font-size: 0.6875rem;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	padding: 0.125rem 0.5rem;
+	font-weight: 600;
+	color: var(--title-fg);
+	border: 1px solid var(--warning);
+}
+
+.campaign-comment__body {
+	margin: 0;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font-size: 0.9375rem;
+	color: var(--card-article-title);
+}
+
+.campaign-comment__edit-input {
+	width: 100%;
+	padding: 0.5rem;
+	/* See KeyCampaignComments.vue: --input-bg/--input-fg is 1.61:1 in dark. */
+	background: var(--card-article-bg);
+	border: 1px solid var(--input-border-color);
+	color: var(--title-fg);
+	font: inherit;
+
+	&::placeholder {
+		color: var(--secondary-info-fg);
+	}
+
+	&:focus {
+		outline: none;
+		border-color: var(--key-accent, var(--primary));
+	}
+}
+
+.campaign-comment__actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.75rem;
+	margin-top: 0.625rem;
+}
+
+.campaign-comment__action {
+	background: none;
+	border: 0;
+	padding: 0;
+	color: var(--secondary-info-fg);
+	font-size: 0.8125rem;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--title-fg);
+	}
+}
+
+.campaign-comment__reply {
+	margin-top: 0.75rem;
+}
+
+.campaign-comment__replies {
+	list-style: none;
+	margin: 0.875rem 0 0;
+	padding: 0 0 0 1rem;
+	border-left: 2px solid var(--card-article-border);
+	display: grid;
+	gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+	.campaign-comment {
+		padding: 0.875rem;
+	}
+
+	/* Tap targets: the inline actions are too tight to hit reliably at 13px. */
+	.campaign-comment__actions {
+		gap: 1rem;
+	}
+
+	.campaign-comment__action {
+		padding: 0.25rem 0;
+		font-size: 0.875rem;
+	}
+
+	.campaign-comment__replies {
+		padding-left: 0.625rem;
+	}
+}
+</style>