Moderation Changes Phase 2.-1 (#6833)

* better default state handling

* make next stage button work for going to next project

* fix skill issue

* actually fix initial values this time,
make single line inputs with varying lengths (text input and dropdown) use their widest possible length instead of whatever the hell they used to be

* loaders in progress

* loaders and versions test (probably dont use them as the messages suck and idrk what they should do quick fix/message wise)

* WIP the wip

* good enough for now slug taken improvements

* trim all those extra newlines

* viewedness

* batch prefetch queue + technically slightly faster checklist init

* show all valid alternative project types regardless of current project type

* Hide moderation permissions stage when it should be, and I'm sure this won't cause any issues

* Hide moderation permissions stage when it should be, and I'm sure this won't cause any issues

* gimme them versions

* better moderation permission stage shown check?

* betterer moderation permission stage shown check?

* bettererer moderation permission stage shown check? + also began deleting legacy checklist types

* fix certain stages being able to be considered viewed before being viewed

* more removals + i forgot to remove an import last commit

* changed nothing™️

* remove severities + bandaid post-approval message priorities + dependencies

* fix message preview tooltips

* next stage = next project when done

* insufficient description custom fix

* fix that thing coolbot told me was broken I forgot what it was oops

* oh there was a second bug there

* make alternate versions and incorrect project type required cuz they are

* re-navigate button also damn that's a lot of other stuff that pnpm fix... fixed?

* you cant just quick fix a slug into a taken one

* maybe lets not just try and set a slug to something entirely invalid?

* what if we just didn't drop ur queue :smart:

* more queue upgrades

* tweaks

* I love unbreaking things

* un-nuked renavigate button

* prepr

* prepr worked this time i think

* undo more mistakes

* i love intellij refactoring

* ok i think we're good

apps/frontend/src/components/ui/moderation/ModerationProjectNags.vue

@@ -106,7 +106,7 @@ interface Tags {
 interface Props {
 	project: Labrinth.Projects.v2.Project
 	projectV3: Labrinth.Projects.v3.Project
-	versions?: Labrinth.Versions.v2.Version[]
+	versions?: Labrinth.Versions.v3.Version[]
 	currentMember?: Labrinth.Projects.v3.TeamMember | null
 	collapsed?: boolean
 	routeName?: string

apps/frontend/src/components/ui/moderation/QueueSummaryModal.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { ScaleIcon, XIcon } from '@modrinth/assets'
+import { AutoLink, Button, injectModrinthClient, NewModal } from '@modrinth/ui'
+import { ref, useTemplateRef } from 'vue'
+
+import { useGeneratedState } from '~/composables/generated'
+import { getProjectTypeForUrlShorthand } from '~/helpers/projects.js'
+
+const props = defineProps<{
+	completedIds: string[]
+	skippedIds: string[]
+}>()
+
+const emit = defineEmits<{
+	(e: 'review-skipped'): void
+}>()
+
+const client = injectModrinthClient()
+const tags = useGeneratedState()
+const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
+
+interface QueueSummaryEntry {
+	id: string
+	title: string
+	link: string
+}
+
+const completedEntries = ref<QueueSummaryEntry[]>([])
+const skippedEntries = ref<QueueSummaryEntry[]>([])
+
+function toEntries(
+	ids: string[],
+	projectsById: Map<string, { id: string; slug: string; title: string; project_types: string[] }>,
+): QueueSummaryEntry[] {
+	return ids
+		.map((id) => projectsById.get(id))
+		.filter((project): project is NonNullable<typeof project> => !!project)
+		.map((project) => ({
+			id: project.id,
+			title: project.title,
+			link: `/${getProjectTypeForUrlShorthand(project.project_types[0], [], tags.value)}/${project.slug}`,
+		}))
+}
+
+async function show() {
+	const ids = [...new Set([...props.completedIds, ...props.skippedIds])]
+	const projects =
+		ids.length > 0 ? await client.labrinth.projects_v3.getMultiple(ids).catch(() => []) : []
+	const projectsById = new Map(projects.map((project) => [project.id, project]))
+
+	completedEntries.value = toEntries(props.completedIds, projectsById)
+	skippedEntries.value = toEntries(props.skippedIds, projectsById)
+
+	modalRef.value?.show()
+}
+
+function hide() {
+	modalRef.value?.hide()
+}
+
+function reviewSkipped() {
+	emit('review-skipped')
+	hide()
+}
+
+defineExpose({ show, hide })
+</script>
+
+<template>
+	<NewModal ref="modalRef" header="Queue completed">
+		<div class="flex flex-col gap-4">
+			<div v-if="completedEntries.length > 0" class="flex flex-col gap-2">
+				<span class="font-bold text-contrast">Completed ({{ completedEntries.length }})</span>
+				<ul class="m-0 flex list-none flex-col gap-1 p-0">
+					<li v-for="entry in completedEntries" :key="entry.id">
+						<AutoLink :to="entry.link" class="text-primary hover:underline">{{
+							entry.title
+						}}</AutoLink>
+					</li>
+				</ul>
+			</div>
+
+			<div v-if="skippedEntries.length > 0" class="flex flex-col gap-2">
+				<span class="font-bold text-contrast">Skipped ({{ skippedEntries.length }})</span>
+				<ul class="m-0 flex list-none flex-col gap-1 p-0">
+					<li v-for="entry in skippedEntries" :key="entry.id">
+						<AutoLink :to="entry.link" class="text-primary hover:underline">{{
+							entry.title
+						}}</AutoLink>
+					</li>
+				</ul>
+			</div>
+
+			<div
+				v-if="completedEntries.length === 0 && skippedEntries.length === 0"
+				class="text-secondary"
+			>
+				No projects were reviewed during this queue.
+			</div>
+
+			<div class="flex justify-end gap-2">
+				<Button
+					v-if="skippedEntries.length > 0"
+					type="colored"
+					color="orange"
+					@click="reviewSkipped"
+				>
+					<ScaleIcon />
+					Review skipped ({{ skippedEntries.length }})
+				</Button>
+				<Button @click="hide">
+					<XIcon />
+					Close
+				</Button>
+			</div>
+		</div>
+	</NewModal>
+</template>

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

@@ -1,826 +0,0 @@
-<script lang="ts" setup>
-import type {
-	BooleanNodeBuilder,
-	ButtonNodeBuilder,
-	ChildNode,
-	DropdownNodeBuilder,
-	GroupNodeBuilder,
-	IdentifiedNodeBuilder,
-	InputNodeBuilder,
-	LabeledNodeBuilder,
-	NodeState,
-	NodeStateWithChildren,
-	OverrideValue,
-	ValueNodeBuilder,
-} from '@modrinth/moderation'
-import {
-	evalSegment,
-	expandVariables,
-	flattenProjectV3Variables,
-	flattenProjectVariables,
-	flattenStaticVariables,
-	getBooleanChildState,
-	NodeBuilder,
-	resolve,
-	resolveChildren,
-	setMessageProject,
-} from '@modrinth/moderation'
-import {
-	Button,
-	Checkbox,
-	Combobox,
-	injectProjectPageContext,
-	MarkdownEditor,
-	StyledInput,
-} from '@modrinth/ui'
-import { renderHighlightedString, renderString } from '@modrinth/utils'
-import { inject, nextTick, onMounted, reactive, watchEffect } from 'vue'
-
-import { NODE_META_KEY, STATE_KEY } from './checklist-context'
-
-const nodeMetaMap = inject(NODE_META_KEY)
-const injectedGlobalState = inject(STATE_KEY)
-
-const { projectV3: project, projectV2 } = injectProjectPageContext()
-setMessageProject(project, projectV2)
-
-const props = defineProps<{
-	nodes: ChildNode[]
-	showContext: Record<string, NodeState>
-	onImageUpload?: (file: File) => Promise<string>
-	flex?: boolean
-	titleDepth?: number
-	parentStatePath?: string[]
-}>()
-
-function titleClass(depth: number): string {
-	if (depth === 0) return 'text-lg font-extrabold text-contrast'
-	if (depth === 1) return 'text-base font-semibold'
-	if (depth === 2) return 'text-sm font-semibold'
-	return ''
-}
-
-function isVisible(node: NodeBuilder): boolean {
-	if (node._shown !== undefined) return resolve(node._shown)
-	if (node.type === 'group') {
-		const children = getChildren(node as IdentifiedNodeBuilder)
-		return children.some((c) => !(c instanceof NodeBuilder) || isVisible(c))
-	}
-	return true
-}
-
-function isEnabled(node: IdentifiedNodeBuilder): boolean {
-	const e = node._enabled
-	if (e === undefined) return true
-	if (typeof e === 'function') return e(props.showContext)
-	return resolve(e)
-}
-
-function isButtonEnabled(node: ButtonNodeBuilder): boolean {
-	const enabled = node._enabled
-	if (enabled === undefined) return true
-	if (typeof enabled === 'function') return enabled(props.showContext)
-	return resolve(enabled)
-}
-
-function asBool(node: NodeBuilder): BooleanNodeBuilder {
-	return node as BooleanNodeBuilder
-}
-
-function asButton(node: NodeBuilder): ButtonNodeBuilder {
-	return node as ButtonNodeBuilder
-}
-
-function asIdentified(node: NodeBuilder): IdentifiedNodeBuilder {
-	return node as IdentifiedNodeBuilder
-}
-
-function asLabeled(node: NodeBuilder): LabeledNodeBuilder {
-	return node as LabeledNodeBuilder
-}
-
-function asGroup(node: NodeBuilder): GroupNodeBuilder {
-	return node as GroupNodeBuilder
-}
-
-function asDropdown(node: NodeBuilder): DropdownNodeBuilder {
-	return node as DropdownNodeBuilder
-}
-
-function asInput(node: NodeBuilder): InputNodeBuilder {
-	return node as InputNodeBuilder
-}
-
-function getAtPath(path: string[]): NodeState {
-	let current: unknown = injectedGlobalState!.value
-	for (const key of path) {
-		if (current == null || typeof current !== 'object' || current instanceof Set) return undefined
-		current = (current as Record<string, unknown>)[key]
-	}
-	return current as NodeState
-}
-
-function setAtPath(path: string[], value: NodeState): void {
-	if (path.length === 0) return
-	const global = injectedGlobalState!.value as unknown as Record<string, unknown>
-	let current = global
-	const stack: [Record<string, unknown>, string][] = []
-	for (let i = 0; i < path.length - 1; i++) {
-		const key = path[i]
-		const next = current[key]
-		if (!next || typeof next !== 'object' || next instanceof Set) {
-			if (value === undefined) return
-			current[key] = next !== null && next !== undefined ? { value: next } : {}
-			current = current[key] as Record<string, unknown>
-		} else {
-			stack.push([current, key])
-			current = next as Record<string, unknown>
-		}
-	}
-	const lastKey = path[path.length - 1]
-	if (value === undefined) {
-		Reflect.deleteProperty(current, lastKey)
-		for (let i = stack.length - 1; i >= 0; i--) {
-			const [parent, key] = stack[i]
-			const child = parent[key]
-			if (
-				child &&
-				typeof child === 'object' &&
-				!(child instanceof Set) &&
-				Object.keys(child as object).length === 0
-			) {
-				Reflect.deleteProperty(parent, key)
-			} else {
-				break
-			}
-		}
-	} else {
-		current[lastKey] = value as unknown
-	}
-}
-
-function getNodeState(node: IdentifiedNodeBuilder): NodeState {
-	return node._statePath ? getAtPath(node._statePath) : undefined
-}
-
-function setNodeState(node: IdentifiedNodeBuilder, value: NodeState): void {
-	if (node._statePath) setAtPath(node._statePath, value)
-}
-
-function getBooleanState(node: BooleanNodeBuilder): boolean {
-	const state = getNodeState(node)
-	if (typeof state === 'boolean') return state
-	if (state && typeof state === 'object' && !(state instanceof Set)) {
-		const v = (state as NodeStateWithChildren).value
-		if (typeof v === 'boolean') return v
-	}
-	const def = resolveDefault(node)
-	return (def as boolean | undefined) ?? false
-}
-
-function getMultiSelectState(node: IdentifiedNodeBuilder): Set<string> {
-	const state = getNodeState(node)
-	return state instanceof Set ? state : new Set<string>()
-}
-
-function getSelectState(node: IdentifiedNodeBuilder): string | undefined {
-	const state = getNodeState(node)
-	if (typeof state === 'string') return state
-	const def = resolveDefault(node as ValueNodeBuilder)
-	return typeof def === 'string' ? def : undefined
-}
-
-function getDropdownOptions(node: DropdownNodeBuilder) {
-	return [
-		...(node._none !== undefined ? [{ value: '', label: node._none }] : []),
-		...visibleChildren(node).map((c) => ({
-			value: asIdentified(c).id!,
-			label: asLabeled(c).label,
-		})),
-	]
-}
-
-function getDropdownModelValue(node: DropdownNodeBuilder) {
-	return getSelectState(node) ?? (node._none !== undefined ? '' : undefined)
-}
-
-function toggleSelect(parent: IdentifiedNodeBuilder, child: IdentifiedNodeBuilder) {
-	const current = getSelectState(parent)
-	setNodeState(parent, current === child.id ? undefined : child.id)
-}
-
-function resolveDefault(node: ValueNodeBuilder): NodeState {
-	const d = node._defaultValue
-	return typeof d === 'function' ? d(props.showContext) : d
-}
-
-function getTextState(node: IdentifiedNodeBuilder): string {
-	const state = getNodeState(node)
-	if (typeof state === 'string') return state
-	const def = resolveDefault(node as ValueNodeBuilder)
-	return typeof def === 'string' ? def : ''
-}
-
-function getNodeTitle(node: NodeBuilder): string | undefined {
-	if (node._title === undefined) return undefined
-	return resolve(node._title) || undefined
-}
-
-function getPlaceholder(node: InputNodeBuilder): string | undefined {
-	if (node._placeholder !== undefined) return resolve(node._placeholder)
-	const def = resolveDefault(node)
-	if (typeof def === 'string') return def
-	return undefined
-}
-
-function hasActionableFixes(node: IdentifiedNodeBuilder): boolean {
-	return nodeMetaMap?.value.get(node)?.isFixActionable ?? false
-}
-
-function hasRequiredMissingDescendants(node: IdentifiedNodeBuilder): boolean {
-	for (const child of getChildren(node)) {
-		if (!(child instanceof NodeBuilder)) continue
-		const identified = child as IdentifiedNodeBuilder
-		if (nodeMetaMap?.value.get(identified)?.hasRequiredMissing) return true
-		if (identified.id !== undefined && hasRequiredMissingDescendants(identified)) return true
-	}
-	return false
-}
-
-function nodeHasRequiredMissing(node: IdentifiedNodeBuilder): boolean {
-	return !!nodeMetaMap?.value.get(node)?.hasRequiredMissing || hasRequiredMissingDescendants(node)
-}
-
-function getBooleanColor(node: BooleanNodeBuilder): 'standard' | 'orange' | 'blue' | 'brand' {
-	if (!getBooleanState(node)) return 'standard'
-	if (hasRequiredMissingDescendants(node)) return 'orange'
-	return hasActionableFixes(node) ? 'blue' : 'brand'
-}
-
-function setTextState(node: IdentifiedNodeBuilder, v: string): void {
-	const inputNode = node as InputNodeBuilder
-	const result = inputNode._onChange?.(v, overrideHelpers)
-
-	if (isOverrideValue(result)) {
-		const ov = result.__override
-		const def = resolveDefault(node as ValueNodeBuilder)
-		const defStr = typeof def === 'string' ? def : ''
-		setNodeState(node, ov === defStr ? undefined : ov || undefined)
-		nextTick(() => textInputRefs.get(node)?.setValue(ov))
-		return
-	}
-
-	const def = resolveDefault(node as ValueNodeBuilder)
-	const defStr = typeof def === 'string' ? def : ''
-	setNodeState(node, v === defStr ? undefined : defStr ? v : v || undefined)
-}
-
-function handleButtonClick(node: ButtonNodeBuilder): void {
-	const before = new Map<NodeBuilder, string>()
-	for (const inputNode of textInputRefs.keys()) {
-		before.set(inputNode, getTextState(asIdentified(inputNode)))
-	}
-	node._onClick?.(props.showContext)
-	for (const [inputNode, beforeVal] of before) {
-		const after = getTextState(asIdentified(inputNode))
-		if (after !== beforeVal) setTextState(asIdentified(inputNode), after)
-	}
-}
-
-onMounted(() => {
-	for (const inputNode of textInputRefs.keys()) {
-		setTextState(asIdentified(inputNode), getTextState(asIdentified(inputNode)))
-	}
-})
-
-function toggleBoolean(node: BooleanNodeBuilder) {
-	const raw = getNodeState(node)
-	const next = !getBooleanState(node)
-	const defaultVal = (resolveDefault(node) as boolean | undefined) ?? false
-	const isDefault = next === defaultVal
-	if (raw && typeof raw === 'object' && !(raw instanceof Set)) {
-		const { value: _v, ...children } = raw as NodeStateWithChildren & Record<string, NodeState>
-		const hasChildren = Object.keys(children).length > 0
-		setNodeState(
-			node,
-			isDefault && !hasChildren
-				? undefined
-				: ({ ...children, ...(isDefault ? {} : { value: next }) } as NodeState),
-		)
-	} else {
-		setNodeState(node, isDefault ? undefined : next)
-	}
-}
-
-function toggleChip(parent: IdentifiedNodeBuilder, child: IdentifiedNodeBuilder) {
-	const selected = new Set(getMultiSelectState(parent))
-	if (selected.has(child.id!)) {
-		selected.delete(child.id!)
-		if (child._statePath) {
-			setAtPath(child._statePath, undefined)
-		}
-	} else {
-		selected.add(child.id!)
-	}
-	setNodeState(parent, selected.size > 0 ? selected : undefined)
-}
-
-const textInputRefs = new Map<NodeBuilder, { setValue: (v: string) => void }>()
-const overrideHelpers = { override: (v: string): OverrideValue => ({ __override: v }) }
-
-function isOverrideValue(v: unknown): v is OverrideValue {
-	return v !== null && typeof v === 'object' && '__override' in v
-}
-
-const scopedContextFallbacks = new WeakMap<IdentifiedNodeBuilder, Record<string, NodeState>>()
-
-function childScopedContext(child: IdentifiedNodeBuilder): Record<string, NodeState> {
-	if (!child._statePath) return props.showContext
-	const basePath = child._statePath
-	const state = getAtPath(basePath)
-	if (state && typeof state === 'object' && !(state instanceof Set)) {
-		return state as Record<string, NodeState>
-	}
-	const existing = scopedContextFallbacks.get(child)
-	if (existing) return existing
-	const fallback = new Proxy({} as Record<string, NodeState>, {
-		set(_target, key, value) {
-			setAtPath([...basePath, key as string], value as NodeState)
-			return true
-		},
-	})
-	scopedContextFallbacks.set(child, fallback)
-	return fallback
-}
-
-function getChildrenContext(node: IdentifiedNodeBuilder): Record<string, NodeState> {
-	if (node.type === 'dropdown') return props.showContext
-	if (node.type === 'group' && asGroup(node)._selectMode) return props.showContext
-	return childScopedContext(node)
-}
-
-function getChildren(node: IdentifiedNodeBuilder): ChildNode[] {
-	return resolveChildren(node, getChildrenContext(node))
-}
-
-function visibleChildren(node: IdentifiedNodeBuilder): NodeBuilder[] {
-	return getChildren(node).filter((c): c is NodeBuilder => c instanceof NodeBuilder && isVisible(c))
-}
-
-const tooltipHtml = reactive(new Map<NodeBuilder, string>())
-
-function getTooltipConfig(node: NodeBuilder, state?: Record<string, NodeState>) {
-	const t = node._tooltip
-	const manual = t === undefined ? undefined : typeof t === 'function' ? t(state ?? {}) : resolve(t)
-	if (manual)
-		return {
-			content: manual,
-			delay: { show: 500, hide: 0 },
-			triggers: ['hover', 'focus'],
-			placement: 'top',
-		}
-	const html = tooltipHtml.get(node)
-	if (!html) return undefined
-	return {
-		content: html,
-		html: true,
-		delay: { show: 500, hide: 0 },
-		triggers: ['hover', 'focus'],
-		placement: 'top',
-	}
-}
-
-watchEffect(async () => {
-	// Read all reactive state synchronously before any await so Vue tracks dependencies
-	const buttonTasks: Array<{ node: BooleanNodeBuilder; state: Record<string, NodeState> }> = []
-
-	for (const node of props.nodes) {
-		if (!(node instanceof NodeBuilder)) continue
-		if (node.type === 'toggle' && isVisible(node)) {
-			const boolNode = asBool(node)
-			if (boolNode._segments.some((s) => s.type !== 'collect')) {
-				const nodeState = getNodeState(boolNode)
-				const childState =
-					nodeState && typeof nodeState === 'object' && !(nodeState instanceof Set)
-						? (() => {
-								const { value: _v, ...rest } = nodeState as NodeStateWithChildren &
-									Record<string, NodeState>
-								return rest
-							})()
-						: {}
-				buttonTasks.push({ node: boolNode, state: childState })
-			}
-		}
-		if (node.type === 'group' && asGroup(node)._selectMode === 'multi' && isVisible(node)) {
-			for (const child of visibleChildren(asIdentified(node))) {
-				const opt = child as IdentifiedNodeBuilder
-				if (opt._segments.some((s) => s.type !== 'collect')) {
-					const childState = getBooleanChildState(getNodeState(opt)) as Record<string, NodeState>
-					buttonTasks.push({ node: opt as BooleanNodeBuilder, state: childState })
-				}
-			}
-		}
-	}
-
-	async function evalCollectedChildren(node: IdentifiedNodeBuilder): Promise<string> {
-		let result = ''
-		for (const child of getChildren(node)) {
-			if (!(child instanceof NodeBuilder)) continue
-			if (!isVisible(child)) continue
-			const childNode = asIdentified(child)
-			if (child.type === 'group') {
-				const grp = asGroup(childNode)
-				if (grp._selectMode === 'multi') {
-					const selected = getMultiSelectState(childNode)
-					for (const opt of getChildren(childNode)) {
-						if (!(opt instanceof NodeBuilder) || !isVisible(opt)) continue
-						const optNode = asIdentified(opt)
-						if (!optNode.id || !selected.has(optNode.id)) continue
-						result += await evalNodeTooltip(
-							optNode,
-							getBooleanChildState(getNodeState(optNode)) as Record<string, NodeState>,
-						)
-					}
-				} else if (grp._selectMode === 'single') {
-					const selected = getSelectState(childNode)
-					for (const opt of getChildren(childNode)) {
-						if (!(opt instanceof NodeBuilder) || !isVisible(opt)) continue
-						const optNode = asIdentified(opt)
-						if (optNode.id !== selected) continue
-						result += await evalNodeTooltip(
-							optNode,
-							getBooleanChildState(getNodeState(optNode)) as Record<string, NodeState>,
-						)
-					}
-				} else {
-					result += await evalCollectedChildren(childNode)
-				}
-			} else if (child.type === 'dropdown') {
-				const selected = getSelectState(childNode)
-				for (const opt of getChildren(childNode)) {
-					if (!(opt instanceof NodeBuilder) || !isVisible(opt)) continue
-					const optNode = asIdentified(opt)
-					if (optNode.id !== selected) continue
-					result += await evalNodeTooltip(
-						optNode,
-						getBooleanChildState(getNodeState(optNode)) as Record<string, NodeState>,
-					)
-				}
-			} else if (child.type === 'toggle' || child.type === 'check') {
-				if (!getBooleanState(asBool(childNode))) continue
-				result += await evalNodeTooltip(
-					childNode,
-					getBooleanChildState(getNodeState(childNode)) as Record<string, NodeState>,
-				)
-			}
-		}
-		return result
-	}
-
-	async function evalNodeTooltip(
-		node: IdentifiedNodeBuilder,
-		state: Record<string, NodeState>,
-	): Promise<string> {
-		let result = ''
-		for (const seg of node._segments) {
-			if (seg.type === 'collect') {
-				let collected = await evalCollectedChildren(node)
-				if (!collected.trim() && seg.fallback) {
-					collected = await evalSegment(seg.fallback, state, node._statePath ?? [])
-				}
-				result += collected
-			} else {
-				result += await evalSegment(seg, state, node._statePath ?? [])
-			}
-		}
-		return result
-	}
-
-	for (const { node, state } of buttonTasks) {
-		try {
-			const raw = await evalNodeTooltip(node as unknown as IdentifiedNodeBuilder, state)
-			const expanded = expandVariables(raw, projectV2.value, project.value, {
-				...flattenStaticVariables(),
-				...flattenProjectVariables(projectV2.value),
-				...flattenProjectV3Variables(project.value),
-			})
-			const trimmed = expanded.trim()
-			tooltipHtml.set(
-				node,
-				trimmed
-					? `<div class="markdown-body moderation-tooltip-markdown">${renderHighlightedString(trimmed)}</div>`
-					: '',
-			)
-		} catch {
-			tooltipHtml.set(node, '')
-		}
-	}
-})
-</script>
-
-<template>
-	<div :class="flex ? 'flex flex-wrap gap-2' : 'space-y-4'">
-		<template
-			v-for="(item, idx) in nodes"
-			:key="
-				item instanceof NodeBuilder
-					? item.type === 'button'
-						? `button-${asButton(item).label}`
-						: (asIdentified(item)._statePath?.join('/') ?? asIdentified(item).id ?? item.type)
-					: typeof item === 'string'
-						? `s-${item}`
-						: `display-${idx}`
-			"
-		>
-			<!-- Display items: plain strings or zero-arg render functions -->
-			<template v-if="!(item instanceof NodeBuilder)">
-				<template v-if="typeof item === 'string'">{{ item }}</template>
-				<component :is="item" v-else />
-			</template>
-
-			<template v-else-if="isVisible(item)">
-				<div :class="item.type !== 'group' && !getNodeTitle(item) ? 'contents' : undefined">
-					<div v-if="getNodeTitle(item)" class="mb-2" :class="titleClass(titleDepth ?? 0)">
-						<span
-							v-html="renderString(getNodeTitle(item)!).replace(/^<p>([\s\S]*)<\/p>\n?$/, '$1')"
-						/><span v-if="nodeHasRequiredMissing(asIdentified(item))" class="text-red">*</span>
-					</div>
-
-					<!-- group -->
-					<template v-if="item.type === 'group'">
-						<!-- multi-select (chips) mode -->
-						<template v-if="asGroup(item)._selectMode === 'multi'">
-							<div class="flex flex-wrap gap-2">
-								<template
-									v-for="child in visibleChildren(asIdentified(item))"
-									:key="asIdentified(child).id"
-								>
-									<Button
-										v-tooltip="getTooltipConfig(asIdentified(child))"
-										:type="
-											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
-												? hasActionableFixes(asIdentified(child))
-													? 'blue'
-													: 'brand'
-												: 'standard') &&
-											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
-												? hasActionableFixes(asIdentified(child))
-													? 'blue'
-													: 'brand'
-												: 'standard') !== 'standard'
-												? 'colored'
-												: 'base'
-										"
-										:color="
-											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
-												? hasActionableFixes(asIdentified(child))
-													? 'blue'
-													: 'brand'
-												: 'standard') &&
-											(getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
-												? hasActionableFixes(asIdentified(child))
-													? 'blue'
-													: 'brand'
-												: 'standard') !== 'standard'
-												? (getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
-														? hasActionableFixes(asIdentified(child))
-															? 'blue'
-															: 'brand'
-														: 'standard') === 'medal-promo'
-													? 'medal_promotion'
-													: getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!)
-														? hasActionableFixes(asIdentified(child))
-															? 'blue'
-															: 'brand'
-														: 'standard'
-												: undefined
-										"
-										:aria-label="asIdentified(child)._icon ? asLabeled(child).label : undefined"
-										@click="toggleChip(asIdentified(item), asIdentified(child))"
-									>
-										<component :is="asIdentified(child)._icon" v-if="asIdentified(child)._icon" />
-										<template v-else>{{ asLabeled(child).label }}</template>
-									</Button>
-								</template>
-							</div>
-							<template
-								v-for="child in visibleChildren(asIdentified(item))"
-								:key="`sub-${asIdentified(child).id}`"
-							>
-								<NodeRenderer
-									v-if="
-										getMultiSelectState(asIdentified(item)).has(asIdentified(child).id!) &&
-										getChildren(asIdentified(child)).length
-									"
-									:nodes="getChildren(asIdentified(child))"
-									:show-context="getChildrenContext(asIdentified(child))"
-									:on-image-upload="onImageUpload"
-									:title-depth="titleDepth"
-									:parent-state-path="asIdentified(child)._statePath ?? props.parentStatePath ?? []"
-									class="mt-2"
-								/>
-							</template>
-						</template>
-						<!-- single-select (button-style) mode -->
-						<template v-else-if="asGroup(item)._selectMode === 'single'">
-							<div class="flex flex-wrap gap-2">
-								<template
-									v-for="child in visibleChildren(asIdentified(item))"
-									:key="asIdentified(child).id"
-								>
-									<Button
-										:type="
-											(getSelectState(asIdentified(item)) === asIdentified(child).id
-												? 'brand'
-												: 'standard') &&
-											(getSelectState(asIdentified(item)) === asIdentified(child).id
-												? 'brand'
-												: 'standard') !== 'standard'
-												? 'colored'
-												: 'base'
-										"
-										:color="
-											(getSelectState(asIdentified(item)) === asIdentified(child).id
-												? 'brand'
-												: 'standard') &&
-											(getSelectState(asIdentified(item)) === asIdentified(child).id
-												? 'brand'
-												: 'standard') !== 'standard'
-												? (getSelectState(asIdentified(item)) === asIdentified(child).id
-														? 'brand'
-														: 'standard') === 'medal-promo'
-													? 'medal_promotion'
-													: getSelectState(asIdentified(item)) === asIdentified(child).id
-														? 'brand'
-														: 'standard'
-												: undefined
-										"
-										:aria-label="asIdentified(child)._icon ? asLabeled(child).label : undefined"
-										@click="toggleSelect(asIdentified(item), asIdentified(child))"
-									>
-										<component :is="asIdentified(child)._icon" v-if="asIdentified(child)._icon" />
-										<template v-else>{{ asLabeled(child).label }}</template>
-									</Button>
-								</template>
-							</div>
-							<template
-								v-for="child in visibleChildren(asIdentified(item))"
-								:key="`sub-${asIdentified(child).id}`"
-							>
-								<NodeRenderer
-									v-if="
-										getSelectState(asIdentified(item)) === asIdentified(child).id &&
-										getChildren(asIdentified(child)).length
-									"
-									:nodes="getChildren(asIdentified(child))"
-									:show-context="getChildrenContext(asIdentified(child))"
-									:on-image-upload="onImageUpload"
-									:title-depth="titleDepth"
-									:parent-state-path="asIdentified(child)._statePath ?? props.parentStatePath ?? []"
-									class="mt-2"
-								/>
-							</template>
-						</template>
-						<!-- plain container mode -->
-						<NodeRenderer
-							v-else
-							:nodes="getChildren(asIdentified(item))"
-							:show-context="getChildrenContext(asIdentified(item))"
-							:on-image-upload="onImageUpload"
-							:flex="asGroup(item)._layout !== 'column'"
-							:title-depth="item._title !== undefined ? (titleDepth ?? 0) + 1 : titleDepth"
-							:parent-state-path="asIdentified(item)._statePath ?? props.parentStatePath ?? []"
-						/>
-					</template>
-
-					<!-- dropdown -->
-					<template v-else-if="item.type === 'dropdown'">
-						<Combobox
-							class="!w-80"
-							:options="getDropdownOptions(asDropdown(item))"
-							:model-value="getDropdownModelValue(asDropdown(item))"
-							trigger-class="!bg-[var(--color-button-bg)] !rounded-[var(--radius-md)] !shadow-[var(--shadow-inset-sm),0_0_0_0_transparent]"
-							dropdown-class="!rounded-[var(--radius-md)] !bg-[var(--color-button-bg)] !border-0"
-							@update:model-value="(v) => setNodeState(asIdentified(item), v || undefined)"
-						/>
-						<template
-							v-for="child in visibleChildren(asIdentified(item))"
-							:key="`sub-${asIdentified(child).id}`"
-						>
-							<NodeRenderer
-								v-if="
-									getSelectState(asIdentified(item)) === asIdentified(child).id &&
-									getChildren(asIdentified(child)).length
-								"
-								:nodes="getChildren(asIdentified(child))"
-								:show-context="getChildrenContext(asIdentified(child))"
-								:on-image-upload="onImageUpload"
-								:title-depth="titleDepth"
-								:parent-state-path="asIdentified(child)._statePath ?? props.parentStatePath ?? []"
-								class="mt-2"
-							/>
-						</template>
-					</template>
-
-					<!-- button -->
-					<template v-else-if="item.type === 'button'">
-						<Button
-							v-tooltip="getTooltipConfig(item, showContext)"
-							:disabled="!isButtonEnabled(asButton(item))"
-							:aria-label="item._icon && !asButton(item).label ? asButton(item).label : undefined"
-							@click="handleButtonClick(asButton(item))"
-						>
-							<component :is="item._icon" v-if="item._icon" />
-							{{ asButton(item).label }}
-						</Button>
-					</template>
-
-					<!-- toggle -->
-					<template v-else-if="item.type === 'toggle'">
-						<Button
-							v-tooltip="getTooltipConfig(asBool(item))"
-							:type="getBooleanColor(asBool(item)) === 'standard' ? 'base' : 'colored'"
-							:color="
-								getBooleanColor(asBool(item)) === 'standard'
-									? undefined
-									: getBooleanColor(asBool(item))
-							"
-							:disabled="!isEnabled(asIdentified(item))"
-							:aria-label="item._icon ? asLabeled(item).label : undefined"
-							@click="toggleBoolean(asBool(item))"
-						>
-							<component :is="item._icon" v-if="item._icon" />
-							<template v-else>{{ asLabeled(item).label }}</template>
-						</Button>
-					</template>
-
-					<!-- check -->
-					<template v-else-if="item.type === 'check'">
-						<Checkbox
-							:model-value="getBooleanState(asBool(item))"
-							:label="asLabeled(item).label"
-							:disabled="!isEnabled(asIdentified(item))"
-							@update:model-value="isEnabled(asIdentified(item)) && toggleBoolean(asBool(item))"
-						/>
-					</template>
-
-					<!-- text -->
-					<template v-else-if="item.type === 'text'">
-						<StyledInput
-							:id="`node-${asIdentified(item).id}`"
-							:ref="(el: any) => (el ? textInputRefs.set(item, el) : textInputRefs.delete(item))"
-							v-tooltip="getTooltipConfig(item, showContext)"
-							:model-value="getTextState(asIdentified(item))"
-							:placeholder="getPlaceholder(asInput(item))"
-							autocomplete="off"
-							@update:model-value="(v: string) => setTextState(asIdentified(item), v)"
-						/>
-					</template>
-
-					<!-- markdown -->
-					<template v-else-if="item.type === 'markdown'">
-						<MarkdownEditor
-							:id="`node-${asIdentified(item).id}`"
-							:aria-label="asLabeled(item).label || undefined"
-							:model-value="getTextState(asIdentified(item))"
-							:placeholder="getPlaceholder(asInput(item))"
-							:max-height="300"
-							:disabled="false"
-							:heading-buttons="false"
-							:on-image-upload="onImageUpload"
-							@update:model-value="(v: string) => setTextState(asIdentified(item), v)"
-						/>
-					</template>
-				</div>
-			</template>
-		</template>
-
-		<!-- children of active boolean nodes, rendered after all siblings -->
-		<template
-			v-for="(item, idx) in nodes"
-			:key="
-				item instanceof NodeBuilder
-					? item.type === 'button'
-						? `children-button-${asButton(item).label}`
-						: `children-${asIdentified(item)._statePath?.join('/') ?? asIdentified(item).id ?? item.type}`
-					: `children-display-${idx}`
-			"
-		>
-			<NodeRenderer
-				v-if="
-					item instanceof NodeBuilder &&
-					isVisible(item) &&
-					(item.type === 'toggle' || item.type === 'check') &&
-					getBooleanState(asBool(item)) &&
-					getChildren(asIdentified(item)).length
-				"
-				:nodes="getChildren(asIdentified(item))"
-				:show-context="getChildrenContext(asIdentified(item))"
-				:on-image-upload="onImageUpload"
-				:title-depth="item._title !== undefined ? (titleDepth ?? 0) + 1 : titleDepth"
-				:parent-state-path="asIdentified(item)._statePath ?? props.parentStatePath ?? []"
-				class="w-full"
-			/>
-		</template>
-	</div>
-</template>

