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

Author: Prospector

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
 }>()

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" />

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" />