feat: requested moderation and tech review changes (#7019)

* feat: requested moderation and tech review changes

* chore: run prepr

* chore: run prepr

---------

Signed-off-by: ThatGravyBoat <gravy@thatgravyboat.tech>

apps/frontend/src/pages/[type]/[project]/version/[version].vue

@@ -144,6 +144,22 @@
 							<DownloadIcon aria-hidden="true" />
 							{{ formatMessage(commonMessages.downloadButton) }}
 						</ButtonLink>
+						<ButtonLink
+							v-if="
+								!!primaryFile?.url &&
+								isStaff(auth.user) &&
+								modSettings.get(moderationSettings.General.SlicerButtonInVersions)
+							"
+							v-tooltip="`Open in Slicer`"
+							type="quiet"
+							target="_blank"
+							:href="`https://slicer.run/?url=${encodeURIComponent(primaryFile?.url)}`"
+							class="!bg-button-bg"
+							aria-label="Open in Slicer"
+						>
+							<ExternalIcon aria-hidden="true" />
+							Open
+						</ButtonLink>
 						<ButtonLink
 							v-for="file in promotedFiles.filter(
 								(x) =>
@@ -502,6 +518,7 @@ import {
 	TrashIcon,
 	XIcon,
 } from '@modrinth/assets'
+import { moderationSettings } from '@modrinth/moderation'
 import {
 	Admonition,
 	Button,
@@ -545,6 +562,7 @@ const emit = defineEmits<{
 const data = useNuxtApp()
 const route = useNativeRoute()
 const router = useRouter()
+const modSettings = useModerationSettings()
 const auth = await useAuth()
 const tags = useGeneratedState()
 const client = injectModrinthClient()

apps/frontend/src/pages/[type]/[project]/versions.vue

@@ -53,6 +53,21 @@
 					>
 						<DownloadIcon aria-hidden="true" />
 					</ButtonLink>
+					<ButtonLink
+						v-if="
+							!!getPrimaryFile(version) &&
+							isStaff(auth.user) &&
+							modSettings.get(moderationSettings.General.SlicerButtonInVersions)
+						"
+						v-tooltip="`Open in Slicer`"
+						type="quiet"
+						target="_blank"
+						:href="`https://slicer.run/?url=${encodeURIComponent(createDownloadUrl(version))}`"
+						class="!w-9 !rounded-full !px-0 hover:!bg-button-bg"
+						aria-label="Open in Slicer"
+					>
+						<ExternalIcon aria-hidden="true" />
+					</ButtonLink>
 					<TeleportOverflowMenu
 						v-if="currentMember"
 						type="quiet"
@@ -268,6 +283,7 @@ import {
 	SpinnerIcon,
 	TrashIcon,
 } from '@modrinth/assets'
+import { moderationSettings } from '@modrinth/moderation'
 import {
 	ButtonLink,
 	ConfirmModal,
@@ -277,6 +293,7 @@ import {
 	ProjectPageVersions,
 	TeleportOverflowMenu,
 } from '@modrinth/ui'
+import { isStaff } from '@modrinth/utils'
 import { onMounted, useTemplateRef, watch } from 'vue'
 
 import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
@@ -289,6 +306,7 @@ const { createProjectDownloadUrl, updateVersionsFilterContext } = useCdnDownload
 
 const tags = useGeneratedState()
 const flags = useFeatureFlags()
+const modSettings = useModerationSettings()
 const auth = await useAuth()
 
 const client = injectModrinthClient()

apps/frontend/src/pages/moderation/technical-review/[project].vue

@@ -12,6 +12,7 @@ import ModerationTechRevCard from '~/components/ui/moderation/ModerationTechRevC
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
 const route = useRoute()
+const keybinds = useModerationKeybinds()
 
 const projectId = String(useRouteId('project'))
 
@@ -269,6 +270,34 @@ function handleShowMaliciousSummary(unsafeFiles: UnsafeFile[]) {
 function refetch() {
 	queryClient.invalidateQueries({ queryKey: ['tech-review-project-report', projectId] })
 }
+
+function handleKeybinds(event: KeyboardEvent) {
+	keybinds.value.handle(event, {
+		scope: 'tech-review',
+		actions: {
+			goToTop: () => {
+				window.scrollTo({
+					top: 0,
+					behavior: 'smooth',
+				})
+			},
+			goToBottom: () => {
+				window.scrollTo({
+					top: document.body.scrollHeight,
+					behavior: 'smooth',
+				})
+			},
+		},
+	})
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', handleKeybinds)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleKeybinds)
+})
 </script>
 
 <template>

apps/frontend/src/pages/moderation/technical-review/index.vue

@@ -32,6 +32,7 @@ useHead({ title: 'Tech review queue - Modrinth' })
 
 const client = injectModrinthClient()
 const queryClient = useQueryClient()
+const keybinds = useModerationKeybinds()
 
 const currentPage = ref(1)
 const API_PAGE_SIZE = 50
@@ -571,6 +572,50 @@ watch(totalPages, (pages) => {
 // 		complete: 20,
 // 	}
 // })
+
+const CARD_BOTTOM_OFFSET = 210
+
+function handleKeybinds(event: KeyboardEvent) {
+	keybinds.value.handle(event, {
+		scope: 'tech-review',
+		actions: {
+			goToTop: () => {
+				Array.from(cardRefs.values())
+					.filter((card) => card.getBoundingClientRect().top <= 0)
+					.reduce((prev, curr) =>
+						curr.getBoundingClientRect().top > prev.getBoundingClientRect().top ? curr : prev,
+					)
+					?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+			},
+			goToBottom: () => {
+				const nearestCard = Array.from(cardRefs.values())
+					.filter((card) => card.getBoundingClientRect().bottom >= window.innerHeight)
+					.reduce((prev, curr) =>
+						curr.getBoundingClientRect().top < prev.getBoundingClientRect().top ? curr : prev,
+					)
+
+				if (nearestCard) {
+					window.scrollTo({
+						behavior: 'smooth',
+						top:
+							nearestCard.getBoundingClientRect().bottom +
+							window.scrollY -
+							window.innerHeight +
+							CARD_BOTTOM_OFFSET,
+					})
+				}
+			},
+		},
+	})
+}
+
+onMounted(() => {
+	window.addEventListener('keydown', handleKeybinds)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('keydown', handleKeybinds)
+})
 </script>
 
 <template>