feat: content moderation validators

_typos.toml

@@ -6,6 +6,15 @@ extend-exclude = [
   "packages/utils/",
   "packages/ui/",
   "packages/blog/",
+  # contains licenses like `CC-BY-ND-4.0`
+  "packages/moderation/src/data/stages/license.ts",
+  "packages/moderation/src/utils.ts",
+  # contains profanity word lists with deliberate misspellings
+  "packages/moderation/src/validators/profanity/",
+  # contains payment card IDs like `IY1VMST1MOXS` which are flagged
+  "apps/labrinth/src/queue/payouts/mod.rs",
+  # contains domain names with deliberate typos
+  "apps/labrinth/assets/disposable_email_blocklist.txt"
 ]
 
 [default]

apps/frontend/src/components/ValidationMessage.vue

@@ -0,0 +1,82 @@
+<template>
+	<div v-if="validations.length > 0" class="flex w-full flex-col gap-1.5">
+		<div
+			v-for="(validation, index) in validations"
+			:key="validation.code ?? validation.message?.id ?? index"
+			class="flex w-full items-center gap-1.5"
+			:class="{
+				'text-red': validation.severity === 'error',
+				'text-orange': validation.severity === 'warn' || validation.severity === 'warning',
+				'text-purple': validation.severity === 'suggestion',
+			}"
+		>
+			<component
+				:is="
+					validation.severity === 'error'
+						? XCircleIcon
+						: validation.severity === 'suggestion'
+							? LightBulbIcon
+							: TriangleAlertIcon
+				"
+				class="my-auto"
+			/>
+			{{ validation.message ? formatMessage(validation.message, validation.values) : undefined }}
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { LightBulbIcon, TriangleAlertIcon, XCircleIcon } from '@modrinth/assets'
+import { type MessageDescriptor, useVIntl } from '@modrinth/ui'
+import { computed, onScopeDispose, shallowRef, watch } from 'vue'
+
+interface ValidationCheck {
+	code?: string
+	severity: 'valid' | 'warn' | 'warning' | 'suggestion' | 'error'
+	message?: MessageDescriptor
+	values?: Record<string, unknown>
+}
+
+type ValidationCheckInput = ValidationCheck | ValidationCheck[] | null
+
+const props = withDefaults(
+	defineProps<{
+		check?: ValidationCheckInput
+		debounce?: number
+	}>(),
+	{
+		check: null,
+		debounce: 300,
+	},
+)
+
+const { formatMessage } = useVIntl()
+const displayedCheck = shallowRef<ValidationCheckInput>(props.check)
+let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+watch(
+	() => props.check,
+	(check) => {
+		clearTimeout(debounceTimer)
+		if (props.debounce <= 0) {
+			displayedCheck.value = check
+			return
+		}
+
+		debounceTimer = setTimeout(() => {
+			displayedCheck.value = check
+		}, props.debounce)
+	},
+)
+
+onScopeDispose(() => clearTimeout(debounceTimer))
+
+const validations = computed(() =>
+	(Array.isArray(displayedCheck.value)
+		? displayedCheck.value
+		: displayedCheck.value
+			? [displayedCheck.value]
+			: []
+	).filter((validation) => validation.severity !== 'valid'),
+)
+</script>

apps/frontend/src/components/ui/SlugSuggestions.vue

