polish(frontend): technical review QA (#5097)

* feat: filtering + sorting alignment * polish: malicious summary modal changes * feat: better filter row using floating panel * fix: re-enable request * fix: lint * polish: jump back to files tab qol * feat: scroll to top of next card when done * fix: show lock icon on preview msg * feat: download no _blank * feat: show also marked in notif * feat: auto expand if only one class in the file * feat: proper page titles * fix: text-contrast typo * fix: lint * feat: QA changes * feat: individual report page + more qa * fix: back btn * fix: broken import * feat: quick reply msgs * fix: in other queue filter * fix: caching threads wrongly * fix: flag filter * feat: toggle enabled by default * fix: dont make btns opacity 50 --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
2026-09-03 13:36:48 +00:00 · 2026-01-20 19:56:24 +00:00
parent 2af6a1b36f
commit a869086ce9
20 changed files with 1046 additions and 83 deletions
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { ArrowLeftIcon, LoaderCircleIcon } from '@modrinth/assets'
+import { ButtonStyled, injectModrinthClient } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+
+import MaliciousSummaryModal, {
+	type UnsafeFile,
+} from '~/components/ui/moderation/MaliciousSummaryModal.vue'
+import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
+
+const route = useRoute()
+const router = useRouter()
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+const projectId = computed(() => route.params.id as string)
+
+useHead({ title: () => `Tech review - ${projectId.value} - Modrinth` })
+
+const CACHE_TTL = 24 * 60 * 60 * 1000
+const CACHE_KEY_PREFIX = 'tech_review_source_'
+
+type CachedSource = {
+	source: string
+	timestamp: number
+}
+
+function getCachedSource(detailId: string): string | null {
+	try {
+		const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
+		if (!cached) return null
+
+		const data: CachedSource = JSON.parse(cached)
+		const now = Date.now()
+
+		if (now - data.timestamp > CACHE_TTL) {
+			localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
+			return null
+		}
+
+		return data.source
+	} catch {
+		return null
+	}
+}
+
+function setCachedSource(detailId: string, source: string): void {
+	try {
+		const data: CachedSource = {
+			source,
+			timestamp: Date.now(),
+		}
+		localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
+	} catch (error) {
+		console.error('Failed to cache source:', error)
+	}
+}
+
+function clearExpiredCache(): void {
+	try {
+		const now = Date.now()
+		const keys = Object.keys(localStorage)
+
+		for (const key of keys) {
+			if (key.startsWith(CACHE_KEY_PREFIX)) {
+				const cached = localStorage.getItem(key)
+				if (cached) {
+					const data: CachedSource = JSON.parse(cached)
+					if (now - data.timestamp > CACHE_TTL) {
+						localStorage.removeItem(key)
+					}
+				}
+			}
+		}
+	} catch (error) {
+		console.error('Failed to clear expired cache:', error)
+	}
+}
+
+if (import.meta.client) {
+	clearExpiredCache()
+}
+
+const loadingIssues = ref<Set<string>>(new Set())
+const decompiledSources = ref<Map<string, string>>(new Map())
+
+async function loadIssueSource(issueId: string): Promise<void> {
+	if (loadingIssues.value.has(issueId)) return
+
+	loadingIssues.value.add(issueId)
+
+	try {
+		const issueData = await client.labrinth.tech_review_internal.getIssue(issueId)
+
+		for (const detail of issueData.details) {
+			if (detail.decompiled_source) {
+				decompiledSources.value.set(detail.id, detail.decompiled_source)
+				setCachedSource(detail.id, detail.decompiled_source)
+			}
+		}
+	} catch (error) {
+		console.error('Failed to load issue source:', error)
+	} finally {
+		loadingIssues.value.delete(issueId)
+	}
+}
+
+function tryLoadCachedSourcesForFile(reportId: string): void {
+	if (!reviewItem.value) return
+
+	const report = reviewItem.value.reports.find((r) => r.id === reportId)
+	if (report) {
+		for (const issue of report.issues) {
+			for (const detail of issue.details) {
+				if (!decompiledSources.value.has(detail.id)) {
+					const cached = getCachedSource(detail.id)
+					if (cached) {
+						decompiledSources.value.set(detail.id, cached)
+					}
+				}
+			}
+		}
+	}
+}
+
+function handleLoadFileSources(reportId: string): void {
+	tryLoadCachedSourcesForFile(reportId)
+
+	if (!reviewItem.value) return
+
+	const report = reviewItem.value.reports.find((r) => r.id === reportId)
+	if (report) {
+		for (const issue of report.issues) {
+			const hasUncached = issue.details.some((d) => !decompiledSources.value.has(d.id))
+			if (hasUncached) {
+				loadIssueSource(issue.id)
+			}
+		}
+	}
+}
+
+const {
+	data: projectReportData,
+	isLoading: isLoadingReport,
+	isError: isReportError,
+} = useQuery({
+	queryKey: ['tech-review-project-report', projectId],
+	queryFn: async () => {
+		return await client.labrinth.tech_review_internal.getProjectReport(projectId.value)
+	},
+	retry: false,
+})
+
+const {
+	data: projectData,
+	isLoading: isLoadingProject,
+	isError: isProjectError,
+} = useQuery({
+	queryKey: ['project', projectId],
+	queryFn: async () => {
+		return await client.labrinth.projects_v3.get(projectId.value)
+	},
+	retry: false,
+})
+
+const { data: organizationData, isLoading: isLoadingOrg } = useQuery({
+	queryKey: ['project-organization', projectId],
+	queryFn: async () => {
+		return await client.labrinth.projects_v3.getOrganization(projectId.value)
+	},
+})
+
+const { data: membersData, isLoading: isLoadingMembers } = useQuery({
+	queryKey: ['project-members', projectId],
+	queryFn: async () => {
+		return await client.labrinth.projects_v3.getMembers(projectId.value)
+	},
+	enabled: computed(() => !organizationData.value && !isLoadingOrg.value),
+})
+
+const isLoading = computed(
+	() =>
+		isLoadingReport.value ||
+		isLoadingProject.value ||
+		isLoadingOrg.value ||
+		(isLoadingMembers.value && !organizationData.value),
+)
+
+const hasError = computed(() => isReportError.value || isProjectError.value)
+
+type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
+	id: string
+	version_id: string
+}
+
+const ownership = computed<Labrinth.TechReview.Internal.Ownership | null>(() => {
+	if (organizationData.value) {
+		return {
+			kind: 'organization',
+			id: organizationData.value.id,
+			name: organizationData.value.name,
+			icon_url: organizationData.value.icon_url ?? undefined,
+		}
+	}
+
+	if (membersData.value) {
+		const owner = membersData.value.find((m) => m.is_owner)
+		if (owner) {
+			return {
+				kind: 'user',
+				id: owner.user.id,
+				name: owner.user.username,
+				icon_url: owner.user.avatar_url ?? undefined,
+			}
+		}
+	}
+
+	return null
+})
+
+const reviewItem = computed(() => {
+	if (!projectReportData.value || !projectData.value || !ownership.value) return null
+
+	const { project_report, thread } = projectReportData.value
+
+	const reports: FlattenedFileReport[] = project_report
+		? project_report.versions.flatMap((version) =>
+				version.files.map((file) => ({
+					...file,
+					id: file.report_id,
+					version_id: version.version_id,
+				})),
+			)
+		: []
+
+	return {
+		project: projectData.value,
+		project_owner: ownership.value,
+		thread,
+		reports,
+	}
+})
+
+function handleMarkComplete(_projectId: string) {
+	queryClient.invalidateQueries({ queryKey: ['tech-reviews'] })
+	router.push('/moderation/technical-review')
+}
+
+const maliciousSummaryModalRef = ref<InstanceType<typeof MaliciousSummaryModal>>()
+const currentUnsafeFiles = ref<UnsafeFile[]>([])
+
+function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
+	currentUnsafeFiles.value = unsafeFiles
+	maliciousSummaryModalRef.value?.show()
+}
+
+function refetch() {
+	queryClient.invalidateQueries({ queryKey: ['tech-review-project-report', projectId.value] })
+}
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<div>
+			<ButtonStyled
+				><nuxt-link :to="'/moderation/technical-review'">
+					<ArrowLeftIcon class="size-5" />
+					Back to queue
+				</nuxt-link></ButtonStyled
+			>
+		</div>
+
+		<div v-if="isLoading" class="flex flex-col gap-4">
+			<div class="universal-card flex h-48 items-center justify-center">
+				<LoaderCircleIcon class="size-8 animate-spin text-secondary" />
+			</div>
+		</div>
+		<div
+			v-else-if="hasError"
+			class="universal-card flex h-24 items-center justify-center text-secondary"
+		>
+			Project not found in the tech review queue.
+		</div>
+		<div
+			v-else-if="!reviewItem"
+			class="universal-card flex h-24 items-center justify-center text-secondary"
+		>
+			No review data available for this project.
+		</div>
+		<ModerationTechRevCard
+			v-else
+			:item="reviewItem"
+			:loading-issues="loadingIssues"
+			:decompiled-sources="decompiledSources"
+			@refetch="refetch"
+			@load-file-sources="handleLoadFileSources"
+			@mark-complete="handleMarkComplete"
+			@show-malicious-summary="handleShowMaliciousSummary"
+		/>
+
+		<MaliciousSummaryModal ref="maliciousSummaryModalRef" :unsafe-files="currentUnsafeFiles" />
+	</div>
+</template>
@@ -0,0 +1,667 @@
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	BlendIcon,
+	ListFilterIcon,
+	LoaderCircleIcon,
+	SearchIcon,
+	SortAscIcon,
+	SortDescIcon,
+	XIcon,
+} from '@modrinth/assets'
+import {
+	Button,
+	Combobox,
+	type ComboboxOption,
+	defineMessages,
+	FloatingPanel,
+	injectModrinthClient,
+	Pagination,
+	Toggle,
+	useVIntl,
+} from '@modrinth/ui'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/vue-query'
+import Fuse from 'fuse.js'
+import { nextTick } from 'vue'
+
+import MaliciousSummaryModal, {
+	type UnsafeFile,
+} from '~/components/ui/moderation/MaliciousSummaryModal.vue'
+import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevCard.vue'
+
+useHead({ title: 'Tech review queue - Modrinth' })
+
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
+
+const currentPage = ref(1)
+const API_PAGE_SIZE = 50
+const UI_PAGE_SIZE = 4
+const { formatMessage } = useVIntl()
+const route = useRoute()
+const router = useRouter()
+
+const CACHE_TTL = 24 * 60 * 60 * 1000
+const CACHE_KEY_PREFIX = 'tech_review_source_'
+
+type CachedSource = {
+	source: string
+	timestamp: number
+}
+
+function getCachedSource(detailId: string): string | null {
+	try {
+		const cached = localStorage.getItem(`${CACHE_KEY_PREFIX}${detailId}`)
+		if (!cached) return null
+
+		const data: CachedSource = JSON.parse(cached)
+		const now = Date.now()
+
+		if (now - data.timestamp > CACHE_TTL) {
+			localStorage.removeItem(`${CACHE_KEY_PREFIX}${detailId}`)
+			return null
+		}
+
+		return data.source
+	} catch {
+		return null
+	}
+}
+
+function setCachedSource(detailId: string, source: string): void {
+	try {
+		const data: CachedSource = {
+			source,
+			timestamp: Date.now(),
+		}
+		localStorage.setItem(`${CACHE_KEY_PREFIX}${detailId}`, JSON.stringify(data))
+	} catch (error) {
+		console.error('Failed to cache source:', error)
+	}
+}
+
+function clearExpiredCache(): void {
+	try {
+		const now = Date.now()
+		const keys = Object.keys(localStorage)
+
+		for (const key of keys) {
+			if (key.startsWith(CACHE_KEY_PREFIX)) {
+				const cached = localStorage.getItem(key)
+				if (cached) {
+					const data: CachedSource = JSON.parse(cached)
+					if (now - data.timestamp > CACHE_TTL) {
+						localStorage.removeItem(key)
+					}
+				}
+			}
+		}
+	} catch (error) {
+		console.error('Failed to clear expired cache:', error)
+	}
+}
+
+clearExpiredCache()
+
+const loadingIssues = ref<Set<string>>(new Set())
+const decompiledSources = ref<Map<string, string>>(new Map())
+
+async function loadIssueSource(issueId: string): Promise<void> {
+	if (loadingIssues.value.has(issueId)) return
+
+	loadingIssues.value.add(issueId)
+
+	try {
+		const issueData = await client.labrinth.tech_review_internal.getIssue(issueId)
+
+		for (const detail of issueData.details) {
+			if (detail.decompiled_source) {
+				decompiledSources.value.set(detail.id, detail.decompiled_source)
+				setCachedSource(detail.id, detail.decompiled_source)
+			}
+		}
+	} catch (error) {
+		console.error('Failed to load issue source:', error)
+	} finally {
+		loadingIssues.value.delete(issueId)
+	}
+}
+
+function tryLoadCachedSourcesForFile(reportId: string): void {
+	for (const review of reviewItems.value) {
+		const report = review.reports.find((r) => r.id === reportId)
+		if (report) {
+			for (const issue of report.issues) {
+				for (const detail of issue.details) {
+					if (!decompiledSources.value.has(detail.id)) {
+						const cached = getCachedSource(detail.id)
+						if (cached) {
+							decompiledSources.value.set(detail.id, cached)
+						}
+					}
+				}
+			}
+			return
+		}
+	}
+}
+
+function handleLoadFileSources(reportId: string): void {
+	tryLoadCachedSourcesForFile(reportId)
+
+	for (const review of reviewItems.value) {
+		const report = review.reports.find((r) => r.id === reportId)
+		if (report) {
+			for (const issue of report.issues) {
+				const hasUncached = issue.details.some((d) => !decompiledSources.value.has(d.id))
+				if (hasUncached) {
+					loadIssueSource(issue.id)
+				}
+			}
+			return
+		}
+	}
+}
+
+const messages = defineMessages({
+	searchPlaceholder: {
+		id: 'moderation.search.placeholder',
+		defaultMessage: 'Search...',
+	},
+	filterBy: {
+		id: 'moderation.filter.by',
+		defaultMessage: 'Filter by',
+	},
+	sortBy: {
+		id: 'moderation.sort.by',
+		defaultMessage: 'Sort by',
+	},
+})
+
+const query = ref(route.query.q?.toString() || '')
+
+watch(
+	query,
+	(newQuery) => {
+		const currentQuery = { ...route.query }
+		if (newQuery) {
+			currentQuery.q = newQuery
+		} else {
+			delete currentQuery.q
+		}
+
+		router.replace({
+			path: route.path,
+			query: currentQuery,
+		})
+		goToPage(1)
+	},
+	{ immediate: false },
+)
+
+watch(
+	() => route.query.q,
+	(newQueryParam) => {
+		const newValue = newQueryParam?.toString() || ''
+		if (query.value !== newValue) {
+			query.value = newValue
+		}
+	},
+)
+
+const currentFilterType = ref('All flags')
+
+const filterTypes = computed<ComboboxOption<string>[]>(() => {
+	const base: ComboboxOption<string>[] = [{ value: 'All flags', label: 'All flags' }]
+	if (!reviewItems.value) return base
+
+	const issueTypes = new Set(
+		reviewItems.value
+			.flatMap((review) => review.reports)
+			.flatMap((report) => report.issues)
+			.map((issue) => issue.issue_type),
+	)
+
+	const sortedTypes = Array.from(issueTypes).sort()
+	return [...base, ...sortedTypes.map((type) => ({ value: type, label: type }))]
+})
+
+const currentSortType = ref('Severity highest')
+const sortTypes: ComboboxOption<string>[] = [
+	{ value: 'Severity highest', label: 'Severity highest' },
+	{ value: 'Severity lowest', label: 'Severity lowest' },
+	{ value: 'Oldest', label: 'Oldest' },
+	{ value: 'Newest', label: 'Newest' },
+]
+
+const currentResponseFilter = ref('All')
+const responseFilterTypes: ComboboxOption<string>[] = [
+	{ value: 'All', label: 'All' },
+	{ value: 'Unread', label: 'Unread' },
+	{ value: 'Read', label: 'Read' },
+]
+
+const inOtherQueueFilter = ref(true)
+
+const fuse = computed(() => {
+	if (!reviewItems.value || reviewItems.value.length === 0) return null
+	return new Fuse(reviewItems.value, {
+		keys: [
+			{ name: 'project.title', weight: 4 },
+			{ name: 'project.slug', weight: 3 },
+			{ name: 'reports.file_name', weight: 2 },
+			{ name: 'reports.issues.issue_type', weight: 3 },
+			{ name: 'project_owner.name', weight: 2 },
+		],
+		includeScore: true,
+		threshold: 0.4,
+	})
+})
+
+const searchResults = computed(() => {
+	if (!query.value || !fuse.value) return null
+	return fuse.value.search(query.value).map((result) => result.item)
+})
+
+const baseFiltered = computed(() => {
+	if (!reviewItems.value) return []
+	return query.value && searchResults.value ? searchResults.value : [...reviewItems.value]
+})
+
+const filteredItems = computed(() => baseFiltered.value)
+
+const filteredIssuesCount = computed(() => {
+	return filteredItems.value.reduce((total, review) => {
+		return total + review.reports.reduce((sum, report) => sum + report.issues.length, 0)
+	}, 0)
+})
+
+const totalPages = computed(() => Math.ceil((filteredItems.value?.length || 0) / UI_PAGE_SIZE))
+const paginatedItems = computed(() => {
+	if (!filteredItems.value) return []
+	const start = (currentPage.value - 1) * UI_PAGE_SIZE
+	const end = start + UI_PAGE_SIZE
+	return filteredItems.value.slice(start, end)
+})
+function goToPage(page: number, top = false) {
+	currentPage.value = page
+
+	if (top && window) {
+		window.scrollTo({
+			top: 0,
+			left: 0,
+			behavior: 'smooth',
+		})
+	}
+}
+
+function toApiSort(label: string): Labrinth.TechReview.Internal.SearchProjectsSort {
+	switch (label) {
+		case 'Oldest':
+			return 'created_asc'
+		case 'Newest':
+			return 'created_desc'
+		case 'Severity highest':
+			return 'severity_desc'
+		case 'Severity lowest':
+			return 'severity_asc'
+		default:
+			return 'severity_desc'
+	}
+}
+
+const {
+	data: infiniteData,
+	isLoading,
+	isFetchingNextPage,
+	fetchNextPage,
+	hasNextPage,
+	refetch,
+} = useInfiniteQuery({
+	enabled: true,
+	queryKey: [
+		'tech-reviews',
+		currentSortType,
+		currentResponseFilter,
+		inOtherQueueFilter,
+		currentFilterType,
+	],
+	queryFn: async ({ pageParam = 0 }) => {
+		const filter: Labrinth.TechReview.Internal.SearchProjectsFilter = {
+			project_type: [],
+			replied_to: undefined,
+			project_status: [],
+			issue_type: [],
+		}
+
+		if (currentResponseFilter.value === 'Unread') {
+			filter.replied_to = 'unreplied'
+		} else if (currentResponseFilter.value === 'Read') {
+			filter.replied_to = 'replied'
+		}
+
+		if (inOtherQueueFilter.value) {
+			filter.project_status = ['processing']
+		}
+
+		if (currentFilterType.value !== 'All flags') {
+			filter.issue_type = [currentFilterType.value]
+		}
+
+		return await client.labrinth.tech_review_internal.searchProjects({
+			limit: API_PAGE_SIZE,
+			page: pageParam,
+			sort_by: toApiSort(currentSortType.value),
+			filter,
+		})
+	},
+	getNextPageParam: (lastPage, allPages) => {
+		// If we got a full page, there's probably more
+		return lastPage.project_reports.length >= API_PAGE_SIZE ? allPages.length : undefined
+	},
+	initialPageParam: 0,
+})
+
+watch(
+	[() => infiniteData.value, hasNextPage],
+	() => {
+		if (hasNextPage.value && !isFetchingNextPage.value) {
+			fetchNextPage()
+		}
+	},
+	{ immediate: true },
+)
+
+const mergedSearchResponse = computed(() => {
+	if (!infiniteData.value?.pages?.length) return null
+
+	return infiniteData.value.pages.reduce(
+		(merged, page) => ({
+			project_reports: [...merged.project_reports, ...page.project_reports],
+			projects: { ...merged.projects, ...page.projects },
+			threads: { ...merged.threads, ...page.threads },
+			ownership: { ...merged.ownership, ...page.ownership },
+		}),
+		{
+			project_reports: [] as Labrinth.TechReview.Internal.ProjectReport[],
+			projects: {} as Record<string, Labrinth.TechReview.Internal.ProjectModerationInfo>,
+			threads: {} as Record<string, Labrinth.TechReview.Internal.Thread>,
+			ownership: {} as Record<string, Labrinth.TechReview.Internal.Ownership>,
+		},
+	)
+})
+
+type FlattenedFileReport = Labrinth.TechReview.Internal.FileReport & {
+	id: string
+	version_id: string
+}
+
+const reviewItems = computed(() => {
+	if (!mergedSearchResponse.value?.project_reports?.length) {
+		return []
+	}
+
+	const response = mergedSearchResponse.value
+
+	return response.project_reports
+		.map((projectReport) => {
+			const project = response.projects[projectReport.project_id]
+			const thread = project?.thread_id ? response.threads[project.thread_id] : undefined
+
+			if (!thread) return null
+
+			const reports: FlattenedFileReport[] = projectReport.versions.flatMap((version) =>
+				version.files.map((file) => ({
+					...file,
+					id: file.report_id,
+					version_id: version.version_id,
+				})),
+			)
+
+			return {
+				project,
+				project_owner: response.ownership[projectReport.project_id],
+				thread,
+				reports,
+			}
+		})
+		.filter(
+			(
+				item,
+			): item is {
+				project: Labrinth.TechReview.Internal.ProjectModerationInfo
+				project_owner: Labrinth.TechReview.Internal.Ownership
+				thread: Labrinth.TechReview.Internal.Thread
+				reports: FlattenedFileReport[]
+			} => item !== null,
+		)
+})
+
+function handleMarkComplete(projectId: string) {
+	// Find the index of the current card before removing it
+	const currentIndex = paginatedItems.value.findIndex((item) => item.project.id === projectId)
+
+	// Find the thread ID for this project so we can remove it from the threads cache
+	const projectData = reviewItems.value.find((item) => item.project.id === projectId)
+	const threadId = projectData?.thread?.id
+
+	queryClient.setQueryData(
+		['tech-reviews', currentSortType, currentResponseFilter, inOtherQueueFilter, currentFilterType],
+		(
+			oldData:
+				| {
+						pages: Labrinth.TechReview.Internal.SearchResponse[]
+						pageParams: number[]
+				  }
+				| undefined,
+		) => {
+			if (!oldData) return oldData
+
+			return {
+				...oldData,
+				pages: oldData.pages.map((page) => ({
+					...page,
+					project_reports: page.project_reports.filter((pr) => pr.project_id !== projectId),
+					projects: Object.fromEntries(
+						Object.entries(page.projects).filter(([id]) => id !== projectId),
+					),
+					threads: Object.fromEntries(
+						Object.entries(page.threads).filter(([id]) => id !== threadId),
+					),
+					ownership: Object.fromEntries(
+						Object.entries(page.ownership).filter(([id]) => id !== projectId),
+					),
+				})),
+			}
+		},
+	)
+
+	// Also invalidate the query to ensure consistency with server state
+	// This triggers a background refetch after the optimistic update
+	queryClient.invalidateQueries({
+		queryKey: ['tech-reviews'],
+		refetchType: 'none', // Don't refetch immediately, just mark as stale
+	})
+
+	// Scroll to the next card after Vue updates the DOM
+	nextTick(() => {
+		const targetIndex = currentIndex
+		if (targetIndex >= 0 && cardRefs.value[targetIndex]) {
+			cardRefs.value[targetIndex].scrollIntoView({
+				behavior: 'smooth',
+				block: 'start',
+			})
+		}
+	})
+}
+
+const maliciousSummaryModalRef = ref<InstanceType<typeof MaliciousSummaryModal>>()
+const currentUnsafeFiles = ref<UnsafeFile[]>([])
+const cardRefs = ref<HTMLElement[]>([])
+
+function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
+	currentUnsafeFiles.value = unsafeFiles
+	maliciousSummaryModalRef.value?.show()
+}
+
+watch([currentSortType, currentResponseFilter, inOtherQueueFilter, currentFilterType], () => {
+	goToPage(1)
+})
+
+// TODO: Reimpl when backend is available
+// const batchScanProgressInformation = computed<BatchScanProgress | undefined>(() => {
+// 	return {
+// 		total: 58,
+// 		complete: 20,
+// 	}
+// })
+</script>
+
+<template>
+	<div class="flex flex-col gap-4">
+		<!-- TODO: Reimpl when backend is available -->
+		<!-- <BatchScanProgressAlert
+			v-if="batchScanProgressInformation"
+			:progress="batchScanProgressInformation"
+		/> -->
+
+		<div class="flex flex-col justify-between gap-2 lg:flex-row">
+			<div class="iconified-input flex-1 lg:max-w-56">
+				<SearchIcon aria-hidden="true" class="text-lg" />
+				<input
+					v-model="query"
+					class="!h-10"
+					autocomplete="off"
+					spellcheck="false"
+					type="text"
+					:placeholder="formatMessage(messages.searchPlaceholder)"
+					@input="goToPage(1)"
+				/>
+				<Button v-if="query" class="r-btn" @click="() => (query = '')">
+					<XIcon />
+				</Button>
+			</div>
+
+			<div v-if="totalPages > 1" class="hidden flex-1 justify-center lg:flex">
+				<LoaderCircleIcon
+					v-if="isFetchingNextPage"
+					v-tooltip="`Pages are still being fetched...`"
+					aria-hidden="true"
+					class="my-auto mr-2 size-6 animate-spin text-green"
+				/>
+				<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+			</div>
+
+			<div
+				class="flex flex-col items-stretch justify-end gap-2 sm:flex-row sm:items-center lg:flex-shrink-0"
+			>
+				<Combobox
+					v-model="currentResponseFilter"
+					class="!w-full flex-grow sm:!w-[120px] sm:flex-grow-0"
+					:options="responseFilterTypes"
+				>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
+							<span class="truncate text-contrast">{{ currentResponseFilter }}</span>
+						</span>
+					</template>
+				</Combobox>
+
+				<Combobox
+					v-model="currentSortType"
+					class="!w-full flex-grow sm:!w-[215px] sm:flex-grow-0"
+					:options="sortTypes"
+					:placeholder="formatMessage(messages.sortBy)"
+				>
+					<template #selected>
+						<span class="flex flex-row gap-2 align-middle font-semibold">
+							<SortAscIcon
+								v-if="currentSortType === 'Oldest' || currentSortType === 'Severity lowest'"
+								class="size-5 flex-shrink-0 text-secondary"
+							/>
+							<SortDescIcon v-else class="size-5 flex-shrink-0 text-secondary" />
+							<span class="truncate text-contrast">{{ currentSortType }}</span>
+						</span>
+					</template>
+				</Combobox>
+
+				<FloatingPanel button-class="!h-10 !shadow-none !text-contrast">
+					<BlendIcon class="size-5" /> Advanced filters
+					<template #panel>
+						<div class="flex min-w-64 flex-col gap-3">
+							<label class="flex cursor-pointer items-center justify-between gap-2 text-sm">
+								<span class="whitespace-nowrap font-semibold">In mod queue</span>
+								<Toggle v-model="inOtherQueueFilter" />
+							</label>
+							<div class="flex flex-col gap-2">
+								<span class="text-sm font-semibold text-secondary"
+									>Flag type ({{ filteredIssuesCount }})</span
+								>
+								<Combobox
+									v-model="currentFilterType"
+									class="!w-full"
+									:options="filterTypes"
+									:placeholder="formatMessage(messages.filterBy)"
+									searchable
+								>
+									<template #selected>
+										<span class="flex flex-row gap-2 align-middle font-semibold">
+											<ListFilterIcon class="size-5 flex-shrink-0 text-secondary" />
+											<span class="truncate text-contrast">{{ currentFilterType }}</span>
+										</span>
+									</template>
+								</Combobox>
+							</div>
+						</div>
+					</template>
+				</FloatingPanel>
+			</div>
+		</div>
+
+		<div v-if="totalPages > 1" class="flex justify-center lg:hidden">
+			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+		</div>
+
+		<div class="flex flex-col gap-4">
+			<div v-if="isLoading" class="flex flex-col gap-4">
+				<div v-for="i in UI_PAGE_SIZE" :key="i" class="universal-card h-48 animate-pulse"></div>
+			</div>
+			<div
+				v-else-if="paginatedItems.length === 0"
+				class="universal-card flex h-24 items-center justify-center text-secondary"
+			>
+				No projects in queue.
+			</div>
+			<div
+				v-for="(item, idx) in paginatedItems"
+				:key="item.project.id ?? idx"
+				:ref="
+					(el) => {
+						if (el) cardRefs[idx] = el as HTMLElement
+					}
+				"
+			>
+				<ModerationTechRevCard
+					:item="item"
+					:loading-issues="loadingIssues"
+					:decompiled-sources="decompiledSources"
+					@refetch="refetch"
+					@load-file-sources="handleLoadFileSources"
+					@mark-complete="handleMarkComplete"
+					@show-malicious-summary="handleShowMaliciousSummary"
+				/>
+			</div>
+		</div>
+
+		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
+			<Pagination
+				:page="currentPage"
+				:count="totalPages"
+				@switch-page="(num) => goToPage(num, true)"
+			/>
+		</div>
+
+		<MaliciousSummaryModal ref="maliciousSummaryModalRef" :unsafe-files="currentUnsafeFiles" />
+	</div>
+</template>