Make "Open Image in New Tab" open raw image (when possible) (#7315)

* tell search engines not to index collections because bots keep spamming them and I can basically guarantee not a single human being is using collections in a way where this will be detrimental to them (besides the advertisement spam)

* Index creator created collections

* Open raw images from open image in new tab option in context menu

packages/api-client/src/modules/labrinth/types.ts

@@ -869,6 +869,7 @@ export namespace Labrinth {
 				id: string
 				name: string
 				icon_url: string | null
+				raw_icon_url: string | null
 				max_scopes: number
 				redirect_uris: OAuthRedirectUri[]
 				created_by: string
@@ -1002,6 +1003,7 @@ export namespace Labrinth {
 				loaders: string[]
 				versions: string[]
 				icon_url?: string
+				raw_icon_url?: string
 				issues_url?: string
 				source_url?: string
 				wiki_url?: string
@@ -1145,6 +1147,7 @@ export namespace Labrinth {
 				mrpack_loaders: string[]
 				versions: string[]
 				icon_url?: string
+				raw_icon_url?: string
 				link_urls: Record<string, Link>
 				gallery: GalleryItem[]
 				color?: number
@@ -1264,6 +1267,7 @@ export namespace Labrinth {
 				team_id: string
 				description: string
 				icon_url: string | null
+				raw_icon_url: string | null
 				color: number | null
 				members: TeamMember[]
 			}
@@ -1387,6 +1391,7 @@ export namespace Labrinth {
 				team_id: string
 				description: string
 				icon_url: string | null
+				raw_icon_url: string | null
 				color: number | null
 				members: Projects.v3.TeamMember[]
 				moderation_notes?: Users.Common.ModerationNote | null
@@ -2297,6 +2302,7 @@ export namespace Labrinth {
 			name: string
 			description: string | null
 			icon_url: string | null
+			raw_icon_url: string | null
 			color: number | null
 			status: CollectionStatus
 			created: string

packages/ui/src/components/base/Avatar.vue

@@ -17,6 +17,7 @@
 		:loading="loading"
 		@load="onLoad"
 		@error="onError"
+		@contextmenu="onFullImageContextMenu($event, rawSrc)"
 	/>
 	<svg
 		v-else
@@ -50,6 +51,10 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
 
+import { useFullImageContextMenu } from '../../composables'
+
+const onFullImageContextMenu = useFullImageContextMenu()
+
 const pixelated = ref(false)
 const hasTransparentCorners = ref(false)
 const hasDetectedCorners = ref(false)
@@ -68,6 +73,7 @@ defineExpose({
 const props = withDefaults(
 	defineProps<{
 		src?: string | null
+		rawSrc?: string | null
 		alt?: string
 		size?: string
 		circle?: boolean
@@ -79,6 +85,7 @@ const props = withDefaults(
 	}>(),
 	{
 		src: null,
+		rawSrc: null,
 		alt: '',
 		size: '2rem',
 		circle: false,

packages/ui/src/components/project/ProjectPageHeader.vue

@@ -5,7 +5,13 @@
 		@contextmenu="emit('contextmenu', $event)"
 	>
 		<template #leading>
-			<Avatar :src="project.icon_url" :alt="project.title" :tint-by="project.id" size="96px" />
+			<Avatar
+				:src="project.icon_url"
+				:raw-src="project.raw_icon_url"
+				:alt="project.title"
+				:tint-by="project.id"
+				size="96px"
+			/>
 		</template>
 
 		<template v-if="showStatusBadge" #badges>

packages/ui/src/components/project/ProjectSidebarDetails.vue

@@ -5,7 +5,14 @@
 			:header="project.license.name ? project.license.name : formatMessage(messages.licenseTitle)"
 		>
 			<template #title>
-				<Avatar :src="project.icon_url" :alt="project.title" class="icon" size="32px" no-shadow />
+				<Avatar
+					:src="project.icon_url"
+					:raw-src="project.raw_icon_url"
+					:alt="project.title"
+					class="icon"
+					size="32px"
+					no-shadow
+				/>
 				<span class="text-lg font-extrabold text-contrast">
 					{{ project.license.name ? project.license.name : formatMessage(messages.licenseTitle) }}
 				</span>

packages/ui/src/composables/full-image-context-menu.ts

@@ -0,0 +1,18 @@
+export function useFullImageContextMenu() {
+	return function onFullImageContextMenu(event: MouseEvent, fullUrl: string | null | undefined) {
+		if (!fullUrl) return
+
+		const img = event.currentTarget as HTMLImageElement
+		const originalSrc = img.src
+		if (originalSrc === fullUrl) return
+
+		img.src = fullUrl
+		window.addEventListener(
+			'focus',
+			() => {
+				img.src = originalSrc
+			},
+			{ once: true },
+		)
+	}
+}

packages/ui/src/composables/index.ts

@@ -5,6 +5,7 @@ export * from './format-bytes'
 export * from './format-date-time'
 export * from './format-money'
 export * from './format-number'
+export * from './full-image-context-menu'
 export * from './hosting-intercom'
 export * from './how-ago'
 export * from './i18n'

packages/utils/types.ts

@@ -89,6 +89,7 @@ export interface ProjectV3 {
 
 	versions: ModrinthId[]
 	icon_url?: string
+	raw_icon_url?: string
 
 	link_urls: Record<
 		string,
@@ -129,6 +130,7 @@ export interface Project {
 
 	body: string
 	icon_url?: string
+	raw_icon_url?: string
 	color?: number
 
 	categories: Category[]
@@ -230,6 +232,7 @@ export type Organization = {
 	team_id: ModrinthId
 	description: string
 	icon_url: string
+	raw_icon_url: string | null
 	color: number
 	members: OrganizationMember[]
 }
@@ -254,6 +257,7 @@ export type Collection = {
 	name: string
 	description: string
 	icon_url: string
+	raw_icon_url: string | null
 	color: number
 	status: CollectionStatus
 	created: string