apps/frontend/src/components/ui/moderation/checklist/checklist-context.ts

@@ -1,11 +1,5 @@
-import type { IdentifiedNodeBuilder, NodeState } from '@modrinth/moderation'
-import type { ComputedRef, InjectionKey, Ref } from 'vue'
-
-export interface ActiveAction {
-	node: IdentifiedNodeBuilder
-	state: Record<string, NodeState>
-	statePath: string[]
-}
+import type { ActiveAction, NodeState } from '@modrinth/moderation/src/types/node'
+import type { InjectionKey, Ref } from 'vue'
 
 export interface LiveNode {
 	isActive: boolean
@@ -17,7 +11,5 @@ export interface LiveNode {
 	activeActions: ActiveAction[]
 }
 
-export const NODE_META_KEY: InjectionKey<ComputedRef<Map<IdentifiedNodeBuilder, LiveNode>>> =
-	Symbol('nodeMeta')
 export const STATE_KEY: InjectionKey<Ref<Record<string, Record<string, NodeState>>>> =
 	Symbol('checklistState')

apps/frontend/src/pages/[type]/[project].vue

@@ -573,8 +573,8 @@ import { versionQueryOptions } from '~/composables/queries/version'
 import { useServerInstallContent } from '~/composables/use-server-install-content'
 import { userCollectProject, userFollowProject } from '~/composables/user.js'
 import { injectCurrentProjectId } from '~/providers/current-project.ts'
-import { loadChecklistState } from '~/services/moderation-checklist-storage.ts'
-import { useModerationQueue } from '~/services/moderation-queue.ts'
+import { loadChecklistState } from '~/services/moderation/checklist-storage.ts'
+import { useModerationQueue } from '~/services/moderation/queue.ts'
 import { getReportPath, reportProject } from '~/utils/report-helpers.ts'
 
 definePageMeta({
@@ -1106,7 +1106,7 @@ const { data: thread } = useQuery({
 
 const isSettings = computed(() => route.name.startsWith('type-project-settings'))
 
-// Transform versionsV3 to be same shape as versionsV2 for compatibility in project pages
+// Jank modpack loaders fix
 const versionsRaw = computed(() => {
 	return (versionsV3.value ?? []).map((version) => {
 		const files = Array.isArray(version.files) ? version.files : []
@@ -1893,23 +1893,11 @@ function setModerationChecklistOpen(open) {
 	showModerationChecklist.value = open
 }
 
-function isProjectInActiveModerationQueue(projectId = project.value?.id) {
-	return (
-		!!projectId &&
-		moderationQueue.isQueueMode &&
-		moderationQueue.currentQueue.items.includes(projectId)
-	)
-}
-
 async function openModerationChecklistFromMenu() {
 	const projectId = project.value?.id
 	if (!projectId) return
 
 	await moderationQueue.ready
-	if (!isProjectInActiveModerationQueue(projectId)) {
-		await moderationQueue.setSingleProject(projectId)
-	}
-
 	setModerationChecklistOpen(true)
 }
 

apps/frontend/src/pages/moderation/index.vue

@@ -108,6 +108,12 @@
 				@switch-page="goToPage"
 			/>
 			<ConfettiExplosion v-if="visible" />
+			<QueueSummaryModal
+				ref="queueSummaryModal"
+				:completed-ids="moderationQueue.currentQueue.completed"
+				:skipped-ids="moderationQueue.currentQueue.skipped"
+				@review-skipped="reviewSkippedQueue"
+			/>
 		</div>
 
 		<div class="flex flex-col gap-3">
@@ -160,8 +166,11 @@ import { useQuery } from '@tanstack/vue-query'
 import ConfettiExplosion from 'vue-confetti-explosion'
 
 import ModerationQueueCard from '~/components/ui/moderation/ModerationQueueCard.vue'
+import QueueSummaryModal from '~/components/ui/moderation/QueueSummaryModal.vue'
 import { type ModerationProject, toModerationProjects } from '~/helpers/moderation.ts'
-import { useModerationQueue } from '~/services/moderation-queue.ts'
+import { getProjectTypeForUrlShorthand } from '~/helpers/projects.js'
+import { useModerationQueue } from '~/services/moderation/queue.ts'
+import { findNextEligibleQueueProject } from '~/services/moderation/queue-eligibility.ts'
 
 useHead({ title: 'Projects queue - Modrinth' })
 
@@ -172,6 +181,8 @@ const route = useRoute()
 const router = useRouter()
 const client = injectModrinthClient()
 
+const queueSummaryModal = ref()
+
 const visible = ref(false)
 if (import.meta.client && history && history.state && history.state.confetti) {
 	setTimeout(async () => {
@@ -184,6 +195,14 @@ if (import.meta.client && history && history.state && history.state.confetti) {
 	}, 1000)
 }
 
+if (import.meta.client && history && history.state && history.state.queueSummary) {
+	setTimeout(async () => {
+		history.state.queueSummary = false
+		await nextTick()
+		queueSummaryModal.value?.show()
+	}, 1000)
+}
+
 const messages = defineMessages({
 	moderate: {
 		id: 'moderation.moderate',
@@ -498,60 +517,36 @@ function goToPage(page: number) {
 	currentPage.value = page
 }
 
-function notifySkippedProjects(skippedCount: number) {
-	if (skippedCount <= 0) return
-	addNotification({
-		title: 'Skipped projects',
-		text: `Skipped ${skippedCount} project(s) already moderated or locked by others.`,
-		type: 'info',
-		autoCloseMs: 2000,
-	})
-}
-
 async function findFirstEligibleProject(): Promise<string | null> {
-	let skippedCount = 0
+	const candidateIds = [...moderationQueue.currentQueue.items]
+	if (candidateIds.length === 0) return null
 
-	while (moderationQueue.hasItems) {
-		const currentId = moderationQueue.getCurrentProjectId()
-		if (!currentId) return null
+	const next = await findNextEligibleQueueProject(client, moderationQueue, candidateIds)
 
-		const project = projectsById.value.get(currentId)
-
-		if (project && project.project.status !== 'processing') {
-			await moderationQueue.completeCurrentProject(currentId, 'skipped')
-			skippedCount++
-			continue
-		}
-
-		try {
-			const lockStatus = await moderationQueue.checkLock(currentId)
-
-			if (!lockStatus.locked || lockStatus.expired || lockStatus.is_own_lock) {
-				notifySkippedProjects(skippedCount)
-				return currentId
-			}
-
-			await moderationQueue.completeCurrentProject(currentId, 'skipped')
-			skippedCount++
-		} catch {
-			return currentId
-		}
+	if (!next) {
+		await Promise.all(candidateIds.map((id) => moderationQueue.excludeProject(id)))
+		return null
 	}
 
-	notifySkippedProjects(skippedCount)
-
-	return null
+	await Promise.all(next.excluded.map((id) => moderationQueue.excludeProject(id)))
+	return next.project
 }
 
 function getProjectRouteParam(projectId: string): string {
 	return projectsById.value.get(projectId)?.project.slug || projectId
 }
 
+function getProjectRouteType(projectId: string): string {
+	const projectType = projectsById.value.get(projectId)?.project.project_types[0]
+	if (!projectType) return 'project'
+	return getProjectTypeForUrlShorthand(projectType, [])
+}
+
 async function navigateToModerationProject(projectId: string) {
 	await navigateTo({
 		name: 'type-project',
 		params: {
-			type: 'project',
+			type: getProjectRouteType(projectId),
 			project: getProjectRouteParam(projectId),
 		},
 		state: {
@@ -593,12 +588,8 @@ async function moderateAllInFilter() {
 async function startFromProject(projectId: string) {
 	const allFilteredProjectIds = await getFilteredProjectIds()
 	const projectIndex = allFilteredProjectIds.indexOf(projectId)
-	if (projectIndex === -1) {
-		await moderationQueue.setSingleProject(projectId)
-	} else {
-		const projectIds = allFilteredProjectIds.slice(projectIndex)
-		await moderationQueue.setQueue(projectIds)
-	}
+	const projectIds = projectIndex === -1 ? [projectId] : allFilteredProjectIds.slice(projectIndex)
+	await moderationQueue.setQueue(projectIds)
 
 	const targetProjectId = await findFirstEligibleProject()
 
@@ -613,4 +604,21 @@ async function startFromProject(projectId: string) {
 
 	await navigateToModerationProject(targetProjectId)
 }
+
+async function reviewSkippedQueue() {
+	await moderationQueue.startSkippedReview()
+
+	const targetProjectId = await findFirstEligibleProject()
+
+	if (!targetProjectId) {
+		addNotification({
+			title: 'No projects available',
+			text: 'All previously skipped projects are already moderated or locked by others.',
+			type: 'warning',
+		})
+		return
+	}
+
+	await navigateToModerationProject(targetProjectId)
+}
 </script>

apps/frontend/src/services/moderation/checklist-session-storage.ts

@@ -0,0 +1,38 @@
+export interface SessionChecklistState {
+	visitedStages?: string[]
+}
+
+function sessionStorageKey(projectId: string): string {
+	return `moderation-checklist-session:${projectId}`
+}
+
+export function getSessionChecklistState(projectId: string): SessionChecklistState {
+	try {
+		const raw = sessionStorage.getItem(sessionStorageKey(projectId))
+		return raw ? JSON.parse(raw) : {}
+	} catch {
+		return {}
+	}
+}
+
+export function patchSessionChecklistState(
+	projectId: string,
+	patch: Partial<SessionChecklistState>,
+): void {
+	try {
+		sessionStorage.setItem(
+			sessionStorageKey(projectId),
+			JSON.stringify({ ...getSessionChecklistState(projectId), ...patch }),
+		)
+	} catch {
+		// Shush
+	}
+}
+
+export function clearSessionChecklistState(projectId: string): void {
+	try {
+		sessionStorage.removeItem(sessionStorageKey(projectId))
+	} catch {
+		// Shush
+	}
+}

apps/frontend/src/services/moderation/checklist-storage.ts

@@ -1,6 +1,6 @@
-import type { NodeState } from '@modrinth/moderation'
+import type { NodeState } from '@modrinth/moderation/src/types/node'
 
-import { dbDelete, dbGet, dbPut, dbScan } from './moderation-db.ts'
+import { dbDelete, dbGet, dbPut, dbScan } from './db.ts'
 
 export interface PersistedChecklistState {
 	savedAt: string
@@ -9,6 +9,7 @@ export interface PersistedChecklistState {
 	stage?: string
 	message?: string
 	state?: Record<string, Record<string, NodeState>>
+	activatedStages?: string[]
 }
 
 const STORE = 'checklist'

apps/frontend/src/services/moderation/queue-eligibility.ts

@@ -0,0 +1,91 @@
+import type { AbstractModrinthClient } from '@modrinth/api-client'
+
+import type { ModerationQueueService } from './queue.ts'
+
+export interface QueueCandidateCheck {
+	locked: boolean
+	expired?: boolean
+	isOwnLock?: boolean
+	slug?: string
+	projectType?: string
+	status?: string
+	isProcessing: boolean
+}
+
+export interface EligibleQueueProject {
+	project: string
+	result: QueueCandidateCheck
+	excluded: string[]
+}
+
+const BATCH_SIZE = 5
+
+export function isEligibleQueueCandidate(result: QueueCandidateCheck | undefined): boolean {
+	if (!result?.isProcessing) return false
+	return !result.locked || !!result.expired || !!result.isOwnLock
+}
+
+export async function batchCheckQueueCandidates(
+	client: AbstractModrinthClient,
+	moderationQueue: ModerationQueueService,
+	projectIds: string[],
+): Promise<Map<string, QueueCandidateCheck>> {
+	const results = new Map<string, QueueCandidateCheck>()
+
+	const projects = await client.labrinth.projects_v3.getMultiple(projectIds).catch(() => [])
+	const projectsById = new Map(projects.map((project) => [project.id, project]))
+
+	const checks = await Promise.allSettled(
+		projectIds.map(async (id) => {
+			const lockResponse = await moderationQueue.checkLock(id)
+			const project = projectsById.get(id) ?? null
+
+			return {
+				id,
+				locked: lockResponse.locked,
+				expired: lockResponse.expired,
+				isOwnLock: lockResponse.is_own_lock,
+				slug: project?.slug,
+				projectType: project?.project_types[0],
+				status: project?.status,
+				isProcessing: project === null ? true : project.status === 'processing',
+			}
+		}),
+	)
+
+	checks.forEach((result, index) => {
+		if (result.status === 'fulfilled') {
+			results.set(result.value.id, result.value)
+		} else {
+			results.set(projectIds[index], { locked: false, isProcessing: true })
+		}
+	})
+
+	return results
+}
+
+export async function findNextEligibleQueueProject(
+	client: AbstractModrinthClient,
+	moderationQueue: ModerationQueueService,
+	candidateIds: string[],
+): Promise<EligibleQueueProject | null> {
+	const excluded: string[] = []
+	let checkedCount = 0
+
+	while (checkedCount < candidateIds.length) {
+		const batch = candidateIds.slice(checkedCount, checkedCount + BATCH_SIZE)
+		checkedCount += batch.length
+
+		const results = await batchCheckQueueCandidates(client, moderationQueue, batch)
+
+		for (const id of batch) {
+			const result = results.get(id)
+			if (isEligibleQueueCandidate(result)) {
+				return { project: id, result: result!, excluded: [...excluded] }
+			}
+			excluded.push(id)
+		}
+	}
+
+	return null
+}

apps/frontend/src/services/moderation/queue-storage.ts

@@ -1,13 +1,13 @@
-import { dbDelete, dbGet, dbPut } from './moderation-db.ts'
+import { dbDelete, dbGet, dbPut } from './db.ts'
 
 export interface PersistedModerationQueueState {
 	version: 1
 	savedAt: string
 	currentQueue: {
 		items: string[]
+		skipped?: string[]
 		total: number
-		completed: number
-		skipped: number
+		completed: string[]
 		lastUpdated: string
 	}
 	isQueueMode: boolean
@@ -31,9 +31,9 @@ function isPersistedStateCandidate(value: unknown): value is PersistedModeration
 	const queue = candidate.currentQueue
 	if (!queue || typeof queue !== 'object') return false
 	if (!isStringArray(queue.items)) return false
+	if (queue.skipped !== undefined && !isStringArray(queue.skipped)) return false
 	if (typeof queue.total !== 'number' || Number.isNaN(queue.total)) return false
-	if (typeof queue.completed !== 'number' || Number.isNaN(queue.completed)) return false
-	if (typeof queue.skipped !== 'number' || Number.isNaN(queue.skipped)) return false
+	if (!isStringArray(queue.completed)) return false
 	if (typeof queue.lastUpdated !== 'string') return false
 
 	return true

apps/frontend/src/services/moderation/queue.ts

@@ -6,13 +6,13 @@ import {
 	loadQueueState,
 	type PersistedModerationQueueState,
 	saveQueueState,
-} from './moderation-queue-storage.ts'
+} from './queue-storage.ts'
 
 export interface ModerationQueue {
 	items: string[]
+	skipped: string[]
 	total: number
-	completed: number
-	skipped: number
+	completed: string[]
 	lastUpdated: Date
 }
 
@@ -29,11 +29,14 @@ export interface ModerationQueueService {
 
 	queueLength: number
 	hasItems: boolean
+	hasSkipped: boolean
 	progress: number
 
 	setQueue(projectIds: string[]): Promise<void>
-	setSingleProject(projectId: string): Promise<void>
-	completeCurrentProject(projectId: string, status?: 'completed' | 'skipped'): Promise<boolean>
+	completeProject(projectId: string): Promise<boolean>
+	deferProject(projectId: string): Promise<boolean>
+	excludeProject(projectId: string): Promise<boolean>
+	startSkippedReview(): Promise<void>
 	getCurrentProjectId(): string | null
 	resetQueue(): Promise<void>
 
@@ -46,31 +49,31 @@ export interface ModerationQueueService {
 
 const EMPTY_QUEUE: ModerationQueue = {
 	items: [],
+	skipped: [],
 	total: 0,
-	completed: 0,
-	skipped: 0,
+	completed: [],
 	lastUpdated: new Date(),
 }
 
 function createEmptyQueue(): ModerationQueue {
-	return { ...EMPTY_QUEUE, lastUpdated: new Date(), items: [] }
+	return { ...EMPTY_QUEUE, lastUpdated: new Date(), items: [], skipped: [], completed: [] }
 }
 
 function sanitizeQueue(raw: PersistedModerationQueueState['currentQueue']): ModerationQueue {
 	const lastUpdated = new Date(raw.lastUpdated)
 	const items = raw.items.filter((id): id is string => typeof id === 'string')
-	const completed = Number.isFinite(raw.completed) ? Math.max(Math.trunc(raw.completed), 0) : 0
-	const skipped = Number.isFinite(raw.skipped) ? Math.max(Math.trunc(raw.skipped), 0) : 0
-	const minimumTotal = items.length + completed + skipped
+	const skipped = (raw.skipped ?? []).filter((id): id is string => typeof id === 'string')
+	const completed = (raw.completed ?? []).filter((id): id is string => typeof id === 'string')
+	const minimumTotal = items.length + completed.length
 	const total = Number.isFinite(raw.total)
 		? Math.max(Math.trunc(raw.total), minimumTotal)
 		: minimumTotal
 
 	return {
 		items,
+		skipped,
 		total,
 		completed,
-		skipped,
 		lastUpdated: Number.isNaN(lastUpdated.getTime()) ? new Date() : lastUpdated,
 	}
 }
@@ -84,9 +87,9 @@ function persistedPayload(
 		savedAt: new Date().toISOString(),
 		currentQueue: {
 			items: [...queue.items],
+			skipped: [...queue.skipped],
 			total: queue.total,
-			completed: queue.completed,
-			skipped: queue.skipped,
+			completed: [...queue.completed],
 			lastUpdated: queue.lastUpdated.toISOString(),
 		},
 		isQueueMode,
@@ -101,9 +104,10 @@ function createModerationQueueState(client: AbstractModrinthClient = injectModri
 
 	const queueLength = computed(() => currentQueue.value.items.length)
 	const hasItems = computed(() => currentQueue.value.items.length > 0)
+	const hasSkipped = computed(() => currentQueue.value.skipped.length > 0)
 	const progress = computed(() => {
 		if (currentQueue.value.total === 0) return 0
-		return (currentQueue.value.completed + currentQueue.value.skipped) / currentQueue.value.total
+		return (currentQueue.value.total - currentQueue.value.items.length) / currentQueue.value.total
 	})
 	let mutationChain = Promise.resolve()
 
@@ -148,42 +152,41 @@ function createModerationQueueState(client: AbstractModrinthClient = injectModri
 		return result
 	}
 
-	function setQueueState(items: string[], mode: boolean) {
-		isQueueMode.value = mode
+	function setQueueState(items: string[]) {
+		isQueueMode.value = true
 		currentQueue.value = {
 			items: [...items],
+			skipped: [],
 			total: items.length,
-			completed: 0,
-			skipped: 0,
+			completed: [],
 			lastUpdated: new Date(),
 		}
 	}
 
 	async function setQueue(projectIds: string[]): Promise<void> {
 		await withMutation(() => {
-			setQueueState(projectIds, true)
+			setQueueState(projectIds)
 		})
 	}
 
-	async function setSingleProject(projectId: string): Promise<void> {
-		await withMutation(() => {
-			setQueueState([projectId], false)
-		})
-	}
-
-	async function completeCurrentProject(
-		projectId: string,
-		status: 'completed' | 'skipped' = 'completed',
-	): Promise<boolean> {
+	async function completeProject(projectId: string): Promise<boolean> {
 		return withMutation(() => {
 			if (!currentQueue.value.items.includes(projectId)) {
 				return currentQueue.value.items.length > 0
 			}
 
-			if (status === 'completed') {
-				currentQueue.value.completed++
-			} else {
-				currentQueue.value.skipped++
+			currentQueue.value.completed = [...currentQueue.value.completed, projectId]
+			currentQueue.value.items = currentQueue.value.items.filter((id) => id !== projectId)
+			currentQueue.value.lastUpdated = new Date()
+
+			return currentQueue.value.items.length > 0
+		})
+	}
+
+	async function excludeProject(projectId: string): Promise<boolean> {
+		return withMutation(() => {
+			if (!currentQueue.value.items.includes(projectId)) {
+				return currentQueue.value.items.length > 0
 			}
 
 			currentQueue.value.items = currentQueue.value.items.filter((id) => id !== projectId)
@@ -193,6 +196,26 @@ function createModerationQueueState(client: AbstractModrinthClient = injectModri
 		})
 	}
 
+	async function deferProject(projectId: string): Promise<boolean> {
+		return withMutation(() => {
+			if (!currentQueue.value.items.includes(projectId)) {
+				return currentQueue.value.items.length > 0
+			}
+
+			currentQueue.value.items = currentQueue.value.items.filter((id) => id !== projectId)
+			currentQueue.value.skipped = [...currentQueue.value.skipped, projectId]
+			currentQueue.value.lastUpdated = new Date()
+
+			return currentQueue.value.items.length > 0
+		})
+	}
+
+	async function startSkippedReview(): Promise<void> {
+		await withMutation(() => {
+			setQueueState(currentQueue.value.skipped)
+		})
+	}
+
 	function getCurrentProjectId(): string | null {
 		return currentQueue.value.items[0] || null
 	}
@@ -294,11 +317,14 @@ function createModerationQueueState(client: AbstractModrinthClient = injectModri
 
 		queueLength,
 		hasItems,
+		hasSkipped,
 		progress,
 
 		setQueue,
-		setSingleProject,
-		completeCurrentProject,
+		completeProject,
+		deferProject,
+		excludeProject,
+		startSkippedReview,
 		getCurrentProjectId,
 		resetQueue,
 

apps/frontend/src/store/moderation.ts

@@ -4,8 +4,8 @@ import type {
 	LockStatusResponse,
 	ModerationQueue,
 	ModerationQueueService,
-} from '~/services/moderation-queue.ts'
-import { useModerationQueue } from '~/services/moderation-queue.ts'
+} from '~/services/moderation/queue.ts'
+import { useModerationQueue } from '~/services/moderation/queue.ts'
 
 export type {
 	LockAcquireResponse,