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/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'