feat: surfacing flags in modview

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,27 @@
+<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="!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 } = 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'
 

apps/frontend/src/components/project-review/review-panel/flags-count-badge.vue

@@ -0,0 +1,21 @@
+<template>
+	<span
+		v-if="flags.length"
+		class="pointer-events-none flex shrink-0 items-center gap-0.5 text-xs font-medium leading-none text-purple"
+		:aria-label="`${flags.length} flags`"
+	>
+		<TagCategoryFlagIcon class="size-3.5 shrink-0 text-purple" aria-hidden="true" />
+		<span aria-hidden="true">{{ flags.length }}</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { TagCategoryFlagIcon } from '@modrinth/assets'
+import { computed } from 'vue'
+
+import { injectReviewFlags } from '~/providers/project-review/review-flags'
+
+const props = defineProps<{ panelKey?: string }>()
+const reviewFlags = injectReviewFlags(null)
+const flags = computed(() => (props.panelKey ? (reviewFlags?.forPanel(props.panelKey) ?? []) : []))
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+	<div v-if="flags.length" class="flex flex-wrap gap-1">
+		<Tooltip
+			v-for="flag in flags"
+			:key="flag.key"
+			interactive
+			panel-class="w-[min(20rem,calc(100vw-1rem))] !border-0 !bg-transparent !p-0 font-normal !shadow-none [&_.tooltip-arrow]:!border-surface-3 [&_.tooltip-arrow]:!bg-surface-2"
+		>
+			<span class="inline-flex items-center gap-1.5 text-sm font-medium text-contrast">
+				<TagCategoryFlagIcon class="size-4 shrink-0 text-purple" aria-hidden="true" />
+				{{ flag.name || flag.key }}
+			</span>
+			<template #popper>
+				<FlagCard
+					:flag="flag"
+					:location-title="locationTitle(flag.location?.review_panel_key)"
+					@reveal="reviewContext.revealPanel"
+					@pointerenter="setPreviewHovered(true)"
+					@pointerleave="setPreviewHovered(false)"
+					@pointerdown.stop
+				/>
+			</template>
+		</Tooltip>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { TagCategoryFlagIcon } from '@modrinth/assets'
+import { Tooltip } from '@modrinth/ui'
+import { computed, onBeforeUnmount } from 'vue'
+
+import { injectReviewFlags } from '~/providers/project-review/review-flags'
+import { injectReviewPanels } from '~/providers/project-review/review-panels'
+
+import FlagCard from '../flag-list/flag-card.vue'
+import { injectReviewContext } from './context'
+
+const props = defineProps<{ panelKey?: string; panelId: string }>()
+const reviewFlags = injectReviewFlags(null)
+const panels = injectReviewPanels()
+const reviewContext = injectReviewContext()
+const flags = computed(() => (props.panelKey ? (reviewFlags?.forPanel(props.panelKey) ?? []) : []))
+let previewHovered = false
+
+function locationTitle(key: string | undefined) {
+	return key ? panels.resolve({ kind: 'panel', key })?.panel.title : undefined
+}
+
+function setPreviewHovered(hovered: boolean) {
+	if (previewHovered === hovered) return
+	previewHovered = hovered
+	reviewContext.setDropdownOpen(props.panelId, hovered)
+}
+
+onBeforeUnmount(() => setPreviewHovered(false))
+</script>

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

@@ -43,6 +43,7 @@
 					</Tooltip>
 				</div>
 			</template>
+			<Flags :panel-key="binding?.key" :panel-id="id" />
 			<Controls
 				:key="controlsKey"
 				:binding="binding"
@@ -97,6 +98,7 @@
 					<InfoIcon v-else class="size-4" aria-hidden="true" />
 				</Tooltip>
 			</div>
+			<Flags :panel-key="binding?.key" :panel-id="id" />
 			<template v-if="!disabled">
 				<Controls
 					:key="controlsKey"
@@ -128,6 +130,7 @@ import { injectProjectReviewContext, injectReviewSlot } from '../layout/context'
 import Anchor from './anchor.vue'
 import { flashReviewElement, injectReviewContext, scrollReviewElement } from './context'
 import Controls from './controls/index.vue'
+import Flags from './flags.vue'
 import Highlight from './highlight.vue'
 import Popover from './popover.vue'
 

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

@@ -36,7 +36,7 @@
 					</IconButton>
 				</div>
 			</div>
-			<div class="space-y-4 break-words [&_a]:break-all">
+			<div class="flex flex-col gap-3 break-words [&_a]:break-all">
 				<slot />
 			</div>
 		</div>

apps/frontend/src/components/project-review/review-panel/re-review-findings-count-badge.vue

@@ -1,9 +1,9 @@
 <template>
 	<span
 		v-if="count > 0"
-		class="pointer-events-none flex h-[19px] min-w-[18px] shrink-0 items-center justify-center gap-1 rounded-full border border-solid border-surface-5 bg-surface-3 px-1.5 text-xs font-medium leading-none text-primary"
+		class="pointer-events-none flex shrink-0 items-center gap-0.5 text-xs font-medium leading-none text-orange"
 	>
-		<TagCategoryRefreshCcwIcon class="size-3 shrink-0 text-orange" aria-hidden="true" />
+		<TagCategoryRefreshCcwIcon class="size-3.5 shrink-0 text-orange" aria-hidden="true" />
 		<span aria-hidden="true">{{ count }}</span>
 		<span class="sr-only">{{
 			count === 1 ? `${count} re-review item` : `${count} re-review items`

apps/frontend/src/components/ui/moderation/project-flag/RhaiExpressionEditor.vue

@@ -36,7 +36,7 @@
 import { LoaderCircleIcon } from '@modrinth/assets'
 import { Button } from '@modrinth/ui'
 import type { Ace } from 'ace-builds'
-import { computed, onMounted, ref, shallowRef, type Component } from 'vue'
+import { type Component, computed, onMounted, ref, shallowRef } from 'vue'
 
 const model = defineModel<string>({ required: true })
 const props = defineProps<{ id: string; disabled?: boolean }>()

apps/frontend/src/components/ui/moderation/project-flag/ace-rhai.ts

@@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import 'ace-builds/src-noconflict/mode-rust'
 
-import ace from 'ace-builds'
 import type { Ace } from 'ace-builds'
+import ace from 'ace-builds'
 
 const RHAI_KEYWORDS =
 	'let const fn private if else switch for in while loop do until break continue return throw try catch import export as is this'
@@ -82,7 +81,7 @@ ace['define'](
 						regex: /[a-zA-Z_][\w]*(?=\s*\()/.source,
 					},
 					{ token: keywords, regex: /[a-zA-Z_][\w]*/.source },
-					{ token: 'paren.lparen', regex: /#\{|[\[({]/.source },
+					{ token: 'paren.lparen', regex: /#\{|[[({]/.source },
 					{ token: 'paren.rparen', regex: /[\])}]/.source },
 					{
 						token: 'keyword.operator',