From df261dad950b8310b5439f9069c7921ef5e89dbe Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 28 Aug 2025 14:52:43 -0700
Subject: [PATCH] Add file lookup utility page (#4276)

* Add file lookup utility page

* Lint
---
 apps/frontend/src/layouts/default.vue         |   9 +
 apps/frontend/src/pages/admin/file_lookup.vue | 201 ++++++++++++++++++
 2 files changed, 210 insertions(+)
 create mode 100644 apps/frontend/src/pages/admin/file_lookup.vue

diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 7ef5f5b3c..e63bce77b 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -302,6 +302,13 @@
 								color: 'orange',
 								link: '/moderation/reports',
 							},
+							{
+								divider: true,
+							},
+							{
+								id: 'file-lookup',
+								link: '/admin/file_lookup',
+							},
 							{
 								divider: true,
 								shown: isAdmin(auth.user),
@@ -325,6 +332,7 @@
 						<template #review-projects> <ScaleIcon aria-hidden="true" /> Review projects </template>
 						<template #review-reports> <ReportIcon aria-hidden="true" /> Reports </template>
 						<template #user-lookup> <UserIcon aria-hidden="true" /> Lookup by email </template>
+						<template #file-lookup> <FileIcon aria-hidden="true" /> File lookup </template>
 						<template #servers-notices>
 							<IssuesIcon aria-hidden="true" /> Manage server notices
 						</template>
@@ -679,6 +687,7 @@ import {
 	DiscordIcon,
 	DownloadIcon,
 	DropdownIcon,
+	FileIcon,
 	GithubIcon,
 	GlassesIcon,
 	HamburgerIcon,
diff --git a/apps/frontend/src/pages/admin/file_lookup.vue b/apps/frontend/src/pages/admin/file_lookup.vue
new file mode 100644
index 000000000..9bbae53cc
--- /dev/null
+++ b/apps/frontend/src/pages/admin/file_lookup.vue
@@ -0,0 +1,201 @@
+<template>
+	<div class="normal-page no-sidebar">
+		<h1>File lookup</h1>
+		<div class="normal-page__content">
+			<div class="card flex flex-col gap-3">
+				<div
+					class="border-highlight-gray hover:bg-button-hover relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed bg-button-bg p-8 transition-colors"
+					@click="triggerFileInput"
+					@drop.prevent="handleDrop"
+					@dragover.prevent
+					@dragenter.prevent
+				>
+					<p
+						class="mx-auto mb-0 flex items-center gap-2 text-center text-lg font-bold text-primary"
+					>
+						<UploadIcon /> Select file to lookup
+					</p>
+					<p class="mx-auto mt-0 text-center text-sm text-secondary">
+						Drag and drop or click here to browse
+					</p>
+					<input ref="fileInput" type="file" class="hidden" @change="handleFileSelect" />
+				</div>
+
+				<template v-if="selectedFile">
+					<div class="flex items-center gap-2 text-sm text-secondary">
+						<FileIcon class="h-4 w-4" />
+						<span>{{ selectedFile.name }} ({{ formatBytes(selectedFile.size) }})</span>
+					</div>
+
+					<div v-if="loadingHash" class="flex items-center gap-2 text-sm text-secondary">
+						<SpinnerIcon class="h-4 w-4 animate-spin" />
+						Calculating hashes...
+					</div>
+					<div v-if="loadingLookup" class="flex items-center gap-2 text-sm text-secondary">
+						<SpinnerIcon class="h-4 w-4 animate-spin" />
+						Looking up file on Modrinth...
+					</div>
+
+					<template v-if="fileHashes">
+						<h3 class="mb-0 text-lg font-extrabold text-contrast">File hashes:</h3>
+						<div class="flex flex-col gap-2">
+							<span class="text-xs text-secondary">SHA512:</span>
+							<CopyCode :text="fileHashes.sha512" />
+							<span class="mt-1 text-xs text-secondary">SHA256:</span>
+							<CopyCode :text="fileHashes.sha256" />
+							<span class="mt-1 text-xs text-secondary">SHA1:</span>
+							<CopyCode :text="fileHashes.sha1" />
+						</div>
+					</template>
+				</template>
+
+				<template v-if="lookupResult">
+					<h3 class="mb-0 text-lg font-extrabold text-contrast">Modrinth project:</h3>
+					<nuxt-link
+						class="flex w-fit items-center gap-2 text-lg font-semibold text-contrast hover:underline"
+						target="_blank"
+						:to="`/project/${lookupResult.projectId}`"
+					>
+						<Avatar :src="lookupResult.iconUrl" alt="" size="48px" />
+						{{ lookupResult.name }}
+					</nuxt-link>
+					<CopyCode :text="lookupResult.projectId" />
+					<h3 class="mb-0 text-lg font-extrabold text-contrast">Modrinth version:</h3>
+					<nuxt-link
+						class="text-blue hover:underline"
+						:to="`/project/${lookupResult.projectId}/version/${lookupResult.versionId}`"
+						target="_blank"
+					>
+						Version {{ lookupResult.versionNumber }}
+					</nuxt-link>
+					<CopyCode :text="lookupResult.versionId" />
+				</template>
+
+				<Admonition v-if="lookupError" type="critical" header="Lookup failed">
+					{{ lookupError }}
+				</Admonition>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { FileIcon, SpinnerIcon, UploadIcon } from '@modrinth/assets'
+import { Admonition, Avatar, CopyCode, injectNotificationManager } from '@modrinth/ui'
+import { formatBytes, type Project, type Version } from '@modrinth/utils'
+
+const { addNotification } = injectNotificationManager()
+
+const fileInput = ref<HTMLInputElement>()
+const selectedFile = ref<File | null>(null)
+const fileHashes = ref<{
+	sha512: string
+	sha256: string
+	sha1: string
+} | null>(null)
+const loadingHash = ref(false)
+const loadingLookup = ref(false)
+
+const lookupResult = ref<{
+	projectId: string
+	versionId: string
+	name: string
+	versionNumber: string
+	iconUrl?: string | undefined
+}>()
+const lookupError = ref<string>('')
+
+function triggerFileInput() {
+	fileInput.value?.click()
+}
+
+function handleFileSelect(event: Event) {
+	const target = event.target as HTMLInputElement
+	if (target.files && target.files.length > 0) {
+		processFile(target.files[0])
+	}
+}
+
+function handleDrop(event: DragEvent) {
+	event.preventDefault()
+	if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
+		processFile(event.dataTransfer.files[0])
+	}
+}
+
+async function processFile(file: File) {
+	selectedFile.value = file
+	fileHashes.value = null
+	lookupResult.value = undefined
+	lookupError.value = ''
+
+	await calculateHashesAndLookup(file)
+}
+
+function formatHashBuffer(buffer: ArrayBuffer) {
+	return Array.from(new Uint8Array(buffer))
+		.map((b) => b.toString(16).padStart(2, '0'))
+		.join('')
+}
+
+async function calculateHashesAndLookup(file: File): Promise<void> {
+	loadingHash.value = true
+	loadingLookup.value = true
+
+	try {
+		const buffer = await file.arrayBuffer()
+
+		const [sha512, sha256, sha1] = await Promise.all([
+			crypto.subtle.digest('SHA-512', buffer).then(formatHashBuffer),
+			crypto.subtle.digest('SHA-256', buffer).then(formatHashBuffer),
+			crypto.subtle.digest('SHA-1', buffer).then(formatHashBuffer),
+		])
+
+		fileHashes.value = { sha512, sha256, sha1 }
+
+		await lookupFile(sha512)
+	} catch (error) {
+		console.error('Error calculating hashes:', error)
+		addNotification({
+			title: 'Hash calculation failed',
+			text: 'Failed to calculate file hashes.',
+			type: 'error',
+		})
+	} finally {
+		loadingHash.value = false
+		loadingLookup.value = false
+	}
+}
+
+async function lookupFile(hash: string): Promise<void> {
+	if (!hash) {
+		return
+	}
+
+	try {
+		const version = (await useBaseFetch(`version_file/${hash}?algorithm=sha512`, {
+			method: 'GET',
+		})) as Version
+
+		if (version) {
+			const project = (await useBaseFetch(`project/${version.project_id}`, {
+				method: 'GET',
+			})) as Project
+
+			lookupResult.value = {
+				projectId: project.id,
+				versionId: version.id,
+				versionNumber: version.version_number,
+				name: project.title,
+				iconUrl: project.icon_url,
+			}
+		}
+	} catch (error: any) {
+		if (error.status === 404) {
+			lookupError.value = `File not found on Modrinth across projects you have access to.`
+		} else {
+			lookupError.value = error.data?.description || 'Failed to lookup file.'
+		}
+	}
+}
+</script>