feat: Archive Audit Tooling

apps/app-frontend/package.json

@@ -15,6 +15,7 @@
 	},
 	"dependencies": {
 		"@dnd-kit/vue": "^0.5.0",
+		"@floating-ui/vue": "^2.0.1",
 		"@modrinth/api-client": "workspace:^",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
@@ -32,9 +33,7 @@
 		"@tauri-apps/plugin-window-state": "^2.2.2",
 		"@types/three": "^0.172.0",
 		"@vueuse/core": "^11.1.0",
-		"ace-builds": "^1.43.5",
 		"dayjs": "^1.11.10",
-		"@floating-ui/vue": "^2.0.1",
 		"fuse.js": "^6.6.2",
 		"intl-messageformat": "^10.7.7",
 		"motion-v": "2.2.1",
@@ -46,7 +45,6 @@
 		"vue-i18n": "^10.0.0",
 		"vue-router": "^4.6.0",
 		"vue-virtual-scroller": "v2.0.0-beta.8",
-		"vue3-ace-editor": "^2.2.4",
 		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {

apps/app-frontend/src/features/settings/syncing/command-history-modal.vue

@@ -2,14 +2,15 @@
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import {
 	Button,
+	CodeEditor,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
 	NewModal,
 	useVIntl,
 } from '@modrinth/ui'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { defineAsyncComponent, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import { set_command_history } from '@/helpers/instance'
 import { commandHistoryQueryOptions, syncedOptionsKeys } from '@/helpers/synced-options'
@@ -20,14 +21,6 @@ const queryClient = useQueryClient()
 const modal = ref<InstanceType<typeof NewModal> | null>(null)
 const commandHistory = ref('')
 const historyQuery = useQuery({ ...commandHistoryQueryOptions(), enabled: false })
-const CommandHistoryEditor = defineAsyncComponent(async () => {
-	const [editor] = await Promise.all([
-		import('vue3-ace-editor'),
-		import('@modrinth/ui/src/utils/ace-theme'),
-		import('@modrinth/ui/src/utils/ace-mode-mcfunction'),
-	])
-	return editor.VAceEditor
-})
 const saveMutation = useMutation({
 	mutationFn: set_command_history,
 	onSuccess: (history) => {
@@ -78,13 +71,11 @@ defineExpose({ show })
 		max-width="700px"
 		width="700px"
 	>
-		<CommandHistoryEditor
-			v-model:value="commandHistory"
-			lang="mcfunction"
-			theme="modrinth"
-			:print-margin="false"
-			class="command-history-editor ace-modrinth"
-			style="height: 420px; font-size: 0.875rem"
+		<CodeEditor
+			v-model="commandHistory"
+			language="mcfunction"
+			class="h-[420px] text-sm"
+			@save="saveCommandHistory"
 		/>
 		<template #actions>
 			<div class="flex justify-end gap-2">
@@ -100,25 +91,3 @@ defineExpose({ show })
 		</template>
 	</NewModal>
 </template>
-
-<style>
-.command-history-editor.ace-modrinth {
-	background-color: var(--surface-2);
-}
-
-.command-history-editor.ace-modrinth .ace_gutter {
-	background: var(--surface-1);
-}
-
-.command-history-editor.ace-modrinth .ace_marker-layer .ace_active-line {
-	background: var(--surface-2-5);
-}
-
-.command-history-editor.ace-modrinth .ace_gutter-active-line {
-	background-color: var(--surface-1-5);
-}
-
-.command-history-editor.ace-modrinth.ace_multiselect .ace_selection.ace_start {
-	box-shadow: 0 0 3px 0 var(--surface-2);
-}
-</style>

apps/app-frontend/src/main.js

@@ -1,6 +1,6 @@
 import 'overlayscrollbars/overlayscrollbars.css'
 
-import { installTooltipDirective } from '@modrinth/ui'
+import { installTooltipDirective, useCodeHighlightTheme } from '@modrinth/ui'
 import { VueQueryPlugin } from '@tanstack/vue-query'
 import { createApp } from 'vue'
 
@@ -24,6 +24,7 @@ if (import.meta.env.DEV) {
 app.use(i18nPlugin)
 app.use(i18nDebugPlugin)
 installTooltipDirective(app)
+useCodeHighlightTheme().start()
 app.directive('overlay-scrollbars', overlayScrollbarsDirective)
 
 async function mount() {

apps/frontend/nuxt.config.ts

@@ -110,6 +110,10 @@ export default defineNuxtConfig({
 				external: ['cloudflare:workers'],
 			},
 		},
+		worker: {
+			// The toolbox workers (archives, decompilation) lazily import their dependencies
+			format: 'es',
+		},
 	},
 	hooks: {
 		async 'build:before'() {

apps/frontend/package.json

@@ -38,8 +38,10 @@
 		"wrangler": "^4.115.0"
 	},
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.20.0",
 		"@codemirror/commands": "^6.3.2",
 		"@codemirror/language": "^6.9.3",
+		"@codemirror/state": "^6.5.4",
 		"@codemirror/view": "^6.22.1",
 		"@contentauth/c2pa-web": "^0.13.1",
 		"@floating-ui/vue": "^2.0.1",
@@ -58,7 +60,6 @@
 		"@vue-email/render": "^0.0.9",
 		"@vueuse/core": "^11.1.0",
 		"@zip.js/zip.js": "^2.8.34",
-		"ace-builds": "^1.36.2",
 		"ansi-to-html": "^0.7.2",
 		"chart.js": "^4.5.1",
 		"dayjs": "^1.11.7",
@@ -81,7 +82,6 @@
 		"vue-confetti-explosion": "^1.0.2",
 		"vue-router": "*",
 		"vue-typed-virtual-list": "^1.0.10",
-		"vue3-ace-editor": "^2.2.4",
 		"vue3-apexcharts": "^1.5.2",
 		"xss": "^1.0.14"
 	},

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

@@ -0,0 +1,28 @@
+<template>
+	<div class="flex h-full min-h-0 min-w-0 flex-col">
+		<slot />
+		<ReviewOutcomeButtons v-if="hostsOutcome" class="mt-2.5" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+
+import { injectReviewPanelVisible } from './layout/context'
+import ReviewOutcomeButtons from './review-outcome-buttons/index.vue'
+
+/**
+ * One of the review's conversation panels (re-review, thread, issues), which reports whether it's
+ * shown and, when it's the one picked to, hosts the review's outcome buttons below its content.
+ */
+defineProps<{
+	hostsOutcome: boolean
+}>()
+
+const emit = defineEmits<{
+	shown: [shown: boolean]
+}>()
+
+const visible = injectReviewPanelVisible()
+watch(visible, (shown) => emit('shown', shown), { immediate: true })
+</script>

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

@@ -1,18 +1,16 @@
 <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"
+		class="editable-review-section flex h-full min-h-0 flex-col gap-2.5 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"
-		>
+		<div class="flex shrink-0 items-start justify-between gap-4">
 			<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"
+				class="!w-auto min-w-0 flex-1"
 			/>
 			<div class="mt-0.5 flex shrink-0 justify-end gap-1">
 				<template v-if="editing">
@@ -36,7 +34,7 @@
 				/>
 			</div>
 		</div>
-		<div class="min-h-0 flex-1">
+		<div class="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
 			<p v-if="!selection" class="m-0 text-secondary">No project selected</p>
 			<p v-else-if="isLoading" role="status" class="m-0">Loading...</p>
 			<div v-else-if="error" role="alert">
@@ -48,8 +46,8 @@
 					ref="editor"
 					v-model="draft"
 					:disabled="saving"
-					:hide-formatting-buttons="
-						settings.get(moderationSettings.General.HideMarkdownFormattingButtons)
+					:formatting-buttons-visibility="
+						settings.get(moderationSettings.General.MarkdownFormattingButtonsVisibility)
 					"
 				/>
 				<p v-if="validationMessage" class="m-0 text-sm text-red" role="alert">

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

@@ -1,6 +1,6 @@
 <template>
-	<div v-if="project" class="flex h-full min-h-0 flex-col gap-1 overflow-hidden">
-		<div class="shrink-0 p-2">
+	<div v-if="project" class="flex h-full min-h-0 flex-col gap-2.5">
+		<div class="shrink-0 px-2">
 			<ReviewPanel mode="inline" :target="{ kind: 'disclosures' }" hide-title />
 		</div>
 		<p v-if="isPending" role="status">Loading disclosures…</p>
@@ -15,7 +15,7 @@
 			description="Come back once you've uploaded your versions."
 		/>
 		<template v-else>
-			<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-2 pt-3">
+			<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pt-2">
 				<DisclosureCards
 					:editor="disclosures"
 					:project-title="project.name"