@@ -0,0 +1,63 @@
+<template>
+	<Transition name="slug-suggestions">
+		<div v-if="visible && hasSuggestions" class="mt-2 grid grid-rows-[1fr]">
+			<div class="flex min-h-0 flex-wrap items-center gap-2 overflow-hidden">
+				<span class="text-sm text-secondary">{{ formatMessage(messages.label) }}</span>
+				<TagItem
+					v-for="suggestion in suggestions"
+					:key="suggestion"
+					:action="() => emit('select', suggestion)"
+					@mousedown.prevent
+				>
+					<CheckIcon v-if="suggestion === selected" aria-hidden="true" />
+					{{ suggestion }}
+				</TagItem>
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<script setup lang="ts">
+import { CheckIcon } from '@modrinth/assets'
+import { defineMessages, TagItem, useVIntl } from '@modrinth/ui'
+import { computed } from 'vue'
+
+const props = defineProps<{
+	selected: string
+	suggestions: string[]
+	visible: boolean
+}>()
+
+const emit = defineEmits<{
+	select: [suggestion: string]
+}>()
+
+const hasSuggestions = computed(() =>
+	props.suggestions.some((suggestion) => suggestion !== props.selected),
+)
+
+const { formatMessage } = useVIntl()
+const messages = defineMessages({
+	label: {
+		id: 'project.slug-suggestions.label',
+		defaultMessage: 'Suggestions:',
+	},
+})
+</script>
+
+<style scoped>
+.slug-suggestions-enter-active,
+.slug-suggestions-leave-active {
+	transition:
+		grid-template-rows 150ms ease,
+		opacity 150ms ease,
+		transform 150ms ease;
+}
+
+.slug-suggestions-enter-from,
+.slug-suggestions-leave-to {
+	grid-template-rows: 0fr;
+	opacity: 0;
+	transform: translateY(-0.25rem);
+}
+</style>

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -41,11 +41,16 @@
 					:disabled="hasHitLimit"
 					@update:model-value="updatedName()"
 				/>
+				<ValidationMessage :check="nameValidation" />
 			</div>
-			<label for="slug" class="flex flex-col gap-2.5">
-				<span class="text-md font-semibold text-contrast">
+			<div
+				class="flex flex-col gap-2.5"
+				@focusin="onSlugSuggestionFocusIn"
+				@focusout="onSlugSuggestionFocusOut"
+			>
+				<label for="slug" class="text-md font-semibold text-contrast">
 					{{ formatMessage(messages.urlLabel) }}
-				</span>
+				</label>
 				<Input
 					id="slug"
 					v-model="slug"
@@ -58,7 +63,13 @@
 				>
 					<template #prefix>https://modrinth.com/project/</template>
 				</Input>
-			</label>
+				<SlugSuggestions
+					:selected="slug"
+					:suggestions="slugSuggestions"
+					:visible="showSlugSuggestions"
+					@select="selectSlugSuggestion"
+				/>
+			</div>
 			<div class="flex flex-col gap-2.5">
 				<label for="owner">
 					<span class="text-md font-semibold text-contrast">
@@ -106,6 +117,7 @@
 					:placeholder="formatMessage(messages.summaryPlaceholder)"
 					:disabled="hasHitLimit"
 				/>
+				<ValidationMessage :check="summaryValidation" />
 				<span>{{ formatMessage(messages.summaryDescription) }}</span>
 			</div>
 			<div class="flex justify-end gap-2.5">
@@ -147,6 +159,16 @@ import {
 } from '@modrinth/ui'
 import { computed, defineAsyncComponent, h } from 'vue'
 
+import SlugSuggestions from '~/components/ui/SlugSuggestions.vue'
+import ValidationMessage from '~/components/ValidationMessage.vue'
+import {
+	useProjectSummaryValidation,
+	useProjectTitleValidation,
+} from '~/composables/project-field-validation'
+import {
+	useProjectSlugSuggestions,
+	useSlugSuggestionVisibility,
+} from '~/composables/project-slug-suggestions'
 import { generateUrlSlug } from '~/utils/slugs'
 
 import CreateLimitAlert from './CreateLimitAlert.vue'
@@ -272,6 +294,16 @@ const name = ref('')
 const slug = ref('')
 const description = ref('')
 const manualSlug = ref(false)
