Merge pull request #1144 from rommapp/fix-open-new-tab

Microfixes to game cards UI

.trunk/trunk.yaml

@@ -2,12 +2,12 @@
 # To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
 version: 0.1
 cli:
-  version: 1.22.3
+  version: 1.22.4
 # Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
 plugins:
   sources:
     - id: trunk
-      ref: v1.6.1
+      ref: v1.6.2
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
@@ -19,24 +19,24 @@ runtimes:
 lint:
   enabled:
     - markdownlint@0.41.0
-    - eslint@9.9.0
+    - eslint@9.9.1
     - actionlint@1.7.1
     - bandit@1.7.9
     - black@24.8.0
-    - checkov@3.2.228
+    - checkov@3.2.239
     - git-diff-check
     - isort@5.13.2
-    - mypy@1.11.1
-    - osv-scanner@1.8.3
+    - mypy@1.11.2
+    - osv-scanner@1.8.4
     - oxipng@9.1.2
     - prettier@3.3.3
-    - ruff@0.6.0
+    - ruff@0.6.3
     - shellcheck@0.10.0
     - shfmt@3.6.0
     - svgo@3.3.2
     - taplo@0.9.3
     - trivy@0.54.1
-    - trufflehog@3.81.9
+    - trufflehog@3.81.10
     - yamllint@1.35.1
   ignore:
     - linters: [ALL]

frontend/src/components/Gallery/AppBar/Platform/Base.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useDisplay } from "vuetify";
 import AdminMenu from "@/components/Gallery/AppBar/Platform/AdminMenu.vue";
+import FirmwareBtn from "@/components/Gallery/AppBar/Platform/FirmwareBtn.vue";
+import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
 import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
+import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
 import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
-import FirmwareBtn from "@/components/Gallery/AppBar/Platform/FirmwareBtn.vue";
 import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
 import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
-import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
-import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import storeAuth from "@/stores/auth";
 import storeRoms from "@/stores/roms";
+import { storeToRefs } from "pinia";
+import { useDisplay } from "vuetify";
 
 const { xs } = useDisplay();
 const romsStore = storeRoms();
@@ -28,7 +28,7 @@ const auth = storeAuth();
       :slug="currentPlatform.slug"
       :name="currentPlatform.name"
       :size="36"
-      class="mx-2"
+      class="ml-3 mr-2 platform-icon"
     />
     <firmware-btn />
     <filter-btn />
@@ -60,4 +60,7 @@ const auth = storeAuth();
 #gallery-app-bar {
   z-index: 999 !important;
 }
+.platform-icon {
+  filter: drop-shadow(0px 0px 2px #a452fe);
+}
 </style>

frontend/src/components/common/Game/AdminMenu.vue

@@ -21,7 +21,6 @@ const collectionsStore = storeCollections();
 const romsStore = storeRoms();
 const { favCollection } = storeToRefs(collectionsStore);
 
-// Functions
 async function switchFromFavourites() {
   if (!favCollection.value) {
     await collectionApi
@@ -53,7 +52,7 @@ async function switchFromFavourites() {
   } else {
     if (favCollection.value) {
       favCollection.value.roms = favCollection.value.roms.filter(
-        (id) => id !== props.rom.id
+        (id) => id !== props.rom.id,
       );
       if (romsStore.currentCollection?.name.toLowerCase() == "favourites") {
         romsStore.remove([props.rom]);

frontend/src/components/common/Game/Card/ActionBar.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
 import storeHeartbeat from "@/stores/heartbeat";
 import type { SimpleRom } from "@/stores/roms";
 import { isEJSEmulationSupported, isRuffleEmulationSupported } from "@/utils";
+import { computed } from "vue";
 
 // Props
 const props = defineProps<{ rom: SimpleRom }>();
@@ -37,7 +37,10 @@ const ruffleEmulationSupported = computed(() => {
         @click="romApi.downloadRom({ rom })"
       />
     </v-col>
-    <v-col class="d-flex">
+    <v-col
+      v-if="ejsEmulationSupported || ruffleEmulationSupported"
+      class="d-flex"
+    >
       <v-btn
         v-if="ejsEmulationSupported"
         class="action-bar-btn-small flex-grow-1"
@@ -67,19 +70,21 @@ const ruffleEmulationSupported = computed(() => {
         variant="text"
       />
     </v-col>
-    <v-menu location="bottom">
-      <template #activator="{ props }">
-        <v-btn
-          class="action-bar-btn-small flex-grow-1"
-          size="x-small"
-          v-bind="props"
-          icon="mdi-dots-vertical"
-          rounded="0"
-          variant="text"
-        />
-      </template>
-      <admin-menu :rom="rom" />
-    </v-menu>
+    <v-col class="d-flex">
+      <v-menu location="bottom">
+        <template #activator="{ props }">
+          <v-btn
+            class="action-bar-btn-small flex-grow-1"
+            size="x-small"
+            v-bind="props"
+            icon="mdi-dots-vertical"
+            rounded="0"
+            variant="text"
+          />
+        </template>
+        <admin-menu :rom="rom" />
+      </v-menu>
+    </v-col>
   </v-row>
 </template>
 

frontend/src/components/common/UploadInProgress.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import storeUpload from "@/stores/upload";
 import { formatBytes } from "@/utils";
+import { storeToRefs } from "pinia";
 import { ref, watch } from "vue";
 import { useDisplay } from "vuetify";
-import { storeToRefs } from "pinia";
 
 const { xs } = useDisplay();
 const uploadStore = storeUpload();
@@ -49,16 +49,16 @@ watch(files, (newList) => {
           <v-list-item-title class="d-flex justify-space-between">
             {{ file.filename }}
             <v-icon
-              :icon="file.finished ? `mdi-check` : `mdi-loading mdi-spin`"
-              :color="file.finished ? `green` : `white`"
+              :icon="file.finished ? 'mdi-check' : 'mdi-loading mdi-spin'"
+              :color="file.finished ? 'green' : 'romm-accent-1'"
               class="mx-2"
             />
           </v-list-item-title>
           <template v-if="file.progress > 0 && !file.finished">
             <v-progress-linear
               v-model="file.progress"
               height="4"
-              color="white"
+              color="romm-accent-1"
               class="mt-1"
             />
             <div class="upload-speeds d-flex justify-space-between mt-1">