From f2b09a5e656fa46a5055e8d181d56cc1f537a0cc Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 21 Jan 2025 19:47:11 +0100
Subject: [PATCH 1/4] fix: Move Download button

---
 .../GalleryItemButton/GalleryItemButton.vue   |  8 +--
 .../GalleryItemMoreActionBtn.vue              | 49 +------------
 components/gallery/GalleryItemToolBar.vue     | 68 ++++++++++++++++++-
 3 files changed, 69 insertions(+), 56 deletions(-)

diff --git a/components/gallery/GalleryItemButton/GalleryItemButton.vue b/components/gallery/GalleryItemButton/GalleryItemButton.vue
index 1816fe5e13..40413afc19 100644
--- a/components/gallery/GalleryItemButton/GalleryItemButton.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemButton.vue
@@ -6,9 +6,6 @@
 
     <GalleryItemMoreActionBtn
       :nft="nft"
-      :image-url="nftMetadata?.image"
-      :image-data="imageData"
-      :mime-type="nftMimeType"
       :abi="abi"
       data-testid="gallery-item-more-button"
     />
@@ -20,9 +17,8 @@ import GalleryItemMoreActionBtn from './GalleryItemMoreActionBtn.vue'
 import { extractTwitterIdFromDescription } from '@/utils/parse'
 
 const { $i18n } = useNuxtApp()
-const imageData = ref()
 
