fix: global trace and tech review improvements

.github/workflows/frontend-preview.yml

@@ -76,6 +76,8 @@ jobs:
 
       - name: Deploy Storybook preview
         uses: cloudflare/wrangler-action@9acf94ace14e7dc412b076f2c5c20b8ce93c79cd # v3.15.0
+        env:
+          NODE_OPTIONS: --max-old-space-size=6144
         with:
           apiToken: ${{ secrets.CF_API_TOKEN }}
           accountId: ${{ secrets.CF_ACCOUNT_ID }}

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

@@ -5,16 +5,21 @@
 				<p class="m-0 break-words font-semibold text-contrast">
 					{{ trace.project_name }}
 				</p>
-				<p class="m-0 mt-1 break-all text-sm text-secondary">
-					Project {{ trace.project_slug ?? trace.project_id }} / Version
-					{{ trace.version_number }} / File {{ trace.file_name }}
+				<p class="m-0 mt-1 flex flex-wrap items-center gap-1 text-sm text-secondary">
+					<span class="break-all">{{ trace.version_number }}</span>
+					<ChevronRightIcon class="size-4 shrink-0" aria-hidden="true" />
+					<span class="break-all">{{ decodeTracePath(trace.file_name) }}</span>
+					<template v-if="trace.jar">
+						<ChevronRightIcon class="size-4 shrink-0" aria-hidden="true" />
+						<span class="break-all">{{ decodeTracePath(trace.jar) }}</span>
+					</template>
 				</p>
 			</div>
 			<div class="flex flex-wrap items-center gap-2">
-				<span class="text-sm text-secondary">Local</span>
-				<Badge :type="trace.local_status" />
-				<span class="text-sm text-secondary">Effective</span>
-				<Badge :type="trace.effective_status" />
+				<template v-if="trace.local_status !== 'pending'">
+					<span class="text-sm text-secondary">Local</span>
+					<Badge :type="trace.local_status" />
+				</template>
 				<ButtonStyled>
 					<NuxtLink :to="localTraceLink">
 						<ExternalIcon aria-hidden="true" />
@@ -23,31 +28,12 @@
 				</ButtonStyled>
 			</div>
 		</div>
