From f6c5dec9cc3caffbaafdd1acc5687cc39f720725 Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Sun, 25 Aug 2024 12:00:25 +0100
Subject: [PATCH 1/3] feat(UX) - Allow links to open in a new tab

---
 .../src/components/common/Platform/Card.vue   | 19 ++++++++++++++++---
 frontend/src/layouts/Dashboard/Recent.vue     | 12 ++++++++++--
 frontend/src/views/Gallery/Collection.vue     | 10 +++++++++-
 frontend/src/views/Gallery/Platform.vue       | 10 +++++++++-
 4 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/Platform/Card.vue b/frontend/src/components/common/Platform/Card.vue
index 4cad9adf1..52b50ef3d 100644
--- a/frontend/src/components/common/Platform/Card.vue
+++ b/frontend/src/components/common/Platform/Card.vue
@@ -1,18 +1,31 @@
 <script setup lang="ts">
 import type { Platform } from "@/stores/platforms";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const props = defineProps<{ platform: Platform }>();
 
-defineProps<{ platform: Platform }>();
+const onClick = (event: MouseEvent) => {
+  if (event.metaKey || event.ctrlKey) {
+    const link = router.resolve({
+      name: "platform",
+      params: { platform: props.platform.id },
+    });
+    window.open(link.href, "_blank");
+  } else {
+    router.push({ name: "platform", params: { platform: props.platform.id } });
+  }
+};
 </script>
 
 <template>
   <v-hover v-slot="{ isHovering, props }">
     <v-card
       v-bind="props"
-      class="bg-terciary transform-scale"
       :class="{ 'on-hover': isHovering }"
+      class="bg-terciary transform-scale"
       :elevation="isHovering ? 20 : 3"
-      :to="{ name: 'platform', params: { platform: platform.id } }"
+      @click="onClick"
     >
       <v-card-text>
         <v-row class="pa-1 justify-center bg-primary">
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index 1acc737f1..d285c56c7 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -8,12 +8,20 @@ import { useRouter } from "vue-router";
 
 // Props
 const romsStore = storeRoms();
-const { recentRoms } = storeToRefs(romsStore)
+const { recentRoms } = storeToRefs(romsStore);
 const router = useRouter();
 
 // Functions
 function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
-  router.push({ name: "rom", params: { rom: emitData.rom.id } });
+  if (emitData.event.metaKey || emitData.event.ctrlKey) {
+    const link = router.resolve({
+      name: "rom",
+      params: { rom: emitData.rom.id },
+    });
+    window.open(link.href, "_blank");
+  } else {
+    router.push({ name: "rom", params: { rom: emitData.rom.id } });
+  }
 }
 </script>
 <template>
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index c5a7986b7..6ba85da27 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -153,7 +153,15 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
       romsStore.updateLastSelected(index);
     }
   } else {
-    router.push({ name: "rom", params: { rom: emitData.rom.id } });
+    if (emitData.event.metaKey || emitData.event.ctrlKey) {
+      const link = router.resolve({
+        name: "rom",
+        params: { rom: emitData.rom.id },
+      });
+      window.open(link.href, "_blank");
+    } else {
+      router.push({ name: "rom", params: { rom: emitData.rom.id } });
+    }
   }
 }
 
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 99d92d47d..ee582d644 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -153,7 +153,15 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
       romsStore.updateLastSelected(index);
     }
   } else {
-    router.push({ name: "rom", params: { rom: emitData.rom.id } });
+    if (emitData.event.metaKey || emitData.event.ctrlKey) {
+      const link = router.resolve({
+        name: "rom",
+        params: { rom: emitData.rom.id },
+      });
+      window.open(link.href, "_blank");
+    } else {
+      router.push({ name: "rom", params: { rom: emitData.rom.id } });
+    }
   }
 }
 

From 4efb9dea2d6a24378f43f05c54f7aeef1c991a94 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Mon, 26 Aug 2024 22:47:26 -0400
Subject: [PATCH 2/3] revert one of the changes

---
 .../src/components/common/Game/Card/Base.vue  | 34 +++++++++----------
 .../src/components/common/Platform/Card.vue   | 16 ++-------
 frontend/src/views/Gallery/Platform.vue       | 14 ++++----
 3 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index b9a07d45d..3f892a104 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -40,7 +40,7 @@ const props = withDefaults(
     withBorder: false,
     withBorderRommAccent: false,
     src: "",
-  }
+  },
 );
 const romsStore = storeRoms();
 const emit = defineEmits(["click", "touchstart", "touchend"]);
