feat: fixes to code blocks + flag labels

Author: IMB11

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

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import {
+	CheckIcon,
 	ChevronDownIcon,
+	CopyIcon,
 	DownloadIcon,
 	MoreVerticalIcon,
 	ShieldCheckIcon,
 	TriangleAlertIcon,
 } from '@modrinth/assets'
 import { Avatar, ButtonStyled, getProjectTypeIcon, injectModrinthClient } from '@modrinth/ui'
-import { formatProjectType } from '@modrinth/utils'
+import { capitalizeString, formatProjectType, highlightCodeLines } from '@modrinth/utils'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
@@ -81,6 +83,18 @@ function backToFileList() {
 	selectedFile.value = null
 }
 
+async function copyToClipboard(code: string) {
+	try {
+		await navigator.clipboard.writeText(code)
+		showCopyFeedback.value = true
+		setTimeout(() => {
+			showCopyFeedback.value = false
+		}, 2000)
+	} catch (error) {
+		console.error('Failed to copy code:', error)
+	}
+}
+
 async function updateIssueStatus(
 	issueId: string,
 	status: Labrinth.TechReview.Internal.DelphiReportIssueStatus,
@@ -94,6 +108,7 @@ async function updateIssueStatus(
 }
 
 const expandedIssues = ref<Set<string>>(new Set())
+const showCopyFeedback = ref(false)
 
 function toggleIssue(issueId: string) {
 	if (expandedIssues.value.has(issueId)) {
@@ -102,6 +117,31 @@ function toggleIssue(issueId: string) {
 		expandedIssues.value.add(issueId)
 	}
 }
+
+function getSeverityBreakdown(file: Labrinth.TechReview.Internal.FileReview) {
+	const counts = {
+		SEVERE: 0,
+		HIGH: 0,
+		MEDIUM: 0,
+		LOW: 0,
+	}
+
+	file.issues.forEach((issue) => {
+		issue.details.forEach((detail) => {
+			if (detail.severity in counts) {
+				counts[detail.severity as keyof typeof counts]++
+			}
+		})
+	})
+
+	const breakdown = []
+	if (counts.SEVERE > 0) breakdown.push({ count: counts.SEVERE, severity: 'SEVERE' })
+	if (counts.HIGH > 0) breakdown.push({ count: counts.HIGH, severity: 'HIGH' })
+	if (counts.MEDIUM > 0) breakdown.push({ count: counts.MEDIUM, severity: 'MEDIUM' })
+	if (counts.LOW > 0) breakdown.push({ count: counts.LOW, severity: 'LOW' })
+
+	return breakdown
+}
 </script>
 
 <template>
@@ -120,7 +160,7 @@ function toggleIssue(issueId: string) {
 							<span class="text-lg font-semibold text-contrast">{{ item.project.name }}</span>
 
 							<div
-								class="flex items-center gap-1 rounded-full border border-surface-5 bg-surface-4 px-2.5 py-1"
+								class="flex items-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
 							>
 								<component
 									:is="getProjectTypeIcon(item.project.project_types[0] as any)"
@@ -134,13 +174,15 @@ function toggleIssue(issueId: string) {
 								>
 							</div>
 
-							<div class="rounded-full border border-surface-5 bg-surface-4 px-2.5 py-1">
+							<div
+								class="rounded-full border border-solid border-surface-5 bg-surface-4 px-2.5 py-1"
+							>
 								<span class="text-sm font-medium text-secondary">Auto-Flagged</span>
 							</div>
 
 							<div class="rounded-full px-2.5 py-1" :class="severityColor">
 								<span class="text-sm font-medium">{{
-									highestSeverity.charAt(0) + highestSeverity.slice(1).toLowerCase()
+									capitalizeString(highestSeverity.toLowerCase())
 								}}</span>
 							</div>
 						</div>
@@ -183,8 +225,9 @@ function toggleIssue(issueId: string) {
 					:key="tab"
 					class="rounded-full px-3 py-1.5 text-base font-semibold transition-colors hover:cursor-pointer"
 					:class="{
-						'bg-highlight-green text-green': currentTab === tab,
-						'text-contrast': currentTab !== tab,
+						'bg-highlight-green text-green':
+							currentTab === tab && !(tab === 'Files' && selectedFile),
+						'text-contrast': currentTab !== tab || (tab === 'Files' && selectedFile),
 					}"
 					@click="
 						() => {
@@ -196,12 +239,12 @@ function toggleIssue(issueId: string) {
 					{{ tab }}
 				</div>
 
-				<span
+				<div
 					v-if="currentTab === 'Files' && selectedFile"
-					class="ml-2 text-sm font-medium text-secondary"
+					class="rounded-full bg-highlight-green px-3 py-1.5 text-base font-semibold text-green"
 				>
 					{{ selectedFile.file_name }}
-				</span>
+				</div>
 			</div>
 		</div>
 
@@ -227,13 +270,27 @@ function toggleIssue(issueId: string) {
 				>
 					<div class="flex items-center gap-3">
 						<span class="font-medium text-contrast">{{ file.file_name }}</span>
-						<div class="rounded-full border border-surface-5 bg-surface-3 px-2.5 py-1">
+						<div class="rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1">
 							<span class="text-sm font-medium text-secondary">{{
 								formatFileSize(file.file_size)
 							}}</span>
 						</div>
-						<div class="border-red/60 rounded-full border bg-highlight-red px-2.5 py-1">
-							<span class="text-sm font-medium text-red">{{ file.issues.length }} flags</span>
+						<div
+							v-for="severityItem in getSeverityBreakdown(file)"
+							:key="severityItem.severity"
+							class="rounded-full border border-solid px-2.5 py-1"
+							:class="{
+								'border-red/60 bg-highlight-red text-red': severityItem.severity === 'SEVERE',
+								'border-orange/60 bg-highlight-orange text-orange':
+									severityItem.severity === 'HIGH',
+								'border-blue/60 bg-highlight-blue text-blue': severityItem.severity === 'MEDIUM',
+								'border-green/60 bg-highlight-green text-green': severityItem.severity === 'LOW',
+							}"
+						>
+							<span class="text-sm font-medium"
+								>{{ severityItem.count }}
+								{{ capitalizeString(severityItem.severity.toLowerCase()) }}</span
+							>
 						</div>
 					</div>
 
@@ -253,18 +310,20 @@ function toggleIssue(issueId: string) {
 				<div
 					v-for="(issue, idx) in selectedFile.issues"
 					:key="issue.issue_id"
-					class="border-x border-b border-surface-3 bg-surface-2"
+					class="border-x border-b border-t-0 border-solid border-surface-3 bg-surface-2"
 					:class="{ 'rounded-bl-2xl rounded-br-2xl': idx === selectedFile.issues.length - 1 }"
 				>
 					<div class="flex items-center justify-between p-4">
-						<div class="flex items-center gap-2">
-							<button
-								class="transition-transform"
-								:class="{ 'rotate-180': !expandedIssues.has(issue.issue_id) }"
-								@click="toggleIssue(issue.issue_id)"
-							>
-								<ChevronDownIcon class="h-5 w-5 text-contrast" />
-							</button>
+						<div class="my-auto flex items-center gap-2">
+							<ButtonStyled type="transparent" circular>
+								<button
+									class="transition-transform"
+									:class="{ 'rotate-180': !expandedIssues.has(issue.issue_id) }"
+									@click="toggleIssue(issue.issue_id)"
+								>
+									<ChevronDownIcon class="h-5 w-5 text-contrast" />
+								</button>
+							</ButtonStyled>
 
 							<span class="text-base font-semibold text-contrast">{{
 								issue.kind.replace(/_/g, ' ')
@@ -290,18 +349,16 @@ function toggleIssue(issueId: string) {
 						</div>
 
 						<div class="flex items-center gap-2">
-							<ButtonStyled
-								:outline="issue.status !== 'safe'"
-								:color="issue.status === 'safe' ? 'green' : undefined"
-							>
-								<button @click="updateIssueStatus(issue.issue_id, 'safe')">Safe</button>
+							<ButtonStyled color="brand" type="outlined">
+								<button class="!border-[1px]" @click="updateIssueStatus(issue.issue_id, 'safe')">
+									Safe
+								</button>
 							</ButtonStyled>
 
-							<ButtonStyled
-								:outline="issue.status !== 'unsafe'"
-								:color="issue.status === 'unsafe' ? 'red' : undefined"
-							>
-								<button @click="updateIssueStatus(issue.issue_id, 'unsafe')">Malware</button>
+							<ButtonStyled color="red" type="outlined">
+								<button class="!border-[1px]" @click="updateIssueStatus(issue.issue_id, 'unsafe')">
+									Malware
+								</button>
 							</ButtonStyled>
 						</div>
 					</div>
@@ -310,23 +367,42 @@ function toggleIssue(issueId: string) {
 						<div
 							v-for="(detail, detailIdx) in issue.details"
 							:key="detailIdx"
-							class="flex flex-col gap-3"
+							class="flex flex-col"
 						>
-							<div class="flex items-center gap-4">
-								<p class="font-mono text-sm text-secondary">{{ detail.class_name }}</p>
-							</div>
+							<p class="mt-0 pt-0 font-mono text-sm text-secondary">{{ detail.class_name }}</p>
 
 							<div
 								v-if="detail.decompiled_source"
-								class="flex gap-3 overflow-x-auto rounded-2xl bg-surface-3 p-3 font-mono text-sm"
+								class="relative overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-4"
 							>
-								<div class="flex flex-col border-r border-surface-5 pr-3 text-right text-secondary">
-									<span v-for="n in detail.decompiled_source.split('\n').length" :key="n">{{
-										n
-									}}</span>
+								<ButtonStyled circular type="transparent">
+									<button
+										class="absolute right-2 top-2 border-[1px]"
+										@click="copyToClipboard(detail.decompiled_source)"
+										v-tooltip="`Copy code`"
+									>
+										<CopyIcon v-if="!showCopyFeedback" />
+										<CheckIcon v-else />
+									</button>
+								</ButtonStyled>
+
+								<div class="overflow-x-auto bg-surface-3 py-3">
+									<div
+										v-for="(line, n) in highlightCodeLines(detail.decompiled_source, 'java')"
+										:key="n"
+										class="flex font-mono text-[13px] leading-[1.6]"
+									>
+										<div
+											class="select-none border-0 border-r border-solid border-surface-5 px-4 py-0 text-right text-primary"
+											style="min-width: 3.5rem"
+										>
+											{{ n + 1 }}
+										</div>
+										<div class="flex-1 px-4 py-0 text-primary">
+											<pre v-html="line || ' '"></pre>
+										</div>
+									</div>
 								</div>
-
-								<pre class="flex-1 text-secondary"><code>{{ detail.decompiled_source }}</code></pre>
 							</div>
 						</div>
 					</div>
@@ -335,3 +411,11 @@ function toggleIssue(issueId: string) {
 		</div>
 	</div>
 </template>
+
+<style scoped>
+pre {
+	all: unset;
+	display: inline;
+	white-space: pre;
+}
+</style>

apps/frontend/src/pages/moderation/technical-review.vue

@@ -211,8 +211,16 @@ const paginatedItems = computed(() => {
 	const end = start + itemsPerPage
 	return filteredItems.value.slice(start, end)
 })
-function goToPage(page: number) {
+function goToPage(page: number, top = false) {
 	currentPage.value = page
+
+	if (top && window) {
+		window.scrollTo({
+			top: 0,
+			left: 0,
+			behavior: 'smooth',
+		})
+	}
 }
 
 // TEMPORARY: Commented out while using mock data
@@ -352,7 +360,11 @@ const batchScanProgressInformation = computed<BatchScanProgress | undefined>(()
 		</div>
 
 		<div v-if="totalPages > 1" class="mt-4 flex justify-center">
-			<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
+			<Pagination
+				:page="currentPage"
+				:count="totalPages"
+				@switch-page="(num) => goToPage(num, true)"
+			/>
 		</div>
 	</div>
 </template>

packages/utils/highlightjs/index.ts

@@ -55,6 +55,8 @@ hljs.registerAliases(['toml'], { languageName: 'ini' })
 hljs.registerAliases(['yml'], { languageName: 'yaml' })
 hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], { languageName: 'xml' })
 
+export { hljs }
+
 export const renderHighlightedString = (string) =>
 	configuredXss.process(
 		md({
@@ -71,3 +73,34 @@ export const renderHighlightedString = (string) =>
 			},
 		}).render(string),
 	)
+
+export const highlightCodeLines = (code: string, language: string): string[] => {
+	if (!code) return []
+
+	if (!hljs.getLanguage(language)) {
+		return code.split('\n')
+	}
+
+	try {
+		const highlighted = hljs.highlight(code, { language }).value
+		const openTags: string[] = []
+
+		const processedHtml = highlighted.replace(/(<span [^>]+>)|(<\/span>)|(\n)/g, (match) => {
+			if (match === '\n') {
+				return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
+			}
+
+			if (match === '</span>') {
+				openTags.pop()
+			} else {
+				openTags.push(match)
+			}
+
+			return match
+		})
+
+		return processedHtml.split('\n')
+	} catch {
+		return code.split('\n')
+	}
+}