feat: modview

apps/frontend/COPYING.md

@@ -21,6 +21,8 @@ This includes, but may not be limited to, the following files:
 - src/public/favicon-light-32x32.png
 - src/public/favicon-settings-32x32.png
 - src/public/favicon-light-settings-32x32.png
+- src/public/favicon-review.svg
+- src/public/favicon-light-review.svg
 - src/public/dev-favicons/\*
 - src/public/news/\*
 

apps/frontend/nuxt.config.ts

@@ -5,6 +5,9 @@ import { fileURLToPath } from 'url'
 import svgLoader from 'vite-svg-loader'
 
 import { GenericModrinthClient, type Labrinth } from '../../packages/api-client/src/index.ts'
+import moderationMessages, {
+	moderationMessagesDirectory,
+} from '../../packages/moderation/vite-plugin'
 
 const STAGING_API_URL = 'https://staging-api.modrinth.com/v2/'
 const STAGING_SHARED_INSTANCES_API_URL = 'https://staging-shared-instances.modrinth.com'
@@ -26,6 +29,7 @@ export default defineNuxtConfig({
 	srcDir: 'src/',
 	alias: {
 		'@modrinth/api-client': API_CLIENT_SOURCE,
+		'#messages': moderationMessagesDirectory,
 	},
 	app: {
 		head: {
@@ -81,6 +85,7 @@ export default defineNuxtConfig({
 			dedupe: ['vue'],
 		},
 		plugins: [
+			moderationMessages(),
 			svgLoader({
 				svgoConfig: {
 					plugins: [

apps/frontend/package.json

@@ -38,6 +38,9 @@
 		"wrangler": "^4.115.0"
 	},
 	"dependencies": {
+		"@codemirror/commands": "^6.3.2",
+		"@codemirror/language": "^6.9.3",
+		"@codemirror/view": "^6.22.1",
 		"@contentauth/c2pa-web": "^0.13.1",
 		"@formatjs/intl-localematcher": "^0.5.4",
 		"@ltd/j-toml": "^1.38.0",
@@ -59,6 +62,7 @@
 		"ansi-to-html": "^0.7.2",
 		"chart.js": "^4.5.1",
 		"dayjs": "^1.11.7",
+		"dockview-vue": "^8.2.0",
 		"dompurify": "^3.1.7",
 		"@floating-ui/vue": "^2.0.1",
 		"fuse.js": "^6.6.2",

apps/frontend/src/components/ProjectStatusStats.vue

@@ -0,0 +1,117 @@
+<template>
+	<div class="mt-1 flex flex-wrap gap-x-2 gap-y-1 text-xs">
+		<Tooltip
+			v-for="stat in statusStats"
+			:key="stat.status"
+			:text="formatMessage(stat.message, { count: stat.count })"
+			:aria-label="formatMessage(stat.message, { count: stat.count })"
+			class="flex items-center gap-0.5 font-medium tabular-nums"
+			:class="stat.color"
+		>
+			<component :is="stat.icon" class="size-[12px] shrink-0" aria-hidden="true" />
+			<span aria-hidden="true">{{ stat.count }}</span>
+		</Tooltip>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon, ShieldAlertIcon } from '@modrinth/assets'
+import { defineMessages, PROJECT_STATUS_ICONS, Tooltip, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	stats: { status: string; count: number }[]
+}>()
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	approvedCount: {
+		id: 'moderation.project-review.approvedCount',
+		defaultMessage: '{count} approved',
+	},
+	archivedCount: {
+		id: 'moderation.project-review.archivedCount',
+		defaultMessage: '{count} archived',
+	},
+	unlistedCount: {
+		id: 'moderation.project-review.unlistedCount',
+		defaultMessage: '{count} unlisted',
+	},
+	withheldCount: {
+		id: 'moderation.project-review.withheldCount',
+		defaultMessage: '{count} withheld',
+	},
+	processingCount: {
+		id: 'moderation.project-review.processingCount',
+		defaultMessage: '{count} under review',
+	},
+	draftCount: {
+		id: 'moderation.project-review.draftCount',
+		defaultMessage: '{count} draft',
+	},
+	rejectedCount: {
+		id: 'moderation.project-review.rejectedCount',
+		defaultMessage: '{count} rejected',
+	},
+	techReviewFailedCount: {
+		id: 'moderation.project-review.techReviewFailedCount',
+		defaultMessage: '{count} failed technical review',
+	},
+	privateCount: {
+		id: 'moderation.project-review.privateCount',
+		defaultMessage: '{count} private',
+	},
+	scheduledCount: {
+		id: 'moderation.project-review.scheduledCount',
+		defaultMessage: '{count} scheduled',
+	},
+	unknownCount: {
+		id: 'moderation.project-review.unknownCount',
+		defaultMessage: '{count} unknown',
+	},
+})
+const statusMessages = {
+	approved: messages.approvedCount,
+	archived: messages.archivedCount,
+	unlisted: messages.unlistedCount,
+	withheld: messages.withheldCount,
+	processing: messages.processingCount,
+	draft: messages.draftCount,
+	rejected: messages.rejectedCount,
+	private: messages.privateCount,
+	scheduled: messages.scheduledCount,
+	unknown: messages.unknownCount,
+	tech_review_failed: messages.techReviewFailedCount,
+}
+const statusColors = {
+	approved: 'text-green',
+	archived: 'text-purple',
+	unlisted: 'text-purple',
+	withheld: 'text-red',
+	processing: 'text-orange',
+	draft: 'text-blue',
+	rejected: 'text-red',
+	private: 'text-purple',
+	scheduled: 'text-orange',
+	unknown: 'text-orange',
+	tech_review_failed: 'text-red',
+}
+const statusStats = computed(() =>
+	Object.entries(statusMessages)
+		.map(([key, message]) => {
+			const status = key as keyof typeof statusMessages
+			return {
+				status,
+				message,
+				count: props.stats.find((stat) => stat.status === status)?.count ?? 0,
+				icon:
+					status === 'tech_review_failed'
+						? ShieldAlertIcon
+						: status === 'approved'
+							? CheckIcon
+							: PROJECT_STATUS_ICONS[status],
+				color: statusColors[status],
+			}
+		})
+		.filter((stat) => stat.count > 0),
+)
+</script>

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

@@ -0,0 +1,102 @@
+<template>
+	<div
+		ref="interactionScope"
+		class="editable-review-section flex h-full min-h-0 flex-col gap-2.5 overflow-y-auto overflow-x-hidden px-2 pb-2"
+	>
+		<div
+			class="sticky top-0 z-10 flex shrink-0 items-start justify-between gap-4 bg-surface-1 pt-2"
+		>
+			<ReviewPanel
+				mode="inline"
+				:target="{ kind: 'description' }"
+				hide-title
+				:disabled="isLoading || !!error"
+				:interaction-scope="interactionScope"
+				class="!w-auto min-w-0 flex-1 pb-2.5"
+			/>
+			<div class="mt-0.5 flex shrink-0 justify-end gap-1">
+				<template v-if="editing">
+					<Button type="quiet" size="xs" :disabled="saving" @click="resetEditing">
+						{{ formatMessage(commonMessages.cancelButton) }}
+					</Button>
+					<Button
+						type="colored"
+						color="brand"
+						size="xs"
+						:loading="saving"
+						:disabled="!valid"
+						@click="save"
+					>
+						{{ formatMessage(commonMessages.saveButton) }}
+					</Button>
+				</template>
+				<EditButton
+					v-else-if="project && !isLoading && !error"
+					:section="formatMessage(messages.description)"
+					:disabled="saving"
+					@click="startEditing"
+				/>
+			</div>
+		</div>
+		<div class="min-h-0 flex-1">
+			<p v-if="!selection" class="m-0 text-secondary">
+				{{ formatMessage(messages.empty) }}
+			</p>
+			<p v-else-if="isLoading" role="status" class="m-0">
+				{{ formatMessage(messages.loading) }}
+			</p>
+			<div v-else-if="error" role="alert">
+				<p class="m-0">{{ formatMessage(messages.loadError) }}</p>
+				<Button @click="refresh">{{ formatMessage(messages.retry) }}</Button>
+			</div>
+			<div v-else-if="editing" class="flex min-h-full flex-col gap-2">
+				<MarkdownEditor ref="editor" v-model="draft" :disabled="saving" />
+				<p v-if="validationMessage" class="m-0 text-sm text-red" role="alert">
+					{{ validationMessage }}
+				</p>
+			</div>
+			<ProjectPageDescription
+				v-else-if="project?.description?.trim()"
+				class="text-sm leading-tight"
+				:description="project.description"
+			/>
+			<p v-else class="m-0 text-secondary">
+				{{ formatMessage(messages.emptyDescription) }}
+			</p>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {
+	Button,
+	commonMessages,
+	MarkdownEditor,
+	ProjectPageDescription,
+	useVIntl,
+} from '@modrinth/ui'
+import { useTemplateRef } from 'vue'
+
+import { injectProjectReviewPageContext } from '~/providers/project-review'
+
+import { projectReviewMessages as messages } from '../messages'
+import EditButton from '../project-info/edit/button.vue'
+import { useProjectTextEdit } from '../project-info/edit/use-project-text-edit'
+import ReviewPanel from '../review-panel/index.vue'
+
+const { formatMessage } = useVIntl()
+const interactionScope = useTemplateRef<HTMLElement>('interactionScope')
+const { selection, isLoading, error, refresh } = injectProjectReviewPageContext()
+const editor = useTemplateRef<InstanceType<typeof MarkdownEditor>>('editor')
+const {
+	project,
+	saving,
+	editing,
+	draft,
+	valid,
+	validationMessage,
+	startEditing,
+	resetEditing,
+	save,
+} = useProjectTextEdit('description', () => editor.value?.focus())
+</script>

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

@@ -0,0 +1,70 @@
+<template>
+	<div v-if="project" class="flex h-full min-h-0 flex-col gap-1 overflow-hidden">
+		<div class="shrink-0 p-2">
+			<ReviewPanel mode="inline" :target="{ kind: 'disclosures' }" hide-title />
+		</div>
+		<p v-if="isPending" role="status">{{ formatMessage(statusMessages.loading) }}</p>
+		<div v-else-if="isError" role="alert">
+			<p>{{ formatMessage(statusMessages.loadError) }}</p>
+			<Button @click="refetch()">{{ formatMessage(statusMessages.retry) }}</Button>
+		</div>
+		<EmptyState
+			v-else-if="!canEditDisclosures"
+			type="no-documents"
+			:heading="formatMessage(editorMessages.uploadVersionFirstHeading)"
+			:description="formatMessage(commonMessages.uploadVersionsEmptyStateDescription)"
+		/>
+		<template v-else>
+			<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-2 pt-3">
+				<DisclosureCards
+					:editor="disclosures"
+					:project-title="project.name"
+					variant="review"
+					hide-description
+				/>
+			</div>
+			<div class="z-10 mt-auto shrink-0">
+				<p v-if="saveError" role="alert" class="text-red">
+					{{ formatMessage(statusMessages.saveError) }}
+				</p>
+				<UnsavedChangesPopup
+					inline
+					:original="savedSnapshot"
+					:modified="currentSnapshot"
+					:saving="saving"
+					:can-save="canSave"
+					:save-disabled-reason="saveDisabledReason"
+					@reset="reset"
+					@save="save"
+				/>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Button, commonMessages, EmptyState, UnsavedChangesPopup, useVIntl } from '@modrinth/ui'
+
+import DisclosureCards from '~/components/ui/project-settings/disclosures/DisclosureCards.vue'
+import { disclosureStatusMessages as statusMessages } from '~/components/ui/project-settings/disclosures/messages'
+import { injectProjectReviewPageContext } from '~/providers/project-review'
+
+import ReviewPanel from '../review-panel/index.vue'
+
+const { formatMessage } = useVIntl()
+const { project, disclosures } = injectProjectReviewPageContext()
+const {
+	messages: editorMessages,
+	savedSnapshot,
+	currentSnapshot,
+	saving,
+	reset,
+	save,
+	canSave,
+	saveDisabledReason,
+	canEditDisclosures,
+	disclosuresQuery,
+	saveError,
+} = disclosures
+const { isPending, isError, refetch } = disclosuresQuery
+</script>