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

apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue

@@ -3,7 +3,12 @@
 		<template #title>
 			<div class="flex items-center gap-2">
 				<span class="text-lg font-extrabold text-contrast">Transfer</span>
-				<Avatar :src="organization.icon_url" :alt="organization.name" size="xs" />
+				<Avatar
+					:src="organization.icon_url"
+					:raw-src="organization.raw_icon_url"
+					:alt="organization.name"
+					size="xs"
+				/>
 				<span class="text-lg font-extrabold text-contrast">{{ organization.name }}</span>
 			</div>
 		</template>

apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue

@@ -3,7 +3,12 @@
 		<template #title>
 			<div class="flex items-center gap-2">
 				<span class="text-lg font-extrabold text-contrast">Transfer</span>
-				<Avatar :src="project.icon_url" :alt="project.name" size="xs" />
+				<Avatar
+					:src="project.icon_url"
+					:raw-src="project.raw_icon_url"
+					:alt="project.name"
+					size="xs"
+				/>
 				<span class="text-lg font-extrabold text-contrast">{{ project.name }}</span>
 			</div>
 		</template>

apps/frontend/src/components/ui/OrganizationPageHeader.vue

@@ -3,6 +3,7 @@
 		<template #leading>
 			<Avatar
 				:src="organization.icon_url"
+				:raw-src="organization.raw_icon_url"
 				:alt="organization.name"
 				:tint-by="organization.id"
 				size="96px"

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

@@ -18,7 +18,12 @@
 							>
 								<LeftArrowIcon />
 							</ButtonLink>
-							<Avatar :src="project.icon_url" :tint-by="project.id" size="64px" />
+							<Avatar
+								:src="project.icon_url"
+								:raw-src="project.raw_icon_url"
+								:tint-by="project.id"
+								size="64px"
+							/>
 						</template>
 						<template #metadata>
 							<PageHeaderMetadata>

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

@@ -216,6 +216,7 @@
 					<img
 						:src="item.url ? item.url : 'https://cdn.modrinth.com/placeholder-banner.svg'"
 						:alt="item.title ? item.title : 'gallery-image'"
+						@contextmenu="onFullImageContextMenu($event, item.raw_url)"
 					/>
 				</a>
 				<div class="gallery-body">
@@ -308,6 +309,7 @@ import {
 	NewModal as Modal,
 	Textarea,
 	useFormatDateTime,
+	useFullImageContextMenu,
 } from '@modrinth/ui'
 import { useEventListener } from '@vueuse/core'
 
@@ -320,6 +322,7 @@ const formatDate = useFormatDateTime({
 	month: 'long',
 	day: 'numeric',
 })
+const onFullImageContextMenu = useFullImageContextMenu()
 
 // Single DI injection
 const {

apps/frontend/src/pages/[type]/[project]/settings/gallery.vue

@@ -215,6 +215,7 @@
 					<img
 						:src="item.url ? item.url : 'https://cdn.modrinth.com/placeholder-banner.svg'"
 						:alt="item.title ? item.title : 'gallery-image'"
+						@contextmenu="onFullImageContextMenu($event, item.raw_url)"
 					/>
 				</a>
 				<div class="gallery-body">
@@ -299,6 +300,7 @@ import {
 	NewModal as Modal,
 	Textarea,
 	useFormatDateTime,
+	useFullImageContextMenu,
 } from '@modrinth/ui'
 
 import AiImageWarningModal from '~/components/ui/AiImageWarningModal.vue'
@@ -310,6 +312,7 @@ const formatDate = useFormatDateTime({
 	month: 'long',
 	day: 'numeric',
 })
+const onFullImageContextMenu = useFullImageContextMenu()
 
 const {
 	projectV2: project,

apps/frontend/src/pages/auth/authorize.vue

@@ -14,7 +14,7 @@
 		<div v-else-if="app && createdBy && authorizationData" class="flex flex-col gap-6">
 			<div class="mt-4 flex items-center justify-center">
 				<div class="flex w-full flex-row items-center justify-evenly">
-					<Avatar size="md" :src="app.icon_url" />
+					<Avatar size="md" :src="app.icon_url" :raw-src="app.raw_icon_url" />
 					<!-- <img class="profile-pic" :src="app.icon_url" alt="User profile picture" /> -->
 					<div class="flex select-none items-center justify-center text-[2rem] text-primary">→</div>
 					<Avatar size="md" circle :src="auth.user?.avatar_url" />

apps/frontend/src/pages/collection/[collection].vue

@@ -150,7 +150,7 @@
 						</nuxt-link>
 					</ClientOnly>
 					<div class="grid grid-cols-[auto_1fr] gap-4 sm:grid-cols-[auto_1fr_auto]">
-						<Avatar :src="collection.icon_url" size="64px" />
+						<Avatar :src="collection.icon_url" :raw-src="collection.raw_icon_url" size="64px" />
 						<div class="flex flex-col gap-3">
 							<h1 class="heading-2xl">
 								{{ collection.name }}

apps/frontend/src/pages/organization/[organization].vue

@@ -15,7 +15,7 @@
 						class="bg-surface mb-4 flex flex-col rounded-xl border border-solid border-surface-4 p-4"
 					>
 						<div class="flex items-center gap-4">
-							<Avatar size="sm" :src="organization.icon_url" />
+							<Avatar size="sm" :src="organization.icon_url" :raw-src="organization.raw_icon_url" />
 							<div class="flex flex-col justify-center gap-1">
 								<h2 class="m-0 text-base">
 									<nuxt-link :to="`/organization/${organization.slug}`">

apps/frontend/src/pages/settings/applications.vue

@@ -181,7 +181,7 @@
 		<div v-for="app in usersApps" :key="app.id" class="universal-card recessed token mt-4">
 			<div class="token-info">
 				<div class="token-icon">
-					<Avatar size="sm" :src="app.icon_url" />
+					<Avatar size="sm" :src="app.icon_url" :raw-src="app.raw_icon_url" />
 					<div>
 						<h2 class="token-title">{{ app.name }}</h2>
 						<div>