-
-		<div class="mt-3 grid gap-2 text-sm text-secondary md:grid-cols-2">
-			<p class="m-0 break-all">
-				<span class="font-semibold text-contrast">Issue</span>
-				{{ trace.issue_type }}
-			</p>
-			<p class="m-0 break-all">
-				<span class="font-semibold text-contrast">Severity</span>
-				{{ trace.severity }}
-			</p>
-			<p class="m-0 break-all">
-				<span class="font-semibold text-contrast">Path</span>
-				{{ trace.file_path }}
-			</p>
-			<p v-if="trace.jar" class="m-0 break-all">
-				<span class="font-semibold text-contrast">JAR</span>
-				{{ trace.jar }}
-			</p>
-		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { ExternalIcon } from '@modrinth/assets'
+import { ChevronRightIcon, ExternalIcon } from '@modrinth/assets'
 import { Badge, ButtonStyled } from '@modrinth/ui'
 
 const props = defineProps<{
@@ -60,4 +46,12 @@ const localTraceLink = computed(
 			props.trace.detail_id,
 		)}`,
 )
+
+function decodeTracePath(path: string): string {
+	try {
+		return decodeURIComponent(path)
+	} catch {
+		return path
+	}
+}
 </script>

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

@@ -44,16 +44,30 @@
 			>
 				<div class="flex flex-wrap items-start justify-between gap-3">
 					<div class="min-w-0">
-						<div class="flex min-w-0 items-center gap-2">
+						<div class="flex min-w-0 flex-wrap items-center gap-2">
 							<HashIcon class="shrink-0 text-secondary" aria-hidden="true" />
 							<h2 class="m-0 min-w-0 text-lg font-semibold text-contrast">
 								Trace
 								<span class="break-all font-mono text-base">{{ trace.detail_key }}</span>
 							</h2>
+							<span
+								v-if="getLatestLocalTrace(trace)"
+								class="rounded-full border border-solid px-2.5 py-1 text-sm font-medium capitalize"
+								:class="getSeverityBadgeColor(getLatestLocalTrace(trace)?.severity)"
+							>
+								{{ getLatestLocalTrace(trace)?.severity }}
+							</span>
+						</div>
+						<div v-if="getLatestLocalTrace(trace)" class="mt-1 flex flex-wrap gap-x-3 text-sm">
+							<p class="m-0 break-all text-secondary">
+								<span class="font-semibold text-contrast">Issue</span>
+								{{ getLatestLocalTrace(trace)?.issue_type }}
+							</p>
+							<p class="m-0 break-all text-secondary">
+								<span class="font-semibold text-contrast">Path</span>
+								{{ decodeTracePath(getLatestLocalTrace(trace)?.file_path ?? '') }}
+							</p>
 						</div>
-						<p class="m-0 mt-1 text-sm text-secondary">
-							{{ formatTraceCount(trace.local_trace_count) }}
-						</p>
 					</div>
 					<div class="flex shrink-0 flex-wrap items-center gap-2">
 						<Badge :type="trace.verdict" />
@@ -70,15 +84,14 @@
 				</div>
 
 				<div v-if="getPreviewLocalTraces(trace).length > 0" class="flex flex-col gap-2">
-					<div
-						v-if="getVisibleLocalTraceTotal(trace) > getPreviewLocalTraces(trace).length"
-						class="flex flex-wrap items-center justify-between gap-2"
-					>
+					<div class="flex flex-wrap items-center justify-between gap-2">
 						<p class="m-0 text-sm text-secondary">
-							Showing first {{ getPreviewLocalTraces(trace).length }} of
-							{{ getVisibleLocalTraceTotal(trace) }} local traces
+							Showing {{ getPreviewLocalTraces(trace).length }} of
+							{{ formatTraceCount(getVisibleLocalTraceTotal(trace)) }}
 						</p>
-						<ButtonStyled>
+						<ButtonStyled
+							v-if="getVisibleLocalTraceTotal(trace) > getPreviewLocalTraces(trace).length"
+						>
 							<NuxtLink :to="getGlobalTraceLink(trace)">
 								<ListIcon aria-hidden="true" />
 								View all
@@ -129,7 +142,7 @@ const isLoading = ref(false)
 const loadError = ref(false)
 const currentPage = ref(1)
 const itemsPerPage = 20
-const localTracePreviewLimit = 10
+const localTracePreviewLimit = 3
 const total = ref(0)
 const traces = ref<Labrinth.TechReview.Internal.GlobalIssueDetail[]>([])
 const removingTraceKeys = reactive<Set<string>>(new Set())
@@ -148,6 +161,34 @@ function getPreviewLocalTraces(trace: Labrinth.TechReview.Internal.GlobalIssueDe
 	return trace.local_traces.slice(0, localTracePreviewLimit)
 }
 
+function getLatestLocalTrace(trace: Labrinth.TechReview.Internal.GlobalIssueDetail) {
+	return trace.local_traces.at(-1)
+}
+
+function decodeTracePath(path: string): string {
+	try {
+		return decodeURIComponent(path)
+	} catch {
+		return path
+	}
+}
+
+function getSeverityBadgeColor(
+	severity: Labrinth.TechReview.Internal.DelphiSeverity | undefined,
+): string {
+	switch (severity) {
+		case 'severe':
+			return 'border-red/60 bg-highlight-red text-red'
+		case 'high':
+			return 'border-orange/60 bg-highlight-orange text-orange'
+		case 'medium':
+			return 'border-green/60 bg-highlight-green text-green'
+		case 'low':
+		default:
+			return 'border-blue/60 bg-highlight-blue text-blue'
+	}
+}
+
 function getVisibleLocalTraceTotal(trace: Labrinth.TechReview.Internal.GlobalIssueDetail) {
 	return Math.max(trace.local_trace_count, trace.local_traces.length)
 }