From ab7f0b372d42f6042481a63b8f345307b41f962b Mon Sep 17 00:00:00 2001
From: AlejandroAkbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Fri, 13 Mar 2026 09:28:39 -0700
Subject: [PATCH] fix: add open-in-new-tab post action

---
 components/pages/posts/post/PostComponent.vue | 16 +++++++++++++++-
 test/pages/posts.test.ts                      |  4 ++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/pages/posts/post/PostComponent.vue b/components/pages/posts/post/PostComponent.vue
index 0338471b..6d3fd561 100644
--- a/components/pages/posts/post/PostComponent.vue
+++ b/components/pages/posts/post/PostComponent.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+  import { ArrowTopRightOnSquareIcon, ChevronDownIcon } from '@heroicons/vue/24/outline'
   import type { IPost } from '~/assets/js/post.dto'
   import Tag from '~/assets/js/tag.dto'
   import { project } from '@/config/project'
@@ -137,6 +137,20 @@
           :mediaUrl="post.high_res_file.url ?? post.low_res_file.url ?? (mediaFile.file as string)"
         />
 
+        <NuxtLink
+          v-if="mediaFile.file"
+          :href="mediaFile.file"
+          aria-label="Open media in new tab"
+          class="hover:hover-bg-util focus-visible:focus-outline-util group rounded-md px-1.5 py-1"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <ArrowTopRightOnSquareIcon
+            aria-hidden="true"
+            class="group-hover:hover-text-util text-base-content h-5 w-5"
+          />
+        </NuxtLink>
+
         <PostSource
           :post-file-url="post.media_type === 'video' ? mediaFile.posterFile : mediaFile.file"
           :post-sources="post.sources"
diff --git a/test/pages/posts.test.ts b/test/pages/posts.test.ts
index a32047e5..5a635605 100644
--- a/test/pages/posts.test.ts
+++ b/test/pages/posts.test.ts
@@ -107,10 +107,14 @@ describe('/', async () => {
       // Post
       const firstPost = postsInList.first()
 
+      const openMediaLink = firstPost.getByRole('link', { name: /open media in new tab/i })
+
       // Image
       const firstPostImage = firstPost.locator('img')
 
       expect(await firstPostImage.getAttribute('src')).toBe(mockPostsPage0.data[0].low_res_file.url)
+      expect(await openMediaLink.getAttribute('href')).toBe(mockPostsPage0.data[0].low_res_file.url)
+      expect(await openMediaLink.getAttribute('target')).toBe('_blank')
 
       await firstPost.getByRole('button', { name: /tags/i }).click()