feat: move tech quick actions to dedicated buttons (#6628)

apps/frontend/src/components/ui/moderation/ModerationTechRevCard.vue

@@ -10,9 +10,8 @@ import {
 	CodeIcon,
 	CopyIcon,
 	DownloadIcon,
-	EllipsisVerticalIcon,
+	ExternalIcon,
 	EyeOffIcon,
-	LinkIcon,
 	LoaderCircleIcon,
 	ScaleIcon,
 	ShieldCheckIcon,
@@ -113,51 +112,6 @@ const isProjectApproved = computed(() => {
 	)
 })
 
-const quickActions = computed<OverflowMenuOption[]>(() => {
-	const actions: OverflowMenuOption[] = []
-
-	const sourceUrl = props.item.project.link_urls?.['source']?.url
-	if (sourceUrl) {
-		actions.push({
-			id: 'view-source',
-			action: () => {
-				window.open(sourceUrl, '_blank', 'noopener,noreferrer')
-			},
-		})
-	}
-
-	actions.push(
-		{
-			id: 'copy-link',
-			action: () => {
-				const base = window.location.origin
-				const reportUrl = `${base}/moderation/technical-review/${props.item.project.id}`
-				navigator.clipboard.writeText(reportUrl).then(() => {
-					addNotification({
-						type: 'success',
-						title: 'Technical Review link copied',
-						text: 'The link to this review has been copied to your clipboard.',
-					})
-				})
-			},
-		},
-		{
-			id: 'copy-id',
-			action: () => {
-				navigator.clipboard.writeText(props.item.project.id).then(() => {
-					addNotification({
-						type: 'success',
-						title: 'Project ID copied',
-						text: 'The ID of this project has been copied to your clipboard.',
-					})
-				})
-			},
-		},
-	)
-
-	return actions
-})
-
 const isLoadingStatusAction = ref(false)
 const projectStatusActions = computed<OverflowMenuOption[]>(() => [
 	{
@@ -1020,6 +974,16 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 		}
 	}
 }
+
+function copyId() {
+	navigator.clipboard.writeText(props.item.project.id).then(() => {
+		addNotification({
+			type: 'success',
+			title: 'Project ID copied',
+			text: 'The ID of this project has been copied to your clipboard.',
+		})
+	})
+}
 </script>
 
 <template>
@@ -1105,25 +1069,31 @@ async function handleSubmitReview(verdict: 'safe' | 'unsafe') {
 
 				<div class="flex items-center gap-3">
 					<span class="text-base text-secondary">{{ formattedDate }}</span>
-					<ButtonStyled circular>
-						<OverflowMenu :options="quickActions" class="!shadow-none">
-							<template #default>
-								<EllipsisVerticalIcon class="size-4" />
-							</template>
-							<template #copy-id>
-								<ClipboardCopyIcon />
-								<span class="hidden sm:inline">Copy ID</span>
-							</template>
-							<template #copy-link>
-								<LinkIcon />
-								<span class="hidden sm:inline">Copy link</span>
-							</template>
-							<template #view-source>
+					<div class="flex items-center gap-2">
+						<ButtonStyled v-if="props.item.project.link_urls?.['source']?.url" circular>
+							<a
+								v-tooltip="'Open sources in new tab'"
+								:href="props.item.project.link_urls?.['source']?.url"
+								target="_blank"
+							>
 								<CodeIcon />
-								<span class="hidden sm:inline">View source</span>
-							</template>
-						</OverflowMenu>
-					</ButtonStyled>
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<button v-tooltip="'Copy ID'" @click="copyId">
+								<ClipboardCopyIcon />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								v-tooltip="'Open in new tab'"
+								:href="`/moderation/technical-review/${props.item.project.id}`"
+								target="_blank"
+							>
+								<ExternalIcon />
+							</a>
+						</ButtonStyled>
+					</div>
 				</div>
 			</div>