@@ -99,29 +99,29 @@ onMounted(() => {
             src
               ? src
               : romsStore.isSimpleRom(rom)
-              ? !rom.igdb_id && !rom.moby_id && !rom.has_cover
-                ? `/assets/default/cover/big_${theme.global.name.value}_unmatched.png`
-                : (rom.igdb_id || rom.moby_id) && !rom.has_cover
-                ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-                : `/assets/romm/resources/${rom.path_cover_l}?ts=${rom.updated_at}`
-              : !rom.igdb_url_cover && !rom.moby_url_cover
-              ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-              : rom.igdb_url_cover
-              ? rom.igdb_url_cover
-              : rom.moby_url_cover
+                ? !rom.igdb_id && !rom.moby_id && !rom.has_cover
+                  ? `/assets/default/cover/big_${theme.global.name.value}_unmatched.png`
+                  : (rom.igdb_id || rom.moby_id) && !rom.has_cover
+                    ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+                    : `/assets/romm/resources/${rom.path_cover_l}?ts=${rom.updated_at}`
+                : !rom.igdb_url_cover && !rom.moby_url_cover
+                  ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+                  : rom.igdb_url_cover
+                    ? rom.igdb_url_cover
+                    : rom.moby_url_cover
           "
           :lazy-src="
             romsStore.isSimpleRom(rom)
               ? !rom.igdb_id && !rom.moby_id && !rom.has_cover
                 ? `/assets/default/cover/big_${theme.global.name.value}_unmatched.png`
                 : (rom.igdb_id || rom.moby_id) && !rom.has_cover
-                ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-                : `/assets/romm/resources/${rom.path_cover_s}?ts=${rom.updated_at}`
+                  ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+                  : `/assets/romm/resources/${rom.path_cover_s}?ts=${rom.updated_at}`
               : !rom.igdb_url_cover && !rom.moby_url_cover
-              ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-              : rom.igdb_url_cover
-              ? rom.igdb_url_cover
-              : rom.moby_url_cover
+                ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+                : rom.igdb_url_cover
+                  ? rom.igdb_url_cover
+                  : rom.moby_url_cover
           "
           :aspect-ratio="2 / 3"
         >
diff --git a/frontend/src/components/common/Platform/Card.vue b/frontend/src/components/common/Platform/Card.vue
index 52b50ef3d..d12824cfd 100644
--- a/frontend/src/components/common/Platform/Card.vue
+++ b/frontend/src/components/common/Platform/Card.vue
@@ -4,28 +4,16 @@ import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import { useRouter } from "vue-router";
 const router = useRouter();
 const props = defineProps<{ platform: Platform }>();
-
-const onClick = (event: MouseEvent) => {
-  if (event.metaKey || event.ctrlKey) {
-    const link = router.resolve({
-      name: "platform",
-      params: { platform: props.platform.id },
-    });
-    window.open(link.href, "_blank");
-  } else {
-    router.push({ name: "platform", params: { platform: props.platform.id } });
-  }
-};
 </script>
 
 <template>
   <v-hover v-slot="{ isHovering, props }">
     <v-card
       v-bind="props"
-      :class="{ 'on-hover': isHovering }"
       class="bg-terciary transform-scale"
+      :class="{ 'on-hover': isHovering }"
       :elevation="isHovering ? 20 : 3"
-      @click="onClick"
+      :to="{ name: 'platform', params: { platform: platform.id } }"
     >
       <v-card-text>
         <v-row class="pa-1 justify-center bg-primary">
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index ee582d644..a5f373c69 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -69,7 +69,7 @@ async function fetchRoms() {
         timeout: 4000,
       });
       console.error(
-        `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`
+        `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`,
       );
       noPlatformError.value = true;
     })
@@ -87,28 +87,28 @@ function setFilters() {
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.genres.map((genre) => genre))
-        .sort()
+        .sort(),
     ),
   ]);
   galleryFilterStore.setFilterFranchises([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.franchises.map((franchise) => franchise))
-        .sort()
+        .sort(),
     ),
   ]);
   galleryFilterStore.setFilterCompanies([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.companies.map((company) => company))
-        .sort()
+        .sort(),
     ),
   ]);
   galleryFilterStore.setFilterCollections([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.collections.map((collection) => collection))
-        .sort()
+        .sort(),
     ),
   ]);
 }
@@ -135,7 +135,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
     }
     if (emitData.event.shiftKey) {
       const [start, end] = [romsStore.lastSelectedIndex, index].sort(
-        (a, b) => a - b
+        (a, b) => a - b,
       );
       if (romsStore.selectedRoms.includes(emitData.rom)) {
         for (let i = start + 1; i < end; i++) {
@@ -147,7 +147,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
         }
       }
       romsStore.updateLastSelected(
-        romsStore.selectedRoms.includes(emitData.rom) ? index : index - 1
+        romsStore.selectedRoms.includes(emitData.rom) ? index : index - 1,
       );
     } else {
       romsStore.updateLastSelected(index);

From 1c704dd57e0152ece2d0e785ca4fe73d0537d0eb Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Mon, 26 Aug 2024 22:48:24 -0400
Subject: [PATCH 3/3] small fix

---
 frontend/src/components/common/Platform/Card.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/Platform/Card.vue b/frontend/src/components/common/Platform/Card.vue
index d12824cfd..4cad9adf1 100644
--- a/frontend/src/components/common/Platform/Card.vue
+++ b/frontend/src/components/common/Platform/Card.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type { Platform } from "@/stores/platforms";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
-import { useRouter } from "vue-router";
-const router = useRouter();
-const props = defineProps<{ platform: Platform }>();
+
+defineProps<{ platform: Platform }>();
 </script>
 
 <template>