feat: surfacing flags in modview

.github/workflows/frontend-deploy.yml

@@ -126,6 +126,12 @@ jobs:
           BUILD_ENV: ${{ steps.meta.outputs.env }}
           PREVIEW: ${{ inputs.preview && 'true' || 'false' }}
 
+      - name: Disable server source map uploads for previews
+        if: ${{ inputs.preview }}
+        working-directory: ./apps/frontend
+        run: |
+          sed -i 's/"upload_source_maps": true/"upload_source_maps": false/g' wrangler.jsonc
+
       - name: Install Wrangler CLI
         uses: cloudflare/wrangler-action@953926a2e2182532811c01a25e53647d93bf07c0 # v4.1.3
         with:

Cargo.toml

@@ -182,6 +182,7 @@ redis = "1.7.1"
 regex = "1.13.1"
 reqwest = { version = "0.13.5", default-features = false, features = ["form", "query"] }
 rgb = "0.8.53"
+rhai = "1.27.0"
 rust_decimal = { version = "1.43.0", features = ["serde-with-float", "serde-with-str"] }
 rust_iso3166 = "0.2.0"
 rust-s3 = { version = "0.38.0", default-features = false, features = [
@@ -263,6 +264,7 @@ unicode-segmentation = "1.13.3"
 url = "2.5.8"
 urlencoding = "2.1.3"
 utoipa = { version = "6.0.0", features = ["actix_extras", "chrono", "decimal"] }
+utoipa-actix-web = "0.2.0"
 uuid = "1.28.0"
 validator = "0.21.0"
 webauthn-rs = "0.5.5"

apps/frontend/src/components/project-review/flag-list/flag-card.vue

@@ -0,0 +1,47 @@
+<template>
+	<article
+		class="flex min-w-0 flex-col gap-2 rounded-xl border border-solid border-surface-3 bg-surface-2 p-2.5 text-sm"
+	>
+		<div class="flex items-center gap-2">
+			<h3 class="m-0 flex min-w-0 flex-1 items-center gap-1.5 text-sm font-medium text-contrast">
+				<TagCategoryFlagIcon class="size-4 shrink-0 text-purple" aria-hidden="true" />
+				<span class="min-w-0 break-words">{{ flag.name || flag.key }}</span>
+			</h3>
+			<ButtonLink
+				v-tooltip="'View flag rule'"
+				type="quiet"
+				size="xs"
+				class="-my-1 -mr-1 !size-7 shrink-0 !rounded-full !p-0"
+				href="/moderation/project-flag"
+				target="_blank"
+				rel="noopener noreferrer"
+				aria-label="View flag rule"
+			>
+				<ExternalIcon class="!size-3.5 !min-h-0 !min-w-0" aria-hidden="true" />
+			</ButtonLink>
+		</div>
+		<p v-if="flag.reason" class="m-0 whitespace-pre-wrap break-words text-primary">
+			{{ flag.reason }}
+		</p>
+		<div v-if="flag.location" class="flex">
+			<Button
+				size="xs"
+				type="quiet"
+				class="!h-auto !min-h-0 !rounded-full !bg-surface-3 !px-2.5 !py-1 !text-xs !font-medium hover:!bg-surface-4"
+				@click="emit('reveal', flag.location.review_panel_key)"
+			>
+				<PanelTopIcon class="!size-3.5 shrink-0" aria-hidden="true" />
+				{{ locationTitle || flag.location.review_panel_key }}
+			</Button>
+		</div>
+	</article>
+</template>
+
+<script setup lang="ts">
+import type { ProjectFlag } from '@modrinth/api-client'
+import { ExternalIcon, PanelTopIcon, TagCategoryFlagIcon } from '@modrinth/assets'
+import { Button, ButtonLink } from '@modrinth/ui'
+
+defineProps<{ flag: ProjectFlag; locationTitle?: string }>()
+const emit = defineEmits<{ reveal: [key: string] }>()
+</script>

apps/frontend/src/components/project-review/flag-list/index.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto">
+		<FlagCard
+			v-for="flag in flags"
+			:key="flag.key"
+			:flag="flag"
+			:location-title="locationTitle(flag.location?.review_panel_key)"
+			@reveal="revealPanel"
+		/>
+		<p v-if="isPending" class="m-0 text-sm text-secondary">Loading flags...</p>
+		<p v-else-if="isError" class="m-0 text-sm text-red">Failed to load project flags.</p>
+		<p v-else-if="!flags.length" class="m-0 text-sm text-secondary">
+			No flags on this project.
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { injectReviewFlags } from '~/providers/project-review/review-flags'
+import { injectReviewPanels } from '~/providers/project-review/review-panels'
+
+import { injectReviewContext } from '../review-panel/context'
+import FlagCard from './flag-card.vue'
+
+const { flags, isPending, isError } = injectReviewFlags()
+const panels = injectReviewPanels()
+const { revealPanel } = injectReviewContext()
+function locationTitle(key: string | undefined) {
+	return key ? panels.resolve({ kind: 'panel', key })?.panel.title : undefined
+}
+</script>

apps/frontend/src/components/project-review/index.vue

@@ -70,6 +70,7 @@
 							</div>
 						</div>
 						<IssueList v-show="activeReviewTab === 'issues'" />
+						<FlagList v-show="activeReviewTab === 'flags'" />
 						<IssueList v-show="activeReviewTab === 're-review'" re-review />
 						<MessageThread v-show="activeReviewTab === 'thread'" ref="messageThread" />
 					</section>
@@ -105,6 +106,7 @@ import {
 import { isStaff } from '~/helpers/users.js'
 import { injectProjectReviewPageContext } from '~/providers/project-review'
 import { previousReviewLinkUrls } from '~/providers/project-review/project-links'
+import { createReviewFlags, provideReviewFlags } from '~/providers/project-review/review-flags'
 import {
 	createReviewMessages,
 	provideReviewMessages,
@@ -126,6 +128,7 @@ import {
 
 import Description from './description/index.vue'
 import Disclosures from './disclosures/index.vue'
+import FlagList from './flag-list/index.vue'
 import Gallery from './gallery/index.vue'
 import IssueList from './issue-list/index.vue'
 import IssuePicker from './issue-list/issue-picker.vue'
@@ -177,6 +180,7 @@ const visibleTabs = computed<readonly ProjectReviewTab[]>((previousTabs) => {
 	)
 })
 const reviewProjectId = computed(() => project.value?.id)
+const reviewFlags = provideReviewFlags(createReviewFlags(reviewProjectId))
 const session = provideReviewSession(createReviewSession())
 const settings = useModerationSettings()
 const panels = provideReviewPanels(
@@ -298,6 +302,7 @@ const rightPanelTabs = computed(() => [
 		value: 'issues',
 		label: `Issues (${issueCount.value})`,
 	},
+	{ value: 'flags', label: `Flags (${reviewFlags.flags.value.length})` },
 ])
 
 watch(
@@ -313,7 +318,12 @@ watch(projectId, () => {
 })
 
 useShortcut('cycle-conversation', () => {
-	const tabs = ['issues', 'thread', ...(hasPreviousStructuredIssues.value ? ['re-review'] : [])]
+	const tabs = [
+		'issues',
+		'flags',
+		'thread',
+		...(hasPreviousStructuredIssues.value ? ['re-review'] : []),
+	]
 	activeReviewTab.value = tabs[(tabs.indexOf(activeReviewTab.value) + 1) % tabs.length]
 	shortcuts.run('reveal-right')
 })

apps/frontend/src/components/project-review/project-info/section.vue

@@ -12,10 +12,11 @@
 				<slot name="heading-after" />
 			</div>
 			<div
-				v-if="$slots.right || selectedFindingCount > 0 || reReviewFindingCount > 0"
+				v-if="$slots.right || flagCount > 0 || selectedFindingCount > 0 || reReviewFindingCount > 0"
 				class="flex shrink-0 items-center gap-2"
 			>
 				<slot name="right" />
+				<FlagsCountBadge :panel-key="target ? panels.resolve(target)?.key : undefined" />
 				<ReReviewFindingsCountBadge :count="reReviewFindingCount" />
 				<FindingsCountBadge :count="selectedFindingCount" />
 			</div>
@@ -28,10 +29,12 @@
 import { computed } from 'vue'
 
 import type { ReviewTarget } from '~/providers/project-review/review'
+import { injectReviewFlags } from '~/providers/project-review/review-flags'
 import { injectReviewPanels } from '~/providers/project-review/review-panels'
 import { injectReviewPreviousIssues } from '~/providers/project-review/review-previous-issues'
 
 import FindingsCountBadge from '../review-panel/findings-count-badge.vue'
+import FlagsCountBadge from '../review-panel/flags-count-badge.vue'
 import ReviewPanel from '../review-panel/index.vue'
 import ReReviewFindingsCountBadge from '../review-panel/re-review-findings-count-badge.vue'
 
@@ -41,6 +44,11 @@ const props = defineProps<{
 }>()
 const panels = injectReviewPanels()
 const previousIssues = injectReviewPreviousIssues()
+const reviewFlags = injectReviewFlags(null)
+const flagCount = computed(() => {
+	const binding = props.target ? panels.resolve(props.target) : undefined
+	return binding ? (reviewFlags?.forPanel(binding.key).length ?? 0) : 0
+})
 const reReviewFindingCount = computed(() => {
 	const binding = props.target ? panels.resolve(props.target) : undefined
 	return binding ? previousIssues.reReviewFindingCount(binding) : 0

apps/frontend/src/components/project-review/review-panel/anchor.vue

@@ -19,6 +19,7 @@
 		>
 			<slot />
 			<div v-if="showFindingBadge" class="absolute right-0 top-0 flex items-center gap-1">
+				<FlagsCountBadge :panel-key="panels.resolve(target)?.key" />
 				<ReReviewFindingsCountBadge :count="reReviewFindingCount" />
 				<FindingsCountBadge :count="selectedFindingCount" />
 			</div>
@@ -37,6 +38,7 @@ import { injectReviewPreviousIssues } from '~/providers/project-review/review-pr
 
 import { injectReviewContext } from './context'
 import FindingsCountBadge from './findings-count-badge.vue'
+import FlagsCountBadge from './flags-count-badge.vue'
 import Highlight from './highlight.vue'
 import ReReviewFindingsCountBadge from './re-review-findings-count-badge.vue'