Coolbot/moderation updates for versions changes (#4942)

* update reports message to the correct support bubble color

* update checklist to direct to new settings pages and use v3 env info

* fix: project v2 + v3 in moderation checklist funcs

* Split environment stage if project uses mixed environments.

---------

Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

apps/frontend/src/components/ui/moderation/checklist/ModerationChecklist.vue

@@ -84,8 +84,8 @@
 				<div v-else-if="isModpackPermissionsStage">
 					<ModpackPermissionsFlow
 						v-model="modpackJudgements"
-						:project-id="project.id"
-						:project-updated="project.updated"
+						:project-id="projectV2.id"
+						:project-updated="projectV2.updated"
 						@complete="handleModpackPermissionsComplete"
 					/>
 				</div>
@@ -282,7 +282,7 @@
 								</button>
 							</ButtonStyled>
 							<ButtonStyled color="green">
-								<button @click="sendMessage(project.requested_status ?? 'approved')">
+								<button @click="sendMessage(projectV2.requested_status ?? 'approved')">
 									<CheckIcon aria-hidden="true" />
 									Approve
 								</button>
@@ -360,7 +360,9 @@ import {
 	expandVariables,
 	finalPermissionMessages,
 	findMatchingVariant,
+	flattenProjectV3Variables,
 	flattenProjectVariables,
+	flattenStaticVariables,
 	getActionIdForStage,
 	getActionMessage,
 	getVisibleInputs,
@@ -380,6 +382,7 @@ import {
 	Collapsible,
 	DropdownSelect,
 	injectNotificationManager,
+	injectProjectPageContext,
 	MarkdownEditor,
 	OverflowMenu,
 	type OverflowMenuOption,
@@ -387,7 +390,6 @@ import {
 import {
 	type ModerationJudgements,
 	type ModerationModpackItem,
-	type Project,
 	type ProjectStatus,
 	renderHighlightedString,
 } from '@modrinth/utils'
@@ -404,14 +406,19 @@ const { addNotification } = notifications
 const keybindsModal = ref<InstanceType<typeof KeybindsModal>>()
 
 const props = defineProps<{
-	project: Project
 	collapsed: boolean
 }>()
 
+const { projectV2, projectV3 } = injectProjectPageContext()
+
 const moderationStore = useModerationStore()
 
 const variables = computed(() => {
-	return flattenProjectVariables(props.project)
+	return {
+		...flattenStaticVariables(),
+		...flattenProjectVariables(projectV2.value),
+		...flattenProjectV3Variables(projectV3.value),
+	}
 })
 
 const modpackPermissionsComplete = ref(false)
@@ -445,12 +452,12 @@ function resetProgress() {
 	message.value = ''
 	loadingMessage.value = false
 
-	localStorage.removeItem(`modpack-permissions-${props.project.id}`)
-	localStorage.removeItem(`modpack-permissions-index-${props.project.id}`)
+	localStorage.removeItem(`modpack-permissions-${projectV2.value.id}`)
+	localStorage.removeItem(`modpack-permissions-index-${projectV2.value.id}`)
 
-	sessionStorage.removeItem(`modpack-permissions-data-${props.project.id}`)
-	sessionStorage.removeItem(`modpack-permissions-permanent-no-${props.project.id}`)
-	sessionStorage.removeItem(`modpack-permissions-updated-${props.project.id}`)
+	sessionStorage.removeItem(`modpack-permissions-data-${projectV2.value.id}`)
+	sessionStorage.removeItem(`modpack-permissions-permanent-no-${projectV2.value.id}`)
+	sessionStorage.removeItem(`modpack-permissions-updated-${projectV2.value.id}`)
 
 	modpackPermissionsComplete.value = false
 	modpackJudgements.value = {}
@@ -468,7 +475,7 @@ function findFirstValidStage(): number {
 }
 
 const currentStageObj = computed(() => checklist[currentStage.value])
-const currentStage = useLocalStorage(`moderation-stage-${props.project.slug}`, () =>
+const currentStage = useLocalStorage(`moderation-stage-${projectV2.value.slug}`, () =>
 	findFirstValidStage(),
 )
 
@@ -477,7 +484,12 @@ const stageTextExpanded = computedAsync(async () => {
 	const stage = checklist[stageIndex]
 	if (stage.text) {
 		return renderHighlightedString(
-			expandVariables(await stage.text(props.project), props.project, variables.value),
+			expandVariables(
+				await stage.text(projectV2.value, projectV3.value),
+				projectV2.value,
+				projectV3.value,
+				variables.value,
+			),
 		)
 	}
 	return null
@@ -489,7 +501,7 @@ interface ActionState {
 }
 
 const persistedActionStates = useLocalStorage(
-	`moderation-actions-${props.project.slug}`,
+	`moderation-actions-${projectV2.value.slug}`,
 	{},
 	{
 		serializer: {
@@ -502,7 +514,7 @@ const persistedActionStates = useLocalStorage(
 const router = useRouter()
 
 const persistedTextInputs = useLocalStorage(
-	`moderation-inputs-${props.project.slug}`,
+	`moderation-inputs-${projectV2.value.slug}`,
 	{} as Record<string, string>,
 )
 
@@ -530,7 +542,7 @@ function handleKeybinds(event: KeyboardEvent) {
 	handleKeybind(
 		event,
 		{
-			project: props.project,
+			project: projectV2.value,
 			state: {
 				currentStage: currentStage.value,
 				totalStages: checklist.length,
@@ -562,7 +574,7 @@ function handleKeybinds(event: KeyboardEvent) {
 				tryResetProgress: resetProgress,
 				tryExitModeration: () => emit('exit'),
 
-				tryApprove: () => sendMessage(props.project.requested_status),
+				tryApprove: () => sendMessage(projectV2.value.requested_status ?? 'approved'),
 				tryReject: () => sendMessage('rejected'),
 				tryWithhold: () => sendMessage('withheld'),
 				tryEditMessage: goBackToStages,
@@ -656,7 +668,7 @@ watch(
 	(newIndex) => {
 		const stage = checklist[newIndex]
 		if (stage?.navigate) {
-			router.push(`/${props.project.project_type}/${props.project.slug}${stage.navigate}`)
+			router.push(`/${projectV2.value.project_type}/${projectV2.value.slug}${stage.navigate}`)
 		}
 
 		initializeCurrentStage()
@@ -858,11 +870,11 @@ function getModpackFilesFromStorage(): {
 	permanentNo: ModerationModpackItem[]
 } {
 	try {
-		const sessionData = sessionStorage.getItem(`modpack-permissions-data-${props.project.id}`)
+		const sessionData = sessionStorage.getItem(`modpack-permissions-data-${projectV2.value.id}`)
 		const interactive = sessionData ? (JSON.parse(sessionData) as ModerationModpackItem[]) : []
 
 		const permanentNoData = sessionStorage.getItem(
-			`modpack-permissions-permanent-no-${props.project.id}`,
+			`modpack-permissions-permanent-no-${projectV2.value.id}`,
 		)
 		const permanentNo = permanentNoData
 			? (JSON.parse(permanentNoData) as ModerationModpackItem[])
@@ -894,7 +906,8 @@ async function assembleFullMessage() {
 			.map((part) => part.content)
 			.filter((content) => content.trim().length > 0)
 			.join('\n\n'),
-		props.project,
+		projectV2.value,
+		projectV3.value,
 	)
 
 	return finalMessage
@@ -1048,7 +1061,7 @@ function shouldShowStage(stage: Stage): boolean {
 	}
 
 	if (typeof stage.shouldShow === 'function') {
-		return stage.shouldShow(props.project)
+		return stage.shouldShow(projectV2.value, projectV3.value)
 	}
 
 	return true
@@ -1056,7 +1069,7 @@ function shouldShowStage(stage: Stage): boolean {
 
 function shouldShowAction(action: Action): boolean {
 	if (typeof action.shouldShow === 'function') {
-		return action.shouldShow(props.project)
+		return action.shouldShow(projectV2.value)
 	}
 
 	return true
@@ -1065,7 +1078,7 @@ function shouldShowAction(action: Action): boolean {
 function getVisibleDropdownOptions(action: DropdownAction) {
 	return action.options.filter((option) => {
 		if (typeof option.shouldShow === 'function') {
-			return option.shouldShow(props.project)
+			return option.shouldShow(projectV2.value)
 		}
 		return true
 	})
@@ -1074,7 +1087,7 @@ function getVisibleDropdownOptions(action: DropdownAction) {
 function getVisibleMultiSelectOptions(action: MultiSelectChipsAction) {
 	return action.options.filter((option) => {
 		if (typeof option.shouldShow === 'function') {
-			return option.shouldShow(props.project)
+			return option.shouldShow(projectV2.value)
 		}
 		return true
 	})
@@ -1141,13 +1154,13 @@ async function generateMessage() {
 
 	loadingMessage.value = true
 
-	router.push(`/${props.project.project_type}/${props.project.slug}/moderation`)
+	router.push(`/${projectV2.value.project_type}/${projectV2.value.slug}/moderation`)
 
 	try {
 		const baseMessage = await assembleFullMessage()
 		let fullMessage = baseMessage
 
-		if (props.project.project_type === 'modpack') {
+		if (projectV2.value.project_type === 'modpack') {
 			const modpackFilesData = getModpackFilesFromStorage()
 
 			if (modpackFilesData.interactive.length > 0 || modpackFilesData.permanentNo.length > 0) {
@@ -1239,7 +1252,7 @@ function generateModpackMessage(allFiles: {
 const hasNextProject = ref(false)
 async function sendMessage(status: ProjectStatus) {
 	try {
-		await useBaseFetch(`project/${props.project.id}`, {
+		await useBaseFetch(`project/${projectV2.value.id}`, {
 			method: 'PATCH',
 			body: {
 				status,
@@ -1247,7 +1260,7 @@ async function sendMessage(status: ProjectStatus) {
 		})
 
 		if (message.value) {
-			await useBaseFetch(`thread/${props.project.thread_id}`, {
+			await useBaseFetch(`thread/${projectV2.value.thread_id}`, {
 				method: 'POST',
 				body: {
 					body: {
@@ -1259,7 +1272,7 @@ async function sendMessage(status: ProjectStatus) {
 		}
 
 		if (
-			props.project.project_type === 'modpack' &&
+			projectV2.value.project_type === 'modpack' &&
 			Object.keys(modpackJudgements.value).length > 0
 		) {
 			await useBaseFetch(`moderation/project`, {
@@ -1272,7 +1285,7 @@ async function sendMessage(status: ProjectStatus) {
 		done.value = true
 
 		hasNextProject.value = await moderationStore.completeCurrentProject(
-			props.project.id,
+			projectV2.value.id,
 			'completed',
 		)
 	} catch (error) {
@@ -1326,21 +1339,21 @@ async function endChecklist(status?: string) {
 }
 
 async function skipCurrentProject() {
-	hasNextProject.value = await moderationStore.completeCurrentProject(props.project.id, 'skipped')
+	hasNextProject.value = await moderationStore.completeCurrentProject(projectV2.value.id, 'skipped')
 
 	await endChecklist('skipped')
 }
 
 function clearProjectLocalStorage() {
-	localStorage.removeItem(`modpack-permissions-${props.project.id}`)
-	localStorage.removeItem(`modpack-permissions-index-${props.project.id}`)
-	localStorage.removeItem(`moderation-actions-${props.project.slug}`)
-	localStorage.removeItem(`moderation-inputs-${props.project.slug}`)
-	localStorage.removeItem(`moderation-stage-${props.project.slug}`)
+	localStorage.removeItem(`modpack-permissions-${projectV2.value.id}`)
+	localStorage.removeItem(`modpack-permissions-index-${projectV2.value.id}`)
+	localStorage.removeItem(`moderation-actions-${projectV2.value.slug}`)
+	localStorage.removeItem(`moderation-inputs-${projectV2.value.slug}`)
+	localStorage.removeItem(`moderation-stage-${projectV2.value.slug}`)
 
-	sessionStorage.removeItem(`modpack-permissions-data-${props.project.id}`)
-	sessionStorage.removeItem(`modpack-permissions-permanent-no-${props.project.id}`)
-	sessionStorage.removeItem(`modpack-permissions-updated-${props.project.id}`)
+	sessionStorage.removeItem(`modpack-permissions-data-${projectV2.value.id}`)
+	sessionStorage.removeItem(`modpack-permissions-permanent-no-${projectV2.value.id}`)
+	sessionStorage.removeItem(`modpack-permissions-updated-${projectV2.value.id}`)
 
 	actionStates.value = {}
 }