-const { getNft: nft, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType, getAbi: abi } = storeToRefs(useNftStore())
+const { getNft: nft, getAbi: abi } = storeToRefs(useNftStore())
 
 const customSharingContent = computed(() => {
   const twitterId = nft.value?.meta?.description
@@ -31,8 +27,6 @@ const customSharingContent = computed(() => {
 
   return twitterId ? $i18n.t('sharing.nftWithArtist', [twitterId]) : ''
 })
-
-onKodahashRenderCompleted(({ payload }) => imageData.value = payload.image)
 </script>
 
 <style scoped lang="scss">
diff --git a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
index 324697cd04..4035cb5a26 100644
--- a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
@@ -68,15 +68,12 @@ import { NeoButton, NeoDropdown, NeoDropdownItem } from '@kodadot1/brick'
 import { Interaction } from '@kodadot1/minimark/v1'
 import { useQuery } from '@tanstack/vue-query'
 import GalleryItemEditNftButton from './GalleryItemEditNftButton.vue'
-import { downloadImage } from '@/utils/download'
-import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
-import { isMobileDevice } from '@/utils/extension'
 import { hasOperationsDisabled } from '@/utils/prefix'
 import { refreshOdaTokenMetadata } from '@/services/oda'
 import type { NFT } from '@/types'
 import type { Abi } from '@/composables/transaction/types'
 
-const { $i18n, $consola } = useNuxtApp()
+const { $i18n } = useNuxtApp()
 const { toast } = useToast()
 const { isCurrentAccount } = useAuth()
 const { transaction, isLoading, status } = useTransaction()
@@ -87,9 +84,6 @@ const route = useRoute()
 
 const props = defineProps<{
   nft?: NFT
-  mimeType?: string
-  imageUrl?: string
-  imageData?: string
   abi?: Abi | null
 }>()
 
@@ -122,47 +116,6 @@ const signingModalTitle = computed(() => {
   )
 })
 
-const isDownloadEnabled = computed(() => {
-  const mimeType = props.mimeType
-  return ((
-    (mimeType?.includes('image') || mimeType?.includes('text/html'))
-    && props.imageUrl) || props.imageData
-  )
-})
-
-const downloadMedia = async () => {
-  let imageUrl = sanitizeIpfsUrl(props.imageUrl)
-
-  if (!imageUrl) {
-    return
-  }
-
-  if (props.imageData) {
-    const blob = await $fetch<Blob>(props.imageData)
-    imageUrl = URL.createObjectURL(blob)
-  }
-  else if (props.mimeType?.includes('image')) {
-    imageUrl = toOriginalContentUrl(imageUrl)
-  }
-
-  if (isMobileDevice) {
-    toast($i18n.t('toast.downloadOnMobile'))
-    setTimeout(() => {
-      window.open(imageUrl, '_blank')
-    }, 2000)
-    return
-  }
-
-  try {
-    toast($i18n.t('toast.downloadImage'))
-    downloadImage(imageUrl, `${props.nft?.collection?.name}_${props.nft?.name}`)
-  }
-  catch (error) {
-    $consola.warn('[ERR] unable to fetch image')
-    toast($i18n.t('toast.downloadError'))
-  }
-}
-
 const burn = () => {
   openUserCartModal('burn')
 }
diff --git a/components/gallery/GalleryItemToolBar.vue b/components/gallery/GalleryItemToolBar.vue
index 47b3bfb2f7..ababab2aad 100644
--- a/components/gallery/GalleryItemToolBar.vue
+++ b/components/gallery/GalleryItemToolBar.vue
@@ -53,6 +53,21 @@
         class="text-k-grey"
       />
     </NeoTooltip>
+    <NeoTooltip
+      v-if="isDownloadEnabled"
+      :label="$t('moreActions.download')"
+      position="top"
+    >
+      <a
+        no-shadow
+        @click="downloadMedia"
+      >
+        <NeoIcon
+          icon="arrow-down-to-line"
+          size="medium"
+        />
+      </a>
+    </NeoTooltip>
   </div>
 </template>
 
@@ -65,6 +80,9 @@ import {
   resolveMedia,
   MediaType,
 } from '@/utils/gallery/media'
+import { downloadImage } from '@/utils/download'
+import { sanitizeIpfsUrl, toOriginalContentUrl } from '@/utils/ipfs'
+import { isMobileDevice } from '@/utils/extension'
 
 type ReloadElement =
   | HTMLIFrameElement
@@ -78,9 +96,12 @@ const props = defineProps<{
   containerId: string
 }>()
 
-const { getNft: nft, getNftImage: nftImage, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
+const { getNft: nft, getNftImage: nftImage, getNftMetadata: nftMetadata, getNftMimeType: nftMimeType, getNftAnimation: nftAnimation, getNftAnimationMimeType: nftAnimationMimeType } = storeToRefs(useNftStore())
 
 const isLoading = ref(false)
+const { toast } = useToast()
+const { $i18n, $consola } = useNuxtApp()
+const imageData = ref()
 
 const image = computed(() => {
   if (!nftImage.value) {
@@ -90,6 +111,49 @@ const image = computed(() => {
   return nftImage.value
 })
 
+const nftImageUrl = computed(() => nftMetadata.value?.image)
+
+const isDownloadEnabled = computed(() => {
+  const mimeType = nftMimeType.value
+  return ((
+    (mimeType?.includes('image') || mimeType?.includes('text/html'))
+    && nftImageUrl.value) || imageData.value
+  )
+})
+
+const downloadMedia = async () => {
+  let imageUrl = sanitizeIpfsUrl(nftImageUrl.value)
+
+  if (!imageUrl) {
+    return
+  }
+
+  if (imageData.value) {
+    const blob = await $fetch<Blob>(imageData.value)
+    imageUrl = URL.createObjectURL(blob)
+  }
+  else if (nftMimeType.value?.includes('image')) {
+    imageUrl = toOriginalContentUrl(imageUrl)
+  }
+
+  if (isMobileDevice) {
+    toast($i18n.t('toast.downloadOnMobile'))
+    setTimeout(() => {
+      window.open(imageUrl, '_blank')
+    }, 2000)
+    return
+  }
+
+  try {
+    toast($i18n.t('toast.downloadImage'))
+    downloadImage(imageUrl, `${nft.value?.collection?.name}_${nft.value?.name}`)
+  }
+  catch (error) {
+    $consola.warn('[ERR] unable to fetch image')
+    toast($i18n.t('toast.downloadError'))
+  }
+}
+
 const mediaAndImageType = computed(() => {
   const animationMediaType = resolveMedia(nftAnimationMimeType.value)
   const imageMediaType = resolveMedia(nftMimeType.value)
@@ -160,4 +224,6 @@ const disableNewTab = computed(() => {
 
   return nftImage.value && nftMimeType.value
 })
+
+onKodahashRenderCompleted(({ payload }) => imageData.value = payload.image)
 </script>

From 13abf9dc4729bb90a61397f7c2331d9ea41f221e Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 21 Jan 2025 20:01:30 +0100
Subject: [PATCH 2/4] chore: style

---
 components/gallery/GalleryItemToolBar.vue | 25 ++++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/components/gallery/GalleryItemToolBar.vue b/components/gallery/GalleryItemToolBar.vue
index ababab2aad..b3007271a7 100644
--- a/components/gallery/GalleryItemToolBar.vue
+++ b/components/gallery/GalleryItemToolBar.vue
@@ -1,12 +1,13 @@
 <template>
   <div
-    class="w-full xl:w-[465px] xl:ml-4 mr-4 mt-6 px-6 py-3 h-11 rounded-[43px] gap-8 flex justify-center border border-gray-400"
+    class="w-full xl:w-[465px] xl:ml-4 mr-4 mt-6 px-6 py-3 h-11 rounded-[43px] gap-4 flex justify-center border border-gray-400"
   >
     <NeoTooltip
       :label="$t('reload')"
       position="top"
     >
-      <a
+      <NeoButton
+        variant="icon"
         no-shadow
         @click="handleReloadClick"
       >
@@ -16,13 +17,14 @@
           :label="$t('reload')"
           :spin="isLoading"
         />
-      </a>
+      </NeoButton>
     </NeoTooltip>
     <NeoTooltip
       :label="$t('fullscreen')"
       position="top"
     >
-      <a
+      <NeoButton
+        variant="icon"
         no-shadow
         @click="$emit('toggle')"
       >
@@ -30,14 +32,15 @@
           icon="arrow-up-right-and-arrow-down-left-from-center"
           size="medium"
         />
-      </a>
+      </NeoButton>
     </NeoTooltip>
     <NeoTooltip
       :label="$t('newTab')"
       position="top"
     >
-      <a
+      <NeoButton
         v-if="disableNewTab"
+        variant="icon"
         no-shadow
         @click="handleNewTab"
       >
@@ -45,7 +48,8 @@
           icon="arrow-up-right"
           size="medium"
         />
-      </a>
+      </NeoButton>
+
       <NeoIcon
         v-else
         icon="arrow-up-right"
@@ -58,7 +62,8 @@
       :label="$t('moreActions.download')"
       position="top"
     >
-      <a
+      <NeoButton
+        variant="icon"
         no-shadow
         @click="downloadMedia"
       >
@@ -66,13 +71,13 @@
           icon="arrow-down-to-line"
           size="medium"
         />
-      </a>
+      </NeoButton>
     </NeoTooltip>
   </div>
 </template>
 
 <script setup lang="ts">
-import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
+import { NeoIcon, NeoTooltip, NeoButton } from '@kodadot1/brick'
 
 import {
   determineElementType,

From aca42ed7a74f81abc7a8965a0f98310ce144ad40 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:08:11 +0100
Subject: [PATCH 3/4] fix: test

---
 .../gallery/GalleryItemButton/GalleryItemButton.vue      | 1 -
 .../GalleryItemButton/GalleryItemMoreActionBtn.vue       | 9 ---------
 components/gallery/GalleryItemToolBar.vue                | 1 +
 tests/e2e/galleryitem.spec.ts                            | 3 +--
 4 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/components/gallery/GalleryItemButton/GalleryItemButton.vue b/components/gallery/GalleryItemButton/GalleryItemButton.vue
index 40413afc19..9854955cd4 100644
--- a/components/gallery/GalleryItemButton/GalleryItemButton.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemButton.vue
@@ -7,7 +7,6 @@
     <GalleryItemMoreActionBtn
       :nft="nft"
       :abi="abi"
-      data-testid="gallery-item-more-button"
     />
   </div>
 </template>
diff --git a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
index 4035cb5a26..c5fa889a70 100644
--- a/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
+++ b/components/gallery/GalleryItemButton/GalleryItemMoreActionBtn.vue
@@ -20,15 +20,6 @@
           :active="active"
         />
       </template>
-
-      <NeoDropdownItem
-        v-if="isDownloadEnabled"
-        data-testid="gallery-item-more-dropdown-download"
-        @click="downloadMedia"
-      >
-        Download
-      </NeoDropdownItem>
-
       <template
         v-if="isOwner && !hasOperationsDisabled(urlPrefix)"
       >
diff --git a/components/gallery/GalleryItemToolBar.vue b/components/gallery/GalleryItemToolBar.vue
index b3007271a7..40d368dd6b 100644
--- a/components/gallery/GalleryItemToolBar.vue
+++ b/components/gallery/GalleryItemToolBar.vue
@@ -64,6 +64,7 @@
     >
       <NeoButton
         variant="icon"
+        data-testid="gallery-item-more-dropdown-download"
         no-shadow
         @click="downloadMedia"
       >
diff --git a/tests/e2e/galleryitem.spec.ts b/tests/e2e/galleryitem.spec.ts
index 90f876c2dc..239d4e5adf 100644
--- a/tests/e2e/galleryitem.spec.ts
+++ b/tests/e2e/galleryitem.spec.ts
@@ -52,8 +52,7 @@ test('Gallery item Interactions', async ({ page }) => {
   })
 
   // More Button
-  await test.step('More Button Functionality', async () => {
-    await page.getByTestId('gallery-item-more-button').click()
+  await test.step('Download Button Functionality', async () => {
     const downloadPromise = page.waitForEvent('download')
     await page.getByTestId('gallery-item-more-dropdown-download').click()
     await downloadPromise

From 80847974c70a7d88857b52cc894a39f9313b48d8 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:11:54 +0100
Subject: [PATCH 4/4] Update tests/e2e/galleryitem.spec.ts

---
 tests/e2e/galleryitem.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/galleryitem.spec.ts b/tests/e2e/galleryitem.spec.ts
index 239d4e5adf..f0c9ac0622 100644
--- a/tests/e2e/galleryitem.spec.ts
+++ b/tests/e2e/galleryitem.spec.ts
@@ -51,7 +51,7 @@ test('Gallery item Interactions', async ({ page }) => {
     await expect(page.getByTestId('gallery-item-chart')).toBeVisible()
   })
 
-  // More Button
+  // Download Button
   await test.step('Download Button Functionality', async () => {
     const downloadPromise = page.waitForEvent('download')
     await page.getByTestId('gallery-item-more-dropdown-download').click()