Merge pull request #1347 from rommapp/refactor/frontend-layouts

chore: Refactor frontend layouts
rommapp · Dec 8, 2024 · fda2811 · fda2811
2 parents f1ab581 + 94548bb
commit fda2811
Show file tree

Hide file tree

Showing 101 changed files with 2,006 additions and 1,874 deletions.
diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
@@ -18,25 +18,25 @@ runtimes:
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   enabled:
-    - markdownlint@0.42.0
-    - eslint@9.14.0
+    - markdownlint@0.43.0
+    - eslint@9.16.0
     - [email protected]
-    - bandit@1.7.10
+    - bandit@1.8.0
     - [email protected]
-    - [email protected].296
+    - [email protected].332
     - git-diff-check
     - [email protected]
     - [email protected]
     - [email protected]
-    - [email protected].2
-    - prettier@3.3.3
-    - ruff@0.7.3
+    - [email protected].3
+    - prettier@3.4.2
+    - ruff@0.8.2
     - [email protected]
     - [email protected]
     - [email protected]
     - [email protected]
     - [email protected]
-    - trufflehog@3.83.6
+    - trufflehog@3.85.0
     - [email protected]
   ignore:
     - linters: [ALL]

diff --git a/.zed/settings.json b/.zed/settings.json
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
@@ -0,0 +1,7 @@
+<template>
+  <v-app>
+    <v-main class="h-100">
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
+import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
-import type { DetailedRom } from "@/stores/roms";
 import storeHeartbeat from "@/stores/heartbeat";
+import type { DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import {
   getDownloadLink,
   isEJSEmulationSupported,
   isRuffleEmulationSupported,
 } from "@/utils";
 import type { Emitter } from "mitt";
-import { inject, ref, computed } from "vue";
+import { computed, inject, ref } from "vue";
 
 // Props
 const props = defineProps<{ rom: DetailedRom }>();
@@ -54,67 +55,71 @@ async function copyDownloadLink(rom: DetailedRom) {
 </script>
 
 <template>
-  <v-btn-group divided density="compact" rounded="0" class="d-flex flex-row">
-    <v-btn
-      class="flex-grow-1"
-      :disabled="downloadStore.value.includes(rom.id)"
-      @click="
-        romApi.downloadRom({
-          rom,
-          files: downloadStore.filesToDownload,
-        })
-      "
-    >
-      <v-tooltip
-        activator="parent"
-        location="top"
-        transition="fade-transition"
-        open-delay="1000"
-        >Download game</v-tooltip
+  <div>
+    <v-btn-group divided density="compact" rounded="0" class="d-flex flex-row">
+      <v-btn
+        class="flex-grow-1"
+        :disabled="downloadStore.value.includes(rom.id)"
+        @click="
+          romApi.downloadRom({
+            rom,
+            files: downloadStore.filesToDownload,
+          })
+        "
       >
-      <v-icon icon="mdi-download" size="large" />
-    </v-btn>
-    <v-btn class="flex-grow-1" @click="copyDownloadLink(rom)">
-      <v-tooltip
-        activator="parent"
-        location="top"
-        transition="fade-transition"
-        open-delay="1000"
-        >Copy download link</v-tooltip
+        <v-tooltip
+          activator="parent"
+          location="top"
+          transition="fade-transition"
+          open-delay="1000"
+          >Download game</v-tooltip
+        >
+        <v-icon icon="mdi-download" size="large" />
+      </v-btn>
+      <v-btn class="flex-grow-1" @click="copyDownloadLink(rom)">
+        <v-tooltip
+          activator="parent"
+          location="top"
+          transition="fade-transition"
+          open-delay="1000"
+          >Copy download link</v-tooltip
+        >
+        <v-icon icon="mdi-content-copy" />
+      </v-btn>
+      <v-btn
+        v-if="ejsEmulationSupported"
+        class="flex-grow-1"
+        @click="
+          $router.push({
+            name: 'emulatorjs',
+            params: { rom: rom?.id },
+          })
+        "
       >
-      <v-icon icon="mdi-content-copy" />
-    </v-btn>
-    <v-btn
-      v-if="ejsEmulationSupported"
-      class="flex-grow-1"
-      @click="
-        $router.push({
-          name: 'emulatorjs',
-          params: { rom: rom?.id },
-        })
-      "
-    >
-      <v-icon :icon="playInfoIcon" />
-    </v-btn>
-    <v-btn
-      v-if="ruffleEmulationSupported"
-      class="flex-grow-1"
-      @click="
-        $router.push({
-          name: 'ruffle',
-          params: { rom: rom?.id },
-        })
-      "
-    >
-      <v-icon :icon="playInfoIcon" />
-    </v-btn>
-    <v-menu location="bottom">
-      <template #activator="{ props: menuProps }">
-        <v-btn class="flex-grow-1" v-bind="menuProps">
-          <v-icon icon="mdi-dots-vertical" size="large" />
-        </v-btn>
-      </template>
-      <admin-menu :rom="rom" />
-    </v-menu>
-  </v-btn-group>
+        <v-icon :icon="playInfoIcon" />
+      </v-btn>
+      <v-btn
+        v-if="ruffleEmulationSupported"
+        class="flex-grow-1"
+        @click="
+          $router.push({
+            name: 'ruffle',
+            params: { rom: rom?.id },
+          })
+        "
+      >
+        <v-icon :icon="playInfoIcon" />
+      </v-btn>
+      <v-menu location="bottom">
+        <template #activator="{ props: menuProps }">
+          <v-btn class="flex-grow-1" v-bind="menuProps">
+            <v-icon icon="mdi-dots-vertical" size="large" />
+          </v-btn>
+        </template>
+        <admin-menu :rom="rom" />
+      </v-menu>
+    </v-btn-group>
+
+    <copy-rom-download-link-dialog />
+  </div>
 </template>
diff --git a/frontend/src/components/Details/AdditionalContent.vue b/frontend/src/components/Details/AdditionalContent.vue
@@ -11,27 +11,8 @@ const combined = computed(() => [
 </script>
 <template>
   <v-row no-gutters>
-    <v-col
-      class="pa-0"
-      cols="4"
-      sm="3"
-      lg="6"
-      xxl="4"
-      v-for="expansion in combined"
-    >
-      <a
-        style="text-decoration: none; color: inherit"
-        :href="`https://www.igdb.com/games/${expansion.slug}`"
-        target="_blank"
-      >
-        <related-card :game="expansion" />
-      </a>
+    <v-col cols="4" sm="3" lg="6" class="pa-1" v-for="expansion in combined">
+      <related-card :game="expansion" />
     </v-col>
   </v-row>
 </template>
-<style scoped>
-.chip-type {
-  top: -0.1rem;
-  left: -0.1rem;
-}
-</style>