+const {
+	onFocusIn: onSlugSuggestionFocusIn,
+	onFocusOut: onSlugSuggestionFocusOut,
+	visible: showSlugSuggestions,
+} = useSlugSuggestionVisibility()
+const { checking: checkingSlugSuggestions, suggestions: slugSuggestions } =
+	useProjectSlugSuggestions({
+		title: name,
+		username: () => auth.value.user?.username,
+	})
 const projectType = ref<ProjectTypes>('project')
 const projectTypeOptions = computed<ComboboxOption<ProjectTypes>[]>(() => [
 	{
@@ -302,9 +334,19 @@ const visibilities = ref<VisibilityOption[]>([
 ])
 const visibility = ref<VisibilityOption>(visibilities.value[0])
 
+const nameValidation = useProjectTitleValidation(name)
+const summaryValidation = useProjectSummaryValidation(description, name)
+
 const disableCreate = computed(() => {
 	if (hasHitLimit.value) return true
+	if (
+		nameValidation.value.some((validation) => validation.severity === 'error') ||
+		summaryValidation.value.some((validation) => validation.severity === 'error')
+	)
+		return true
 	if (!name.value.trim() || !slug.value.trim()) return true
+	if (!manualSlug.value && checkingSlugSuggestions.value) return true
+	if (!manualSlug.value && !slugSuggestions.value.includes(slug.value)) return true
 	if (description.value.trim().length < 3) return true
 	if (owner.value !== 'self' && !organizations.value.find((org) => org.id === owner.value))
 		return true
@@ -391,6 +433,7 @@ async function fetchOrganizations() {
 }
 
 async function createProject() {
+	if (disableCreate.value) return
 	startLoading()
 
 	const formData = new FormData()
@@ -474,6 +517,7 @@ async function show(event?: MouseEvent, options?: ShowOptions) {
 	slug.value = ''
 	description.value = ''
 	manualSlug.value = false
+	showSlugSuggestions.value = false
 	owner.value = 'self'
 	projectType.value = options?.type ?? 'project'
 	await fetchOrganizations()
@@ -485,4 +529,13 @@ function updatedName() {
 		slug.value = generateUrlSlug(name.value)
 	}
 }
+
+function selectSlugSuggestion(suggestion: string) {
+	slug.value = suggestion
+	manualSlug.value = true
+}
+
+watch([slugSuggestions, checkingSlugSuggestions], ([suggestions, checking]) => {
+	if (!manualSlug.value && !checking) slug.value = suggestions[0] ?? ''
+})
 </script>

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { CheckIcon, XIcon } from '@modrinth/assets'
+import { Button, NewModal, Textarea } from '@modrinth/ui'
+import { nextTick, ref, useTemplateRef } from 'vue'
+
+const emit = defineEmits<{
+	apply: [projectIds: string[]]
+}>()
+
+const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
+const textareaRef = useTemplateRef<InstanceType<typeof Textarea>>('textareaRef')
+const input = ref('')
+const error = ref('')
+
+function parseProjectIds(value: string): string[] {
+	return [
+		...new Set(
+			value
+				.split(/[,\r\n]+/)
+				.map((id) => id.replace(/\s+/g, ''))
+				.filter(Boolean),
+		),
+	]
+}
+
+async function show() {
+	input.value = ''
+	error.value = ''
+	modalRef.value?.show()
+	await nextTick()
+	textareaRef.value?.focus()
+}
+
+function hide() {
+	modalRef.value?.hide()
+}
+
+function apply() {
+	const projectIds = parseProjectIds(input.value)
+	if (projectIds.length === 0) {
+		error.value = 'Enter at least one project ID.'
+		return
+	}
+
+	emit('apply', projectIds)
+	hide()
+}
+
+defineExpose({ show, hide })
+</script>
+
+<template>
+	<NewModal ref="modalRef" header="Moderate by IDs" width="36rem" max-width="calc(100vw - 2rem)">
+		<form class="flex flex-col gap-4" @submit.prevent="apply">
+			<div class="flex flex-col gap-2">
+				<label class="font-semibold text-contrast" for="moderation-project-ids">
+					Project IDs to moderate
+				</label>
+				<Textarea
+					id="moderation-project-ids"
+					ref="textareaRef"
+					v-model="input"
+					:rows="10"
+					:error="!!error"
+					resize="vertical"
+					placeholder="Enter project IDs separated by commas or new lines"
+					wrapper-class="min-h-48"
+					@input="error = ''"
+				/>
+				<span v-if="error" class="text-sm font-semibold text-red">{{ error }}</span>
+				<span v-else class="text-sm text-secondary">
+					Separate IDs with commas or new lines. Whitespace and duplicate IDs are removed.
+				</span>
+			</div>
+
+			<div class="flex justify-end gap-2">
+				<Button native-type="button" @click="hide">
+					<XIcon aria-hidden="true" />
+					Cancel
+				</Button>
+				<Button type="colored" color="brand" native-type="submit">
+					<CheckIcon aria-hidden="true" />
+					Apply
+				</Button>
+			</div>
+		</form>
+	</NewModal>
+</template>