Technical review queue (#4775)

* chore: fix typo in status message * feat(labrinth): overhaul malware scanner report storage and routes * chore: address some review comments * feat: add Delphi to Docker Compose `with-delphi` profile * chore: fix unused import Clippy lint * feat(labrinth/delphi): use PAT token authorization with project read scopes * chore: expose file IDs in version queries * fix: accept null decompiled source payloads from Delphi * tweak(labrinth): expose base62 file IDs more consistently for Delphi * feat(labrinth/delphi): support new Delphi report severity field * chore(labrinth): run `cargo sqlx prepare` to fix Docker build errors * tweak: add route for fetching Delphi issue type schema, abstract Labrinth away from issue types * chore: run `cargo sqlx prepare` * chore: fix typo on frontend generated state file message * feat: update to use new Delphi issue schema * wip: tech review endpoints * wip: add ToSchema for dependent types * wip: report issues return * wip * wip: returning more data * wip * Fix up db query * Delphi configuration to talk to Labrinth * Get Delphi working with Labrinth * Add Delphi dummy fixture * Better Delphi logging * Improve utoipa for tech review routes * Add more sorting options for tech review queue * Oops join * New routes for fetching issues and reports * Fix which kind of ID is returned in tech review endpoints * Deduplicate tech review report rows * Reduce info sent for projects * Fetch more thread info * Address PR comments * fix ci * fix postgres version mismatch * fix version creation * Implement routes * fix up tech review * Allow adding a moderation comment to Delphi rejections * fix up rebase * exclude rejected projects from tech review * add status change msg to tech review thread * cargo sqlx prepare * also ignore withheld projects * More filtering on issue search * wip: report routes * Fix up for build * cargo sqlx prepare * fix thread message privacy * New tech review search route * submit route * details have statuses now * add default to drid status * dedup issue details * fix sqlx query on empty files * fixes * Dedupe issue detail statuses and message on entering tech rev * Fix qa issues * Fix qa issues * fix review comments * typos * fix ci * feat: tech review frontend (#4781) * chore: fix typo in status message * feat(labrinth): overhaul malware scanner report storage and routes * chore: address some review comments * feat: add Delphi to Docker Compose `with-delphi` profile * chore: fix unused import Clippy lint * feat(labrinth/delphi): use PAT token authorization with project read scopes * chore: expose file IDs in version queries * fix: accept null decompiled source payloads from Delphi * tweak(labrinth): expose base62 file IDs more consistently for Delphi * feat(labrinth/delphi): support new Delphi report severity field * chore(labrinth): run `cargo sqlx prepare` to fix Docker build errors * tweak: add route for fetching Delphi issue type schema, abstract Labrinth away from issue types * chore: run `cargo sqlx prepare` * chore: fix typo on frontend generated state file message * feat: update to use new Delphi issue schema * wip: tech review endpoints * wip: add ToSchema for dependent types * wip: report issues return * wip * wip: returning more data * wip * Fix up db query * Delphi configuration to talk to Labrinth * Get Delphi working with Labrinth * Add Delphi dummy fixture * Better Delphi logging * Improve utoipa for tech review routes * Add more sorting options for tech review queue * Oops join * New routes for fetching issues and reports * Fix which kind of ID is returned in tech review endpoints * Deduplicate tech review report rows * Reduce info sent for projects * Fetch more thread info * Address PR comments * fix ci * fix ci * fix postgres version mismatch * fix version creation * Implement routes * feat: batch scan alert * feat: layout * feat: introduce surface variables * fix: theme selector * feat: rough draft of tech review card * feat: tab switcher * feat: batch scan btn * feat: api-client module for tech review * draft: impl * feat: auto icons * fix: layout issues * feat: fixes to code blocks + flag labels * feat: temp remove mock data * fix: search sort types * fix: intl & lint * chore: re-enable mock data * fix: flag badges + auto open first issue in file tab * feat: update for new routes * fix: more qa issues * feat: lazy load sources * fix: re-enable auth middleware * feat: impl threads * fix: lint & severity * feat: download btn + switch to using NavTabs with new local mode option * feat: re-add toplevel btns * feat: reports page consistency * fix: consistency on project queue * fix: icons + sizing * fix: colors and gaps * fix: impl endpoints * feat: load all flags on file tab * feat: thread generics changes * feat: more qa * feat: fix collapse * fix: qa * feat: msg modal * fix: ISO import * feat: qa fixes * fix: empty state basic * fix: collapsible region * fix: collapse thread by default * feat: rough draft of new process/flow * fix labrinth build * fix thread message privacy * New tech review search route * feat: qa fixes * feat: QA changes * fix: verdict on detail not whole issue * fix: lint + intl * fix: lint * fix: thread message for tech rev verdict * feat: use anim frames * fix: exports + typecheck * polish: qa changes * feat: qa * feat: qa polish * feat: fix malic modal * fix: lint * fix: qa + lint * fix: pagination * fix: lint * fix: qa * intl extract * fix ci --------- Signed-off-by: Calum H. <contact@cal.engineer> Co-authored-by: Alejandro González <me@alegon.dev> Co-authored-by: aecsocket <aecsocket@tutanota.com> --------- Signed-off-by: Calum H. <contact@cal.engineer> Co-authored-by: Alejandro González <me@alegon.dev> Co-authored-by: Calum H. <contact@cal.engineer>
2025-12-20 11:43:04 +00:00
parent 1e9e13aebb
commit 39f2b0ecb6
109 changed files with 6281 additions and 2017 deletions
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -12,6 +12,7 @@ import { LabrinthCollectionsModule } from './labrinth/collections'
 import { LabrinthProjectsV2Module } from './labrinth/projects/v2'
 import { LabrinthProjectsV3Module } from './labrinth/projects/v3'
 import { LabrinthStateModule } from './labrinth/state'
+import { LabrinthTechReviewInternalModule } from './labrinth/tech-review/internal'

 type ModuleConstructor = new (client: AbstractModrinthClient) => AbstractModule

@@ -36,6 +37,7 @@ export const MODULE_REGISTRY = {
 	labrinth_projects_v2: LabrinthProjectsV2Module,
 	labrinth_projects_v3: LabrinthProjectsV3Module,
 	labrinth_state: LabrinthStateModule,
+	labrinth_tech_review_internal: LabrinthTechReviewInternalModule,
 	labrinth_versions_v3: LabrinthVersionsV3Module,
 } as const satisfies Record<string, ModuleConstructor>

--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -3,4 +3,5 @@ export * from './collections'
 export * from './projects/v2'
 export * from './projects/v3'
 export * from './state'
+export * from './tech-review/internal'
 export * from './versions/v3'
--- a/packages/api-client/src/modules/labrinth/tech-review/internal.ts
+++ b/packages/api-client/src/modules/labrinth/tech-review/internal.ts
@@ -0,0 +1,124 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Labrinth } from '../types'
+
+export class LabrinthTechReviewInternalModule extends AbstractModule {
+	public getModuleID(): string {
+		return 'labrinth_tech_review_internal'
+	}
+
+	/**
+	 * Search for projects awaiting technical review.
+	 *
+	 * Returns a flat list of file reports with associated project data, ownership
+	 * information, and moderation threads provided as lookup maps.
+	 *
+	 * @param params - Search parameters including pagination, filters, and sorting
+	 * @returns Response object containing reports array and lookup maps for projects, threads, and ownership
+	 *
+	 * @example
+	 * ```typescript
+	 * const response = await client.labrinth.tech_review_internal.searchProjects({
+	 *   limit: 20,
+	 *   page: 0,
+	 *   sort_by: 'created_asc',
+	 *   filter: {
+	 *     project_type: ['mod', 'modpack']
+	 *   }
+	 * })
+	 * // Access reports: response.reports
+	 * // Access project by ID: response.projects[projectId]
+	 * ```
+	 */
+	public async searchProjects(
+		params: Labrinth.TechReview.Internal.SearchProjectsRequest,
+	): Promise<Labrinth.TechReview.Internal.SearchResponse> {
+		return this.client.request<Labrinth.TechReview.Internal.SearchResponse>(
+			'/moderation/tech-review/search',
+			{
+				api: 'labrinth',
+				version: 'internal',
+				method: 'POST',
+				body: params,
+			},
+		)
+	}
+
+	/**
+	 * Get detailed information about a specific file report.
+	 *
+	 * @param reportId - The Delphi report ID
+	 * @returns Full report with all issues and details
+	 *
+	 * @example
+	 * ```typescript
+	 * const report = await client.labrinth.tech_review_internal.getReport('report-123')
+	 * console.log(report.file_name, report.issues.length)
+	 * ```
+	 */
+	public async getReport(reportId: string): Promise<Labrinth.TechReview.Internal.FileReport> {
+		return this.client.request<Labrinth.TechReview.Internal.FileReport>(
+			`/moderation/tech-review/report/${reportId}`,
+			{
+				api: 'labrinth',
+				version: 'internal',
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Get detailed information about a specific issue.
+	 *
+	 * @param issueId - The issue ID
+	 * @returns Issue with all its details
+	 *
+	 * @example
+	 * ```typescript
+	 * const issue = await client.labrinth.tech_review_internal.getIssue('issue-123')
+	 * console.log(issue.issue_type, issue.status)
+	 * ```
+	 */
+	public async getIssue(issueId: string): Promise<Labrinth.TechReview.Internal.FileIssue> {
+		return this.client.request<Labrinth.TechReview.Internal.FileIssue>(
+			`/moderation/tech-review/issue/${issueId}`,
+			{
+				api: 'labrinth',
+				version: 'internal',
+				method: 'GET',
+			},
+		)
+	}
+
+	/**
+	 * Update the status of a technical review issue detail.
+	 *
+	 * Allows moderators to mark an individual issue detail as safe (false positive) or unsafe (malicious).
+	 *
+	 * @param detailId - The ID of the issue detail to update
+	 * @param data - The verdict for the detail
+	 * @returns Promise that resolves when the update is complete
+	 */
+	public async updateIssueDetail(
+		detailId: string,
+		data: Labrinth.TechReview.Internal.UpdateIssueRequest,
+	): Promise<void> {
+		return this.client.request<void>(`/moderation/tech-review/issue-detail/${detailId}`, {
+			api: 'labrinth',
+			version: 'internal',
+			method: 'PATCH',
+			body: data,
+		})
+	}
+
+	public async submitProject(
+		projectId: string,
+		data: Labrinth.TechReview.Internal.SubmitProjectRequest,
+	): Promise<void> {
+		return this.client.request<void>(`/moderation/tech-review/submit/${projectId}`, {
+			api: 'labrinth',
+			version: 'internal',
+			method: 'POST',
+			body: data,
+		})
+	}
+}
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -13,7 +13,7 @@ export namespace Labrinth {
 				price_id: string
 				interval: PriceDuration
 				status: SubscriptionStatus
-				created: string // ISO datetime string
+				created: string
 				metadata?: SubscriptionMetadata
 			}

@@ -40,8 +40,8 @@ export namespace Labrinth {
 				amount: number
 				currency_code: string
 				status: ChargeStatus
-				due: string // ISO datetime string
-				last_attempt: string | null // ISO datetime string
+				due: string
+				last_attempt: string | null
 				type: ChargeType
 				subscription_id: string | null
 				subscription_interval: PriceDuration | null
@@ -337,6 +337,10 @@ export namespace Labrinth {
 				monetization_status: v2.MonetizationStatus
 				side_types_migration_review_status: 'reviewed' | 'pending'
 				environment?: Environment[]
+
+				/**
+				 * @deprecated Not recommended to use.
+				 **/
 				[key: string]: unknown
 			}

@@ -719,4 +723,181 @@ export namespace Labrinth {
 			errors: unknown[]
 		}
 	}
+
+	export namespace TechReview {
+		export namespace Internal {
+			export type SearchProjectsRequest = {
+				limit?: number
+				page?: number
+				filter?: SearchProjectsFilter
+				sort_by?: SearchProjectsSort
+			}
+
+			export type SearchProjectsFilter = {
+				project_type?: string[]
+			}
+
+			export type SearchProjectsSort =
+				| 'created_asc'
+				| 'created_desc'
+				| 'severity_asc'
+				| 'severity_desc'
+
+			export type UpdateIssueRequest = {
+				verdict: 'safe' | 'unsafe'
+			}
+
+			export type SubmitProjectRequest = {
+				verdict: 'safe' | 'unsafe'
+				message?: string
+			}
+
+			export type SearchResponse = {
+				project_reports: ProjectReport[]
+				projects: Record<string, ProjectModerationInfo>
+				threads: Record<string, Thread>
+				ownership: Record<string, Ownership>
+			}
+
+			export type ProjectModerationInfo = {
+				id: string
+				thread_id: string
+				name: string
+				project_types: string[]
+				icon_url: string | null
+			} & Projects.v3.Project
+
+			export type ProjectReport = {
+				project_id: string
+				max_severity: DelphiSeverity | null
+				versions: VersionReport[]
+			}
+
+			export type VersionReport = {
+				version_id: string
+				files: FileReport[]
+			}
+
+			export type FileReport = {
+				report_id: string
+				file_id: string
+				created: string
+				flag_reason: FlagReason
+				severity: DelphiSeverity
+				file_name: string
+				file_size: number
+				download_url: string
+				issues: FileIssue[]
+			}
+
+			export type FileIssue = {
+				id: string
+				report_id: string
+				issue_type: string
+				details: ReportIssueDetail[]
+			}
+
+			export type ReportIssueDetail = {
+				id: string
+				issue_id: string
+				key: string
+				file_path: string
+				decompiled_source: string | null
+				data: Record<string, unknown>
+				severity: DelphiSeverity
+				status: DelphiReportIssueStatus
+			}
+
+			export type Ownership =
+				| {
+						kind: 'user'
+						id: string
+						name: string
+						icon_url?: string
+				  }
+				| {
+						kind: 'organization'
+						id: string
+						name: string
+						icon_url?: string
+				  }
+
+			export type DBThread = {
+				id: string
+				project_id?: string
+				report_id?: string
+				type_: ThreadType
+				messages: DBThreadMessage[]
+				members: string[]
+			}
+
+			export type DBThreadMessage = {
+				id: string
+				thread_id: string
+				author_id?: string
+				body: MessageBody
+				created: string
+				hide_identity: boolean
+			}
+
+			export type MessageBody =
+				| {
+						type: 'text'
+						body: string
+						private?: boolean
+						replying_to?: string
+						associated_images?: string[]
+				  }
+				| {
+						type: 'status_change'
+						new_status: Projects.v2.ProjectStatus
+						old_status: Projects.v2.ProjectStatus
+				  }
+				| {
+						type: 'thread_closure'
+				  }
+				| {
+						type: 'thread_reopen'
+				  }
+				| {
+						type: 'deleted'
+						private?: boolean
+				  }
+
+			export type ThreadType = 'report' | 'project' | 'direct_message'
+
+			export type User = {
+				id: string
+				username: string
+				avatar_url: string
+				role: string
+				badges: number
+				created: string
+				bio?: string
+			}
+
+			export type ThreadMessage = {
+				id: string | null
+				author_id: string | null
+				body: MessageBody
+				created: string
+				hide_identity: boolean
+			}
+
+			export type Thread = {
+				id: string
+				type: ThreadType
+				project_id: string | null
+				report_id: string | null
+				messages: ThreadMessage[]
+				members: User[]
+			}
+
+			export type FlagReason = 'delphi'
+
+			export type DelphiSeverity = 'low' | 'medium' | 'high' | 'severe'
+
+			export type DelphiReportIssueStatus = 'pending' | 'safe' | 'unsafe'
+		}
+	}
 }
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -28,6 +28,7 @@ import _BoxIcon from './icons/box.svg?component'
 import _BoxImportIcon from './icons/box-import.svg?component'
 import _BracesIcon from './icons/braces.svg?component'
 import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
+import _BugIcon from './icons/bug.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChangeSkinIcon from './icons/change-skin.svg?component'
@@ -35,6 +36,7 @@ import _ChartIcon from './icons/chart.svg?component'
 import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
 import _CheckCircleIcon from './icons/check-circle.svg?component'
+import _ChevronDownIcon from './icons/chevron-down.svg?component'
 import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _CircleUserIcon from './icons/circle-user.svg?component'
@@ -69,9 +71,12 @@ import _EyeIcon from './icons/eye.svg?component'
 import _EyeOffIcon from './icons/eye-off.svg?component'
 import _FileIcon from './icons/file.svg?component'
 import _FileArchiveIcon from './icons/file-archive.svg?component'
+import _FileCodeIcon from './icons/file-code.svg?component'
+import _FileImageIcon from './icons/file-image.svg?component'
 import _FileTextIcon from './icons/file-text.svg?component'
 import _FilterIcon from './icons/filter.svg?component'
 import _FilterXIcon from './icons/filter-x.svg?component'
+import _FolderIcon from './icons/folder.svg?component'
 import _FolderArchiveIcon from './icons/folder-archive.svg?component'
 import _FolderOpenIcon from './icons/folder-open.svg?component'
 import _FolderSearchIcon from './icons/folder-search.svg?component'
@@ -114,6 +119,7 @@ import _LinkIcon from './icons/link.svg?component'
 import _ListIcon from './icons/list.svg?component'
 import _ListBulletedIcon from './icons/list-bulleted.svg?component'
 import _ListEndIcon from './icons/list-end.svg?component'
+import _ListFilterIcon from './icons/list-filter.svg?component'
 import _ListOrderedIcon from './icons/list-ordered.svg?component'
 import _LoaderIcon from './icons/loader.svg?component'
 import _LoaderCircleIcon from './icons/loader-circle.svg?component'
@@ -170,6 +176,8 @@ import _ServerPlusIcon from './icons/server-plus.svg?component'
 import _SettingsIcon from './icons/settings.svg?component'
 import _ShareIcon from './icons/share.svg?component'
 import _ShieldIcon from './icons/shield.svg?component'
+import _ShieldAlertIcon from './icons/shield-alert.svg?component'
+import _ShieldCheckIcon from './icons/shield-check.svg?component'
 import _SignalIcon from './icons/signal.svg?component'
 import _SkullIcon from './icons/skull.svg?component'
 import _SlashIcon from './icons/slash.svg?component'
@@ -246,6 +254,7 @@ export const BoxImportIcon = _BoxImportIcon
 export const BoxIcon = _BoxIcon
 export const BracesIcon = _BracesIcon
 export const BrushCleaningIcon = _BrushCleaningIcon
+export const BugIcon = _BugIcon
 export const CalendarIcon = _CalendarIcon
 export const CardIcon = _CardIcon
 export const ChangeSkinIcon = _ChangeSkinIcon
@@ -253,6 +262,7 @@ export const ChartIcon = _ChartIcon
 export const CheckCheckIcon = _CheckCheckIcon
 export const CheckCircleIcon = _CheckCircleIcon
 export const CheckIcon = _CheckIcon
+export const ChevronDownIcon = _ChevronDownIcon
 export const ChevronLeftIcon = _ChevronLeftIcon
 export const ChevronRightIcon = _ChevronRightIcon
 export const CircleUserIcon = _CircleUserIcon
@@ -286,6 +296,8 @@ export const ExternalIcon = _ExternalIcon
 export const EyeOffIcon = _EyeOffIcon
 export const EyeIcon = _EyeIcon
 export const FileArchiveIcon = _FileArchiveIcon
+export const FileCodeIcon = _FileCodeIcon
+export const FileImageIcon = _FileImageIcon
 export const FileTextIcon = _FileTextIcon
 export const FileIcon = _FileIcon
 export const FilterXIcon = _FilterXIcon
@@ -293,6 +305,7 @@ export const FilterIcon = _FilterIcon
 export const FolderArchiveIcon = _FolderArchiveIcon
 export const FolderOpenIcon = _FolderOpenIcon
 export const FolderSearchIcon = _FolderSearchIcon
+export const FolderIcon = _FolderIcon
 export const FolderUpIcon = _FolderUpIcon
 export const GameIcon = _GameIcon
 export const GapIcon = _GapIcon
@@ -331,6 +344,7 @@ export const LightBulbIcon = _LightBulbIcon
 export const LinkIcon = _LinkIcon
 export const ListBulletedIcon = _ListBulletedIcon
 export const ListEndIcon = _ListEndIcon
+export const ListFilterIcon = _ListFilterIcon
 export const ListOrderedIcon = _ListOrderedIcon
 export const ListIcon = _ListIcon
 export const LoaderCircleIcon = _LoaderCircleIcon
@@ -387,6 +401,8 @@ export const ServerPlusIcon = _ServerPlusIcon
 export const ServerIcon = _ServerIcon
 export const SettingsIcon = _SettingsIcon
 export const ShareIcon = _ShareIcon
+export const ShieldAlertIcon = _ShieldAlertIcon
+export const ShieldCheckIcon = _ShieldCheckIcon
 export const ShieldIcon = _ShieldIcon
 export const SignalIcon = _SignalIcon
 export const SkullIcon = _SkullIcon
--- a/packages/assets/icons/bug.svg
+++ b/packages/assets/icons/bug.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+	stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug-icon lucide-bug">
+	<path d="M12 20v-9" />
+	<path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" />
+	<path d="M14.12 3.88 16 2" />
+	<path d="M21 21a4 4 0 0 0-3.81-4" />
+	<path d="M21 5a4 4 0 0 1-3.55 3.97" />
+	<path d="M22 13h-4" />
+	<path d="M3 21a4 4 0 0 1 3.81-4" />
+	<path d="M3 5a4 4 0 0 0 3.55 3.97" />
+	<path d="M6 13H2" />
+	<path d="m8 2 1.88 1.88" />
+	<path d="M9 7.13V6a3 3 0 1 1 6 0v1.13" />
+</svg>
--- a/packages/assets/icons/chevron-down.svg
+++ b/packages/assets/icons/chevron-down.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down">
+	<path d="m6 9 6 6 6-6" />
+</svg>
--- a/packages/assets/icons/file-code.svg
+++ b/packages/assets/icons/file-code.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+	stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code-icon lucide-file-code">
+	<path
+		d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+	<path d="M14 2v5a1 1 0 0 0 1 1h5" />
+	<path d="M10 12.5 8 15l2 2.5" />
+	<path d="m14 12.5 2 2.5-2 2.5" />
+</svg>
--- a/packages/assets/icons/file-image.svg
+++ b/packages/assets/icons/file-image.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+	stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+	class="lucide lucide-file-image-icon lucide-file-image">
+	<path
+		d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+	<path d="M14 2v5a1 1 0 0 0 1 1h5" />
+	<circle cx="10" cy="12" r="2" />
+	<path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" />
+</svg>
--- a/packages/assets/icons/folder.svg
+++ b/packages/assets/icons/folder.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-icon lucide-folder">
+	<path
+		d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
+</svg>
--- a/packages/assets/icons/list-filter.svg
+++ b/packages/assets/icons/list-filter.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+	stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-filter-icon lucide-list-filter">
+	<path d="M2 5h20" />
+	<path d="M6 12h12" />
+	<path d="M9 19h6" />
+</svg>
--- a/packages/assets/icons/shield-alert.svg
+++ b/packages/assets/icons/shield-alert.svg
@@ -0,0 +1,18 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-shield-alert-icon lucide-shield-alert"
+>
+	<path
+		d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
+	/>
+	<path d="M12 8v4" />
+	<path d="M12 16h.01" />
+</svg>
--- a/packages/assets/icons/shield-check.svg
+++ b/packages/assets/icons/shield-check.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+	stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+	class="lucide lucide-shield-check-icon lucide-shield-check">
+	<path
+		d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+	<path d="m9 12 2 2 4-4" />
+</svg>
--- a/packages/moderation/package.json
+++ b/packages/moderation/package.json
@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/utils": "workspace:*",
+		"@modrinth/api-client": "workspace:*",
 		"vue": "^3.5.13"
 	},
 	"devDependencies": {
--- a/packages/moderation/src/data/report-quick-replies.ts
+++ b/packages/moderation/src/data/report-quick-replies.ts
@@ -1,4 +1,5 @@
-import type { ReportQuickReply } from '../types/reports'
+import type { QuickReply } from '../types/quick-reply'
+import type { ExtendedReport } from '../types/reports'

 export default [
 	{
@@ -67,4 +68,4 @@ export default [
 		message: async () => (await import('./messages/reports/stale.md?raw')).default,
 		private: false,
 	},
-] as ReadonlyArray<ReportQuickReply>
+] as ReadonlyArray<QuickReply<ExtendedReport>>
--- a/packages/moderation/src/data/tech-review-quick-replies.ts
+++ b/packages/moderation/src/data/tech-review-quick-replies.ts
@@ -0,0 +1,11 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { QuickReply } from '../types/quick-reply'
+
+export interface TechReviewContext {
+	project: Labrinth.Projects.v3.Project
+	project_owner: Labrinth.TechReview.Internal.Ownership
+	reports: Labrinth.TechReview.Internal.FileReport[]
+}
+
+export default [] as ReadonlyArray<QuickReply<TechReviewContext>>
--- a/packages/moderation/src/index.ts
+++ b/packages/moderation/src/index.ts
@@ -4,10 +4,15 @@ export { finalPermissionMessages } from './data/modpack-permissions-stage'
 export { default as nags } from './data/nags'
 export * from './data/nags/index'
 export { default as reportQuickReplies } from './data/report-quick-replies'
+export {
+	type TechReviewContext,
+	default as techReviewQuickReplies,
+} from './data/tech-review-quick-replies'
 export * from './types/actions'
 export * from './types/keybinds'
 export * from './types/messages'
 export * from './types/nags'
+export * from './types/quick-reply'
 export * from './types/reports'
 export * from './types/stage'
 export * from './utils'
--- a/packages/moderation/src/types/quick-reply.ts
+++ b/packages/moderation/src/types/quick-reply.ts
@@ -0,0 +1,6 @@
+export interface QuickReply<T = undefined> {
+	label: string
+	message: string | ((context: T) => Promise<string> | string)
+	shouldShow?: (context: T) => boolean
+	private?: boolean
+}
--- a/packages/moderation/src/types/reports.ts
+++ b/packages/moderation/src/types/reports.ts
@@ -1,4 +1,4 @@
-import type { DelphiReport, Project, Report, Thread, User, Version } from '@modrinth/utils'
+import type { Project, Report, Thread, User, Version } from '@modrinth/utils'

 export interface OwnershipTarget {
 	name: string
@@ -15,14 +15,3 @@ export interface ExtendedReport extends Report {
 	version?: Version
 	target?: OwnershipTarget
 }
-
-export interface ExtendedDelphiReport extends DelphiReport {
-	target?: OwnershipTarget
-}
-
-export interface ReportQuickReply {
-	label: string
-	message: string | ((report: ExtendedReport) => Promise<string> | string)
-	shouldShow?: (report: ExtendedReport) => boolean
-	private?: boolean
-}
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -8,7 +8,10 @@
 		<div :class="['flex gap-2 items-start', (header || $slots.header) && 'flex-col']">
 			<div class="flex gap-2 items-start" :class="header || $slots.header ? 'w-full' : 'contents'">
 				<slot name="icon" :icon-class="['h-6 w-6 flex-none', iconClasses[type]]">
-					<component :is="icons[type]" :class="['h-6 w-6 flex-none', iconClasses[type]]" />
+					<component
+						:is="getSeverityIcon(type)"
+						:class="['h-6 w-6 flex-none', iconClasses[type]]"
+					/>
 				</slot>
 				<div v-if="header || $slots.header" class="font-semibold text-base">
 					<slot name="header">{{ header }}</slot>
@@ -25,7 +28,7 @@
 </template>

 <script setup lang="ts">
-import { InfoIcon, IssuesIcon, XCircleIcon } from '@modrinth/assets'
+import { getSeverityIcon } from '../../utils'

 withDefaults(
 	defineProps<{
@@ -53,10 +56,4 @@ const iconClasses = {
 	warning: 'text-brand-orange',
 	critical: 'text-brand-red',
 }
-
-const icons = {
-	info: InfoIcon,
-	warning: IssuesIcon,
-	critical: XCircleIcon,
-}
 </script>
--- a/packages/ui/src/components/base/Badge.vue
+++ b/packages/ui/src/components/base/Badge.vue
@@ -69,6 +69,14 @@
 			<XIcon aria-hidden="true" /> {{ formatMessage(messages.closedLabel) }}
 		</template>

+		<!-- Technical review verdicts -->
+		<template v-else-if="type === 'safe'">
+			<ShieldCheckIcon aria-hidden="true" /> {{ formatMessage(messages.safeLabel) }}
+		</template>
+		<template v-else-if="type === 'unsafe'">
+			<BugIcon aria-hidden="true" /> {{ formatMessage(messages.unsafeLabel) }}
+		</template>
+
 		<!-- Other -->
 		<template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
 	</span>
@@ -78,6 +86,7 @@
 import {
 	ArchiveIcon,
 	BoxIcon,
+	BugIcon,
 	CalendarIcon,
 	CheckIcon,
 	EyeOffIcon,
@@ -86,6 +95,7 @@ import {
 	LockIcon,
 	ModrinthIcon,
 	ScaleIcon,
+	ShieldCheckIcon,
 	UpdatedIcon,
 	XIcon,
 } from '@modrinth/assets'
@@ -153,6 +163,10 @@ const messages = defineMessages({
 		id: 'omorphia.component.badge.label.returned',
 		defaultMessage: 'Returned',
 	},
+	safeLabel: {
+		id: 'omorphia.component.badge.label.safe',
+		defaultMessage: 'Pass',
+	},
 	scheduledLabel: {
 		id: 'omorphia.component.badge.label.scheduled',
 		defaultMessage: 'Scheduled',
@@ -165,6 +179,10 @@ const messages = defineMessages({
 		id: 'omorphia.component.badge.label.unlisted',
 		defaultMessage: 'Unlisted',
 	},
+	unsafeLabel: {
+		id: 'omorphia.component.badge.label.unsafe',
+		defaultMessage: 'Fail',
+	},
 	withheldLabel: {
 		id: 'omorphia.component.badge.label.withheld',
 		defaultMessage: 'Withheld',
@@ -204,6 +222,7 @@ defineProps<{
 	&.type--rejected,
 	&.type--returned,
 	&.type--failed,
+	&.type--unsafe,
 	&.red {
 		--badge-color: var(--color-red);
 	}
@@ -220,6 +239,7 @@ defineProps<{
 	&.type--admin,
 	&.type--processed,
 	&.type--approved-general,
+	&.type--safe,
 	&.green {
 		--badge-color: var(--color-green);
 	}
--- a/packages/ui/src/components/base/CollapsibleRegion.vue
+++ b/packages/ui/src/components/base/CollapsibleRegion.vue
@@ -1,29 +1,27 @@
 <template>
-	<div
-		class="relative overflow-hidden rounded-xl border-[2px] border-solid border-divider shadow-lg"
-		:class="{ 'max-h-32': isCollapsed }"
-	>
+	<div class="relative overflow-hidden">
 		<div
-			class="px-4 pt-4"
-			:class="{
-				'content-disabled pb-16': isCollapsed,
-				'pb-4': !isCollapsed,
-			}"
+			class="collapsible-region-content"
+			:class="{ open: !collapsed }"
+			:style="{ '--collapsed-height': collapsedHeight }"
 		>
-			<slot />
+			<div :class="{ 'pointer-events-none select-none pb-16': collapsed }">
+				<slot />
+			</div>
 		</div>

 		<div
-			v-if="isCollapsed"
-			class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent to-button-bg"
-		></div>
+			v-if="collapsed"
+			class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent"
+			:class="gradientTo"
+		/>

 		<div class="absolute bottom-4 left-1/2 z-20 -translate-x-1/2">
 			<ButtonStyled circular type="transparent">
-				<button class="flex items-center gap-1 text-xs" @click="toggleCollapsed">
-					<ExpandIcon v-if="isCollapsed" />
+				<button class="flex items-center gap-1 text-xs" @click="collapsed = !collapsed">
+					<ExpandIcon v-if="collapsed" />
 					<CollapseIcon v-else />
-					{{ isCollapsed ? expandText : collapseText }}
+					{{ collapsed ? expandText : collapseText }}
 				</button>
 			</ButtonStyled>
 		</div>
@@ -32,67 +30,51 @@

 <script setup lang="ts">
 import { CollapseIcon, ExpandIcon } from '@modrinth/assets'
-import { ref } from 'vue'

 import ButtonStyled from './ButtonStyled.vue'

-const props = withDefaults(
+withDefaults(
 	defineProps<{
-		initiallyCollapsed?: boolean
 		expandText?: string
 		collapseText?: string
+		collapsedHeight?: string
+		gradientTo?: string
 	}>(),
 	{
-		initiallyCollapsed: true,
 		expandText: 'Expand',
 		collapseText: 'Collapse',
+		collapsedHeight: '8rem',
+		gradientTo: 'to-surface-2',
 	},
 )

-const isCollapsed = ref(props.initiallyCollapsed)
-
-function toggleCollapsed() {
-	isCollapsed.value = !isCollapsed.value
-}
-
-function setCollapsed(value: boolean) {
-	isCollapsed.value = value
-}
-
-defineExpose({
-	isCollapsed,
-	setCollapsed,
-	toggleCollapsed,
-})
+const collapsed = defineModel<boolean>('collapsed', { default: true })
 </script>

-<style lang="scss" scoped>
-.content-disabled {
-	pointer-events: none;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
+<style scoped>
+.collapsible-region-content {
+	display: grid;
+	grid-template-rows: 0fr;
+	transition: grid-template-rows 0.3s linear;
+}

-	:deep(*) {
-		pointer-events: none !important;
-		user-select: none !important;
-		-webkit-user-select: none !important;
-		-moz-user-select: none !important;
-		-ms-user-select: none !important;
-	}
-
-	:deep(button),
-	:deep(input),
-	:deep(textarea),
-	:deep(select),
-	:deep(a),
-	:deep([tabindex]) {
-		tabindex: -1 !important;
-	}
-
-	:deep(*:focus) {
-		outline: none !important;
+@media (prefers-reduced-motion) {
+	.collapsible-region-content {
+		transition: none !important;
 	}
 }
+
+.collapsible-region-content.open {
+	grid-template-rows: 1fr;
+}
+
+.collapsible-region-content > div {
+	overflow: hidden;
+	min-height: var(--collapsed-height);
+	transition: min-height 0.3s linear;
+}
+
+.collapsible-region-content.open > div {
+	min-height: 0;
+}
 </style>
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -4,7 +4,7 @@
 			ref="triggerRef"
 			role="button"
 			tabindex="0"
-			class="max-h-[36px] relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
+			class="relative cursor-pointer flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-button-bg px-4 py-2.5 text-left transition-all duration-200 text-button-text hover:bg-button-bgHover active:bg-button-bgActive"
 			:class="[
 				triggerClasses,
 				{
@@ -129,7 +129,7 @@ import {
 	watch,
 } from 'vue'

-export interface DropdownOption<T> {
+export interface ComboboxOption<T> {
 	value: T
 	label: string
 	icon?: Component
@@ -145,19 +145,19 @@ const DROPDOWN_VIEWPORT_MARGIN = 8
 const DEFAULT_MAX_HEIGHT = 300

 function isDropdownOption<T>(
-	opt: DropdownOption<T> | { type: 'divider' },
-): opt is DropdownOption<T> {
+	opt: ComboboxOption<T> | { type: 'divider' },
+): opt is ComboboxOption<T> {
 	return 'value' in opt
 }

-function isDivider<T>(opt: DropdownOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
+function isDivider<T>(opt: ComboboxOption<T> | { type: 'divider' }): opt is { type: 'divider' } {
 	return opt.type === 'divider'
 }

 const props = withDefaults(
 	defineProps<{
 		modelValue?: T
-		options: (DropdownOption<T> | { type: 'divider' })[]
+		options: (ComboboxOption<T> | { type: 'divider' })[]
 		placeholder?: string
 		disabled?: boolean
 		searchable?: boolean
@@ -187,7 +187,7 @@ const props = withDefaults(

 const emit = defineEmits<{
 	'update:modelValue': [value: T]
-	select: [option: DropdownOption<T>]
+	select: [option: ComboboxOption<T>]
 	open: []
 	close: []
 	searchInput: [query: string]
@@ -204,6 +204,7 @@ const dropdownRef = ref<HTMLElement>()
 const searchInputRef = ref<HTMLInputElement>()
 const optionsContainerRef = ref<HTMLElement>()
 const optionRefs = ref<(HTMLElement | null)[]>([])
+const rafId = ref<number | null>(null)

 const dropdownStyle = ref({
 	top: '0px',
@@ -225,9 +226,9 @@ const triggerClasses = computed(() => {
 	return classes
 })

-const selectedOption = computed<DropdownOption<T> | undefined>(() => {
+const selectedOption = computed<ComboboxOption<T> | undefined>(() => {
 	return props.options.find(
-		(opt): opt is DropdownOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
+		(opt): opt is ComboboxOption<T> => isDropdownOption(opt) && opt.value === props.modelValue,
 	)
 })

@@ -259,7 +260,7 @@ const filteredOptions = computed(() => {
 const shouldRoundBottomCorners = computed(() => isOpen.value && openDirection.value === 'down')
 const shouldRoundTopCorners = computed(() => isOpen.value && openDirection.value === 'up')

-function getOptionClasses(item: DropdownOption<T> & { key: string }, index: number) {
+function getOptionClasses(item: ComboboxOption<T> & { key: string }, index: number) {
 	return [
 		item.class,
 		{
@@ -368,11 +369,13 @@ async function openDropdown() {

 	setInitialFocus()
 	focusSearchInput()
+	startPositionTracking()
 }

 function closeDropdown() {
 	if (!isOpen.value) return

+	stopPositionTracking()
 	isOpen.value = false
 	searchQuery.value = ''
 	focusedIndex.value = -1
@@ -391,7 +394,7 @@ function handleTriggerClick() {
 	}
 }

-function handleOptionClick(option: DropdownOption<T>, index: number) {
+function handleOptionClick(option: ComboboxOption<T>, index: number) {
 	if (option.disabled || option.type === 'divider') return

 	focusedIndex.value = index
@@ -514,6 +517,21 @@ function handleWindowResize() {
 	}
 }

+function startPositionTracking() {
+	function track() {
+		updateDropdownPosition()
+		rafId.value = requestAnimationFrame(track)
+	}
+	rafId.value = requestAnimationFrame(track)
+}
+
+function stopPositionTracking() {
+	if (rafId.value !== null) {
+		cancelAnimationFrame(rafId.value)
+		rafId.value = null
+	}
+}
+
 onClickOutside(
 	dropdownRef,
 	() => {
@@ -528,6 +546,7 @@ onMounted(() => {

 onUnmounted(() => {
 	window.removeEventListener('resize', handleWindowResize)
+	stopPositionTracking()
 })

 watch(isOpen, (value) => {
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -13,6 +13,7 @@ export { default as Checkbox } from './Checkbox.vue'
 export { default as Chips } from './Chips.vue'
 export { default as Collapsible } from './Collapsible.vue'
 export { default as CollapsibleRegion } from './CollapsibleRegion.vue'
+export type { ComboboxOption } from './Combobox.vue'
 export { default as Combobox } from './Combobox.vue'
 export { default as ContentPageHeader } from './ContentPageHeader.vue'
 export { default as CopyCode } from './CopyCode.vue'
--- a/packages/ui/src/components/billing/FormattedPaymentMethod.vue
+++ b/packages/ui/src/components/billing/FormattedPaymentMethod.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { CardIcon, CurrencyIcon, PayPalIcon, UnknownIcon } from '@modrinth/assets'
 import { useVIntl } from '@vintl/vintl'
 import type Stripe from 'stripe'

-import { commonMessages, paymentMethodMessages } from '../../utils'
+import { commonMessages, getPaymentMethodIcon, paymentMethodMessages } from '../../utils'

 const { formatMessage } = useVIntl()
 defineProps<{
@@ -13,10 +12,7 @@ defineProps<{

 <template>
 	<template v-if="'type' in method">
-		<CardIcon v-if="method.type === 'card'" class="size-[1.5em]" />
-		<CurrencyIcon v-else-if="method.type === 'cashapp'" class="size-[1.5em]" />
-		<PayPalIcon v-else-if="method.type === 'paypal'" class="size-[1.5em]" />
-		<UnknownIcon v-else class="size-[1.5em]" />
+		<component :is="getPaymentMethodIcon(method.type)" class="size-[1.5em]" />
 		<span v-if="method.type === 'card' && 'card' in method && method.card">
 			{{
 				formatMessage(commonMessages.paymentMethodCardDisplay, {
--- a/packages/ui/src/components/nav/PagewideBanner.vue
+++ b/packages/ui/src/components/nav/PagewideBanner.vue
@@ -8,12 +8,7 @@
 				iconClasses[variant],
 			]"
 		>
-			<IssuesIcon
-				v-if="variant === 'warning' || variant === 'error'"
-				aria-hidden="true"
-				class="w-6 h-6 flex-shrink-0"
-			/>
-			<InfoIcon v-if="variant === 'info'" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
+			<component :is="getSeverityIcon(variant)" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
 			<slot name="title" />
 		</div>

@@ -32,7 +27,7 @@
 </template>

 <script lang="ts" setup>
-import { InfoIcon, IssuesIcon } from '@modrinth/assets'
+import { getSeverityIcon } from '../../utils'

 defineProps<{
 	variant: 'error' | 'warning' | 'info'
--- a/packages/ui/src/components/project/ProjectStatusBadge.vue
+++ b/packages/ui/src/components/project/ProjectStatusBadge.vue
@@ -3,22 +3,11 @@
 </template>

 <script setup lang="ts">
-import {
-	ArchiveIcon,
-	CalendarIcon,
-	FileTextIcon,
-	GlobeIcon,
-	LinkIcon,
-	LockIcon,
-	UnknownIcon,
-	UpdatedIcon,
-	XIcon,
-} from '@modrinth/assets'
 import type { ProjectStatus } from '@modrinth/utils'
 import { defineMessage, type MessageDescriptor, useVIntl } from '@vintl/vintl'
-import type { Component } from 'vue'
 import { computed } from 'vue'

+import { PROJECT_STATUS_ICONS } from '../../utils'
 import Badge from '../base/SimpleBadge.vue'

 const props = defineProps<{
@@ -28,76 +17,66 @@ const props = defineProps<{
 const { formatMessage } = useVIntl()

 const metadata = computed(() => ({
-	icon: statusMetadata[props.status]?.icon ?? statusMetadata.unknown.icon,
+	icon: PROJECT_STATUS_ICONS[props.status] ?? PROJECT_STATUS_ICONS.unknown,
 	formattedName: formatMessage(statusMetadata[props.status]?.message ?? props.status),
 }))

-const statusMetadata: Record<ProjectStatus, { icon?: Component; message: MessageDescriptor }> = {
+const statusMetadata: Record<ProjectStatus, { message: MessageDescriptor }> = {
 	approved: {
-		icon: GlobeIcon,
 		message: defineMessage({
 			id: 'project.visibility.public',
 			defaultMessage: 'Public',
 		}),
 	},
 	unlisted: {
-		icon: LinkIcon,
 		message: defineMessage({
 			id: 'project.visibility.unlisted',
 			defaultMessage: 'Unlisted',
 		}),
 	},
 	withheld: {
-		icon: LinkIcon,
 		message: defineMessage({
 			id: 'project.visibility.unlisted-by-staff',
 			defaultMessage: 'Unlisted by staff',
 		}),
 	},
 	private: {
-		icon: LockIcon,
 		message: defineMessage({
 			id: 'project.visibility.private',
 			defaultMessage: 'Private',
 		}),
 	},
 	scheduled: {
-		icon: CalendarIcon,
 		message: defineMessage({
 			id: 'project.visibility.scheduled',
 			defaultMessage: 'Scheduled',
 		}),
 	},
 	draft: {
-		icon: FileTextIcon,
 		message: defineMessage({
 			id: 'project.visibility.draft',
 			defaultMessage: 'Draft',
 		}),
 	},
 	archived: {
-		icon: ArchiveIcon,
 		message: defineMessage({
 			id: 'project.visibility.archived',
 			defaultMessage: 'Archived',
 		}),
 	},
 	rejected: {
-		icon: XIcon,
 		message: defineMessage({
 			id: 'project.visibility.rejected',
 			defaultMessage: 'Rejected',
 		}),
 	},
 	processing: {
-		icon: UpdatedIcon,
 		message: defineMessage({
 			id: 'project.visibility.under-review',
 			defaultMessage: 'Under review',
 		}),
 	},
 	unknown: {
-		icon: UnknownIcon,
 		message: defineMessage({
 			id: 'project.visibility.unknown',
 			defaultMessage: 'Unknown',
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -416,6 +416,9 @@
  "omorphia.component.badge.label.returned": {
    "defaultMessage": "Returned"
  },
+  "omorphia.component.badge.label.safe": {
+    "defaultMessage": "Pass"
+  },
  "omorphia.component.badge.label.scheduled": {
    "defaultMessage": "Scheduled"
  },
@@ -425,6 +428,9 @@
  "omorphia.component.badge.label.unlisted": {
    "defaultMessage": "Unlisted"
  },
+  "omorphia.component.badge.label.unsafe": {
+    "defaultMessage": "Fail"
+  },
  "omorphia.component.badge.label.withheld": {
    "defaultMessage": "Withheld"
  },
--- a/packages/ui/src/utils/auto-icons.ts
+++ b/packages/ui/src/utils/auto-icons.ts
@@ -0,0 +1,201 @@
+import {
+	ArchiveIcon,
+	BoxIcon,
+	BracesIcon,
+	CalendarIcon,
+	CardIcon,
+	CurrencyIcon,
+	FileArchiveIcon,
+	FileCodeIcon,
+	FileIcon,
+	FileImageIcon,
+	FileTextIcon,
+	FolderOpenIcon,
+	GithubIcon,
+	GlassesIcon,
+	GlobeIcon,
+	InfoIcon,
+	IssuesIcon,
+	LinkIcon,
+	LockIcon,
+	PackageOpenIcon,
+	PaintbrushIcon,
+	PayPalIcon,
+	PlugIcon,
+	PolygonIcon,
+	UnknownIcon,
+	UpdatedIcon,
+	USDCColorIcon,
+	XCircleIcon,
+	XIcon,
+} from '@modrinth/assets'
+import type { ProjectStatus, ProjectType } from '@modrinth/utils'
+import type { Component } from 'vue'
+
+export const PROJECT_TYPE_ICONS: Record<ProjectType, Component> = {
+	mod: BoxIcon,
+	modpack: PackageOpenIcon,
+	resourcepack: PaintbrushIcon,
+	shader: GlassesIcon,
+	plugin: PlugIcon,
+	datapack: BracesIcon,
+	project: BoxIcon,
+}
+
+export const PAYMENT_METHOD_ICONS: Record<string, Component> = {
+	card: CardIcon,
+	cashapp: CurrencyIcon,
+	paypal: PayPalIcon,
+}
+
+export const SOCIAL_PLATFORM_ICONS: Record<string, Component> = {
+	discord: GithubIcon,
+	github: GithubIcon,
+}
+
+export const SEVERITY_ICONS: Record<string, Component> = {
+	info: InfoIcon,
+	warning: IssuesIcon,
+	error: XCircleIcon,
+	critical: XCircleIcon,
+}
+
+export const PROJECT_STATUS_ICONS: Record<ProjectStatus, Component> = {
+	approved: GlobeIcon,
+	unlisted: LinkIcon,
+	withheld: LinkIcon,
+	private: LockIcon,
+	scheduled: CalendarIcon,
+	draft: FileTextIcon,
+	archived: ArchiveIcon,
+	rejected: XIcon,
+	processing: UpdatedIcon,
+	unknown: UnknownIcon,
+}
+
+export const DIRECTORY_ICONS: Record<string, Component> = {
+	config: FolderOpenIcon,
+	world: FolderOpenIcon,
+	resourcepacks: PaintbrushIcon,
+	_default: FolderOpenIcon,
+}
+
+const CURRENCY_CONFIG: Record<string, { icon: Component; color: string }> = {
+	usdc: { icon: USDCColorIcon, color: 'text-blue' },
+}
+
+const BLOCKCHAIN_CONFIG: Record<string, { icon: Component; color: string }> = {
+	polygon: { icon: PolygonIcon, color: 'text-purple' },
+}
+
+const CODE_EXTENSIONS: string[] = [
+	'json',
+	'json5',
+	'jsonc',
+	'java',
+	'kt',
+	'kts',
+	'sh',
+	'bat',
+	'ps1',
+	'yml',
+	'yaml',
+	'toml',
+	'js',
+	'ts',
+	'py',
+	'rb',
+	'php',
+	'html',
+	'css',
+	'cpp',
+	'c',
+	'h',
+	'rs',
+	'go',
+] as const
+
+const TEXT_EXTENSIONS: string[] = [
+	'txt',
+	'md',
+	'log',
+	'cfg',
+	'conf',
+	'properties',
+	'ini',
+	'sk',
+] as const
+const IMAGE_EXTENSIONS: string[] = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp'] as const
+const ARCHIVE_EXTENSIONS: string[] = ['zip', 'jar', 'tar', 'gz', 'rar', '7z'] as const
+
+export function getProjectTypeIcon(projectType: ProjectType): Component {
+	return PROJECT_TYPE_ICONS[projectType] ?? BoxIcon
+}
+
+export function getPaymentMethodIcon(method: string): Component {
+	return PAYMENT_METHOD_ICONS[method] ?? UnknownIcon
+}
+
+export function getSocialPlatformIcon(platform: string): Component {
+	return SOCIAL_PLATFORM_ICONS[platform.toLowerCase()] ?? UnknownIcon
+}
+
+export function getSeverityIcon(severity: string): Component {
+	return SEVERITY_ICONS[severity] ?? InfoIcon
+}
+
+export function getProjectStatusIcon(status: ProjectStatus): Component {
+	return PROJECT_STATUS_ICONS[status] ?? UnknownIcon
+}
+
+export function getDirectoryIcon(name: string): Component {
+	return DIRECTORY_ICONS[name.toLowerCase()] ?? DIRECTORY_ICONS._default
+}
+
+export function getFileExtensionIcon(extension: string): Component {
+	const ext: string = extension.toLowerCase()
+
+	if (CODE_EXTENSIONS.includes(ext)) {
+		return FileCodeIcon
+	}
+	if (TEXT_EXTENSIONS.includes(ext)) {
+		return FileTextIcon
+	}
+	if (IMAGE_EXTENSIONS.includes(ext)) {
+		return FileImageIcon
+	}
+	if (ARCHIVE_EXTENSIONS.includes(ext)) {
+		return FileArchiveIcon
+	}
+
+	return FileIcon
+}
+
+export function getFileIcon(fileName: string): Component {
+	const extension = fileName.split('.').pop()?.toLowerCase() || ''
+	return getFileExtensionIcon(extension)
+}
+
+export function getCurrencyIcon(currency: string): Component | null {
+	const lower = currency.toLowerCase()
+	const key = Object.keys(CURRENCY_CONFIG).find((k) => lower.includes(k))
+	return key ? CURRENCY_CONFIG[key].icon : null
+}
+
+export function getCurrencyColor(currency: string): string {
+	const lower = currency.toLowerCase()
+	const key = Object.keys(CURRENCY_CONFIG).find((k) => lower.includes(k))
+	return key ? CURRENCY_CONFIG[key].color : 'text-contrast'
+}
+
+export function getBlockchainIcon(blockchain: string): Component | null {
+	const lower = blockchain.toLowerCase()
+	const key = Object.keys(BLOCKCHAIN_CONFIG).find((k) => lower.includes(k))
+	return key ? BLOCKCHAIN_CONFIG[key].icon : null
+}
+
+export function getBlockchainColor(blockchain: string): string {
+	const lower = blockchain.toLowerCase()
+	const key = Object.keys(BLOCKCHAIN_CONFIG).find((k) => lower.includes(k))
+	return key ? BLOCKCHAIN_CONFIG[key].color : 'text-contrast'
+}
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './auto-icons'
 export * from './common-messages'
 export * from './game-modes'
 export * from './notices'
--- a/packages/utils/highlightjs/index.ts
+++ b/packages/utils/highlightjs/index.ts
@@ -55,6 +55,8 @@ hljs.registerAliases(['toml'], { languageName: 'ini' })
 hljs.registerAliases(['yml'], { languageName: 'yaml' })
 hljs.registerAliases(['html', 'htm', 'xhtml', 'mcui', 'fxml'], { languageName: 'xml' })

+export { hljs }
+
 export const renderHighlightedString = (string) =>
 	configuredXss.process(
 		md({
@@ -71,3 +73,34 @@ export const renderHighlightedString = (string) =>
 			},
 		}).render(string),
 	)
+
+export const highlightCodeLines = (code: string, language: string): string[] => {
+	if (!code) return []
+
+	if (!hljs.getLanguage(language)) {
+		return code.split('\n')
+	}
+
+	try {
+		const highlighted = hljs.highlight(code, { language }).value
+		const openTags: string[] = []
+
+		const processedHtml = highlighted.replace(/(<span [^>]+>)|(<\/span>)|(\n)/g, (match) => {
+			if (match === '\n') {
+				return '</span>'.repeat(openTags.length) + '\n' + openTags.join('')
+			}
+
+			if (match === '</span>') {
+				openTags.pop()
+			} else {
+				openTags.push(match)
+			}
+
+			return match
+		})
+
+		return processedHtml.split('\n')
+	} catch {
+		return code.split('\n')
+	}
+}
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -134,11 +134,29 @@ export const formatWallet = (name) => {
 	return capitalizeString(name)
 }

-export const formatProjectType = (name) => {
+export const formatProjectType = (name, short = false) => {
+	if (short) {
+		if (name === 'resourcepack') {
+			return 'RPK'
+		} else if (name === 'mod') {
+			return 'MOD'
+		} else if (name === 'modpack') {
+			return 'MPK'
+		} else if (name === 'shader') {
+			return 'SHD'
+		} else if (name === 'plugin') {
+			return 'PLG'
+		} else if (name === 'datapack') {
+			return 'DPK'
+		}
+	}
+
 	if (name === 'resourcepack') {
 		return 'Resource Pack'
 	} else if (name === 'datapack') {
 		return 'Data Pack'
+	} else if (name === 'modpack') {
+		return 'Modpack'
 	}

 	return capitalizeString(name)