From e26291943cc6ad6cd7c33578d3abcec64b0ead1b Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Sat, 3 Jan 2026 12:49:32 -0800
Subject: [PATCH] fix hydration error in moderation queue (#5038)

* fix hydration error in moderation queue

* disabled moderation button when no projects

* fix circular prop type issue

* Make moderation checklist clientonly
---
 .../ui/moderation/ModerationQueueCard.vue     |  4 +++-
 apps/frontend/src/pages/[type]/[id].vue       | 24 ++++++++++---------
 apps/frontend/src/pages/moderation/index.vue  |  1 +
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
index 5572027f..2c8ecbb8 100644
--- a/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
+++ b/apps/frontend/src/components/ui/moderation/ModerationQueueCard.vue
@@ -90,7 +90,7 @@
 						</button>
 					</ButtonStyled>
 					<ButtonStyled circular>
-						<OverflowMenu :options="quickActions">
+						<OverflowMenu :options="quickActions" :dropdown-id="`${baseId}-quick-actions`">
 							<template #default>
 								<EllipsisVerticalIcon class="size-4" />
 							</template>
@@ -133,6 +133,8 @@ const { addNotification } = injectNotificationManager()
 const formatRelativeTime = useRelativeTime()
 const moderationStore = useModerationStore()
 
+const baseId = useId()
+
 const props = defineProps<{
 	queueEntry: ModerationProject
 }>()
diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue
index d6de08d7..7140963d 100644
--- a/apps/frontend/src/pages/[type]/[id].vue
+++ b/apps/frontend/src/pages/[type]/[id].vue
@@ -463,7 +463,7 @@
 										? `standard`
 										: `brand`
 								"
-								:circular="auth.user && currentMember"
+								:circular="!!auth.user && !!currentMember"
 							>
 								<button
 									v-tooltip="
@@ -927,16 +927,18 @@
 		</div>
 	</div>
 
-	<div
-		v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
-		class="moderation-checklist"
-	>
-		<ModerationChecklist
-			:collapsed="collapsedModerationChecklist"
-			@exit="showModerationChecklist = false"
-			@toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
-		/>
-	</div>
+	<ClientOnly>
+		<div
+			v-if="auth.user && tags.staffRoles.includes(auth.user.role) && showModerationChecklist"
+			class="moderation-checklist"
+		>
+			<ModerationChecklist
+				:collapsed="collapsedModerationChecklist"
+				@exit="showModerationChecklist = false"
+				@toggle-collapsed="collapsedModerationChecklist = !collapsedModerationChecklist"
+			/>
+		</div>
+	</ClientOnly>
 
 	<template v-if="hasEditDetailsPermission">
 		<ProjectEnvironmentModal ref="projectEnvironmentModal" />
diff --git a/apps/frontend/src/pages/moderation/index.vue b/apps/frontend/src/pages/moderation/index.vue
index 9c843853..7a635051 100644
--- a/apps/frontend/src/pages/moderation/index.vue
+++ b/apps/frontend/src/pages/moderation/index.vue
@@ -64,6 +64,7 @@
 				<ButtonStyled color="orange" class="w-full sm:w-auto">
 					<button
 						class="flex !h-[40px] w-full items-center justify-center gap-2 sm:w-auto"
+						:disabled="paginatedProjects?.length === 0"
 						@click="moderateAllInFilter()"
 					>
 						<ScaleIcon class="flex-shrink-0" />