add keybinds to copy/open prod links (#7294)

apps/frontend/src/components/ui/moderation/settings/ModerationKeybind.vue

@@ -1,10 +1,14 @@
 <template>
 	<div>
 		<span class="flex flex-row items-center gap-2 text-sm text-secondary">
-			<GlobeIcon
+			<BoxIcon
 				v-if="props.scope === 'project'"
 				v-tooltip="'Can be used without the checklist open if setting enabled.'"
 			/>
+			<GlobeIcon
+				v-if="props.scope === 'global'"
+				v-tooltip="'Can be used anywhere on the website.'"
+			/>
 			<ShieldCheckIcon
 				v-if="props.scope === 'tech-review'"
 				v-tooltip="'Used within the tech review pages'"
@@ -49,7 +53,7 @@
 </template>
 
 <script setup lang="ts">
-import { GlobeIcon, RotateCounterClockwiseIcon, ShieldCheckIcon } from '@modrinth/assets'
+import { BoxIcon, GlobeIcon, RotateCounterClockwiseIcon, ShieldCheckIcon } from '@modrinth/assets'
 import { type KeybindDefinition, toKeybindDefinition } from '@modrinth/moderation'
 import { IconButton } from '@modrinth/ui'
 import { onUnmounted } from 'vue'

apps/frontend/src/composables/moderation.ts

@@ -2,6 +2,7 @@ import { type KeybindDefinition, Keybinds, Settings } from '@modrinth/moderation
 import { computed } from 'vue'
 
 import type { CookieOptions } from '#app'
+import { FrontendNotificationManager } from '~/providers/frontend-notifications'
 
 const moderationKeybindsId = 'moderation-keybinds'
 const moderationSettingsId = 'moderation-settings'
@@ -83,3 +84,15 @@ export const saveModerationOptions = () => {
 		settings: options.value.settings,
 	}
 }
+
+let copyNotificationManager: FrontendNotificationManager | undefined
+
+export function notifyCopied(value: string, title: string) {
+	copyNotificationManager ??= new FrontendNotificationManager()
+	copyNotificationManager.addNotification({
+		type: 'success',
+		title,
+		text: value,
+		autoCloseMs: 1000,
+	})
+}

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

@@ -633,6 +633,7 @@ import ProjectDownloadModal from '~/components/ui/ProjectDownloadModal/index.vue
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { saveFeatureFlags } from '~/composables/featureFlags.ts'
+import { notifyCopied } from '~/composables/moderation.ts'
 import { STALE_TIME, STALE_TIME_LONG, warmProjectCheckCaches } from '~/composables/queries/project'
 import { versionQueryOptions } from '~/composables/queries/version'
 import { useServerInstallContent } from '~/composables/use-server-install-content'
@@ -2375,6 +2376,7 @@ function handleKeybinds(event) {
 	keybinds.value.handle(event, {
 		project: projectRaw.value,
 		scope: 'project',
+		notifyCopied,
 	})
 }
 

apps/frontend/src/plugins/open-on-modrinth.client.ts

@@ -0,0 +1,25 @@
+import { notifyCopied, useModerationKeybinds } from '~/composables/moderation.ts'
+
+function getOfficialOrigin(apiBaseUrl: string): string {
+	if (apiBaseUrl.startsWith('https://staging-api.modrinth.com')) {
+		return 'https://staging.modrinth.com'
+	}
+	return 'https://modrinth.com'
+}
+
+export default defineNuxtPlugin(() => {
+	const config = useRuntimeConfig()
+	const keybinds = useModerationKeybinds()
+
+	window.addEventListener('keydown', (event) => {
+		if (event.repeat) {
+			return
+		}
+
+		keybinds.value.handle(event, {
+			scope: 'global',
+			officialUrl: `${getOfficialOrigin(String(config.public.apiBaseUrl))}${window.location.pathname}${window.location.search}`,
+			notifyCopied,
+		})
+	})
+})