From 90a8daad689f6adb9bdc1d9e6133eb8fc6e2e2f1 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 3 Dec 2024 09:15:57 +0000
Subject: [PATCH 01/49] frontend code and files structure refactor [WIP]

---
 frontend/src/App.vue                          | 48 ---------
 frontend/src/RomM.vue                         |  7 ++
 .../Administration/Tasks.vue                  |  3 +-
 .../Users/Dialog/DeleteUser.vue               |  3 +-
 .../Administration/Users/Dialog/EditUser.vue  |  3 +-
 .../Dashboard/Collections.vue                 |  0
 .../Dashboard/Platforms.vue                   |  0
 .../Dashboard/Recent.vue                      |  0
 .../Dashboard/Stats.vue                       |  0
 .../AppBar/Platform/PlatformInfoDrawer.vue    | 11 ++-
 .../Management/Excluded.vue                   |  0
 .../Management/PlatformBinding.vue            |  0
 .../Management/PlatformVersions.vue           |  0
 .../Settings/Interface.vue                    |  0
 .../Settings/Theme.vue                        |  0
 .../common/Navigation/SettingsDrawer.vue      |  4 +-
 .../{ => Notifications}/Notification.vue      |  0
 .../UploadProgress.vue}                       |  4 +-
 .../{LoadingView.vue => ViewLoader.vue}       |  6 +-
 .../src/{views/Home.vue => layouts/Main.vue}  | 53 ++++++++--
 frontend/src/layouts/Settings.vue             |  8 ++
 frontend/src/main.ts                          |  7 +-
 frontend/src/plugins/router.ts                | 51 +++++-----
 frontend/src/types/emitter.d.ts               |  5 -
 frontend/src/types/user.d.ts                  |  4 +
 frontend/src/utils/index.ts                   | 97 +++++++++++++++++--
 frontend/src/views/Administration.vue         |  2 +-
 frontend/src/views/Dashboard.vue              |  8 +-
 frontend/src/views/Gallery/Platform.vue       |  1 +
 frontend/src/views/Login.vue                  |  1 +
 frontend/src/views/Management.vue             |  6 +-
 frontend/src/views/Settings.vue               | 12 ---
 frontend/src/views/Setup.vue                  |  1 +
 frontend/src/views/UI.vue                     |  8 ++
 34 files changed, 226 insertions(+), 127 deletions(-)
 delete mode 100644 frontend/src/App.vue
 create mode 100644 frontend/src/RomM.vue
 rename frontend/src/{layouts => components}/Administration/Tasks.vue (99%)
 rename frontend/src/{layouts => components}/Dashboard/Collections.vue (100%)
 rename frontend/src/{layouts => components}/Dashboard/Platforms.vue (100%)
 rename frontend/src/{layouts => components}/Dashboard/Recent.vue (100%)
 rename frontend/src/{layouts => components}/Dashboard/Stats.vue (100%)
 rename frontend/src/{layouts => components}/Management/Excluded.vue (100%)
 rename frontend/src/{layouts => components}/Management/PlatformBinding.vue (100%)
 rename frontend/src/{layouts => components}/Management/PlatformVersions.vue (100%)
 rename frontend/src/{layouts => components}/Settings/Interface.vue (100%)
 rename frontend/src/{layouts => components}/Settings/Theme.vue (100%)
 rename frontend/src/components/common/{ => Notifications}/Notification.vue (100%)
 rename frontend/src/components/common/{UploadInProgress.vue => Notifications/UploadProgress.vue} (98%)
 rename frontend/src/components/common/{LoadingView.vue => ViewLoader.vue} (93%)
 rename frontend/src/{views/Home.vue => layouts/Main.vue} (79%)
 create mode 100644 frontend/src/layouts/Settings.vue
 create mode 100644 frontend/src/types/user.d.ts
 delete mode 100644 frontend/src/views/Settings.vue
 create mode 100644 frontend/src/views/UI.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
deleted file mode 100644
index 001e2c1ff..000000000
--- a/frontend/src/App.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import Notification from "@/components/common/Notification.vue";
-import UploadInProgress from "@/components/common/UploadInProgress.vue";
-import api from "@/services/api/index";
-import userApi from "@/services/api/user";
-import storeAuth from "@/stores/auth";
-import storeConfig from "@/stores/config";
-import storeHeartbeat from "@/stores/heartbeat";
-import { onBeforeMount } from "vue";
-import router from "./plugins/router";
-
-// Props
-const heartbeat = storeHeartbeat();
-const auth = storeAuth();
-const configStore = storeConfig();
-
-onBeforeMount(() => {
-  api.get("/heartbeat").then(async ({ data: data }) => {
-    heartbeat.set(data);
-    if (heartbeat.value.SHOW_SETUP_WIZARD) {
-      router.push({ name: "setup" });
-    } else {
-      await userApi
-        .fetchCurrentUser()
-        .then(({ data: user }) => {
-          auth.setUser(user);
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-
-      await api.get("/config").then(({ data: data }) => {
-        configStore.set(data);
-      });
-    }
-  });
-});
-</script>
-
-<template>
-  <v-app>
-    <v-main>
-      <notification />
-      <upload-in-progress />
-      <router-view />
-    </v-main>
-  </v-app>
-</template>
diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
new file mode 100644
index 000000000..518be9114
--- /dev/null
+++ b/frontend/src/RomM.vue
@@ -0,0 +1,7 @@
+<template>
+  <v-app>
+    <v-main>
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
diff --git a/frontend/src/layouts/Administration/Tasks.vue b/frontend/src/components/Administration/Tasks.vue
similarity index 99%
rename from frontend/src/layouts/Administration/Tasks.vue
rename to frontend/src/components/Administration/Tasks.vue
index 0264336a1..29a857a86 100644
--- a/frontend/src/layouts/Administration/Tasks.vue
+++ b/frontend/src/components/Administration/Tasks.vue
@@ -13,7 +13,6 @@ import { computed, inject } from "vue";
 const emitter = inject<Emitter<Events>>("emitter");
 const heartbeatStore = storeHeartbeat();
 const runningTasks = storeRunningTasks();
-
 const tasks = computed(() => [
   {
     title: heartbeatStore.value.WATCHER.TITLE,
@@ -47,7 +46,7 @@ const tasks = computed(() => [
   },
 ]);
 
-// Methods
+// Functions
 const runAllTasks = async () => {
   runningTasks.value = true;
   const result = await api.post("/tasks/run");
diff --git a/frontend/src/components/Administration/Users/Dialog/DeleteUser.vue b/frontend/src/components/Administration/Users/Dialog/DeleteUser.vue
index e49fc418d..71da45d3a 100644
--- a/frontend/src/components/Administration/Users/Dialog/DeleteUser.vue
+++ b/frontend/src/components/Administration/Users/Dialog/DeleteUser.vue
@@ -2,7 +2,8 @@
 import RDialog from "@/components/common/RDialog.vue";
 import userApi from "@/services/api/user";
 import storeUsers from "@/stores/users";
-import type { Events, UserItem } from "@/types/emitter";
+import type { Events } from "@/types/emitter";
+import type { UserItem } from "@/types/user";
 import { defaultAvatarPath } from "@/utils";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
diff --git a/frontend/src/components/Administration/Users/Dialog/EditUser.vue b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
index d1198dbc1..f32c657fb 100644
--- a/frontend/src/components/Administration/Users/Dialog/EditUser.vue
+++ b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
@@ -3,7 +3,8 @@ import RDialog from "@/components/common/RDialog.vue";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
 import storeUsers from "@/stores/users";
-import type { Events, UserItem } from "@/types/emitter";
+import type { Events } from "@/types/emitter";
+import type { UserItem } from "@/types/user";
 import { defaultAvatarPath } from "@/utils";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
diff --git a/frontend/src/layouts/Dashboard/Collections.vue b/frontend/src/components/Dashboard/Collections.vue
similarity index 100%
rename from frontend/src/layouts/Dashboard/Collections.vue
rename to frontend/src/components/Dashboard/Collections.vue
diff --git a/frontend/src/layouts/Dashboard/Platforms.vue b/frontend/src/components/Dashboard/Platforms.vue
similarity index 100%
rename from frontend/src/layouts/Dashboard/Platforms.vue
rename to frontend/src/components/Dashboard/Platforms.vue
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/components/Dashboard/Recent.vue
similarity index 100%
rename from frontend/src/layouts/Dashboard/Recent.vue
rename to frontend/src/components/Dashboard/Recent.vue
diff --git a/frontend/src/layouts/Dashboard/Stats.vue b/frontend/src/components/Dashboard/Stats.vue
similarity index 100%
rename from frontend/src/layouts/Dashboard/Stats.vue
rename to frontend/src/components/Dashboard/Stats.vue
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 1c5686701..68a6fd9d1 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -224,11 +224,18 @@ async function setAspectRatio() {
       <v-col cols="12">
         <r-section
           v-if="auth.scopes.includes('platforms.write')"
-          icon="mdi-aspect-ratio"
-          title="UI Settings"
+          icon="mdi-cog"
+          title="Settings"
           elevation="0"
         >
           <template #content>
+            <v-chip
+              label
+              variant="text"
+              class="ma-1"
+              prepend-icon="mdi-aspect-ratio"
+              >Set cover style</v-chip
+            >
             <v-item-group
               v-model="selectedAspectRatio"
               mandatory
diff --git a/frontend/src/layouts/Management/Excluded.vue b/frontend/src/components/Management/Excluded.vue
similarity index 100%
rename from frontend/src/layouts/Management/Excluded.vue
rename to frontend/src/components/Management/Excluded.vue
diff --git a/frontend/src/layouts/Management/PlatformBinding.vue b/frontend/src/components/Management/PlatformBinding.vue
similarity index 100%
rename from frontend/src/layouts/Management/PlatformBinding.vue
rename to frontend/src/components/Management/PlatformBinding.vue
diff --git a/frontend/src/layouts/Management/PlatformVersions.vue b/frontend/src/components/Management/PlatformVersions.vue
similarity index 100%
rename from frontend/src/layouts/Management/PlatformVersions.vue
rename to frontend/src/components/Management/PlatformVersions.vue
diff --git a/frontend/src/layouts/Settings/Interface.vue b/frontend/src/components/Settings/Interface.vue
similarity index 100%
rename from frontend/src/layouts/Settings/Interface.vue
rename to frontend/src/components/Settings/Interface.vue
diff --git a/frontend/src/layouts/Settings/Theme.vue b/frontend/src/components/Settings/Theme.vue
similarity index 100%
rename from frontend/src/layouts/Settings/Theme.vue
rename to frontend/src/components/Settings/Theme.vue
diff --git a/frontend/src/components/common/Navigation/SettingsDrawer.vue b/frontend/src/components/common/Navigation/SettingsDrawer.vue
index cb99c62d2..e3a8cf7cb 100644
--- a/frontend/src/components/common/Navigation/SettingsDrawer.vue
+++ b/frontend/src/components/common/Navigation/SettingsDrawer.vue
@@ -72,8 +72,8 @@ async function logout() {
         append-icon="mdi-account"
         >Profile</v-list-item
       >
-      <v-list-item :to="{ name: 'settings' }" append-icon="mdi-palette"
-        >UI Settings</v-list-item
+      <v-list-item :to="{ name: 'ui' }" append-icon="mdi-palette"
+        >User Interface</v-list-item
       >
       <v-list-item
         v-if="scopes.includes('platforms.write')"
diff --git a/frontend/src/components/common/Notification.vue b/frontend/src/components/common/Notifications/Notification.vue
similarity index 100%
rename from frontend/src/components/common/Notification.vue
rename to frontend/src/components/common/Notifications/Notification.vue
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/Notifications/UploadProgress.vue
similarity index 98%
rename from frontend/src/components/common/UploadInProgress.vue
rename to frontend/src/components/common/Notifications/UploadProgress.vue
index 8acb5c402..162312fd6 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/Notifications/UploadProgress.vue
@@ -5,11 +5,13 @@ import { storeToRefs } from "pinia";
 import { ref, watch } from "vue";
 import { useDisplay } from "vuetify";
 
+// Props
 const { xs } = useDisplay();
 const uploadStore = storeUpload();
 const { files } = storeToRefs(uploadStore);
 const show = ref(false);
 
+// Functions
 function clearFinished() {
   uploadStore.clearFinished();
 }
@@ -24,7 +26,7 @@ watch(files, (newList) => {
     id="upload-in-progress"
     v-model="show"
     transition="scroll-y-transition"
-    :timeout="100000000000"
+    :timeout="-1"
     absolute
     :location="xs ? 'bottom' : 'bottom right'"
     class="mb-4 mr-4"
diff --git a/frontend/src/components/common/LoadingView.vue b/frontend/src/components/common/ViewLoader.vue
similarity index 93%
rename from frontend/src/components/common/LoadingView.vue
rename to frontend/src/components/common/ViewLoader.vue
index a4d316a79..00aa794c3 100644
--- a/frontend/src/components/common/LoadingView.vue
+++ b/frontend/src/components/common/ViewLoader.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, inject } from "vue";
-import type { Emitter } from "mitt";
 import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
 
+// Props
 const show = ref(false);
 const scrim = ref(false);
-
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showLoadingDialog", (args) => {
   show.value = args.loading;
diff --git a/frontend/src/views/Home.vue b/frontend/src/layouts/Main.vue
similarity index 79%
rename from frontend/src/views/Home.vue
rename to frontend/src/layouts/Main.vue
index a139734b4..1bab82787 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/layouts/Main.vue
@@ -19,28 +19,37 @@ import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
 import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
 import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
 import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
-import LoadingView from "@/components/common/LoadingView.vue";
 import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
 import MainAppBar from "@/components/common/Navigation/MainAppBar.vue";
 import MainDrawer from "@/components/common/Navigation/MainDrawer.vue";
 import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
 import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
 import NewVersion from "@/components/common/NewVersion.vue";
+import Notification from "@/components/common/Notifications/Notification.vue";
+import UploadProgress from "@/components/common/Notifications/UploadProgress.vue";
 import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
 import SearchCoverDialog from "@/components/common/SearchCover.vue";
+import ViewLoader from "@/components/common/ViewLoader.vue";
 import collectionApi from "@/services/api/collection";
+import api from "@/services/api/index";
 import platformApi from "@/services/api/platform";
+import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
 import storeCollections from "@/stores/collections";
+import storeConfig from "@/stores/config";
+import storeHeartbeat from "@/stores/heartbeat";
 import storeNavigation from "@/stores/navigation";
 import storePlatforms from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeMount } from "vue";
 import { useDisplay } from "vuetify";
+import router from "../plugins/router";
 
 // Props
 const { smAndDown } = useDisplay();
+const heartbeat = storeHeartbeat();
+const configStore = storeConfig();
 const navigationStore = storeNavigation();
 const auth = storeAuth();
 const platformsStore = storePlatforms();
@@ -51,7 +60,28 @@ emitter?.on("refreshDrawer", async () => {
   platformsStore.set(platformData);
 });
 
+// Functions
 onBeforeMount(async () => {
+  await api.get("/heartbeat").then(async ({ data: data }) => {
+    heartbeat.set(data);
+    if (heartbeat.value.SHOW_SETUP_WIZARD) {
+      router.push({ name: "setup" });
+    } else {
+      await userApi
+        .fetchCurrentUser()
+        .then(({ data: user }) => {
+          auth.setUser(user);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+
+      await api.get("/config").then(({ data: data }) => {
+        configStore.set(data);
+      });
+    }
+  });
+
   await platformApi
     .getPlatforms()
     .then(({ data: platforms }) => {
@@ -78,17 +108,18 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <main-drawer v-if="!smAndDown" />
-
-  <main-app-bar v-if="smAndDown" />
-
+  <template v-if="!smAndDown">
+    <main-drawer />
+  </template>
+  <template v-else>
+    <main-app-bar />
+  </template>
   <platforms-drawer />
-
   <collections-drawer />
-
   <settings-drawer />
 
-  <new-version />
+  <notification />
+
   <router-view />
 
   <delete-platform-dialog />
@@ -113,7 +144,11 @@ onBeforeMount(async () => {
   <create-user-dialog />
   <edit-user-dialog />
   <delete-user-dialog />
-  <loading-view />
+
+  <view-loader />
+
+  <new-version />
+  <upload-progress />
 </template>
 <style scoped>
 .v-progress-linear {
diff --git a/frontend/src/layouts/Settings.vue b/frontend/src/layouts/Settings.vue
new file mode 100644
index 000000000..3e42fa4e5
--- /dev/null
+++ b/frontend/src/layouts/Settings.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import RFooter from "@/components/Settings/Footer.vue";
+</script>
+
+<template>
+  <router-view />
+  <r-footer />
+</template>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 6ee4c59cb..5ae409f18 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,17 +1,14 @@
 import { registerPlugins } from "@/plugins";
+import "@/styles/common.css";
 import "@/styles/fonts.css";
 import "@/styles/scrollbar.css";
-import "@/styles/common.css";
 import type { Events } from "@/types/emitter";
 import mitt from "mitt";
 import { createApp } from "vue";
-import App from "./App.vue";
+import App from "./RomM.vue";
 
 const emitter = mitt<Events>();
-
 const app = createApp(App);
-
 registerPlugins(app);
-
 app.provide("emitter", emitter);
 app.mount("#app");
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index 52a8eaed4..2a6935e8e 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -16,60 +16,67 @@ const routes = [
   {
     path: "/",
     name: "home",
-    component: () => import("@/views/Home.vue"),
+    component: () => import("@/layouts/Main.vue"),
     children: [
       {
-        path: "/",
+        path: "",
         name: "dashboard",
         component: () => import("@/views/Dashboard.vue"),
       },
       {
-        path: "/platform/:platform",
+        path: "platform/:platform",
         name: "platform",
         component: () => import("@/views/Gallery/Platform.vue"),
       },
       {
-        path: "/collection/:collection",
+        path: "collection/:collection",
         name: "collection",
         component: () => import("@/views/Gallery/Collection.vue"),
       },
       {
-        path: "/rom/:rom",
+        path: "rom/:rom",
         name: "rom",
         component: () => import("@/views/GameDetails.vue"),
       },
       {
-        path: "/rom/:rom/ejs",
+        path: "rom/:rom/ejs",
         name: "emulatorjs",
         component: () => import("@/views/EmulatorJS/Base.vue"),
       },
       {
-        path: "/rom/:rom/ruffle",
+        path: "rom/:rom/ruffle",
         name: "ruffle",
         component: () => import("@/views/RuffleRS/Base.vue"),
       },
       {
-        path: "/scan",
+        path: "scan",
         name: "scan",
         component: () => import("@/views/Scan.vue"),
       },
       {
-        path: "/management",
-        name: "management",
-        component: () => import("@/views/Management.vue"),
-      },
-      {
-        path: "/settings",
+        path: "settings",
         name: "settings",
-        component: () => import("@/views/Settings.vue"),
-      },
-      {
-        path: "/administration",
-        name: "administration",
-        component: () => import("@/views/Administration.vue"),
+        component: () => import("@/layouts/Settings.vue"),
+        children: [
+          {
+            path: "ui",
+            name: "ui",
+            component: () => import("@/views/UI.vue"),
+          },
+          {
+            path: "management",
+            name: "management",
+            component: () => import("@/views/Management.vue"),
+          },
+          {
+            path: "administration",
+            name: "administration",
+            component: () => import("@/views/Administration.vue"),
+          },
+        ],
       },
       {
-        path: "/:pathMatch(.*)*",
+        path: ":pathMatch(.*)*",
         name: "noMatch",
         component: () => import("@/views/Dashboard.vue"),
       },
@@ -92,7 +99,7 @@ router.beforeEach((to, _from, next) => {
 });
 
 router.afterEach(() => {
-  // Scroll to top to avoid annoying behaviour in mobile
+  // Scroll to top to avoid annoying behaviour on mobile
   window.scrollTo({ top: 0, left: 0 });
 });
 
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index f7ca33e13..ed6793e79 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -4,11 +4,6 @@ import type { Platform } from "@/stores/platforms";
 import type { SimpleRom } from "@/stores/roms";
 import type { User } from "@/stores/users";
 
-export type UserItem = User & {
-  password: string;
-  avatar?: File;
-};
-
 export type SnackbarStatus = {
   id?: number;
   msg: string;
diff --git a/frontend/src/types/user.d.ts b/frontend/src/types/user.d.ts
new file mode 100644
index 000000000..a05129b33
--- /dev/null
+++ b/frontend/src/types/user.d.ts
@@ -0,0 +1,4 @@
+export type UserItem = User & {
+  password: string;
+  avatar?: File;
+};
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index faee99ca9..642802ad4 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -3,6 +3,9 @@ import type { SimpleRom } from "@/stores/roms";
 import type { Heartbeat } from "@/stores/heartbeat";
 import type { RomUserStatus } from "@/__generated__";
 
+/**
+ * Views configuration object.
+ */
 export const views: Record<
   number,
   {
@@ -44,8 +47,17 @@ export const views: Record<
   },
 };
 
+/**
+ * Default path for user avatars.
+ */
 export const defaultAvatarPath = "/assets/default/user.png";
 
+/**
+ * Normalize a string by converting it to lowercase and removing diacritics.
+ *
+ * @param s The string to normalize.
+ * @returns The normalized string.
+ */
 export function normalizeString(s: string) {
   return s
     .toLowerCase()
@@ -53,6 +65,12 @@ export function normalizeString(s: string) {
     .replace(/[\u0300-\u036f]/g, "");
 }
 
+/**
+ * Convert a cron expression to a human-readable string.
+ *
+ * @param expression The cron expression to convert.
+ * @returns The human-readable string.
+ */
 export function convertCronExperssion(expression: string) {
   let convertedExpression = cronstrue.toString(expression, { verbose: true });
   convertedExpression =
@@ -61,6 +79,13 @@ export function convertCronExperssion(expression: string) {
   return convertedExpression;
 }
 
+/**
+ * Generate a download link for ROM content.
+ *
+ * @param rom The ROM object.
+ * @param files Optional array of file names to include in the download.
+ * @returns The download link.
+ */
 export function getDownloadLink({
   rom,
   files = [],
@@ -82,8 +107,7 @@ export function getDownloadLink({
  *
  * @param bytes Number of bytes.
  * @param decimals Number of decimal places to display.
- *
- * @return Formatted string.
+ * @returns Formatted string.
  */
 export function formatBytes(bytes: number, decimals = 2) {
   if (bytes === 0) return "0 Bytes";
@@ -95,11 +119,10 @@ export function formatBytes(bytes: number, decimals = 2) {
 }
 
 /**
+ * Format a timestamp to a human-readable string.
  *
- * Format timestamp to human-readable text
- *
- * @param string timestamp
- * @returns string Formatted timestamp
+ * @param timestamp The timestamp to format.
+ * @returns The formatted timestamp.
  */
 export function formatTimestamp(timestamp: string | null) {
   if (!timestamp) return "-";
@@ -108,6 +131,12 @@ export function formatTimestamp(timestamp: string | null) {
   return date.toLocaleString("en-GB");
 }
 
+/**
+ * Convert a region code to an emoji.
+ *
+ * @param region The region code.
+ * @returns The corresponding emoji.
+ */
 export function regionToEmoji(region: string) {
   switch (region.toLowerCase()) {
     case "as":
@@ -203,6 +232,12 @@ export function regionToEmoji(region: string) {
   }
 }
 
+/**
+ * Convert a language code to an emoji.
+ *
+ * @param language The language code.
+ * @returns The corresponding emoji.
+ */
 export function languageToEmoji(language: string) {
   switch (language.toLowerCase()) {
     case "ar":
@@ -264,6 +299,9 @@ export function languageToEmoji(language: string) {
   }
 }
 
+/**
+ * Map of supported EJS cores for each platform.
+ */
 const _EJS_CORES_MAP = {
   "3do": ["opera"],
   amiga: ["puae"],
@@ -343,10 +381,23 @@ const _EJS_CORES_MAP = {
 
 export type EJSPlatformSlug = keyof typeof _EJS_CORES_MAP;
 
+/**
+ * Get the supported EJS cores for a given platform.
+ *
+ * @param platformSlug The platform slug.
+ * @returns An array of supported cores.
+ */
 export function getSupportedEJSCores(platformSlug: string) {
   return _EJS_CORES_MAP[platformSlug.toLowerCase() as EJSPlatformSlug] || [];
 }
 
+/**
+ * Check if EJS emulation is supported for a given platform.
+ *
+ * @param platformSlug The platform slug.
+ * @param heartbeat The heartbeat object.
+ * @returns True if supported, false otherwise.
+ */
 export function isEJSEmulationSupported(
   platformSlug: string,
   heartbeat: Heartbeat,
@@ -357,6 +408,13 @@ export function isEJSEmulationSupported(
   );
 }
 
+/**
+ * Check if Ruffle emulation is supported for a given platform.
+ *
+ * @param platformSlug The platform slug.
+ * @param heartbeat The heartbeat object.
+ * @returns True if supported, false otherwise.
+ */
 export function isRuffleEmulationSupported(
   platformSlug: string,
   heartbeat: Heartbeat,
@@ -369,6 +427,9 @@ export function isRuffleEmulationSupported(
 
 type PlayingStatus = RomUserStatus | "backlogged" | "now_playing" | "hidden";
 
+/**
+ * Array of difficulty emojis.
+ */
 export const difficultyEmojis = [
   "😴",
   "🥱",
@@ -382,6 +443,9 @@ export const difficultyEmojis = [
   "😵",
 ];
 
+/**
+ * Map of ROM statuses to their corresponding emoji and text.
+ */
 export const romStatusMap: Record<
   PlayingStatus,
   { emoji: string; text: string }
@@ -396,10 +460,19 @@ export const romStatusMap: Record<
   hidden: { emoji: "👻", text: "Hidden" },
 };
 
+/**
+ * Inverse map of ROM statuses from text to status key.
+ */
 const inverseRomStatusMap = Object.fromEntries(
   Object.entries(romStatusMap).map(([key, value]) => [value.text, key]),
 ) as Record<string, PlayingStatus>;
 
+/**
+ * Get the emoji for a given ROM status.
+ *
+ * @param status The ROM status.
+ * @returns The corresponding emoji.
+ */
 export function getEmojiForStatus(status: PlayingStatus) {
   if (status) {
     return romStatusMap[status].emoji;
@@ -408,6 +481,12 @@ export function getEmojiForStatus(status: PlayingStatus) {
   }
 }
 
+/**
+ * Get the text for a given ROM status.
+ *
+ * @param status The ROM status.
+ * @returns The corresponding text.
+ */
 export function getTextForStatus(status: PlayingStatus) {
   if (status) {
     return romStatusMap[status].text;
@@ -416,6 +495,12 @@ export function getTextForStatus(status: PlayingStatus) {
   }
 }
 
+/**
+ * Get the status key for a given text.
+ *
+ * @param text The text to convert.
+ * @returns The corresponding status key.
+ */
 export function getStatusKeyForText(text: string) {
   return inverseRomStatusMap[text];
 }
diff --git a/frontend/src/views/Administration.vue b/frontend/src/views/Administration.vue
index 3e8f5abcf..00662f320 100644
--- a/frontend/src/views/Administration.vue
+++ b/frontend/src/views/Administration.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import UsersTable from "@/components/Administration/Users/Table.vue";
-import Tasks from "@/layouts/Administration/Tasks.vue";
+import Tasks from "@/components/Administration/Tasks.vue";
 import storeAuth from "@/stores/auth";
 
 // Props
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index ad0814bac..c871b66f1 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Collections from "@/layouts/Dashboard/Collections.vue";
-import Platforms from "@/layouts/Dashboard/Platforms.vue";
-import recentlyAdded from "@/layouts/Dashboard/Recent.vue";
-import Stats from "@/layouts/Dashboard/Stats.vue";
+import Collections from "@/components/Dashboard/Collections.vue";
+import Platforms from "@/components/Dashboard/Platforms.vue";
+import recentlyAdded from "@/components/Dashboard/Recent.vue";
+import Stats from "@/components/Dashboard/Stats.vue";
 import romApi from "@/services/api/rom";
 import storeCollections from "@/stores/collections";
 import storePlatforms from "@/stores/platforms";
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 4b815a444..e9e4a5712 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -42,6 +42,7 @@ let timeout: ReturnType<typeof setTimeout>;
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("filter", onFilterChange);
 
+// Functions
 async function fetchRoms() {
   if (gettingRoms.value) return;
 
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index ab89c816d..96339b024 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -16,6 +16,7 @@ const password = ref("");
 const visiblePassword = ref(false);
 const logging = ref(false);
 
+// Functions
 async function login() {
   logging.value = true;
 
diff --git a/frontend/src/views/Management.vue b/frontend/src/views/Management.vue
index f3ed83279..8d03b9621 100644
--- a/frontend/src/views/Management.vue
+++ b/frontend/src/views/Management.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Excluded from "@/layouts/Management/Excluded.vue";
-import PlatformBinding from "@/layouts/Management/PlatformBinding.vue";
-import PlatformVersions from "@/layouts/Management/PlatformVersions.vue";
+import Excluded from "@/components/Management/Excluded.vue";
+import PlatformBinding from "@/components/Management/PlatformBinding.vue";
+import PlatformVersions from "@/components/Management/PlatformVersions.vue";
 </script>
 
 <template>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
deleted file mode 100644
index 84411ceea..000000000
--- a/frontend/src/views/Settings.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import RFooter from "@/components/Settings/Footer.vue";
-import Interface from "@/layouts/Settings/Interface.vue";
-import Theme from "@/layouts/Settings/Theme.vue";
-
-// Props
-</script>
-<template>
-  <theme />
-  <interface />
-  <r-footer />
-</template>
diff --git a/frontend/src/views/Setup.vue b/frontend/src/views/Setup.vue
index fad9421ec..efb0e616e 100644
--- a/frontend/src/views/Setup.vue
+++ b/frontend/src/views/Setup.vue
@@ -48,6 +48,7 @@ const filledAdminUser = computed(
 const isFirstStep = computed(() => step.value == 1);
 const isLastStep = computed(() => step.value == 2);
 
+// Functions
 async function finishWizard() {
   await userApi
     .createUser(defaultAdminUser.value)
diff --git a/frontend/src/views/UI.vue b/frontend/src/views/UI.vue
new file mode 100644
index 000000000..ac4922df9
--- /dev/null
+++ b/frontend/src/views/UI.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import Interface from "@/components/Settings/Interface.vue";
+import Theme from "@/components/Settings/Theme.vue";
+</script>
+<template>
+  <theme />
+  <interface />
+</template>

From 0bb50faa820237d77a680678a6189b4456efbfe3 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 3 Dec 2024 17:58:46 +0000
Subject: [PATCH 02/49] added inset property to switches and improved
 public/private label handling in collection dialog

---
 .../src/components/Administration/Users/Table.vue    |  1 +
 frontend/src/components/Settings/InterfaceOption.vue |  1 +
 .../common/Collection/Dialog/EditCollection.vue      | 12 ++++++++----
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Administration/Users/Table.vue b/frontend/src/components/Administration/Users/Table.vue
index 25697193c..735af43c3 100644
--- a/frontend/src/components/Administration/Users/Table.vue
+++ b/frontend/src/components/Administration/Users/Table.vue
@@ -139,6 +139,7 @@ onMounted(() => {
         </template>
         <template #item.enabled="{ item }">
           <v-switch
+            inset
             v-model="item.enabled"
             color="romm-accent-1"
             :disabled="item.id == auth.user?.id"
diff --git a/frontend/src/components/Settings/InterfaceOption.vue b/frontend/src/components/Settings/InterfaceOption.vue
index e35bc96ae..bfdfa6b92 100644
--- a/frontend/src/components/Settings/InterfaceOption.vue
+++ b/frontend/src/components/Settings/InterfaceOption.vue
@@ -29,6 +29,7 @@ const emit = defineEmits(["update:modelValue"]);
 
       <template #append>
         <v-switch
+          inset
           :model-value="modelValue"
           @update:model-value="(value) => emit('update:modelValue', value)"
           :class="{ 'pr-16': !xs }"
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index 91085b872..e885822ae 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -141,14 +141,18 @@ function closeDialog() {
             <v-col>
               <v-switch
                 v-model="collection.is_public"
-                :label="
+                color="romm-accent-1"
+                class="px-2"
+                false-icon="mdi-lock"
+                true-icon="mdi-lock-open"
+                inset
+                persistent-hint
+                message="Public (visible to everyone)"
+                :hint="
                   collection.is_public
                     ? 'Public (visible to everyone)'
                     : 'Private (only visible to me)'
                 "
-                color="romm-accent-1"
-                class="px-2"
-                hide-details
               />
             </v-col>
           </v-row>

From 4d4cf831e214c85da3d6e41ab3cd9dcb02f020db Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 3 Dec 2024 23:33:36 +0000
Subject: [PATCH 03/49] improved file info display

---
 .../src/components/Details/Info/FileInfo.vue  | 29 ++++++-------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index 18dac9539..ba426f6e8 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -14,6 +14,11 @@ const props = defineProps<{ rom: DetailedRom }>();
 const downloadStore = storeDownload();
 const auth = storeAuth();
 const romUser = ref(props.rom.rom_user);
+const romInfo = ref([
+  { label: "SHA-1", value: props.rom.sha1_hash },
+  { label: "MD5", value: props.rom.md5_hash },
+  { label: "CRC", value: props.rom.crc_hash },
+]);
 
 // Functions
 function collectionsWithoutFavourites(collections: Collection[]) {
@@ -111,33 +116,17 @@ watch(
           <span>Info</span>
         </v-col>
         <v-col class="my-1">
-          <v-chip size="small" label>
+          <v-chip size="small" class="my-1 mr-2" label>
             Size: {{ formatBytes(rom.file_size_bytes) }}
           </v-chip>
           <v-chip
+            v-for="info in romInfo"
             v-if="!rom.multi && rom.sha1_hash"
             size="small"
             label
-            class="ml-1"
+            class="my-1 mr-2"
+            >{{ info.label }}: {{ info.value }}</v-chip
           >
-            SHA-1: {{ rom.sha1_hash }}
-          </v-chip>
-          <v-chip
-            v-if="!rom.multi && rom.md5_hash"
-            size="small"
-            label
-            class="ml-1"
-          >
-            MD5: {{ rom.md5_hash }}
-          </v-chip>
-          <v-chip
-            v-if="!rom.multi && rom.crc_hash"
-            size="small"
-            label
-            class="ml-1"
-          >
-            CRC: {{ rom.crc_hash }}
-          </v-chip>
         </v-col>
       </v-row>
       <v-row v-if="rom.tags.length > 0" class="align-center my-3" no-gutters>

From 00cb0b6e7472715487c08d8e38bd53ceee44433c Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 3 Dec 2024 23:33:54 +0000
Subject: [PATCH 04/49] unified edit rom and edit collection dialog

---
 .../Collection/Dialog/EditCollection.vue      | 38 +++++------
 .../src/components/common/Game/Card/Base.vue  |  3 +-
 .../components/common/Game/Dialog/EditRom.vue | 66 ++++++-------------
 3 files changed, 38 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index e885822ae..664f07141 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -12,7 +12,7 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { mdAndUp } = useDisplay();
+const { smAndDown, mdAndUp, lgAndUp } = useDisplay();
 const show = ref(false);
 const storeCollection = collectionStore();
 const collection = ref<UpdatedCollection>({} as UpdatedCollection);
@@ -106,12 +106,12 @@ function closeDialog() {
     @close="closeDialog"
     v-model="show"
     icon="mdi-pencil-box"
-    :width="mdAndUp ? '55vw' : '95vw'"
+    :width="lgAndUp ? '65vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" lg="7" xl="9">
-          <v-row class="pa-2" no-gutters>
+        <v-col cols="12" md="8" xl="9">
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-text-field
                 v-model="collection.name"
@@ -124,7 +124,7 @@ function closeDialog() {
               />
             </v-col>
           </v-row>
-          <v-row class="pa-2" no-gutters>
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-text-field
                 v-model="collection.description"
@@ -137,7 +137,7 @@ function closeDialog() {
               />
             </v-col>
           </v-row>
-          <v-row class="pa-2" no-gutters>
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-switch
                 v-model="collection.is_public"
@@ -146,9 +146,9 @@ function closeDialog() {
                 false-icon="mdi-lock"
                 true-icon="mdi-lock-open"
                 inset
-                persistent-hint
+                hide-details
                 message="Public (visible to everyone)"
-                :hint="
+                :label="
                   collection.is_public
                     ? 'Public (visible to everyone)'
                     : 'Private (only visible to me)'
@@ -157,9 +157,13 @@ function closeDialog() {
             </v-col>
           </v-row>
         </v-col>
-        <v-col>
-          <v-row class="pa-2 justify-center" no-gutters>
-            <v-col class="cover">
+        <v-col cols="12" md="4" xl="3">
+          <v-row
+            class="justify-center"
+            :class="{ 'mt-4': smAndDown }"
+            no-gutters
+          >
+            <v-col style="max-width: 240px">
               <collection-card
                 :key="collection.updated_at"
                 :show-title="false"
@@ -215,9 +219,7 @@ function closeDialog() {
           </v-row>
         </v-col>
       </v-row>
-    </template>
-    <template #append>
-      <v-row class="justify-center mt-4 mb-2" no-gutters>
+      <v-row class="justify-center pa-2 mt-1" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
           <v-btn class="text-romm-green bg-terciary" @click="editCollection">
@@ -228,11 +230,3 @@ function closeDialog() {
     </template>
   </r-dialog>
 </template>
-<style scoped>
-.cover {
-  min-width: 240px;
-  min-height: 330px;
-  max-width: 240px;
-  max-height: 330px;
-}
-</style>
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index ed287828e..3e619b1fe 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -28,7 +28,7 @@ const props = withDefaults(
     showFav?: boolean;
     withBorder?: boolean;
     withBorderRommAccent?: boolean;
-    withLink: boolean;
+    withLink?: boolean;
     src?: string;
   }>(),
   {
@@ -63,7 +63,6 @@ const handleTouchEnd = (event: TouchEvent) => {
   emit("touchend", { event: event, rom: props.rom });
 };
 const downloadStore = storeDownload();
-const card = ref();
 const theme = useTheme();
 const galleryViewStore = storeGalleryView();
 const collectionsStore = storeCollections();
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 364a5b217..f2b96b412 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -198,34 +198,14 @@ function closeDialog() {
               />
             </v-col>
           </v-row>
+        </v-col>
+        <v-col cols="12" md="4" xl="3">
           <v-row
-            v-if="mdAndUp"
-            class="justify-space-between mt-4 mb-2 mx-2"
+            class="justify-center"
+            :class="{ 'mt-4': smAndDown }"
             no-gutters
           >
-            <v-btn-group divided density="compact">
-              <v-btn
-                :disabled="noMetadataMatch"
-                :class="` ${
-                  noMetadataMatch ? '' : 'bg-terciary text-romm-red'
-                }`"
-                variant="flat"
-                @click="unmatchRom"
-              >
-                Unmatch Rom
-              </v-btn>
-            </v-btn-group>
-            <v-btn-group divided density="compact">
-              <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-              <v-btn class="text-romm-green bg-terciary" @click="updateRom">
-                Save
-              </v-btn>
-            </v-btn-group>
-          </v-row>
-        </v-col>
-        <v-col cols="12" md="4" xl="3">
-          <v-row class="justify-center" no-gutters>
-            <v-col style="max-width: 240px" :class="{ 'my-4': smAndDown }">
+            <v-col style="max-width: 240px">
               <game-card :rom="rom" :src="imagePreviewUrl">
                 <template #append-inner-right>
                   <v-btn-group rounded="0" divided density="compact">
@@ -273,28 +253,24 @@ function closeDialog() {
               </game-card>
             </v-col>
           </v-row>
-          <v-row v-if="smAndDown" class="justify-space-between pa-2" no-gutters>
-            <v-btn-group divided density="compact" class="my-1">
-              <v-btn
-                :disabled="noMetadataMatch"
-                :class="` ${
-                  noMetadataMatch ? '' : 'bg-terciary text-romm-red'
-                }`"
-                variant="flat"
-                @click="unmatchRom"
-              >
-                Unmatch Rom
-              </v-btn>
-            </v-btn-group>
-            <v-btn-group divided density="compact" class="my-1">
-              <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-              <v-btn class="text-romm-green bg-terciary" @click="updateRom">
-                Save
-              </v-btn>
-            </v-btn-group>
-          </v-row>
         </v-col>
       </v-row>
+      <v-row class="justify-space-between px-4 py-2 mt-1" no-gutters>
+        <v-btn
+          :disabled="noMetadataMatch"
+          :class="` ${noMetadataMatch ? '' : 'bg-terciary text-romm-red'}`"
+          variant="flat"
+          @click="unmatchRom"
+        >
+          Unmatch Rom
+        </v-btn>
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="text-romm-green bg-terciary" @click="updateRom">
+            Save
+          </v-btn>
+        </v-btn-group>
+      </v-row>
     </template>
   </r-dialog>
 </template>

From 4e6e6db45f560da24e16809bc214b5076fe8379d Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 4 Dec 2024 01:22:57 +0000
Subject: [PATCH 05/49] unify platform and collection layout

---
 .../Gallery/AppBar/Collection/Base.vue        | 116 +-------------
 .../Collection/CollectionInfoDrawer.vue       | 139 ++++++++++++++++
 .../AppBar/Platform/PlatformInfoDrawer.vue    | 150 +++++++++---------
 frontend/src/stores/navigation.ts             |  10 ++
 4 files changed, 229 insertions(+), 186 deletions(-)
 create mode 100644 frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue

diff --git a/frontend/src/components/Gallery/AppBar/Collection/Base.vue b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
index 98f59a29a..5960cbff1 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
+import CollectionInfoDrawer from "@/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue";
 import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
 import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
 import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
@@ -11,6 +12,7 @@ import storeRoms from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
+import storeNavigation from "@/stores/navigation";
 import { inject, ref } from "vue";
 import { useDisplay } from "vuetify";
 
@@ -21,29 +23,9 @@ const viewportWidth = ref(window.innerWidth);
 const auth = storeAuth();
 const romsStore = storeRoms();
 const { currentCollection } = storeToRefs(romsStore);
+const navigationStore = storeNavigation();
+const { activeCollectionInfoDrawer } = storeToRefs(navigationStore);
 const open = ref(false);
-const collectionInfoFields = [
-  {
-    key: "name",
-    label: "Name",
-  },
-  {
-    key: "description",
-    label: "Description",
-  },
-  {
-    key: "rom_count",
-    label: "Roms",
-  },
-  {
-    key: "user__username",
-    label: "Owner",
-  },
-  {
-    key: "is_public",
-    label: "Public",
-  },
-];
 </script>
 
 <template>
@@ -58,9 +40,9 @@ const collectionInfoFields = [
   >
     <template #prepend>
       <v-btn
-        :color="open ? 'romm-accent-1' : ''"
+        :color="activeCollectionInfoDrawer ? 'romm-accent-1' : ''"
         rounded="0"
-        @click="open = !open"
+        @click="navigationStore.swtichActiveCollectionInfoDrawer"
         icon="mdi-information"
       ></v-btn>
       <filter-btn />
@@ -72,91 +54,7 @@ const collectionInfoFields = [
     </template>
   </v-app-bar>
 
-  <v-navigation-drawer
-    v-model="open"
-    floating
-    mobile
-    :width="xs ? viewportWidth : '500'"
-    v-if="currentCollection"
-  >
-    <v-row no-gutters class="text-center justify-center align-center mt-4">
-      <v-col style="max-width: 240px">
-        <collection-card
-          :key="currentCollection.updated_at"
-          :collection="currentCollection"
-        />
-        <v-btn
-          rounded="4"
-          @click="
-            emitter?.emit('showEditCollectionDialog', { ...currentCollection })
-          "
-          class="mt-4 bg-terciary"
-        >
-          <template #prepend>
-            <v-icon>mdi-pencil-box</v-icon>
-          </template>
-          Edit collection
-        </v-btn>
-      </v-col>
-    </v-row>
-    <v-row no-gutters class="mt-4">
-      <v-col cols="12">
-        <v-card class="mx-4 bg-terciary" elevation="0">
-          <v-card-text class="pa-4">
-            <template
-              v-for="(field, index) in collectionInfoFields"
-              :key="field.key"
-            >
-              <div
-                v-if="
-                  currentCollection[field.key as keyof typeof currentCollection]
-                "
-                :class="{ 'mt-4': index !== 0 }"
-              >
-                <p class="text-subtitle-1 text-decoration-underline">
-                  {{ field.label }}
-                </p>
-                <p class="text-subtitle-2">
-                  {{
-                    currentCollection[
-                      field.key as keyof typeof currentCollection
-                    ]
-                  }}
-                </p>
-              </div>
-            </template>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-    <v-row no-gutters class="mt-4">
-      <v-col cols="12">
-        <r-section
-          v-if="auth.scopes.includes('collections.write')"
-          icon="mdi-alert"
-          icon-color="red"
-          title="Danger zone"
-          elevation="0"
-        >
-          <template #content>
-            <div class="text-center my-2">
-              <v-btn
-                class="text-romm-red bg-terciary"
-                variant="flat"
-                @click="
-                  emitter?.emit('showDeleteCollectionDialog', currentCollection)
-                "
-              >
-                <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
-                Delete collection
-              </v-btn>
-            </div>
-          </template>
-        </r-section>
-      </v-col>
-    </v-row>
-  </v-navigation-drawer>
-
+  <collection-info-drawer />
   <filter-drawer />
 </template>
 
diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
new file mode 100644
index 000000000..5ea3b4fd7
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+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 GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
+import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
+import CollectionCard from "@/components/common/Collection/Card.vue";
+import RSection from "@/components/common/RSection.vue";
+import storeAuth from "@/stores/auth";
+import storeRoms from "@/stores/roms";
+import storeNavigation from "@/stores/navigation";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { inject, ref } from "vue";
+import { useDisplay } from "vuetify";
+
+// Props
+const { xs } = useDisplay();
+const emitter = inject<Emitter<Events>>("emitter");
+const viewportWidth = ref(window.innerWidth);
+const auth = storeAuth();
+const romsStore = storeRoms();
+const { currentCollection } = storeToRefs(romsStore);
+const navigationStore = storeNavigation();
+const { activeCollectionInfoDrawer } = storeToRefs(navigationStore);
+const collectionInfoFields = [
+  {
+    key: "name",
+    label: "Name",
+  },
+  {
+    key: "description",
+    label: "Description",
+  },
+  {
+    key: "rom_count",
+    label: "Roms",
+  },
+  {
+    key: "user__username",
+    label: "Owner",
+  },
+  {
+    key: "is_public",
+    label: "Public",
+  },
+];
+</script>
+
+<template>
+  <v-navigation-drawer
+    v-model="activeCollectionInfoDrawer"
+    floating
+    mobile
+    :width="xs ? viewportWidth : '500'"
+    v-if="currentCollection"
+  >
+    <v-row no-gutters class="justify-center align-center pa-4">
+      <v-col style="max-width: 240px" cols="12">
+        <div class="text-center justify-center align-center">
+          <collection-card
+            :key="currentCollection.updated_at"
+            :collection="currentCollection"
+          />
+        </div>
+        <div
+          class="text-center mt-4"
+          v-if="auth.scopes.includes('collections.write')"
+        >
+          <v-btn
+            rounded="4"
+            @click="
+              emitter?.emit('showEditCollectionDialog', {
+                ...currentCollection,
+              })
+            "
+            class="bg-terciary"
+          >
+            <template #prepend>
+              <v-icon>mdi-pencil-box</v-icon>
+            </template>
+            Edit collection
+          </v-btn>
+        </div>
+      </v-col>
+      <v-col cols="12">
+        <v-card class="mt-4 bg-terciary fill-width" elevation="0">
+          <v-card-text class="pa-4">
+            <template
+              v-for="(field, index) in collectionInfoFields"
+              :key="field.key"
+            >
+              <div
+                v-if="
+                  currentCollection[field.key as keyof typeof currentCollection]
+                "
+                :class="{ 'mt-4': index !== 0 }"
+              >
+                <p class="text-subtitle-1 text-decoration-underline">
+                  {{ field.label }}
+                </p>
+                <p class="text-subtitle-2">
+                  {{
+                    currentCollection[
+                      field.key as keyof typeof currentCollection
+                    ]
+                  }}
+                </p>
+              </div>
+            </template>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+    <r-section
+      v-if="auth.scopes.includes('collections.write')"
+      icon="mdi-alert"
+      icon-color="red"
+      title="Danger zone"
+      elevation="0"
+    >
+      <template #content>
+        <div class="text-center">
+          <v-btn
+            class="text-romm-red bg-terciary ma-2"
+            variant="flat"
+            @click="
+              emitter?.emit('showDeleteCollectionDialog', currentCollection)
+            "
+          >
+            <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
+            Delete collection
+          </v-btn>
+        </div>
+      </template>
+    </r-section>
+  </v-navigation-drawer>
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 1c08fe5a4..187050f16 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -125,9 +125,9 @@ async function setAspectRatio() {
     :width="xs ? viewportWidth : '500'"
     v-if="currentPlatform"
   >
-    <v-row no-gutters class="justify-center align-center">
+    <v-row no-gutters class="justify-center align-center pa-4">
       <v-col cols="12">
-        <div class="text-center mt-2">
+        <div class="text-center justify-center align-center">
           <platform-icon
             :slug="currentPlatform.slug"
             :name="currentPlatform.name"
@@ -194,7 +194,7 @@ async function setAspectRatio() {
             <span>ID: {{ currentPlatform.moby_id }}</span>
           </v-chip>
         </div>
-        <v-card class="mt-4 mx-4 bg-terciary fill-width" elevation="0">
+        <v-card class="mt-4 bg-terciary fill-width" elevation="0">
           <v-card-text class="pa-4">
             <template
               v-for="(field, index) in platformInfoFields"
@@ -220,84 +220,80 @@ async function setAspectRatio() {
         </v-card>
       </v-col>
     </v-row>
-    <v-row class="mt-4" no-gutters>
-      <v-col cols="12">
-        <r-section
-          v-if="auth.scopes.includes('platforms.write')"
-          icon="mdi-cog"
-          title="Settings"
-          elevation="0"
-        >
-          <template #content>
-            <v-chip
-              label
-              variant="text"
-              class="ma-1"
-              prepend-icon="mdi-aspect-ratio"
-              >Set cover style</v-chip
-            >
-            <v-item-group
-              v-model="selectedAspectRatio"
-              mandatory
-              @update:model-value="setAspectRatio"
+    <r-section
+      v-if="auth.scopes.includes('platforms.write')"
+      icon="mdi-cog"
+      title="Settings"
+      elevation="0"
+    >
+      <template #content>
+        <div class="text-center">
+          <v-chip label variant="text" prepend-icon="mdi-aspect-ratio"
+            >Set cover style</v-chip
+          >
+          <v-divider class="border-opacity-25 mx-2" />
+          <v-item-group
+            v-model="selectedAspectRatio"
+            mandatory
+            @update:model-value="setAspectRatio"
+          >
+            <v-row
+              no-gutters
+              class="text-center justify-center align-center pa-2"
             >
-              <v-row no-gutters class="text-center justify-center align-center">
-                <v-col class="ma-2" v-for="aspectRatio in aspectRatioOptions">
-                  <v-item v-slot="{ isSelected, toggle }">
-                    <v-card
-                      :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
-                      variant="outlined"
-                      @click="toggle"
+              <v-col class="pa-2" v-for="aspectRatio in aspectRatioOptions">
+                <v-item v-slot="{ isSelected, toggle }">
+                  <v-card
+                    :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
+                    variant="outlined"
+                    @click="toggle"
+                  >
+                    <v-card-text
+                      class="pa-0 text-center align-center justify-center"
                     >
-                      <v-card-text
-                        class="pa-0 text-center align-center justify-center"
+                      <v-img
+                        :aspect-ratio="aspectRatio.size"
+                        cover
+                        src="/assets/login_bg.png"
+                        :class="{ greyscale: !isSelected }"
+                        class="d-flex align-center justify-center"
                       >
-                        <v-img
-                          :aspect-ratio="aspectRatio.size"
-                          cover
-                          src="/assets/login_bg.png"
-                          :class="{ greyscale: !isSelected }"
-                          class="d-flex align-center justify-center"
-                        >
-                          <p class="text-h5 text-romm-white">
-                            {{ aspectRatio.name }}
-                          </p>
-                        </v-img>
-                        <p class="text-center mx-2 text-caption">
-                          {{ aspectRatio.source }}
+                        <p class="text-h5 text-romm-white">
+                          {{ aspectRatio.name }}
                         </p>
-                      </v-card-text>
-                    </v-card>
-                  </v-item>
-                </v-col>
-              </v-row>
-            </v-item-group>
-          </template>
-        </r-section>
-        <r-section
-          v-if="auth.scopes.includes('platforms.write')"
-          icon="mdi-alert"
-          icon-color="red"
-          title="Danger zone"
-          elevation="0"
-        >
-          <template #content>
-            <div class="text-center my-2">
-              <v-btn
-                class="text-romm-red bg-terciary"
-                variant="flat"
-                @click="
-                  emitter?.emit('showDeletePlatformDialog', currentPlatform)
-                "
-              >
-                <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
-                Delete platform
-              </v-btn>
-            </div>
-          </template>
-        </r-section>
-      </v-col>
-    </v-row>
+                      </v-img>
+                      <p class="text-center text-caption">
+                        {{ aspectRatio.source }}
+                      </p>
+                    </v-card-text>
+                  </v-card>
+                </v-item>
+              </v-col>
+            </v-row>
+          </v-item-group>
+        </div>
+      </template>
+    </r-section>
+    <r-section
+      v-if="auth.scopes.includes('platforms.write')"
+      icon="mdi-alert"
+      icon-color="red"
+      title="Danger zone"
+      elevation="0"
+    >
+      <template #content>
+        <div class="text-center">
+          <v-btn
+            class="text-romm-red bg-terciary ma-2"
+            variant="flat"
+            @click="emitter?.emit('showDeletePlatformDialog', currentPlatform)"
+          >
+            <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
+            Delete platform
+          </v-btn>
+        </div>
+      </template>
+    </r-section>
   </v-navigation-drawer>
 </template>
 <style scoped>
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index f948cf72a..cb50fd273 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -6,6 +6,7 @@ export default defineStore("navigation", {
     activeCollectionsDrawer: false,
     activeSettingsDrawer: false,
     activePlatformInfoDrawer: false,
+    activeCollectionInfoDrawer: false,
   }),
 
   actions: {
@@ -25,6 +26,10 @@ export default defineStore("navigation", {
       this.resetDrawersExcept("activePlatformInfoDrawer");
       this.activePlatformInfoDrawer = !this.activePlatformInfoDrawer;
     },
+    swtichActiveCollectionInfoDrawer() {
+      this.resetDrawersExcept("activeCollectionInfoDrawer");
+      this.activeCollectionInfoDrawer = !this.activeCollectionInfoDrawer;
+    },
     goHome() {
       this.resetDrawers();
       this.$router.push({ name: "dashboard" });
@@ -38,6 +43,7 @@ export default defineStore("navigation", {
       this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = false;
       this.activePlatformInfoDrawer = false;
+      this.activeCollectionInfoDrawer = false;
     },
     resetDrawersExcept(drawer: string) {
       this.activePlatformsDrawer =
@@ -52,6 +58,10 @@ export default defineStore("navigation", {
         drawer === "activePlatformInfoDrawer"
           ? this.activePlatformInfoDrawer
           : false;
+      this.activeCollectionInfoDrawer =
+        drawer === "activeCollectionInfoDrawer"
+          ? this.activeCollectionInfoDrawer
+          : false;
     },
   },
 });

From 83bbde870f389782c1f327f4ebcba7cb8fa6a124 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 4 Dec 2024 12:45:29 +0000
Subject: [PATCH 06/49] refactor: clean up MatchRom.vue component and improve
 styling

---
 .../common/Game/Dialog/MatchRom.vue           | 53 +++++--------------
 1 file changed, 14 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index d301dd32e..0393f118f 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -244,10 +244,13 @@ onBeforeUnmount(() => {
           <v-avatar
             @click="toggleSourceFilter('IGDB')"
             v-bind="props"
-            class="ml-3 source-filter"
+            class="ml-3 cursor-pointer opacity-40"
             :class="{
-              filtered: isIGDBFiltered,
-              disabled: !heartbeat.value.METADATA_SOURCES.IGDB_API_ENABLED,
+              'opacity-100':
+                isIGDBFiltered &&
+                heartbeat.value.METADATA_SOURCES.IGDB_API_ENABLED,
+              'cursor-not-allowed':
+                !heartbeat.value.METADATA_SOURCES.IGDB_API_ENABLED,
             }"
             size="30"
             rounded="1"
@@ -270,10 +273,13 @@ onBeforeUnmount(() => {
           <v-avatar
             @click="toggleSourceFilter('Mobygames')"
             v-bind="props"
-            class="ml-3 source-filter"
+            class="ml-3 cursor-pointer opacity-40"
             :class="{
-              filtered: isMobyFiltered,
-              disabled: !heartbeat.value.METADATA_SOURCES.MOBY_API_ENABLED,
+              'opacity-100':
+                isMobyFiltered &&
+                heartbeat.value.METADATA_SOURCES.MOBY_API_ENABLED,
+              'cursor-not-allowed':
+                !heartbeat.value.METADATA_SOURCES.MOBY_API_ENABLED,
             }"
             size="30"
             rounded="1"
@@ -372,16 +378,10 @@ onBeforeUnmount(() => {
           </v-col>
           <v-col cols="12">
             <v-row class="justify-center mt-4" no-gutters>
-              <v-col
-                :class="{
-                  'source-cover-desktop': !xs,
-                  'source-cover-mobile': xs,
-                }"
-                class="pa-1"
-                v-for="source in sources"
-              >
+              <v-col class="pa-1" cols="auto" v-for="source in sources">
                 <v-hover v-slot="{ isHovering, props }">
                   <v-card
+                    :width="xs ? 150 : 220"
                     v-bind="props"
                     class="transform-scale mx-2"
                     :class="{
@@ -495,28 +495,3 @@ onBeforeUnmount(() => {
     </template>
   </r-dialog>
 </template>
-
-<style scoped>
-.source-filter {
-  cursor: pointer;
-  opacity: 0.4;
-}
-.source-filter.filtered {
-  opacity: 1;
-}
-.source-filter.disabled {
-  cursor: not-allowed !important;
-  opacity: 0.4 !important;
-}
-.select-source-dialog {
-  z-index: 9999 !important;
-}
-.source-cover-desktop {
-  min-width: 220px;
-  max-width: 220px;
-}
-.source-cover-mobile {
-  min-width: 150px;
-  max-width: 150px;
-}
-</style>

From eb212a9714629761d0dee5f815c45c1def5d884c Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 4 Dec 2024 12:45:52 +0000
Subject: [PATCH 07/49] refactor: enhance EditUser.vue component styling and
 improve hover interaction

---
 .../Administration/Users/Dialog/EditUser.vue       | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/frontend/src/components/Administration/Users/Dialog/EditUser.vue b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
index f32c657fb..6811b4fc9 100644
--- a/frontend/src/components/Administration/Users/Dialog/EditUser.vue
+++ b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
@@ -145,7 +145,7 @@ function closeDialog() {
                   <v-fade-transition>
                     <div
                       v-if="isHovering"
-                      class="d-flex translucent edit-hover text-h4"
+                      class="d-flex translucent cursor-pointer h-100 align-center justify-center text-h4"
                       @click="triggerFileInput"
                     >
                       <v-icon>mdi-pencil</v-icon>
@@ -186,15 +186,3 @@ function closeDialog() {
     </template>
   </r-dialog>
 </template>
-
-<style scoped>
-.edit-hover {
-  align-items: center;
-  bottom: 0;
-  justify-content: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-</style>

From a1a643d3ee3bd255339ef68604639c960665b3d8 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 4 Dec 2024 12:46:11 +0000
Subject: [PATCH 08/49] refactor: remove settings.json and update component
 imports for consistency

---
 .zed/settings.json                               | 16 ----------------
 .../src/components/common/Game/Card/Base.vue     |  1 -
 .../src/components/common/Navigation/HomeBtn.vue |  4 ++--
 frontend/src/components/common/RDialog.vue       |  4 ++--
 .../common/{RommIso.vue => RIsotipo.vue}         |  0
 .../common/{RommLogo.vue => RLogotipo.vue}       |  0
 6 files changed, 4 insertions(+), 21 deletions(-)
 delete mode 100644 .zed/settings.json
 rename frontend/src/components/common/{RommIso.vue => RIsotipo.vue} (100%)
 rename frontend/src/components/common/{RommLogo.vue => RLogotipo.vue} (100%)

diff --git a/.zed/settings.json b/.zed/settings.json
deleted file mode 100644
index c808db432..000000000
--- a/.zed/settings.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "languages": {
-    "Python": {
-      "tab_size": 4
-    },
-    "Vue.js": {
-      "tab_size": 2,
-      "formatter": {
-        "external": {
-          "command": "prettier",
-          "arguments": ["--stdin-filepath", "{buffer_path}"]
-        }
-      }
-    }
-  }
-}
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 3e619b1fe..ee554561b 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -109,7 +109,6 @@ const computedAspectRatio = computed(() => {
             @touchend="handleTouchEnd"
             v-bind="hoverProps"
             :class="{ pointer: pointerOnHover }"
-            ref="card"
             cover
             :key="romsStore.isSimpleRom(rom) ? rom.updated_at : ''"
             :src="
diff --git a/frontend/src/components/common/Navigation/HomeBtn.vue b/frontend/src/components/common/Navigation/HomeBtn.vue
index 808c01ed0..92495bab3 100644
--- a/frontend/src/components/common/Navigation/HomeBtn.vue
+++ b/frontend/src/components/common/Navigation/HomeBtn.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import RommIso from "@/components/common/RommIso.vue";
+import RIsotipo from "@/components/common/RIsotipo.vue";
 import storeNavigation from "@/stores/navigation";
 
 const homeUrl = ref(`${location.protocol}//${location.host}`);
@@ -13,7 +13,7 @@ const navigationStore = storeNavigation();
     :href="homeUrl"
   >
     <v-hover v-slot="{ isHovering, props: hoverProps }">
-      <romm-iso
+      <r-isotipo
         @click="navigationStore.goHome"
         v-bind="hoverProps"
         class="pointer"
diff --git a/frontend/src/components/common/RDialog.vue b/frontend/src/components/common/RDialog.vue
index 9bd0be430..960d4ed1a 100644
--- a/frontend/src/components/common/RDialog.vue
+++ b/frontend/src/components/common/RDialog.vue
@@ -2,7 +2,7 @@
 import EmptyFirmware from "@/components/common/EmptyFirmware.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
 import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
-import RommIso from "@/components/common/RommIso.vue";
+import RIsotipo from "@/components/common/RIsotipo.vue";
 import { onMounted, ref, useSlots } from "vue";
 
 // Props
@@ -65,7 +65,7 @@ onMounted(() => {
     <v-card rounded="0" :min-height="height" :max-height="height">
       <v-toolbar density="compact" class="bg-terciary">
         <v-icon v-if="icon" :icon="icon" class="ml-5" />
-        <romm-iso :size="30" class="mx-4" v-if="showRommIcon" />
+        <r-isotipo :size="30" class="mx-4" v-if="showRommIcon" />
         <slot name="header"></slot>
         <template #append>
           <v-btn
diff --git a/frontend/src/components/common/RommIso.vue b/frontend/src/components/common/RIsotipo.vue
similarity index 100%
rename from frontend/src/components/common/RommIso.vue
rename to frontend/src/components/common/RIsotipo.vue
diff --git a/frontend/src/components/common/RommLogo.vue b/frontend/src/components/common/RLogotipo.vue
similarity index 100%
rename from frontend/src/components/common/RommLogo.vue
rename to frontend/src/components/common/RLogotipo.vue

From 2affca22d56d95c442394d0c00f4ff8f018db5b2 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 4 Dec 2024 12:50:19 +0000
Subject: [PATCH 09/49] refactor: standardize prop naming conventions in
 Recent, MatchRom, SearchRom, Collection, and Platform components

---
 frontend/src/components/Dashboard/Recent.vue     | 12 ++++++------
 .../components/common/Game/Dialog/MatchRom.vue   |  5 ++---
 .../components/common/Game/Dialog/SearchRom.vue  | 10 +++++-----
 frontend/src/views/Gallery/Collection.vue        | 16 ++++++++--------
 frontend/src/views/Gallery/Platform.vue          | 14 +++++++-------
 5 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/Dashboard/Recent.vue b/frontend/src/components/Dashboard/Recent.vue
index b97d3bc22..e88d528a3 100644
--- a/frontend/src/components/Dashboard/Recent.vue
+++ b/frontend/src/components/Dashboard/Recent.vue
@@ -42,14 +42,14 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
             :key="rom.updated_at"
             :rom="rom"
             @click="onGameClick"
-            title-on-hover
+            titleOnHover
             pointerOnHover
             withLink
-            show-flags
-            show-fav
-            transform-scale
-            show-action-bar
-            show-platform-icon
+            showFlags
+            showFav
+            transformScale
+            showActionBar
+            showPlatformIcon
           />
         </v-col>
       </v-row>
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 0393f118f..1c759466a 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -341,9 +341,8 @@ onBeforeUnmount(() => {
             v-if="rom"
             @click="showSources(matchedRom)"
             :rom="matchedRom"
-            title-on-footer
-            transform-scale
-            title-on-hover
+            transformScale
+            titleOnHover
             pointerOnHover
           />
         </v-col>
diff --git a/frontend/src/components/common/Game/Dialog/SearchRom.vue b/frontend/src/components/common/Game/Dialog/SearchRom.vue
index ece56ddf3..58c17110c 100644
--- a/frontend/src/components/common/Game/Dialog/SearchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchRom.vue
@@ -200,11 +200,11 @@ onBeforeUnmount(() => {
             title-on-hover
             pointerOnHover
             withLink
-            show-flags
-            show-fav
-            transform-scale
-            show-action-bar
-            show-platform-icon
+            showFlags
+            showFav
+            transformScale
+            showActionBar
+            showPlatformIcon
           />
         </v-col>
       </v-row>
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 519eb21c0..a0328b9d6 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -308,16 +308,16 @@ onBeforeUnmount(() => {
           <game-card
             :key="rom.updated_at"
             :rom="rom"
-            title-on-hover
+            titleOnHover
             pointerOnHover
             withLink
-            show-flags
-            show-action-bar
-            transform-scale
-            with-border
-            show-fav
-            show-platform-icon
-            :with-border-romm-accent="
+            showFlags
+            showActionBar
+            transformScale
+            withBorder
+            showFav
+            showPlatformIcon
+            :withBorderRommAccent="
               romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
             "
             @click="onGameClick"
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index d165b5360..623cdeeef 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -326,15 +326,15 @@ onBeforeUnmount(() => {
             v-if="currentPlatform"
             :key="rom.updated_at"
             :rom="rom"
-            title-on-hover
+            titleOnHover
             pointerOnHover
             withLink
-            show-flags
-            show-action-bar
-            show-fav
-            transform-scale
-            with-border
-            :with-border-romm-accent="
+            showFlags
+            showActionBar
+            showFav
+            transformScale
+            withBorder
+            :withBorderRommAccent="
               romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
             "
             @click="onGameClick"

From e936449aafdae10e7f88a5fea24b673e697358db Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 4 Dec 2024 16:29:58 +0000
Subject: [PATCH 10/49] reordered all the dialogs

---
 .../components/Administration/Users/Table.vue |  5 ++
 frontend/src/components/Details/ActionBar.vue |  7 ++-
 frontend/src/components/Details/Saves.vue     |  2 +
 frontend/src/components/Details/States.vue    |  2 +
 .../Collection/CollectionInfoDrawer.vue       | 12 ++---
 .../AppBar/Platform/PlatformInfoDrawer.vue    |  3 ++
 .../src/components/Management/Excluded.vue    |  5 +-
 .../components/Management/PlatformBinding.vue |  5 ++
 .../Management/PlatformVersions.vue           |  5 ++
 .../common/Navigation/CollectionsDrawer.vue   |  3 ++
 .../{NewVersion.vue => NewVersionDialog.vue}  |  0
 frontend/src/layouts/Main.vue                 | 54 ++++---------------
 frontend/src/styles/common.css                |  3 ++
 13 files changed, 54 insertions(+), 52 deletions(-)
 rename frontend/src/components/common/{NewVersion.vue => NewVersionDialog.vue} (100%)

diff --git a/frontend/src/components/Administration/Users/Table.vue b/frontend/src/components/Administration/Users/Table.vue
index 735af43c3..08ec7a623 100644
--- a/frontend/src/components/Administration/Users/Table.vue
+++ b/frontend/src/components/Administration/Users/Table.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CreateUserDialog from "@/components/Administration/Users/Dialog/CreateUser.vue";
+import DeleteUserDialog from "@/components/Administration/Users/Dialog/DeleteUser.vue";
 import RSection from "@/components/common/RSection.vue";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
@@ -195,4 +197,7 @@ onMounted(() => {
       </v-data-table>
     </template>
   </r-section>
+
+  <create-user-dialog />
+  <delete-user-dialog />
 </template>
diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
index a0d166512..85ed8352c 100644
--- a/frontend/src/components/Details/ActionBar.vue
+++ b/frontend/src/components/Details/ActionBar.vue
@@ -1,9 +1,10 @@
 <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,
@@ -11,7 +12,7 @@ import {
   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 }>();
@@ -117,4 +118,6 @@ async function copyDownloadLink(rom: DetailedRom) {
       <admin-menu :rom="rom" />
     </v-menu>
   </v-btn-group>
+
+  <copy-rom-download-link-dialog />
 </template>
diff --git a/frontend/src/components/Details/Saves.vue b/frontend/src/components/Details/Saves.vue
index 094c405d7..e5a197b1f 100644
--- a/frontend/src/components/Details/Saves.vue
+++ b/frontend/src/components/Details/Saves.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SaveSchema } from "@/__generated__";
+import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import UploadSavesDialog from "@/components/common/Game/Dialog/Asset/UploadSaves.vue";
 import { type DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
@@ -196,6 +197,7 @@ onMounted(() => {
     </template>
   </v-data-table>
   <upload-saves-dialog />
+  <delete-asset-dialog />
 </template>
 <style scoped>
 .name-row {
diff --git a/frontend/src/components/Details/States.vue b/frontend/src/components/Details/States.vue
index b5c3a5a0d..023649a1d 100644
--- a/frontend/src/components/Details/States.vue
+++ b/frontend/src/components/Details/States.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { StateSchema } from "@/__generated__";
+import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import UploadStatesDialog from "@/components/common/Game/Dialog/Asset/UploadStates.vue";
 import { type DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
@@ -197,6 +198,7 @@ onMounted(() => {
     </template>
   </v-data-table>
   <upload-states-dialog />
+  <delete-asset-dialog />
 </template>
 <style scoped>
 .name-row {
diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
index 5ea3b4fd7..6a6f8fb82 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-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 GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
-import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
 import CollectionCard from "@/components/common/Collection/Card.vue";
+import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
+import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
-import storeRoms from "@/stores/roms";
 import storeNavigation from "@/stores/navigation";
+import storeRoms from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
@@ -136,4 +133,7 @@ const collectionInfoFields = [
       </template>
     </r-section>
   </v-navigation-drawer>
+
+  <edit-collection-dialog />
+  <delete-collection-dialog />
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 187050f16..da5c10eb2 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import RSection from "@/components/common/RSection.vue";
 import platformApi from "@/services/api/platform";
@@ -295,6 +296,8 @@ async function setAspectRatio() {
       </template>
     </r-section>
   </v-navigation-drawer>
+
+  <delete-platform-dialog />
 </template>
 <style scoped>
 .platform-icon {
diff --git a/frontend/src/components/Management/Excluded.vue b/frontend/src/components/Management/Excluded.vue
index 4e6593184..80c2be151 100644
--- a/frontend/src/components/Management/Excluded.vue
+++ b/frontend/src/components/Management/Excluded.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import ExcludedCard from "@/components/Management/ExcludedCard.vue";
 import RSection from "@/components/common/RSection.vue";
+import CreateExclusionDialog from "@/components/Management/Dialog/CreateExclusion.vue";
+import ExcludedCard from "@/components/Management/ExcludedCard.vue";
 import storeAuth from "@/stores/auth";
 import storeConfig from "@/stores/config";
 import { ref } from "vue";
@@ -74,4 +75,6 @@ const editable = ref(false);
       />
     </template>
   </r-section>
+
+  <create-exclusion-dialog />
 </template>
diff --git a/frontend/src/components/Management/PlatformBinding.vue b/frontend/src/components/Management/PlatformBinding.vue
index 9b233ec7f..9cc7ae1f1 100644
--- a/frontend/src/components/Management/PlatformBinding.vue
+++ b/frontend/src/components/Management/PlatformBinding.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import AddBtn from "@/components/Management/AddBtn.vue";
+import CreatePlatformBindingDialog from "@/components/Management/Dialog/CreatePlatformBinding.vue";
+import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
 import PlatformBindCard from "@/components/Management/PlatformBindCard.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
@@ -74,4 +76,7 @@ const editable = ref(false);
       </v-row>
     </template>
   </r-section>
+
+  <create-platform-binding-dialog />
+  <delete-platform-binding-dialog />
 </template>
diff --git a/frontend/src/components/Management/PlatformVersions.vue b/frontend/src/components/Management/PlatformVersions.vue
index 09bc9bcce..01205e6a0 100644
--- a/frontend/src/components/Management/PlatformVersions.vue
+++ b/frontend/src/components/Management/PlatformVersions.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import AddBtn from "@/components/Management/AddBtn.vue";
+import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePlatformVersion.vue";
+import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
 import PlatformBindCard from "@/components/Management/PlatformBindCard.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
@@ -74,4 +76,7 @@ const editable = ref(false);
       </v-row>
     </template>
   </r-section>
+
+  <create-platform-version-dialog />
+  <delete-platform-version-dialog />
 </template>
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index 665f271d2..e1a35ff1a 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CollectionListItem from "@/components/common/Collection/ListItem.vue";
 import storeCollections from "@/stores/collections";
+import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
 import storeNavigation from "@/stores/navigation";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -65,4 +66,6 @@ function clear() {
       >
     </template>
   </v-navigation-drawer>
+
+  <create-collection-dialog />
 </template>
diff --git a/frontend/src/components/common/NewVersion.vue b/frontend/src/components/common/NewVersionDialog.vue
similarity index 100%
rename from frontend/src/components/common/NewVersion.vue
rename to frontend/src/components/common/NewVersionDialog.vue
diff --git a/frontend/src/layouts/Main.vue b/frontend/src/layouts/Main.vue
index 1bab82787..d017d691b 100644
--- a/frontend/src/layouts/Main.vue
+++ b/frontend/src/layouts/Main.vue
@@ -1,19 +1,7 @@
 <script setup lang="ts">
-import CreateUserDialog from "@/components/Administration/Users/Dialog/CreateUser.vue";
-import DeleteUserDialog from "@/components/Administration/Users/Dialog/DeleteUser.vue";
 import EditUserDialog from "@/components/Administration/Users/Dialog/EditUser.vue";
-import CreateExclusionDialog from "@/components/Management/Dialog/CreateExclusion.vue";
-import CreatePlatformBindingDialog from "@/components/Management/Dialog/CreatePlatformBinding.vue";
-import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePlatformVersion.vue";
-import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
-import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
 import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
-import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
-import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
-import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
 import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialog/RemoveRoms.vue";
-import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
-import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
 import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
 import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
 import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
@@ -24,12 +12,12 @@ import MainAppBar from "@/components/common/Navigation/MainAppBar.vue";
 import MainDrawer from "@/components/common/Navigation/MainDrawer.vue";
 import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
 import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
-import NewVersion from "@/components/common/NewVersion.vue";
+import NewVersionDialog from "@/components/common/NewVersionDialog.vue";
 import Notification from "@/components/common/Notifications/Notification.vue";
 import UploadProgress from "@/components/common/Notifications/UploadProgress.vue";
-import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
 import SearchCoverDialog from "@/components/common/SearchCover.vue";
 import ViewLoader from "@/components/common/ViewLoader.vue";
+import router from "@/plugins/router";
 import collectionApi from "@/services/api/collection";
 import api from "@/services/api/index";
 import platformApi from "@/services/api/platform";
@@ -44,7 +32,6 @@ import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeMount } from "vue";
 import { useDisplay } from "vuetify";
-import router from "../plugins/router";
 
 // Props
 const { smAndDown } = useDisplay();
@@ -108,50 +95,31 @@ onBeforeMount(async () => {
 </script>
 
 <template>
+  <notification />
+
   <template v-if="!smAndDown">
     <main-drawer />
   </template>
   <template v-else>
     <main-app-bar />
   </template>
+  <search-rom-dialog />
   <platforms-drawer />
   <collections-drawer />
+  <upload-rom-dialog />
   <settings-drawer />
 
-  <notification />
-
+  <view-loader />
   <router-view />
 
-  <delete-platform-dialog />
-  <create-collection-dialog />
-  <edit-collection-dialog />
-  <add-roms-to-collection-dialog />
-  <remove-roms-from-collection-dialog />
-  <delete-collection-dialog />
-  <search-rom-dialog />
   <match-rom-dialog />
-  <search-cover-dialog />
-  <copy-rom-download-link-dialog />
-  <upload-rom-dialog />
   <edit-rom-dialog />
+  <search-cover-dialog />
+  <add-roms-to-collection-dialog />
+  <remove-roms-from-collection-dialog />
   <delete-rom-dialog />
-  <delete-asset-dialog />
-  <create-platform-binding-dialog />
-  <delete-platform-binding-dialog />
-  <create-platform-version-dialog />
-  <delete-platform-version-dialog />
-  <create-exclusion-dialog />
-  <create-user-dialog />
   <edit-user-dialog />
-  <delete-user-dialog />
-
-  <view-loader />
 
-  <new-version />
+  <new-version-dialog />
   <upload-progress />
 </template>
-<style scoped>
-.v-progress-linear {
-  z-index: 9999 !important;
-}
-</style>
diff --git a/frontend/src/styles/common.css b/frontend/src/styles/common.css
index e754663f8..ef0ee8f46 100644
--- a/frontend/src/styles/common.css
+++ b/frontend/src/styles/common.css
@@ -8,6 +8,9 @@ body {
     1px 1px 3px #000000,
     0 0 3px #000000 !important;
 }
+.v-progress-linear {
+  z-index: 9999 !important;
+}
 .translucent {
   backdrop-filter: blur(3px) !important;
   text-shadow:

From 23a23bb0b84d5016c507e2496dfb67f7df16d042 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 4 Dec 2024 20:03:57 +0000
Subject: [PATCH 11/49] refactor: update routing to use 'home' instead of
 'dashboard' and place login and setup under Auth layout

---
 .trunk/trunk.yaml                             |  16 +-
 .../{Dashboard => Home}/Collections.vue       |   0
 .../{Dashboard => Home}/Platforms.vue         |   0
 .../components/{Dashboard => Home}/Recent.vue |   0
 .../components/{Dashboard => Home}/Stats.vue  |   0
 .../Collection/Dialog/DeleteCollection.vue    |   2 +-
 .../common/Collection/Dialog/RemoveRoms.vue   |   2 +-
 .../common/Platform/Dialog/DeletePlatform.vue |   2 +-
 frontend/src/layouts/Auth.vue                 |  34 +++
 frontend/src/main.ts                          |   2 +-
 frontend/src/plugins/router.ts                |  42 ++--
 frontend/src/stores/navigation.ts             |   2 +-
 frontend/src/views/Auth/Login.vue             | 106 ++++++++
 frontend/src/views/Auth/Setup.vue             | 191 ++++++++++++++
 .../src/views/{Dashboard.vue => Home.vue}     |   8 +-
 frontend/src/views/Login.vue                  | 142 -----------
 .../views/{ => Player}/EmulatorJS/Base.vue    |   2 +-
 .../views/{ => Player}/EmulatorJS/Player.vue  |   0
 .../src/views/{ => Player}/RuffleRS/Base.vue  |   0
 .../views/{ => Settings}/Administration.vue   |   0
 .../src/views/{ => Settings}/Management.vue   |   0
 .../{UI.vue => Settings/UserInterface.vue}    |   0
 frontend/src/views/Setup.vue                  | 238 ------------------
 23 files changed, 377 insertions(+), 412 deletions(-)
 rename frontend/src/components/{Dashboard => Home}/Collections.vue (100%)
 rename frontend/src/components/{Dashboard => Home}/Platforms.vue (100%)
 rename frontend/src/components/{Dashboard => Home}/Recent.vue (100%)
 rename frontend/src/components/{Dashboard => Home}/Stats.vue (100%)
 create mode 100644 frontend/src/layouts/Auth.vue
 create mode 100644 frontend/src/views/Auth/Login.vue
 create mode 100644 frontend/src/views/Auth/Setup.vue
 rename frontend/src/views/{Dashboard.vue => Home.vue} (79%)
 delete mode 100644 frontend/src/views/Login.vue
 rename frontend/src/views/{ => Player}/EmulatorJS/Base.vue (99%)
 rename frontend/src/views/{ => Player}/EmulatorJS/Player.vue (100%)
 rename frontend/src/views/{ => Player}/RuffleRS/Base.vue (100%)
 rename frontend/src/views/{ => Settings}/Administration.vue (100%)
 rename frontend/src/views/{ => Settings}/Management.vue (100%)
 rename frontend/src/views/{UI.vue => Settings/UserInterface.vue} (100%)
 delete mode 100644 frontend/src/views/Setup.vue

diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
index b76ad3d43..4b2f8ffe3 100644
--- 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
     - actionlint@1.7.4
-    - bandit@1.7.10
+    - bandit@1.8.0
     - black@24.10.0
-    - checkov@3.2.296
+    - checkov@3.2.328
     - git-diff-check
     - isort@5.13.2
     - mypy@1.13.0
     - osv-scanner@1.9.1
-    - oxipng@9.1.2
-    - prettier@3.3.3
-    - ruff@0.7.3
+    - oxipng@9.1.3
+    - prettier@3.4.2
+    - ruff@0.8.1
     - shellcheck@0.10.0
     - shfmt@3.6.0
     - svgo@3.3.2
     - taplo@0.9.3
     - trivy@0.56.2
-    - trufflehog@3.83.6
+    - trufflehog@3.84.2
     - yamllint@1.35.1
   ignore:
     - linters: [ALL]
diff --git a/frontend/src/components/Dashboard/Collections.vue b/frontend/src/components/Home/Collections.vue
similarity index 100%
rename from frontend/src/components/Dashboard/Collections.vue
rename to frontend/src/components/Home/Collections.vue
diff --git a/frontend/src/components/Dashboard/Platforms.vue b/frontend/src/components/Home/Platforms.vue
similarity index 100%
rename from frontend/src/components/Dashboard/Platforms.vue
rename to frontend/src/components/Home/Platforms.vue
diff --git a/frontend/src/components/Dashboard/Recent.vue b/frontend/src/components/Home/Recent.vue
similarity index 100%
rename from frontend/src/components/Dashboard/Recent.vue
rename to frontend/src/components/Home/Recent.vue
diff --git a/frontend/src/components/Dashboard/Stats.vue b/frontend/src/components/Home/Stats.vue
similarity index 100%
rename from frontend/src/components/Dashboard/Stats.vue
rename to frontend/src/components/Home/Stats.vue
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
index 537b542ba..6d6240649 100644
--- a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -47,7 +47,7 @@ async function deleteCollection() {
       return;
     });
 
-  await router.push({ name: "dashboard" });
+  await router.push({ name: "home" });
 
   collectionsStore.remove(collection.value);
   emitter?.emit("refreshDrawer", null);
diff --git a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
index 34f144b70..916042e0e 100644
--- a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
@@ -66,7 +66,7 @@ async function removeRomsFromCollection() {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
       romsStore.resetSelection();
       if (selectedCollection.value?.roms.length == 0) {
-        router.push({ name: "dashboard" });
+        router.push({ name: "home" });
       }
       closeDialog();
     });
diff --git a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
index c34d661f1..4d3837de8 100644
--- a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
+++ b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
@@ -43,7 +43,7 @@ async function deletePlatform() {
       return;
     });
 
-  await router.push({ name: "dashboard" });
+  await router.push({ name: "home" });
 
   platformsStore.remove(platform.value);
   emitter?.emit("refreshDrawer", null);
diff --git a/frontend/src/layouts/Auth.vue b/frontend/src/layouts/Auth.vue
new file mode 100644
index 000000000..d9c281ad6
--- /dev/null
+++ b/frontend/src/layouts/Auth.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import Notification from "@/components/common/Notifications/Notification.vue";
+import storeHeartbeat from "@/stores/heartbeat";
+
+// Props
+const heartbeatStore = storeHeartbeat();
+</script>
+
+<template>
+  <span class="h-100 w-100 position-absolute" id="bg" />
+  <notification />
+  <v-container class="fill-height justify-center">
+    <router-view />
+  </v-container>
+  <div id="version" class="position-absolute">
+    <span class="text-white text-shadow">{{
+      heartbeatStore.value.VERSION
+    }}</span>
+  </div>
+</template>
+
+<style scoped>
+#bg {
+  background: url("/assets/login_bg.png") center center;
+  background-size: cover;
+}
+#version {
+  text-shadow:
+    1px 1px 1px #000000,
+    0 0 1px #000000;
+  bottom: 0.3rem;
+  right: 0.5rem;
+}
+</style>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 5ae409f18..e587c5181 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -5,7 +5,7 @@ import "@/styles/scrollbar.css";
 import type { Events } from "@/types/emitter";
 import mitt from "mitt";
 import { createApp } from "vue";
-import App from "./RomM.vue";
+import App from "@/RomM.vue";
 
 const emitter = mitt<Events>();
 const app = createApp(App);
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index 2a6935e8e..1ca6fe4e1 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -5,23 +5,37 @@ import storeHeartbeat from "@/stores/heartbeat";
 const routes = [
   {
     path: "/login",
-    name: "login",
-    component: () => import("@/views/Login.vue"),
+    name: "loginView",
+    component: () => import("@/layouts/Auth.vue"),
+    children: [
+      {
+        path: "",
+        name: "login",
+        component: () => import("@/views/Auth/Login.vue"),
+      },
+    ],
   },
   {
     path: "/setup",
-    name: "setup",
-    component: () => import("@/views/Setup.vue"),
+    name: "setupView",
+    component: () => import("@/layouts/Auth.vue"),
+    children: [
+      {
+        path: "",
+        name: "setup",
+        component: () => import("@/views/Auth/Setup.vue"),
+      },
+    ],
   },
   {
     path: "/",
-    name: "home",
+    name: "main",
     component: () => import("@/layouts/Main.vue"),
     children: [
       {
         path: "",
-        name: "dashboard",
-        component: () => import("@/views/Dashboard.vue"),
+        name: "home",
+        component: () => import("@/views/Home.vue"),
       },
       {
         path: "platform/:platform",
@@ -41,12 +55,12 @@ const routes = [
       {
         path: "rom/:rom/ejs",
         name: "emulatorjs",
-        component: () => import("@/views/EmulatorJS/Base.vue"),
+        component: () => import("@/views/Player/EmulatorJS/Base.vue"),
       },
       {
         path: "rom/:rom/ruffle",
         name: "ruffle",
-        component: () => import("@/views/RuffleRS/Base.vue"),
+        component: () => import("@/views/Player/RuffleRS/Base.vue"),
       },
       {
         path: "scan",
@@ -66,19 +80,19 @@ const routes = [
           {
             path: "management",
             name: "management",
-            component: () => import("@/views/Management.vue"),
+            component: () => import("@/views/Settings/Management.vue"),
           },
           {
             path: "administration",
             name: "administration",
-            component: () => import("@/views/Administration.vue"),
+            component: () => import("@/views/Settings/Administration.vue"),
           },
         ],
       },
       {
         path: ":pathMatch(.*)*",
         name: "noMatch",
-        component: () => import("@/views/Dashboard.vue"),
+        component: () => import("@/views/Home.vue"),
       },
     ],
   },
@@ -89,10 +103,10 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, _from, next) => {
+router.beforeEach(async (to, _from, next) => {
   const heartbeat = storeHeartbeat();
   if (to.name == "setup" && !heartbeat.value.SHOW_SETUP_WIZARD) {
-    next({ name: "dashboard" });
+    next({ name: "home" });
   } else {
     next();
   }
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index cb50fd273..aa4c4d86a 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -32,7 +32,7 @@ export default defineStore("navigation", {
     },
     goHome() {
       this.resetDrawers();
-      this.$router.push({ name: "dashboard" });
+      this.$router.push({ name: "home" });
     },
     goScan() {
       this.resetDrawers();
diff --git a/frontend/src/views/Auth/Login.vue b/frontend/src/views/Auth/Login.vue
new file mode 100644
index 000000000..6a2050023
--- /dev/null
+++ b/frontend/src/views/Auth/Login.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import identityApi from "@/services/api/identity";
+import { refetchCSRFToken } from "@/services/api/index";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { useRouter } from "vue-router";
+
+// Props
+const emitter = inject<Emitter<Events>>("emitter");
+const router = useRouter();
+const username = ref("");
+const password = ref("");
+const visiblePassword = ref(false);
+const logging = ref(false);
+
+// Functions
+async function login() {
+  logging.value = true;
+
+  await identityApi
+    .login(username.value, password.value)
+    .then(async () => {
+      // Refetch CSRF token
+      await refetchCSRFToken();
+
+      const params = new URLSearchParams(window.location.search);
+      router.push(params.get("next") ?? "/");
+    })
+    .catch(({ response, message }) => {
+      const errorMessage =
+        response.data?.detail ||
+        response.data ||
+        message ||
+        response.statusText;
+
+      emitter?.emit("snackbarShow", {
+        msg: `Unable to login: ${errorMessage}`,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+
+      console.error(
+        `[${response.status} ${response.statusText}] ${errorMessage}`,
+      );
+    })
+    .finally(() => {
+      logging.value = false;
+    });
+}
+</script>
+
+<template>
+  <v-card class="translucent-dark py-8 px-5" width="500">
+    <v-img src="/assets/isotipo.svg" class="mx-auto" width="150" />
+    <v-row class="text-white justify-center mt-2" no-gutters>
+      <v-col cols="10">
+        <v-form @submit.prevent="login">
+          <v-text-field
+            v-model="username"
+            autocomplete="on"
+            required
+            prepend-inner-icon="mdi-account"
+            type="text"
+            label="Username"
+            variant="underlined"
+          />
+          <v-text-field
+            v-model="password"
+            autocomplete="on"
+            required
+            prepend-inner-icon="mdi-lock"
+            :type="visiblePassword ? 'text' : 'password'"
+            label="Password"
+            variant="underlined"
+            :append-inner-icon="visiblePassword ? 'mdi-eye-off' : 'mdi-eye'"
+            @click:append-inner="visiblePassword = !visiblePassword"
+          />
+          <v-btn
+            type="submit"
+            :disabled="logging || !username || !password"
+            :variant="!username || !password ? 'text' : 'flat'"
+            class="bg-terciary"
+            block
+            :loading="logging"
+          >
+            <span>Login</span>
+            <template #append>
+              <v-icon class="text-romm-accent-1"
+                >mdi-chevron-right-circle-outline</v-icon
+              >
+            </template>
+            <template #loader>
+              <v-progress-circular
+                color="romm-accent-1"
+                :width="2"
+                :size="20"
+                indeterminate
+              />
+            </template>
+          </v-btn>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
diff --git a/frontend/src/views/Auth/Setup.vue b/frontend/src/views/Auth/Setup.vue
new file mode 100644
index 000000000..0c25cfc68
--- /dev/null
+++ b/frontend/src/views/Auth/Setup.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import router from "@/plugins/router";
+import { refetchCSRFToken } from "@/services/api/index";
+import userApi from "@/services/api/user";
+import storeHeartbeat from "@/stores/heartbeat";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { computed, inject, ref } from "vue";
+import { useDisplay } from "vuetify";
+
+// Props
+const { xs } = useDisplay();
+const emitter = inject<Emitter<Events>>("emitter");
+const heartbeat = storeHeartbeat();
+const visiblePassword = ref(false);
+// Use a computed property to reactively update metadataOptions based on heartbeat
+const metadataOptions = computed(() => [
+  {
+    name: "IGDB",
+    value: "igdb",
+    logo_path: "/assets/scrappers/igdb.png",
+    disabled: !heartbeat.value.METADATA_SOURCES?.IGDB_API_ENABLED,
+  },
+  {
+    name: "MobyGames",
+    value: "moby",
+    logo_path: "/assets/scrappers/moby.png",
+    disabled: !heartbeat.value.METADATA_SOURCES?.MOBY_API_ENABLED,
+  },
+  {
+    name: "SteamgridDB",
+    value: "sgdb",
+    logo_path: "/assets/scrappers/sgdb.png",
+    disabled: !heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_ENABLED,
+  },
+]);
+const defaultAdminUser = ref({
+  username: "",
+  password: "",
+  role: "admin",
+});
+const step = ref(1); // 1: Create admin user, 2: Check metadata sources, 3: Finish
+const filledAdminUser = computed(
+  () =>
+    defaultAdminUser.value.username != "" &&
+    defaultAdminUser.value.password != "",
+);
+const isFirstStep = computed(() => step.value == 1);
+const isLastStep = computed(() => step.value == 2);
+
+// Functions
+async function finishWizard() {
+  await userApi
+    .createUser(defaultAdminUser.value)
+    .then(async () => {
+      await refetchCSRFToken();
+      router.push({ name: "login" });
+    })
+    .catch(({ response, message }) => {
+      emitter?.emit("snackbarShow", {
+        msg: `Unable to create user: ${
+          response?.data?.detail || response?.statusText || message
+        }`,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+    });
+}
+</script>
+
+<template>
+  <v-card class="translucent-dark px-3" width="700">
+    <v-img src="/assets/isotipo.svg" class="mx-auto mt-6" width="70" />
+    <v-stepper :mobile="xs" class="bg-transparent" v-model="step" flat>
+      <template v-slot:default="{ prev, next }">
+        <v-stepper-header>
+          <v-stepper-item :value="1"
+            ><template #title
+              ><span class="text-white text-shadow"
+                >Create an admin user</span
+              ></template
+            ></v-stepper-item
+          >
+
+          <v-divider></v-divider>
+
+          <v-stepper-item :value="2"
+            ><template #title
+              ><span class="text-white text-shadow"
+                >Check metadata sources</span
+              ></template
+            ></v-stepper-item
+          >
+        </v-stepper-header>
+
+        <v-stepper-window>
+          <v-stepper-window-item :value="1" :key="1">
+            <v-row no-gutters>
+              <v-col>
+                <v-row v-if="xs" no-gutters class="text-center">
+                  <v-col>
+                    <span>Create an admin user</span>
+                  </v-col>
+                </v-row>
+                <v-row class="text-white justify-center mt-3" no-gutters>
+                  <v-col cols="10" md="8">
+                    <v-form @submit.prevent>
+                      <v-text-field
+                        v-model="defaultAdminUser.username"
+                        required
+                        prepend-inner-icon="mdi-account"
+                        type="text"
+                        label="Username"
+                        variant="underlined"
+                      />
+                      <v-text-field
+                        v-model="defaultAdminUser.password"
+                        required
+                        prepend-inner-icon="mdi-lock"
+                        :type="visiblePassword ? 'text' : 'password'"
+                        label="Password"
+                        variant="underlined"
+                        :append-inner-icon="
+                          visiblePassword ? 'mdi-eye-off' : 'mdi-eye'
+                        "
+                        @click:append-inner="visiblePassword = !visiblePassword"
+                      />
+                    </v-form>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-stepper-window-item>
+
+          <v-stepper-window-item :value="2" :key="2">
+            <v-row no-gutters>
+              <v-col>
+                <v-row v-if="xs" no-gutters class="text-center mb-6">
+                  <v-col>
+                    <span>Check metadata sources</span>
+                  </v-col>
+                </v-row>
+                <v-row class="justify-center align-center" no-gutters>
+                  <v-col :max-width="300" id="sources">
+                    <v-list-item
+                      v-for="source in metadataOptions"
+                      class="text-white text-shadow"
+                      :title="source.name"
+                      :subtitle="
+                        source.disabled ? 'API key missing or invalid' : ''
+                      "
+                    >
+                      <template #prepend>
+                        <v-avatar size="30" rounded="1">
+                          <v-img :src="source.logo_path" />
+                        </v-avatar>
+                      </template>
+                      <template #append>
+                        <span class="ml-2" v-if="source.disabled">❌</span>
+                        <span class="ml-2" v-else>✅</span>
+                      </template>
+                    </v-list-item>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-stepper-window-item>
+        </v-stepper-window>
+
+        <v-stepper-actions :disabled="!filledAdminUser">
+          <template #prev>
+            <v-btn
+              class="text-white text-shadow"
+              :ripple="false"
+              :disabled="isFirstStep"
+              @click="prev"
+              >{{ isFirstStep ? "" : "previous" }}</v-btn
+            >
+          </template>
+          <template #next>
+            <v-btn
+              class="text-white text-shadow"
+              @click="!isLastStep ? next() : finishWizard()"
+              >{{ !isLastStep ? "Next" : "Finish" }}</v-btn
+            >
+          </template>
+        </v-stepper-actions>
+      </template>
+    </v-stepper>
+  </v-card>
+</template>
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Home.vue
similarity index 79%
rename from frontend/src/views/Dashboard.vue
rename to frontend/src/views/Home.vue
index c871b66f1..9bb9b4c8b 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Home.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Collections from "@/components/Dashboard/Collections.vue";
-import Platforms from "@/components/Dashboard/Platforms.vue";
-import recentlyAdded from "@/components/Dashboard/Recent.vue";
-import Stats from "@/components/Dashboard/Stats.vue";
+import Collections from "@/components/Home/Collections.vue";
+import Platforms from "@/components/Home/Platforms.vue";
+import RecentlyAdded from "@/components/Home/Recent.vue";
+import Stats from "@/components/Home/Stats.vue";
 import romApi from "@/services/api/rom";
 import storeCollections from "@/stores/collections";
 import storePlatforms from "@/stores/platforms";
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
deleted file mode 100644
index 96339b024..000000000
--- a/frontend/src/views/Login.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import identityApi from "@/services/api/identity";
-import { refetchCSRFToken } from "@/services/api/index";
-import storeHeartbeat from "@/stores/heartbeat";
-import type { Events } from "@/types/emitter";
-import type { Emitter } from "mitt";
-import { inject, ref } from "vue";
-import { useRouter } from "vue-router";
-
-// Props
-const heartbeatStore = storeHeartbeat();
-const emitter = inject<Emitter<Events>>("emitter");
-const router = useRouter();
-const username = ref("");
-const password = ref("");
-const visiblePassword = ref(false);
-const logging = ref(false);
-
-// Functions
-async function login() {
-  logging.value = true;
-
-  await identityApi
-    .login(username.value, password.value)
-    .then(async () => {
-      // Refetch CSRF token
-      await refetchCSRFToken();
-
-      const params = new URLSearchParams(window.location.search);
-      router.push(params.get("next") ?? "/");
-    })
-    .catch(({ response, message }) => {
-      const errorMessage =
-        response.data?.detail ||
-        response.data ||
-        message ||
-        response.statusText;
-
-      emitter?.emit("snackbarShow", {
-        msg: `Unable to login: ${errorMessage}`,
-        icon: "mdi-close-circle",
-        color: "red",
-      });
-
-      console.error(
-        `[${response.status} ${response.statusText}] ${errorMessage}`,
-      );
-    })
-    .finally(() => {
-      logging.value = false;
-    });
-}
-</script>
-
-<template>
-  <span id="bg" />
-
-  <v-container class="fill-height justify-center">
-    <v-card class="translucent-dark py-8 px-5" width="500">
-      <v-row no-gutters>
-        <v-col>
-          <v-img src="/assets/isotipo.svg" class="mx-auto" width="150" />
-
-          <v-row class="text-white justify-center mt-2" no-gutters>
-            <v-col cols="10" md="8">
-              <v-form @submit.prevent>
-                <v-text-field
-                  v-model="username"
-                  autocomplete="on"
-                  required
-                  prepend-inner-icon="mdi-account"
-                  type="text"
-                  label="Username"
-                  variant="underlined"
-                />
-                <v-text-field
-                  v-model="password"
-                  autocomplete="on"
-                  required
-                  prepend-inner-icon="mdi-lock"
-                  :type="visiblePassword ? 'text' : 'password'"
-                  label="Password"
-                  variant="underlined"
-                  :append-inner-icon="
-                    visiblePassword ? 'mdi-eye-off' : 'mdi-eye'
-                  "
-                  @click:append-inner="visiblePassword = !visiblePassword"
-                />
-                <v-btn
-                  type="submit"
-                  :disabled="logging || !username || !password"
-                  :variant="!username || !password ? 'text' : 'flat'"
-                  class="bg-terciary"
-                  block
-                  :loading="logging"
-                  @click="login()"
-                >
-                  <span>Login</span>
-                  <template #append>
-                    <v-icon class="text-romm-accent-1"
-                      >mdi-chevron-right-circle-outline</v-icon
-                    >
-                  </template>
-                  <template #loader>
-                    <v-progress-circular
-                      color="romm-accent-1"
-                      :width="2"
-                      :size="20"
-                      indeterminate
-                    />
-                  </template>
-                </v-btn>
-              </v-form>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
-    </v-card>
-
-    <div id="version" class="position-absolute">
-      <span class="text-white text-shadow">{{
-        heartbeatStore.value.VERSION
-      }}</span>
-    </div>
-  </v-container>
-</template>
-
-<style>
-#bg {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background: url("/assets/login_bg.png") center center;
-  background-size: cover;
-}
-#version {
-  bottom: 0.3rem;
-  right: 0.5rem;
-}
-</style>
diff --git a/frontend/src/views/EmulatorJS/Base.vue b/frontend/src/views/Player/EmulatorJS/Base.vue
similarity index 99%
rename from frontend/src/views/EmulatorJS/Base.vue
rename to frontend/src/views/Player/EmulatorJS/Base.vue
index 954aab42c..a4dfa4dcb 100644
--- a/frontend/src/views/EmulatorJS/Base.vue
+++ b/frontend/src/views/Player/EmulatorJS/Base.vue
@@ -6,7 +6,7 @@ import romApi from "@/services/api/rom";
 import storeGalleryView from "@/stores/galleryView";
 import type { DetailedRom } from "@/stores/roms";
 import { formatBytes, formatTimestamp, getSupportedEJSCores } from "@/utils";
-import Player from "@/views/EmulatorJS/Player.vue";
+import Player from "@/views/Player/EmulatorJS/Player.vue";
 import { isNull } from "lodash";
 import { storeToRefs } from "pinia";
 import { onMounted, ref } from "vue";
diff --git a/frontend/src/views/EmulatorJS/Player.vue b/frontend/src/views/Player/EmulatorJS/Player.vue
similarity index 100%
rename from frontend/src/views/EmulatorJS/Player.vue
rename to frontend/src/views/Player/EmulatorJS/Player.vue
diff --git a/frontend/src/views/RuffleRS/Base.vue b/frontend/src/views/Player/RuffleRS/Base.vue
similarity index 100%
rename from frontend/src/views/RuffleRS/Base.vue
rename to frontend/src/views/Player/RuffleRS/Base.vue
diff --git a/frontend/src/views/Administration.vue b/frontend/src/views/Settings/Administration.vue
similarity index 100%
rename from frontend/src/views/Administration.vue
rename to frontend/src/views/Settings/Administration.vue
diff --git a/frontend/src/views/Management.vue b/frontend/src/views/Settings/Management.vue
similarity index 100%
rename from frontend/src/views/Management.vue
rename to frontend/src/views/Settings/Management.vue
diff --git a/frontend/src/views/UI.vue b/frontend/src/views/Settings/UserInterface.vue
similarity index 100%
rename from frontend/src/views/UI.vue
rename to frontend/src/views/Settings/UserInterface.vue
diff --git a/frontend/src/views/Setup.vue b/frontend/src/views/Setup.vue
deleted file mode 100644
index efb0e616e..000000000
--- a/frontend/src/views/Setup.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<script setup lang="ts">
-import router from "@/plugins/router";
-import { refetchCSRFToken } from "@/services/api/index";
-import userApi from "@/services/api/user";
-import storeHeartbeat from "@/stores/heartbeat";
-import type { Events } from "@/types/emitter";
-import type { Emitter } from "mitt";
-import { computed, inject, ref } from "vue";
-import { useDisplay } from "vuetify";
-
-// Props
-const { xs, smAndDown } = useDisplay();
-const emitter = inject<Emitter<Events>>("emitter");
-const heartbeat = storeHeartbeat();
-const visiblePassword = ref(false);
-// Use a computed property to reactively update metadataOptions based on heartbeat
-const metadataOptions = computed(() => [
-  {
-    name: "IGDB",
-    value: "igdb",
-    logo_path: "/assets/scrappers/igdb.png",
-    disabled: !heartbeat.value.METADATA_SOURCES?.IGDB_API_ENABLED,
-  },
-  {
-    name: "MobyGames",
-    value: "moby",
-    logo_path: "/assets/scrappers/moby.png",
-    disabled: !heartbeat.value.METADATA_SOURCES?.MOBY_API_ENABLED,
-  },
-  {
-    name: "SteamgridDB",
-    value: "sgdb",
-    logo_path: "/assets/scrappers/sgdb.png",
-    disabled: !heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_ENABLED,
-  },
-]);
-const defaultAdminUser = ref({
-  username: "",
-  password: "",
-  role: "admin",
-});
-const step = ref(1);
-const filledAdminUser = computed(
-  () =>
-    defaultAdminUser.value.username != "" &&
-    defaultAdminUser.value.password != "",
-);
-const isFirstStep = computed(() => step.value == 1);
-const isLastStep = computed(() => step.value == 2);
-
-// Functions
-async function finishWizard() {
-  await userApi
-    .createUser(defaultAdminUser.value)
-    .then(async () => {
-      await refetchCSRFToken();
-      router.push({ name: "login" });
-    })
-    .catch(({ response, message }) => {
-      emitter?.emit("snackbarShow", {
-        msg: `Unable to create user: ${
-          response?.data?.detail || response?.statusText || message
-        }`,
-        icon: "mdi-close-circle",
-        color: "red",
-      });
-    });
-}
-</script>
-
-<template>
-  <span id="bg" />
-
-  <v-container class="fill-height justify-center">
-    <v-card class="translucent-dark px-3" elevation="0">
-      <v-img src="/assets/isotipo.svg" class="mx-auto mt-4" width="70" />
-      <v-stepper
-        :mobile="smAndDown"
-        class="bg-transparent"
-        :width="xs ? '' : smAndDown ? 400 : 700"
-        max-width="700"
-        v-model="step"
-        flat
-      >
-        <template v-slot:default="{ prev, next }">
-          <v-stepper-header>
-            <v-stepper-item
-              class="text-white text-shadow"
-              title="Create an admin user"
-              :value="1"
-            ></v-stepper-item>
-
-            <v-divider></v-divider>
-
-            <v-stepper-item
-              class="text-white text-shadow"
-              title="Check metadata sources"
-              :value="2"
-            ></v-stepper-item>
-
-            <!-- <v-divider></v-divider> -->
-
-            <!-- <v-stepper-item title="Finish" :value="3"></v-stepper-item> -->
-          </v-stepper-header>
-
-          <v-stepper-window>
-            <v-stepper-window-item :value="1" :key="1">
-              <v-row no-gutters>
-                <v-col>
-                  <v-row v-if="smAndDown" no-gutters class="text-center mb-6">
-                    <v-col>
-                      <span>Create an admin user</span>
-                    </v-col>
-                  </v-row>
-                  <v-row class="text-white justify-center mt-3" no-gutters>
-                    <v-col cols="10" md="8">
-                      <v-form @submit.prevent>
-                        <v-text-field
-                          v-model="defaultAdminUser.username"
-                          required
-                          prepend-inner-icon="mdi-account"
-                          type="text"
-                          label="Username"
-                          variant="underlined"
-                        />
-                        <v-text-field
-                          v-model="defaultAdminUser.password"
-                          required
-                          prepend-inner-icon="mdi-lock"
-                          :type="visiblePassword ? 'text' : 'password'"
-                          label="Password"
-                          variant="underlined"
-                          :append-inner-icon="
-                            visiblePassword ? 'mdi-eye-off' : 'mdi-eye'
-                          "
-                          @click:append-inner="
-                            visiblePassword = !visiblePassword
-                          "
-                        />
-                      </v-form>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-stepper-window-item>
-
-            <v-stepper-window-item :value="2" :key="2">
-              <v-row no-gutters>
-                <v-col>
-                  <v-row v-if="smAndDown" no-gutters class="text-center mb-6">
-                    <v-col>
-                      <span>Check metadata sources</span>
-                    </v-col>
-                  </v-row>
-                  <v-row class="justify-center align-center" no-gutters>
-                    <v-col id="sources">
-                      <v-list-item
-                        v-for="source in metadataOptions"
-                        class="text-white text-shadow"
-                        :title="source.name"
-                        :subtitle="
-                          source.disabled ? 'API key missing or invalid' : ''
-                        "
-                      >
-                        <template #prepend>
-                          <v-avatar size="30" rounded="1">
-                            <v-img :src="source.logo_path" />
-                          </v-avatar>
-                        </template>
-                        <template #append>
-                          <span class="ml-2" v-if="source.disabled">❌</span>
-                          <span class="ml-2" v-else>✅</span>
-                        </template>
-                      </v-list-item>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-stepper-window-item>
-
-            <!-- <v-stepper-window-item :value="3" :key="3">
-              <v-row class="text-center" no-gutters>
-                <v-col>
-                  <span>Finished!</span>
-                </v-col>
-              </v-row>
-            </v-stepper-window-item> -->
-          </v-stepper-window>
-
-          <v-stepper-actions :disabled="!filledAdminUser">
-            <template #prev>
-              <v-btn
-                class="text-white text-shadow"
-                :ripple="false"
-                :disabled="isFirstStep"
-                @click="prev"
-                >{{ isFirstStep ? "" : "previous" }}</v-btn
-              >
-            </template>
-            <template #next>
-              <v-btn
-                class="text-white text-shadow"
-                @click="!isLastStep ? next() : finishWizard()"
-                >{{ !isLastStep ? "Next" : "Finish" }}</v-btn
-              >
-            </template>
-          </v-stepper-actions>
-        </template>
-      </v-stepper>
-    </v-card>
-
-    <div id="version" class="position-absolute">
-      <span class="text-white">{{ heartbeat.value.VERSION }}</span>
-    </div>
-  </v-container>
-</template>
-
-<style>
-#bg {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background: url("/assets/login_bg.png") center center;
-  background-size: cover;
-}
-#sources {
-  max-width: 300px;
-}
-#version {
-  text-shadow:
-    1px 1px 1px #000000,
-    0 0 1px #000000;
-  bottom: 0.3rem;
-  right: 0.5rem;
-}
-</style>

From c3e78cbc2150186c0d68b87ca61b72e30b579f10 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 00:27:51 +0000
Subject: [PATCH 12/49] refactor: swap login and setup routes and update
 settings layout paths

---
 frontend/src/plugins/router.ts | 39 ++++++++++++++++++++++------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index 1ca6fe4e1..86fea5f7d 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -4,26 +4,26 @@ import storeHeartbeat from "@/stores/heartbeat";
 
 const routes = [
   {
-    path: "/login",
-    name: "loginView",
+    path: "/setup",
+    name: "setupView",
     component: () => import("@/layouts/Auth.vue"),
     children: [
       {
         path: "",
-        name: "login",
-        component: () => import("@/views/Auth/Login.vue"),
+        name: "setup",
+        component: () => import("@/views/Auth/Setup.vue"),
       },
     ],
   },
   {
-    path: "/setup",
-    name: "setupView",
+    path: "/login",
+    name: "loginView",
     component: () => import("@/layouts/Auth.vue"),
     children: [
       {
         path: "",
-        name: "setup",
-        component: () => import("@/views/Auth/Setup.vue"),
+        name: "login",
+        component: () => import("@/views/Auth/Login.vue"),
       },
     ],
   },
@@ -68,22 +68,33 @@ const routes = [
         component: () => import("@/views/Scan.vue"),
       },
       {
-        path: "settings",
-        name: "settings",
+        path: "/ui",
         component: () => import("@/layouts/Settings.vue"),
         children: [
           {
-            path: "ui",
+            path: "",
             name: "ui",
-            component: () => import("@/views/UI.vue"),
+            component: () => import("@/views/Settings/UserInterface.vue"),
           },
+        ],
+      },
+      {
+        path: "/management",
+        component: () => import("@/layouts/Settings.vue"),
+        children: [
           {
-            path: "management",
+            path: "",
             name: "management",
             component: () => import("@/views/Settings/Management.vue"),
           },
+        ],
+      },
+      {
+        path: "/administration",
+        component: () => import("@/layouts/Settings.vue"),
+        children: [
           {
-            path: "administration",
+            path: "",
             name: "administration",
             component: () => import("@/views/Settings/Administration.vue"),
           },

From 6892a7f3e1b0da7c8c2cf92dbae7b3296b142ac9 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 00:28:25 +0000
Subject: [PATCH 13/49] refactor: clean up template structure and improve
 alignment in rows with different aspect ratio covers

---
 frontend/src/components/Home/Recent.vue       |  2 +-
 .../common/Game/Dialog/MatchRom.vue           |  2 +-
 frontend/src/views/Auth/Login.vue             | 22 ++++------
 frontend/src/views/Auth/Setup.vue             | 42 +++++++++----------
 frontend/src/views/Gallery/Collection.vue     |  6 +--
 frontend/src/views/Gallery/Platform.vue       |  6 +--
 frontend/src/views/GameDetails.vue            |  4 +-
 7 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/Home/Recent.vue b/frontend/src/components/Home/Recent.vue
index e88d528a3..51c7bb71c 100644
--- a/frontend/src/components/Home/Recent.vue
+++ b/frontend/src/components/Home/Recent.vue
@@ -27,7 +27,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
 <template>
   <r-section icon="mdi-shimmer" title="Recently added">
     <template #content>
-      <v-row class="flex-nowrap overflow-x-auto align-center" no-gutters>
+      <v-row class="flex-nowrap overflow-x-auto" no-gutters>
         <v-col
           v-for="rom in recentRoms"
           :key="rom.id"
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 1c759466a..27f1b6fc1 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -328,7 +328,7 @@ onBeforeUnmount(() => {
       </v-row>
     </template>
     <template #content>
-      <v-row v-show="!showSelectSource" no-gutters>
+      <v-row class="align-content-start" v-show="!showSelectSource" no-gutters>
         <v-col
           class="pa-1"
           cols="4"
diff --git a/frontend/src/views/Auth/Login.vue b/frontend/src/views/Auth/Login.vue
index 6a2050023..da11ce94e 100644
--- a/frontend/src/views/Auth/Login.vue
+++ b/frontend/src/views/Auth/Login.vue
@@ -21,9 +21,7 @@ async function login() {
   await identityApi
     .login(username.value, password.value)
     .then(async () => {
-      // Refetch CSRF token
       await refetchCSRFToken();
-
       const params = new URLSearchParams(window.location.search);
       router.push(params.get("next") ?? "/");
     })
@@ -33,13 +31,11 @@ async function login() {
         response.data ||
         message ||
         response.statusText;
-
       emitter?.emit("snackbarShow", {
         msg: `Unable to login: ${errorMessage}`,
         icon: "mdi-close-circle",
         color: "red",
       });
-
       console.error(
         `[${response.status} ${response.statusText}] ${errorMessage}`,
       );
@@ -58,31 +54,31 @@ async function login() {
         <v-form @submit.prevent="login">
           <v-text-field
             v-model="username"
-            autocomplete="on"
+            label="Username"
+            type="text"
             required
+            autocomplete="on"
             prepend-inner-icon="mdi-account"
-            type="text"
-            label="Username"
             variant="underlined"
           />
           <v-text-field
             v-model="password"
-            autocomplete="on"
+            label="Password"
+            :type="visiblePassword ? 'text' : 'password'"
             required
+            autocomplete="on"
             prepend-inner-icon="mdi-lock"
-            :type="visiblePassword ? 'text' : 'password'"
-            label="Password"
-            variant="underlined"
             :append-inner-icon="visiblePassword ? 'mdi-eye-off' : 'mdi-eye'"
             @click:append-inner="visiblePassword = !visiblePassword"
+            variant="underlined"
           />
           <v-btn
             type="submit"
-            :disabled="logging || !username || !password"
-            :variant="!username || !password ? 'text' : 'flat'"
             class="bg-terciary"
             block
             :loading="logging"
+            :disabled="logging || !username || !password"
+            :variant="!username || !password ? 'text' : 'flat'"
           >
             <span>Login</span>
             <template #append>
diff --git a/frontend/src/views/Auth/Setup.vue b/frontend/src/views/Auth/Setup.vue
index 0c25cfc68..a32c6e95e 100644
--- a/frontend/src/views/Auth/Setup.vue
+++ b/frontend/src/views/Auth/Setup.vue
@@ -74,23 +74,19 @@ async function finishWizard() {
     <v-stepper :mobile="xs" class="bg-transparent" v-model="step" flat>
       <template v-slot:default="{ prev, next }">
         <v-stepper-header>
-          <v-stepper-item :value="1"
-            ><template #title
-              ><span class="text-white text-shadow"
-                >Create an admin user</span
-              ></template
-            ></v-stepper-item
-          >
+          <v-stepper-item :value="1">
+            <template #title>
+              <span class="text-white text-shadow">Create an admin user</span>
+            </template>
+          </v-stepper-item>
 
           <v-divider></v-divider>
 
-          <v-stepper-item :value="2"
-            ><template #title
-              ><span class="text-white text-shadow"
-                >Check metadata sources</span
-              ></template
-            ></v-stepper-item
-          >
+          <v-stepper-item :value="2">
+            <template #title>
+              <span class="text-white text-shadow">Check metadata sources</span>
+            </template>
+          </v-stepper-item>
         </v-stepper-header>
 
         <v-stepper-window>
@@ -107,23 +103,25 @@ async function finishWizard() {
                     <v-form @submit.prevent>
                       <v-text-field
                         v-model="defaultAdminUser.username"
+                        label="Username"
+                        type="text"
                         required
+                        autocomplete="on"
                         prepend-inner-icon="mdi-account"
-                        type="text"
-                        label="Username"
                         variant="underlined"
                       />
                       <v-text-field
                         v-model="defaultAdminUser.password"
+                        label="Password"
+                        :type="visiblePassword ? 'text' : 'password'"
                         required
+                        autocomplete="on"
                         prepend-inner-icon="mdi-lock"
-                        :type="visiblePassword ? 'text' : 'password'"
-                        label="Password"
-                        variant="underlined"
                         :append-inner-icon="
                           visiblePassword ? 'mdi-eye-off' : 'mdi-eye'
                         "
                         @click:append-inner="visiblePassword = !visiblePassword"
+                        variant="underlined"
                       />
                     </v-form>
                   </v-col>
@@ -174,15 +172,17 @@ async function finishWizard() {
               :ripple="false"
               :disabled="isFirstStep"
               @click="prev"
-              >{{ isFirstStep ? "" : "previous" }}</v-btn
             >
+              {{ isFirstStep ? "" : "previous" }}
+            </v-btn>
           </template>
           <template #next>
             <v-btn
               class="text-white text-shadow"
               @click="!isLastStep ? next() : finishWizard()"
-              >{{ !isLastStep ? "Next" : "Finish" }}</v-btn
             >
+              {{ !isLastStep ? "Next" : "Finish" }}
+            </v-btn>
           </template>
         </v-stepper-actions>
       </template>
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index a0328b9d6..0a7c15631 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -287,11 +287,7 @@ onBeforeUnmount(() => {
   <template v-if="!noCollectionError">
     <gallery-app-bar-collection />
     <template v-if="filteredRoms.length > 0">
-      <v-row
-        no-gutters
-        class="overflow-hidden align-center"
-        :class="{ 'pa-1': currentView != 2 }"
-      >
+      <v-row no-gutters :class="{ 'pa-1': currentView != 2 }">
         <!-- Gallery cards view -->
         <!-- v-show instead of v-if to avoid recalculate on view change -->
         <v-col
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 623cdeeef..4ff9c7191 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -304,11 +304,7 @@ onBeforeUnmount(() => {
   <template v-if="!noPlatformError">
     <gallery-app-bar />
     <template v-if="filteredRoms.length > 0">
-      <v-row
-        no-gutters
-        class="overflow-hidden"
-        :class="{ 'pa-1': currentView != 2 }"
-      >
+      <v-row no-gutters :class="{ 'pa-1': currentView != 2 }">
         <!-- Gallery cards view -->
         <!-- v-show instead of v-if to avoid recalculate on view change -->
         <v-col
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index de1a32fd2..3d489f39e 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -91,11 +91,11 @@ watch(
 
     <v-row
       class="px-5"
+      no-gutters
       :class="{
         'ml-6': mdAndUp,
         'justify-center': smAndDown,
       }"
-      no-gutters
     >
       <v-col
         class="cover"
@@ -140,10 +140,10 @@ watch(
           <title-info :rom="currentRom" />
         </div>
         <v-row
+          no-gutters
           :class="{
             'justify-center': smAndDown,
           }"
-          no-gutters
         >
           <v-tabs v-model="tab" slider-color="romm-accent-1" rounded="0">
             <v-tab value="details" rounded="0"> Details </v-tab>

From ebd0243815d4b43a3487c304d621c4b965d0430e Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 00:45:06 +0000
Subject: [PATCH 14/49] refactor: improve gallery layout structure with vuetify
 classes

---
 frontend/src/RomM.vue                     |  2 +-
 frontend/src/styles/common.css            | 11 -----------
 frontend/src/views/Gallery/Collection.vue | 18 ++++++------------
 frontend/src/views/Gallery/Platform.vue   | 16 +++++-----------
 4 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
index 518be9114..325919e05 100644
--- a/frontend/src/RomM.vue
+++ b/frontend/src/RomM.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-main>
+    <v-main class="h-100">
       <router-view />
     </v-main>
   </v-app>
diff --git a/frontend/src/styles/common.css b/frontend/src/styles/common.css
index ef0ee8f46..feee58f3c 100644
--- a/frontend/src/styles/common.css
+++ b/frontend/src/styles/common.css
@@ -69,14 +69,3 @@ body {
 #main-app-bar ~ #gallery-app-bar {
   top: 45px !important;
 }
-/*
-Calculation to fix 100dvh:
-main-app-bar -> 45px
-gallery-app-bar -> 48px
-*/
-.fill-height-desktop {
-  height: calc(100dvh - 48px) !important;
-}
-.fill-height-mobile {
-  height: calc(100dvh - 45px - 48px) !important;
-}
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 0a7c15631..5203d1b5e 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -287,12 +287,11 @@ onBeforeUnmount(() => {
   <template v-if="!noCollectionError">
     <gallery-app-bar-collection />
     <template v-if="filteredRoms.length > 0">
-      <v-row no-gutters :class="{ 'pa-1': currentView != 2 }">
+      <v-row v-show="currentView != 2" class="pa-1" no-gutters>
         <!-- Gallery cards view -->
         <!-- v-show instead of v-if to avoid recalculate on view change -->
         <v-col
           v-for="rom in filteredRoms.slice(0, itemsShown)"
-          v-show="currentView != 2"
           :key="rom.id"
           class="pa-1 align-self-end"
           :cols="views[currentView]['size-cols']"
@@ -309,9 +308,9 @@ onBeforeUnmount(() => {
             withLink
             showFlags
             showActionBar
+            showFav
             transformScale
             withBorder
-            showFav
             showPlatformIcon
             :withBorderRommAccent="
               romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
@@ -321,16 +320,11 @@ onBeforeUnmount(() => {
             @touchend="onGameTouchEnd"
           />
         </v-col>
+      </v-row>
 
-        <!-- Gallery list view -->
-        <v-col v-show="currentView == 2">
-          <game-data-table
-            :class="{
-              'fill-height-desktop': !smAndDown,
-              'fill-height-mobile': smAndDown,
-            }"
-          />
-        </v-col>
+      <!-- Gallery list view -->
+      <v-row v-show="currentView == 2" class="h-100" no-gutters>
+        <game-data-table class="fill-height" />
       </v-row>
       <fab-overlay />
     </template>
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 4ff9c7191..cb55f1733 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -304,12 +304,11 @@ onBeforeUnmount(() => {
   <template v-if="!noPlatformError">
     <gallery-app-bar />
     <template v-if="filteredRoms.length > 0">
-      <v-row no-gutters :class="{ 'pa-1': currentView != 2 }">
+      <v-row v-show="currentView != 2" class="pa-1" no-gutters>
         <!-- Gallery cards view -->
         <!-- v-show instead of v-if to avoid recalculate on view change -->
         <v-col
           v-for="rom in filteredRoms.slice(0, itemsShown)"
-          v-show="currentView != 2"
           :key="rom.id"
           class="pa-1 align-self-end"
           :cols="views[currentView]['size-cols']"
@@ -338,16 +337,11 @@ onBeforeUnmount(() => {
             @touchend="onGameTouchEnd"
           />
         </v-col>
+      </v-row>
 
-        <!-- Gallery list view -->
-        <v-col v-show="currentView == 2">
-          <game-data-table
-            :class="{
-              'fill-height-desktop': !smAndDown,
-              'fill-height-mobile': smAndDown,
-            }"
-          />
-        </v-col>
+      <!-- Gallery list view -->
+      <v-row v-show="currentView == 2" class="h-100" no-gutters>
+        <game-data-table class="h-100" />
       </v-row>
       <fab-overlay />
     </template>

From 9713c7c52646502b5222938448754e15f5dfa393 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 15:09:07 +0000
Subject: [PATCH 15/49] reordered scan view componentes props

---
 frontend/src/views/Scan.vue | 39 +++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 95df10486..f545032d0 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -100,12 +100,12 @@ async function stopScan() {
     <!-- Platform selector -->
     <v-col cols="12" md="5" lg="6" class="px-1">
       <v-select
-        :menu-props="{ maxHeight: 650 }"
-        prepend-inner-icon="mdi-controller"
         v-model="platformsToScan"
+        :items="platforms.allPlatforms"
+        :menu-props="{ maxHeight: 650 }"
         label="Platforms"
         item-title="name"
-        :items="platforms.allPlatforms"
+        prepend-inner-icon="mdi-controller"
         variant="outlined"
         density="comfortable"
         multiple
@@ -116,8 +116,8 @@ async function stopScan() {
       >
         <template #item="{ props, item }">
           <v-list-item
-            class="py-4"
             v-bind="props"
+            class="py-4"
             :title="item.raw.name ?? ''"
             :subtitle="item.raw.fs_slug"
           >
@@ -152,13 +152,13 @@ async function stopScan() {
     </v-col>
 
     <!-- Source options -->
-    <v-col class="px-1" cols="12" md="5" lg="4" :class="{ 'mt-3': smAndDown }">
+    <v-col cols="12" md="5" lg="4" class="px-1" :class="{ 'mt-3': smAndDown }">
       <v-select
-        prepend-inner-icon="mdi-database-search"
         v-model="metadataSources"
+        :items="metadataOptions"
         label="Metadata sources"
         item-title="name"
-        :items="metadataOptions"
+        prepend-inner-icon="mdi-database-search"
         variant="outlined"
         density="comfortable"
         multiple
@@ -195,16 +195,17 @@ async function stopScan() {
         </template>
       </v-select>
     </v-col>
+
     <!-- Scan options -->
-    <v-col class="px-1" cols="12" md="2" :class="{ 'mt-3': smAndDown }">
+    <v-col cols="12" md="2" class="px-1" :class="{ 'mt-3': smAndDown }">
       <v-select
-        prepend-inner-icon="mdi-magnify-scan"
         v-model="scanType"
+        :items="scanOptions"
+        label="Scan option"
+        prepend-inner-icon="mdi-magnify-scan"
         hide-details
         density="comfortable"
         variant="outlined"
-        label="Scan option"
-        :items="scanOptions"
       >
         <template #item="{ props, item }">
           <v-list-item v-bind="props" :subtitle="item.raw.subtitle" />
@@ -221,9 +222,9 @@ async function stopScan() {
   >
     <v-btn
       :disabled="scanning"
+      :loading="scanning"
       rounded="4"
       height="40"
-      :loading="scanning"
       @click="scan()"
     >
       <template #prepend>
@@ -263,6 +264,7 @@ async function stopScan() {
       Manage
     </v-btn>
   </v-row>
+
   <v-row
     v-if="metadataSources.length == 0"
     no-gutters
@@ -292,7 +294,7 @@ async function stopScan() {
   >
     <v-card-text class="pa-0">
       <v-expansion-panels
-        :model-value="panels"
+        v-model="panels"
         multiple
         flat
         rounded="0"
@@ -366,7 +368,8 @@ async function stopScan() {
     :elevation="0"
     height="40"
     class="text-caption align-center"
-    ><v-chip variant="outlined" color="terciary" class="px-1">
+  >
+    <v-chip variant="outlined" color="terciary" class="px-1">
       <v-icon class="text-white"> mdi-information </v-icon>
       <v-chip
         v-if="scanningPlatforms.length > 0"
@@ -376,10 +379,12 @@ async function stopScan() {
         class="ml-1 my-1"
       >
         <v-icon left>mdi-controller</v-icon>
-        <span>&nbsp;Platforms: {{ scanningPlatforms.length }} scanned</span>
+        <span clasS="ml-2"
+          >Platforms: {{ scanningPlatforms.length }} scanned</span
+        >
         <span v-if="!xs">, with {{ scanStats.added_platforms }} new</span>
         <span v-if="!xs"
-          >&nbsp;and {{ scanStats.metadata_platforms }} identified</span
+          >and {{ scanStats.metadata_platforms }} identified</span
         >
       </v-chip>
       <v-chip
@@ -390,7 +395,7 @@ async function stopScan() {
         class="ml-1 my-1"
       >
         <v-icon left> mdi-disc </v-icon>
-        <span>&nbsp; Roms: {{ scanStats.scanned_roms }} scanned</span>
+        <span class="ml-2">Roms: {{ scanStats.scanned_roms }} scanned</span>
         <span v-if="!xs">, with {{ scanStats.added_roms }} new</span>
         <span v-if="!xs"
           >&nbsp;and {{ scanStats.metadata_roms }} identified</span

From 78329d63079843c8b94e3e495f3154bcabf28060 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 17:46:43 +0000
Subject: [PATCH 16/49] refactor: add width and height props to Card component
 for better layout control

---
 .../src/components/common/Game/Card/Base.vue  | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index ee554561b..d811e7c33 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -18,6 +18,8 @@ const props = withDefaults(
   defineProps<{
     rom: SimpleRom | SearchRomSchema;
     aspectRatio?: string | number;
+    width?: string | number;
+    height?: string | number;
     transformScale?: boolean;
     titleOnHover?: boolean;
     showFlags?: boolean;
@@ -33,6 +35,8 @@ const props = withDefaults(
   }>(),
   {
     aspectRatio: undefined,
+    width: undefined,
+    height: undefined,
     transformScale: false,
     titleOnHover: false,
     showFlags: false,
@@ -78,6 +82,10 @@ const computedAspectRatio = computed(() => {
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
     <v-card
+      :minWidth="width"
+      :maxWidth="width"
+      :minHeight="height"
+      :maxHeight="height"
       v-bind="{
         ...hoverProps,
         ...(withLink && rom && romsStore.isSimpleRom(rom)
@@ -112,19 +120,16 @@ const computedAspectRatio = computed(() => {
             cover
             :key="romsStore.isSimpleRom(rom) ? rom.updated_at : ''"
             :src="
-              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
+              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`
-                    : rom.igdb_url_cover
-                      ? rom.igdb_url_cover
-                      : rom.moby_url_cover
+                    : `/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.moby_url_cover)
             "
             :lazy-src="
               romsStore.isSimpleRom(rom)
@@ -135,9 +140,7 @@ const computedAspectRatio = computed(() => {
                     : `/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
+                  : rom.igdb_url_cover || rom.moby_url_cover
             "
             :aspect-ratio="computedAspectRatio"
           >

From 3a9d6d54195c46a9f2940f57c7c2b8be49ccc07d Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 17:46:55 +0000
Subject: [PATCH 17/49] refactor: simplify image source logic in EditUser and
 Related components

---
 .../components/Administration/Users/Dialog/EditUser.vue  | 9 ++++-----
 frontend/src/components/common/Game/Card/Related.vue     | 5 ++---
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Administration/Users/Dialog/EditUser.vue b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
index 6811b4fc9..ccdbdba16 100644
--- a/frontend/src/components/Administration/Users/Dialog/EditUser.vue
+++ b/frontend/src/components/Administration/Users/Dialog/EditUser.vue
@@ -135,11 +135,10 @@ function closeDialog() {
               <v-avatar size="190" class="ml-4" v-bind="props">
                 <v-img
                   :src="
-                    imagePreviewUrl
-                      ? imagePreviewUrl
-                      : user.avatar_path
-                        ? `/assets/romm/assets/${user.avatar_path}?ts=${user.updated_at}`
-                        : defaultAvatarPath
+                    imagePreviewUrl ||
+                    (user.avatar_path
+                      ? `/assets/romm/assets/${user.avatar_path}?ts=${user.updated_at}`
+                      : defaultAvatarPath)
                   "
                 >
                   <v-fade-transition>
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index 3be15c761..2eb8d90ff 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -34,9 +34,8 @@ const handleClick = () => {
     <v-img
       v-bind="props"
       :src="
-        `${game.cover_url}`
-          ? `https:${game.cover_url.replace('t_thumb', 't_cover_big')}`
-          : `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+        game.cover_url ||
+        `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
       "
       :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
       cover

From f4a5283769193ecb9bbb0e067276c8659795c7ff Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 17:47:29 +0000
Subject: [PATCH 18/49] refactor: simplified GameDetails layout

---
 frontend/src/views/GameDetails.vue | 79 ++++++------------------------
 1 file changed, 15 insertions(+), 64 deletions(-)

diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 3d489f39e..3cf2a4df4 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -7,7 +7,6 @@ import GameInfo from "@/components/Details/Info/GameInfo.vue";
 import Personal from "@/components/Details/Personal.vue";
 import RelatedGames from "@/components/Details/RelatedGames.vue";
 import Saves from "@/components/Details/Saves.vue";
-import storePlatforms from "@/stores/platforms";
 import States from "@/components/Details/States.vue";
 import TitleInfo from "@/components/Details/Title.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
@@ -37,7 +36,6 @@ const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const noRomError = ref(false);
 const romsStore = storeRoms();
-const platfotmsStore = storePlatforms();
 const { currentRom, gettingRoms } = storeToRefs(romsStore);
 
 async function fetchDetails() {
@@ -92,59 +90,24 @@ watch(
     <v-row
       class="px-5"
       no-gutters
-      :class="{
-        'ml-6': mdAndUp,
-        'justify-center': smAndDown,
-      }"
+      :class="{ 'ml-6': mdAndUp, 'justify-center': smAndDown }"
     >
-      <v-col
-        class="cover"
-        :class="{
-          'cover-desktop': mdAndUp,
-        }"
-        :style="
-          smAndDown
-            ? platfotmsStore.getAspectRatio(currentRom.platform_id) == 1 / 1
-              ? 'margin-top: -220px;'
-              : 'margin-top: -280px;'
-            : ''
-        "
-      >
-        <game-card :key="currentRom.updated_at" :rom="currentRom" />
-        <action-bar class="mt-2" :rom="currentRom" />
-        <related-games v-if="mdAndUp" class="mt-3" :rom="currentRom" />
+      <v-col>
+        <v-container :width="270" id="artwork-container" class="pa-0">
+          <game-card :key="currentRom.updated_at" :rom="currentRom" />
+          <action-bar class="mt-2" :rom="currentRom" />
+          <related-games v-if="mdAndUp" class="mt-3" :rom="currentRom" />
+        </v-container>
       </v-col>
 
-      <v-col
-        cols="12"
-        md="8"
-        class="px-5"
-        :class="{
-          'info-lg': mdAndUp,
-        }"
-        :style="
-          smAndDown
-            ? platfotmsStore.getAspectRatio(currentRom.platform_id) == 1 / 1
-              ? 'margin-top: -40px;'
-              : 'margin-top: 100px;'
-            : ''
-        "
-      >
+      <v-col cols="12" sm="8" class="px-5">
         <div
           class="px-3 pb-3"
-          :class="{
-            'position-absolute title-desktop': mdAndUp,
-            'justify-center': smAndDown,
-          }"
+          :class="{ 'position-absolute title-desktop': mdAndUp }"
         >
           <title-info :rom="currentRom" />
         </div>
-        <v-row
-          no-gutters
-          :class="{
-            'justify-center': smAndDown,
-          }"
-        >
+        <v-row no-gutters>
           <v-tabs v-model="tab" slider-color="romm-accent-1" rounded="0">
             <v-tab value="details" rounded="0"> Details </v-tab>
             <v-tab value="saves" rounded="0"> Saves </v-tab>
@@ -227,11 +190,9 @@ watch(
         </v-row>
       </v-col>
 
-      <template v-if="lgAndUp">
-        <v-col>
-          <additional-content :rom="currentRom" />
-        </v-col>
-      </template>
+      <v-col v-if="lgAndUp">
+        <additional-content :rom="currentRom" />
+      </v-col>
     </v-row>
   </template>
 
@@ -239,20 +200,10 @@ watch(
 </template>
 
 <style scoped>
-.cover {
-  min-width: 270px;
-  min-height: 360px;
-  max-width: 270px;
-  max-height: 360px;
-}
-.cover-desktop {
-  margin-top: -230px;
-}
 .title-desktop {
   margin-top: -190px;
-  margin-left: -20px;
 }
-.info-mobile {
-  margin-top: 100px;
+#artwork-container {
+  margin-top: -230px;
 }
 </style>

From 3be13486211f1f7a2f5eb59aa116a660800a0187 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 17:57:32 +0000
Subject: [PATCH 19/49] refactor: update event handling and layout properties
 in GameDetails and Related components

---
 frontend/src/components/common/Game/Card/Related.vue | 2 +-
 frontend/src/views/GameDetails.vue                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index 2eb8d90ff..3f77fac8f 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -21,7 +21,7 @@ const handleClick = () => {
 </script>
 
 <template>
-  <v-card class="ma-1" v-on:click="handleClick">
+  <v-card class="ma-1" @click="handleClick">
     <v-tooltip
       activator="parent"
       location="top"
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 3cf2a4df4..d8b798052 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -92,7 +92,7 @@ watch(
       no-gutters
       :class="{ 'ml-6': mdAndUp, 'justify-center': smAndDown }"
     >
-      <v-col>
+      <v-col cols="auto">
         <v-container :width="270" id="artwork-container" class="pa-0">
           <game-card :key="currentRom.updated_at" :rom="currentRom" />
           <action-bar class="mt-2" :rom="currentRom" />
@@ -100,7 +100,7 @@ watch(
         </v-container>
       </v-col>
 
-      <v-col cols="12" sm="8" class="px-5">
+      <v-col cols="12" sm="8" :class="{ 'px-5': mdAndUp }">
         <div
           class="px-3 pb-3"
           :class="{ 'position-absolute title-desktop': mdAndUp }"

From b9e0055c1a979762f91656dc0a61eed0145ca0de Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 19:03:33 +0000
Subject: [PATCH 20/49] refactor: improve layout and structure in Related,
 AdditionalContent, and ActionBar components

---
 frontend/src/components/Details/ActionBar.vue | 126 ++++-----
 .../components/Details/AdditionalContent.vue  |  23 +-
 .../src/components/Details/RelatedGames.vue   |   2 +-
 frontend/src/components/Details/Title.vue     | 249 +++++++++---------
 .../components/common/Game/Card/Related.vue   |   2 +-
 frontend/src/views/GameDetails.vue            |  23 +-
 6 files changed, 204 insertions(+), 221 deletions(-)

diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
index 85ed8352c..c07f7558b 100644
--- a/frontend/src/components/Details/ActionBar.vue
+++ b/frontend/src/components/Details/ActionBar.vue
@@ -55,69 +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 />
+    <copy-rom-download-link-dialog />
+  </div>
 </template>
diff --git a/frontend/src/components/Details/AdditionalContent.vue b/frontend/src/components/Details/AdditionalContent.vue
index 24e6ab483..20edbf755 100644
--- 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" md="6" class="px-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>
diff --git a/frontend/src/components/Details/RelatedGames.vue b/frontend/src/components/Details/RelatedGames.vue
index 17541c224..048d25c86 100644
--- a/frontend/src/components/Details/RelatedGames.vue
+++ b/frontend/src/components/Details/RelatedGames.vue
@@ -12,7 +12,7 @@ const games = computed(() => [
 </script>
 <template>
   <v-row no-gutters>
-    <v-col cols="4" sm="3" md="6" v-for="game in games">
+    <v-col cols="4" sm="3" md="6" class="px-1" v-for="game in games">
       <related-card :game="game" />
     </v-col>
   </v-row>
diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index 22df03ba2..f8c269874 100644
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -20,50 +20,94 @@ const releaseDate = new Date(
 const hasReleaseDate = Number(props.rom.first_release_date) > 0;
 </script>
 <template>
-  <v-row
-    class="text-white text-shadow"
-    :class="{ 'text-center mt-2': smAndDown }"
-    no-gutters
-  >
-    <v-col>
-      <v-list-item class="text-h5 font-weight-bold pl-0">
-        <span>{{ rom.name }}</span>
-        <fav-btn class="ml-1" :rom="rom" />
-      </v-list-item>
-    </v-col>
-  </v-row>
+  <div>
+    <v-row
+      class="text-white text-shadow"
+      :class="{ 'text-center mt-2': smAndDown }"
+      no-gutters
+    >
+      <v-col>
+        <v-list-item class="text-h5 font-weight-bold pl-0">
+          <span>{{ rom.name }}</span>
+          <fav-btn class="ml-1" :rom="rom" />
+        </v-list-item>
+      </v-col>
+    </v-row>
 
-  <v-row
-    class="text-white text-shadow mt-2"
-    :class="{ 'text-center': smAndDown }"
-    no-gutters
-  >
-    <v-col>
-      <v-chip :to="{ name: 'platform', params: { platform: rom.platform_id } }">
-        {{ rom.platform_name }}
-        <platform-icon
-          :key="rom.platform_slug"
-          :slug="rom.platform_slug"
-          :name="rom.platform_name"
-          :size="30"
-          class="ml-2"
-        />
-      </v-chip>
-      <v-chip
-        v-if="hasReleaseDate && !smAndDown"
-        class="ml-1 font-italic"
-        size="x-small"
-      >
-        {{ releaseDate }}
-      </v-chip>
-      <v-chip
-        v-if="Number(rom.first_release_date) > 0 && smAndDown"
-        class="font-italic ml-1"
-        size="x-small"
-      >
-        {{ releaseDate }}
-      </v-chip>
-      <template v-if="!smAndDown">
+    <v-row
+      class="text-white text-shadow mt-2"
+      :class="{ 'text-center': smAndDown }"
+      no-gutters
+    >
+      <v-col>
+        <v-chip
+          :to="{ name: 'platform', params: { platform: rom.platform_id } }"
+        >
+          {{ rom.platform_name }}
+          <platform-icon
+            :key="rom.platform_slug"
+            :slug="rom.platform_slug"
+            :name="rom.platform_name"
+            :size="30"
+            class="ml-2"
+          />
+        </v-chip>
+        <v-chip
+          v-if="hasReleaseDate && !smAndDown"
+          class="ml-1 font-italic"
+          size="x-small"
+        >
+          {{ releaseDate }}
+        </v-chip>
+        <v-chip
+          v-if="Number(rom.first_release_date) > 0 && smAndDown"
+          class="font-italic ml-1"
+          size="x-small"
+        >
+          {{ releaseDate }}
+        </v-chip>
+        <template v-if="!smAndDown">
+          <v-chip
+            class="ml-1"
+            v-if="rom.regions.filter(identity).length > 0"
+            size="small"
+            :title="`Regions: ${rom.regions.join(', ')}`"
+          >
+            <span v-for="region in rom.regions" :key="region" class="px-1">{{
+              regionToEmoji(region)
+            }}</span>
+          </v-chip>
+          <v-chip
+            v-if="rom.languages.filter(identity).length > 0"
+            size="small"
+            class="ml-1"
+            :title="`Languages: ${rom.languages.join(', ')}`"
+          >
+            <span
+              v-for="language in rom.languages"
+              :key="language"
+              class="px-1"
+              >{{ languageToEmoji(language) }}</span
+            >
+          </v-chip>
+          <v-chip v-if="rom.revision" size="small" class="ml-1">
+            Revision {{ rom.revision }}
+          </v-chip>
+        </template>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-if="
+        smAndDown &&
+        rom.regions.filter(identity).length > 0 &&
+        rom.languages.filter(identity).length > 0 &&
+        rom.revision
+      "
+      class="text-white text-shadow mt-2 text-center"
+      no-gutters
+    >
+      <v-col>
         <v-chip
           class="ml-1"
           v-if="rom.regions.filter(identity).length > 0"
@@ -90,83 +134,46 @@ const hasReleaseDate = Number(props.rom.first_release_date) > 0;
         <v-chip v-if="rom.revision" size="small" class="ml-1">
           Revision {{ rom.revision }}
         </v-chip>
-      </template>
-    </v-col>
-  </v-row>
-
-  <v-row
-    v-if="
-      smAndDown &&
-      rom.regions.filter(identity).length > 0 &&
-      rom.languages.filter(identity).length > 0 &&
-      rom.revision
-    "
-    class="text-white text-shadow mt-2 text-center"
-    no-gutters
-  >
-    <v-col>
-      <v-chip
-        class="ml-1"
-        v-if="rom.regions.filter(identity).length > 0"
-        size="small"
-        :title="`Regions: ${rom.regions.join(', ')}`"
-      >
-        <span v-for="region in rom.regions" :key="region" class="px-1">{{
-          regionToEmoji(region)
-        }}</span>
-      </v-chip>
-      <v-chip
-        v-if="rom.languages.filter(identity).length > 0"
-        size="small"
-        class="ml-1"
-        :title="`Languages: ${rom.languages.join(', ')}`"
-      >
-        <span v-for="language in rom.languages" :key="language" class="px-1">{{
-          languageToEmoji(language)
-        }}</span>
-      </v-chip>
-      <v-chip v-if="rom.revision" size="small" class="ml-1">
-        Revision {{ rom.revision }}
-      </v-chip>
-    </v-col>
-  </v-row>
+      </v-col>
+    </v-row>
 
-  <v-row
-    v-if="rom.igdb_id || rom.moby_id"
-    class="text-white text-shadow mt-2"
-    :class="{ 'text-center': smAndDown }"
-    no-gutters
-  >
-    <v-col cols="12">
-      <a
-        v-if="rom.igdb_id"
-        style="text-decoration: none; color: inherit"
-        :href="`https://www.igdb.com/games/${rom.slug}`"
-        target="_blank"
-      >
-        <v-chip size="x-small" @click.stop>
-          <span>IGDB</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>ID: {{ rom.igdb_id }}</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>Rating: {{ rom.igdb_metadata?.total_rating }}</span>
-        </v-chip>
-      </a>
-      <a
-        v-if="rom.moby_id"
-        style="text-decoration: none; color: inherit"
-        :href="`https://www.mobygames.com/game/${rom.moby_id}`"
-        target="_blank"
-        :class="{ 'ml-1': rom.igdb_id }"
-      >
-        <v-chip size="x-small" @click.stop>
-          <span>Mobygames</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>ID: {{ rom.moby_id }}</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>Rating: {{ rom.moby_metadata?.moby_score }}</span>
-        </v-chip>
-      </a>
-    </v-col>
-  </v-row>
+    <v-row
+      v-if="rom.igdb_id || rom.moby_id"
+      class="text-white text-shadow mt-2"
+      :class="{ 'text-center': smAndDown }"
+      no-gutters
+    >
+      <v-col cols="12">
+        <a
+          v-if="rom.igdb_id"
+          style="text-decoration: none; color: inherit"
+          :href="`https://www.igdb.com/games/${rom.slug}`"
+          target="_blank"
+        >
+          <v-chip size="x-small" @click.stop>
+            <span>IGDB</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>ID: {{ rom.igdb_id }}</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>Rating: {{ rom.igdb_metadata?.total_rating }}</span>
+          </v-chip>
+        </a>
+        <a
+          v-if="rom.moby_id"
+          style="text-decoration: none; color: inherit"
+          :href="`https://www.mobygames.com/game/${rom.moby_id}`"
+          target="_blank"
+          :class="{ 'ml-1': rom.igdb_id }"
+        >
+          <v-chip size="x-small" @click.stop>
+            <span>Mobygames</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>ID: {{ rom.moby_id }}</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>Rating: {{ rom.moby_metadata?.moby_score }}</span>
+          </v-chip>
+        </a>
+      </v-col>
+    </v-row>
+  </div>
 </template>
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index 3f77fac8f..af8f066b2 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -21,7 +21,7 @@ const handleClick = () => {
 </script>
 
 <template>
-  <v-card class="ma-1" @click="handleClick">
+  <v-card @click="handleClick">
     <v-tooltip
       activator="parent"
       location="top"
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index d8b798052..fb90ceff5 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -87,24 +87,17 @@ watch(
   <template v-if="currentRom && !gettingRoms">
     <background-header />
 
-    <v-row
-      class="px-5"
-      no-gutters
-      :class="{ 'ml-6': mdAndUp, 'justify-center': smAndDown }"
-    >
+    <v-row class="px-5" no-gutters :class="{ 'justify-center': smAndDown }">
       <v-col cols="auto">
         <v-container :width="270" id="artwork-container" class="pa-0">
           <game-card :key="currentRom.updated_at" :rom="currentRom" />
           <action-bar class="mt-2" :rom="currentRom" />
-          <related-games v-if="mdAndUp" class="mt-3" :rom="currentRom" />
+          <related-games v-if="mdAndUp" class="mt-4" :rom="currentRom" />
         </v-container>
       </v-col>
 
-      <v-col cols="12" sm="8" :class="{ 'px-5': mdAndUp }">
-        <div
-          class="px-3 pb-3"
-          :class="{ 'position-absolute title-desktop': mdAndUp }"
-        >
+      <v-col cols="12" md="8" :class="{ 'px-5': mdAndUp }">
+        <div :class="{ 'position-absolute title-desktop': mdAndUp }">
           <title-info :rom="currentRom" />
         </div>
         <v-row no-gutters>
@@ -140,11 +133,11 @@ watch(
             </v-tab>
           </v-tabs>
         </v-row>
-        <v-row no-gutters class="mb-4">
-          <v-col cols="12">
+        <v-row no-gutters>
+          <v-col cols="12" class="px-2">
             <v-window disabled v-model="tab" class="py-2">
               <v-window-item value="details">
-                <v-row no-gutters :class="{ 'mx-2': mdAndUp }">
+                <v-row no-gutters>
                   <v-col>
                     <file-info :rom="currentRom" />
                     <game-info :rom="currentRom" />
@@ -191,7 +184,7 @@ watch(
       </v-col>
 
       <v-col v-if="lgAndUp">
-        <additional-content :rom="currentRom" />
+        <additional-content class="mt-2" :rom="currentRom" />
       </v-col>
     </v-row>
   </template>

From 400b5b19cba6cd0830454f27361047104712a00f Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 22:46:31 +0000
Subject: [PATCH 21/49] refactor: enhance layout and structure in
 AdditionalContent, RelatedGames, and GameDetails components

---
 .../components/Details/AdditionalContent.vue  |  9 ++-
 .../src/components/Details/RelatedGames.vue   |  4 +-
 .../Collection/CollectionInfoDrawer.vue       |  6 +-
 .../components/common/Game/Card/Related.vue   | 69 +++++++++----------
 .../components/common/Navigation/HomeBtn.vue  | 31 +++++----
 frontend/src/views/GameDetails.vue            | 27 +++++---
 6 files changed, 81 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/Details/AdditionalContent.vue b/frontend/src/components/Details/AdditionalContent.vue
index 20edbf755..3af0abcbe 100644
--- a/frontend/src/components/Details/AdditionalContent.vue
+++ b/frontend/src/components/Details/AdditionalContent.vue
@@ -11,7 +11,14 @@ const combined = computed(() => [
 </script>
 <template>
   <v-row no-gutters>
-    <v-col cols="4" sm="3" md="6" class="px-1" v-for="expansion in combined">
+    <v-col
+      cols="4"
+      sm="3"
+      md="3"
+      lg="6"
+      class="pa-1"
+      v-for="expansion in combined"
+    >
       <related-card :game="expansion" />
     </v-col>
   </v-row>
diff --git a/frontend/src/components/Details/RelatedGames.vue b/frontend/src/components/Details/RelatedGames.vue
index 048d25c86..cfe368cc1 100644
--- a/frontend/src/components/Details/RelatedGames.vue
+++ b/frontend/src/components/Details/RelatedGames.vue
@@ -4,7 +4,7 @@ import type { DetailedRom } from "@/stores/roms";
 import { computed } from "vue";
 
 const props = defineProps<{ rom: DetailedRom }>();
-const games = computed(() => [
+const combined = computed(() => [
   ...(props.rom.igdb_metadata?.remakes ?? []),
   ...(props.rom.igdb_metadata?.remasters ?? []),
   ...(props.rom.igdb_metadata?.expanded_games ?? []),
@@ -12,7 +12,7 @@ const games = computed(() => [
 </script>
 <template>
   <v-row no-gutters>
-    <v-col cols="4" sm="3" md="6" class="px-1" v-for="game in games">
+    <v-col cols="4" sm="3" md="6" class="px-1" v-for="game in combined">
       <related-card :game="game" />
     </v-col>
   </v-row>
diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
index 6a6f8fb82..479d45e29 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -66,6 +66,7 @@ const collectionInfoFields = [
           v-if="auth.scopes.includes('collections.write')"
         >
           <v-btn
+            v-if="currentCollection.user__username === auth.user?.username"
             rounded="4"
             @click="
               emitter?.emit('showEditCollectionDialog', {
@@ -111,7 +112,10 @@ const collectionInfoFields = [
       </v-col>
     </v-row>
     <r-section
-      v-if="auth.scopes.includes('collections.write')"
+      v-if="
+        auth.scopes.includes('collections.write') &&
+        currentCollection.user__username === auth.user?.username
+      "
       icon="mdi-alert"
       icon-color="red"
       title="Danger zone"
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index af8f066b2..cb94ecb05 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -9,48 +9,41 @@ const props = defineProps<{
 }>();
 const theme = useTheme();
 const galleryViewStore = storeGalleryView();
-const handleClick = () => {
-  if (props.game.slug) {
-    window.open(
-      `https://www.igdb.com/games/${props.game.slug}`,
-      "_blank",
-      "noopener noreferrer",
-    );
-  }
-};
 </script>
 
 <template>
-  <v-card @click="handleClick">
-    <v-tooltip
-      activator="parent"
-      location="top"
-      class="tooltip"
-      transition="fade-transition"
-      open-delay="1000"
-      >{{ game.name }}</v-tooltip
-    >
-    <!-- TODO: fix aspect ratio -->
-    <v-img
-      v-bind="props"
-      :src="
-        game.cover_url ||
-        `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-      "
-      :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
-      cover
-      lazy
-      ><v-chip
-        class="px-2 position-absolute chip-type text-white translucent-dark"
-        density="compact"
-        label
+  <a :href="`https://www.igdb.com/games/${game.slug}`" target="_blank">
+    <v-card>
+      <v-tooltip
+        activator="parent"
+        location="top"
+        class="tooltip"
+        transition="fade-transition"
+        open-delay="1000"
+        >{{ game.name }}</v-tooltip
       >
-        <span>
-          {{ game.type }}
-        </span>
-      </v-chip></v-img
-    >
-  </v-card>
+      <v-img
+        v-bind="props"
+        :src="
+          game.cover_url ||
+          `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+        "
+        :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
+        cover
+        lazy
+        ><v-chip
+          class="px-2 position-absolute chip-type text-white translucent-dark"
+          density="compact"
+          rounded="0"
+          label
+        >
+          <span>
+            {{ game.type }}
+          </span>
+        </v-chip></v-img
+      >
+    </v-card>
+  </a>
 </template>
 <style scoped>
 .chip-type {
diff --git a/frontend/src/components/common/Navigation/HomeBtn.vue b/frontend/src/components/common/Navigation/HomeBtn.vue
index 92495bab3..5c3834edb 100644
--- a/frontend/src/components/common/Navigation/HomeBtn.vue
+++ b/frontend/src/components/common/Navigation/HomeBtn.vue
@@ -7,19 +7,20 @@ const homeUrl = ref(`${location.protocol}//${location.host}`);
 const navigationStore = storeNavigation();
 </script>
 <template>
-  <a
-    @click.prevent
-    style="text-decoration: none; color: inherit"
-    :href="homeUrl"
-  >
-    <v-hover v-slot="{ isHovering, props: hoverProps }">
-      <r-isotipo
-        @click="navigationStore.goHome"
-        v-bind="hoverProps"
-        class="pointer"
-        :class="{ 'border-romm-accent-1': isHovering }"
-        :size="35"
-      />
-    </v-hover>
-  </a>
+  <r-isotipo
+    :to="homeUrl"
+    @click="navigationStore.goHome"
+    class="cursor-pointer"
+    :size="35"
+  />
 </template>
+
+<style scoped>
+.v-avatar {
+  transition: filter 0.15s ease-in-out;
+}
+.v-avatar:hover,
+.v-avatar.active {
+  filter: drop-shadow(0px 0px 2px rgba(var(--v-theme-romm-accent-1)));
+}
+</style>
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index fb90ceff5..99856d51a 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -96,12 +96,23 @@ watch(
         </v-container>
       </v-col>
 
-      <v-col cols="12" md="8" :class="{ 'px-5': mdAndUp }">
-        <div :class="{ 'position-absolute title-desktop': mdAndUp }">
+      <v-col>
+        <div
+          class="ml-4"
+          :class="{ 'position-absolute title-desktop': mdAndUp }"
+        >
           <title-info :rom="currentRom" />
         </div>
-        <v-row no-gutters>
-          <v-tabs v-model="tab" slider-color="romm-accent-1" rounded="0">
+        <v-row
+          :class="{ 'px-4': mdAndUp, 'justify-center': smAndDown }"
+          no-gutters
+        >
+          <v-tabs
+            v-model="tab"
+            slider-color="romm-accent-1"
+            :class="{ 'mt-4': smAndDown }"
+            rounded="0"
+          >
             <v-tab value="details" rounded="0"> Details </v-tab>
             <v-tab value="saves" rounded="0"> Saves </v-tab>
             <v-tab value="states" rounded="0"> States </v-tab>
@@ -132,8 +143,6 @@ watch(
               Related Games
             </v-tab>
           </v-tabs>
-        </v-row>
-        <v-row no-gutters>
           <v-col cols="12" class="px-2">
             <v-window disabled v-model="tab" class="py-2">
               <v-window-item value="details">
@@ -183,8 +192,10 @@ watch(
         </v-row>
       </v-col>
 
-      <v-col v-if="lgAndUp">
-        <additional-content class="mt-2" :rom="currentRom" />
+      <v-col cols="auto" v-if="lgAndUp">
+        <v-container :width="270" class="pa-0">
+          <additional-content class="mt-2" :rom="currentRom" />
+        </v-container>
       </v-col>
     </v-row>
   </template>

From 58ed414f46697a4a5c0ae82b3fd263a28945eb96 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 23:00:08 +0000
Subject: [PATCH 22/49] refactor: update layout and structure in Title,
 CollectionInfoDrawer, and PlatformInfoDrawer components

---
 frontend/src/components/Details/Title.vue     |  6 +-
 .../Collection/CollectionInfoDrawer.vue       | 46 ++++++-------
 .../AppBar/Platform/PlatformInfoDrawer.vue    | 66 ++++++++++---------
 3 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index f8c269874..bf99efd47 100644
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -23,14 +23,14 @@ const hasReleaseDate = Number(props.rom.first_release_date) > 0;
   <div>
     <v-row
       class="text-white text-shadow"
-      :class="{ 'text-center mt-2': smAndDown }"
+      :class="{ 'text-center my-4': smAndDown }"
       no-gutters
     >
       <v-col>
-        <v-list-item class="text-h5 font-weight-bold pl-0">
+        <p class="text-h5 font-weight-bold pl-0">
           <span>{{ rom.name }}</span>
           <fav-btn class="ml-1" :rom="rom" />
-        </v-list-item>
+        </p>
       </v-col>
     </v-row>
 
diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
index 479d45e29..534120d27 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -22,14 +22,6 @@ const { currentCollection } = storeToRefs(romsStore);
 const navigationStore = storeNavigation();
 const { activeCollectionInfoDrawer } = storeToRefs(navigationStore);
 const collectionInfoFields = [
-  {
-    key: "name",
-    label: "Name",
-  },
-  {
-    key: "description",
-    label: "Description",
-  },
   {
     key: "rom_count",
     label: "Roms",
@@ -65,21 +57,29 @@ const collectionInfoFields = [
           class="text-center mt-4"
           v-if="auth.scopes.includes('collections.write')"
         >
-          <v-btn
-            v-if="currentCollection.user__username === auth.user?.username"
-            rounded="4"
-            @click="
-              emitter?.emit('showEditCollectionDialog', {
-                ...currentCollection,
-              })
-            "
-            class="bg-terciary"
-          >
-            <template #prepend>
-              <v-icon>mdi-pencil-box</v-icon>
-            </template>
-            Edit collection
-          </v-btn>
+          <p class="text-h5 font-weight-bold pl-0">
+            <span>{{ currentCollection.name }}</span>
+          </p>
+          <p class="text-subtitle-2">
+            <span>{{ currentCollection.description }}</span>
+          </p>
+          <div class="mt-6">
+            <v-btn
+              v-if="currentCollection.user__username === auth.user?.username"
+              rounded="4"
+              @click="
+                emitter?.emit('showEditCollectionDialog', {
+                  ...currentCollection,
+                })
+              "
+              class="bg-terciary"
+            >
+              <template #prepend>
+                <v-icon>mdi-pencil-box</v-icon>
+              </template>
+              Edit collection
+            </v-btn>
+          </div>
         </div>
       </v-col>
       <v-col cols="12">
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index da5c10eb2..2bb7993f1 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -47,7 +47,6 @@ const aspectRatioOptions = computed(() => [
 ]);
 
 const platformInfoFields = [
-  { key: "name", label: "Name" },
   { key: "slug", label: "Slug" },
   { key: "fs_slug", label: "Filesystem folder name" },
   { key: "category", label: "Category" },
@@ -137,38 +136,43 @@ async function setAspectRatio() {
           />
         </div>
         <div
-          class="text-center mt-4"
+          class="text-center mt-2"
           v-if="auth.scopes.includes('platforms.write')"
         >
-          <v-btn
-            class="bg-terciary"
-            @click="emitter?.emit('showUploadRomDialog', currentPlatform)"
-          >
-            <v-icon class="text-romm-green mr-2">mdi-upload</v-icon>
-            Upload roms
-          </v-btn>
-          <v-btn
-            :disabled="scanning"
-            rounded="4"
-            :loading="scanning"
-            @click="scan"
-            class="ml-2 bg-terciary"
-          >
-            <template #prepend>
-              <v-icon :color="scanning ? '' : 'romm-accent-1'"
-                >mdi-magnify-scan</v-icon
-              >
-            </template>
-            Scan platform
-            <template #loader>
-              <v-progress-circular
-                color="romm-accent-1"
-                :width="2"
-                :size="20"
-                indeterminate
-              />
-            </template>
-          </v-btn>
+          <p class="text-h5 font-weight-bold pl-0">
+            <span>{{ currentPlatform.name }}</span>
+          </p>
+          <div class="mt-6">
+            <v-btn
+              class="bg-terciary"
+              @click="emitter?.emit('showUploadRomDialog', currentPlatform)"
+            >
+              <v-icon class="text-romm-green mr-2">mdi-upload</v-icon>
+              Upload roms
+            </v-btn>
+            <v-btn
+              :disabled="scanning"
+              rounded="4"
+              :loading="scanning"
+              @click="scan"
+              class="ml-2 bg-terciary"
+            >
+              <template #prepend>
+                <v-icon :color="scanning ? '' : 'romm-accent-1'"
+                  >mdi-magnify-scan</v-icon
+                >
+              </template>
+              Scan platform
+              <template #loader>
+                <v-progress-circular
+                  color="romm-accent-1"
+                  :width="2"
+                  :size="20"
+                  indeterminate
+                />
+              </template>
+            </v-btn>
+          </div>
         </div>
         <div class="mt-4 text-center">
           <a

From a15a58344d18b72cedc7a39b97f4c7dc915195ab Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 23:30:15 +0000
Subject: [PATCH 23/49] refactor: update template syntax for slot usage in
 Personal and Setup components

---
 frontend/src/components/Details/Personal.vue | 10 +++++-----
 frontend/src/views/Auth/Setup.vue            |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Details/Personal.vue b/frontend/src/components/Details/Personal.vue
index 8624f4768..53ac5644c 100644
--- a/frontend/src/components/Details/Personal.vue
+++ b/frontend/src/components/Details/Personal.vue
@@ -76,7 +76,7 @@ watch(
             color="romm-accent-1"
             hide-details
           >
-            <template v-slot:label
+            <template #label
               ><span>Backlogged</span
               ><span class="ml-2">{{
                 getEmojiForStatus("backlogged")
@@ -88,7 +88,7 @@ watch(
             color="romm-accent-1"
             hide-details
           >
-            <template v-slot:label
+            <template #label
               ><span>Now playing</span
               ><span class="ml-2">{{
                 getEmojiForStatus("now_playing")
@@ -100,7 +100,7 @@ watch(
             color="romm-accent-1"
             hide-details
           >
-            <template v-slot:label
+            <template #label
               ><span>Hidden</span
               ><span class="ml-2">{{
                 getEmojiForStatus("hidden")
@@ -190,13 +190,13 @@ watch(
               density="compact"
               class="mt-1"
             >
-              <template v-slot:selection="{ item }">
+              <template #selection="{ item }">
                 <span>{{ getEmojiForStatus(item.raw as RomUserStatus) }}</span
                 ><span class="ml-2">{{
                   getTextForStatus(item.raw as RomUserStatus)
                 }}</span>
               </template>
-              <template v-slot:item="{ item }">
+              <template #item="{ item }">
                 <v-list-item
                   link
                   rounded="0"
diff --git a/frontend/src/views/Auth/Setup.vue b/frontend/src/views/Auth/Setup.vue
index a32c6e95e..8fecf8f5f 100644
--- a/frontend/src/views/Auth/Setup.vue
+++ b/frontend/src/views/Auth/Setup.vue
@@ -72,7 +72,7 @@ async function finishWizard() {
   <v-card class="translucent-dark px-3" width="700">
     <v-img src="/assets/isotipo.svg" class="mx-auto mt-6" width="70" />
     <v-stepper :mobile="xs" class="bg-transparent" v-model="step" flat>
-      <template v-slot:default="{ prev, next }">
+      <template #default="{ prev, next }">
         <v-stepper-header>
           <v-stepper-item :value="1">
             <template #title>

From d366a0a6301aa4261ea826a45c72b38052c1f50b Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 5 Dec 2024 23:32:47 +0000
Subject: [PATCH 24/49] refactor: update template syntax for props in
 Collection and Platform components

---
 frontend/src/views/Gallery/Collection.vue | 20 ++++++++++----------
 frontend/src/views/Gallery/Platform.vue   | 18 +++++++++---------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 5203d1b5e..03d7467ea 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -303,16 +303,16 @@ onBeforeUnmount(() => {
           <game-card
             :key="rom.updated_at"
             :rom="rom"
-            titleOnHover
-            pointerOnHover
-            withLink
-            showFlags
-            showActionBar
-            showFav
-            transformScale
-            withBorder
-            showPlatformIcon
-            :withBorderRommAccent="
+            title-on-hover
+            pointer-on-hover
+            with-link
+            show-flags
+            show-action-bar
+            show-fav
+            transform-scale
+            with-border
+            show-platform-icon
+            :with-border-romm-accent="
               romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
             "
             @click="onGameClick"
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index cb55f1733..e0fbebbb0 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -321,15 +321,15 @@ onBeforeUnmount(() => {
             v-if="currentPlatform"
             :key="rom.updated_at"
             :rom="rom"
-            titleOnHover
-            pointerOnHover
-            withLink
-            showFlags
-            showActionBar
-            showFav
-            transformScale
-            withBorder
-            :withBorderRommAccent="
+            title-on-hover
+            pointer-on-hover
+            with-link
+            show-flags
+            show-action-bar
+            show-fav
+            transform-scale
+            with-border
+            :with-border-romm-accent="
               romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
             "
             @click="onGameClick"

From 2972f6c7e0e57ba1c0e9a03b63bdc436fcaf3a1b Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 00:11:44 +0000
Subject: [PATCH 25/49] refactor: update template syntax and enhance layout in
 FileInfo, GameInfo, Collections, and Recent components

---
 .../src/components/Details/Info/FileInfo.vue  | 66 ++++++-------------
 .../src/components/Details/Info/GameInfo.vue  | 30 +++++++++
 frontend/src/components/Home/Collections.vue  |  4 +-
 frontend/src/components/Home/Recent.vue       | 16 ++---
 4 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index ba426f6e8..e737ec339 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import VersionSwitcher from "@/components/Details/VersionSwitcher.vue";
-import RAvatar from "@/components/common/Collection/RAvatar.vue";
 import romApi from "@/services/api/rom";
 import storeAuth from "@/stores/auth";
-import type { Collection } from "@/stores/collections";
 import storeDownload from "@/stores/download";
 import type { DetailedRom } from "@/stores/roms";
 import { formatBytes } from "@/utils";
@@ -12,7 +10,6 @@ import { ref, watch } from "vue";
 // Props
 const props = defineProps<{ rom: DetailedRom }>();
 const downloadStore = storeDownload();
-const auth = storeAuth();
 const romUser = ref(props.rom.rom_user);
 const romInfo = ref([
   { label: "SHA-1", value: props.rom.sha1_hash },
@@ -21,10 +18,6 @@ const romInfo = ref([
 ]);
 
 // Functions
-function collectionsWithoutFavourites(collections: Collection[]) {
-  return collections.filter((c) => c.name.toLowerCase() != "favourites");
-}
-
 async function toggleMainSibling() {
   romUser.value.is_main_sibling = !romUser.value.is_main_sibling;
   romApi.updateUserRomProps({
@@ -116,17 +109,26 @@ watch(
           <span>Info</span>
         </v-col>
         <v-col class="my-1">
-          <v-chip size="small" class="my-1 mr-2" label>
-            Size: {{ formatBytes(rom.file_size_bytes) }}
-          </v-chip>
-          <v-chip
-            v-for="info in romInfo"
-            v-if="!rom.multi && rom.sha1_hash"
-            size="small"
-            label
-            class="my-1 mr-2"
-            >{{ info.label }}: {{ info.value }}</v-chip
-          >
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-chip size="small" class="mr-2 px-0" label>
+                <v-chip label>Size</v-chip
+                ><span class="px-2">{{
+                  formatBytes(rom.file_size_bytes)
+                }}</span>
+              </v-chip>
+            </v-col>
+            <v-col
+              v-for="info in romInfo"
+              v-if="!rom.multi && rom.sha1_hash"
+              cols="12"
+            >
+              <v-chip size="small" class="mt-1 mr-2 px-0" label>
+                <v-chip label>{{ info.label }}</v-chip
+                ><span class="px-2">{{ info.value }}</span>
+              </v-chip>
+            </v-col>
+          </v-row>
         </v-col>
       </v-row>
       <v-row v-if="rom.tags.length > 0" class="align-center my-3" no-gutters>
@@ -147,34 +149,6 @@ watch(
           </v-chip>
         </v-col>
       </v-row>
-      <v-row
-        v-if="
-          rom.user_collections &&
-          collectionsWithoutFavourites(rom.user_collections).length > 0
-        "
-        no-gutters
-        class="align-center my-3"
-      >
-        <v-col cols="3" xl="2">
-          <span>Collections</span>
-        </v-col>
-        <v-col>
-          <v-chip
-            v-for="collection in collectionsWithoutFavourites(
-              rom.user_collections,
-            )"
-            :to="{ name: 'collection', params: { collection: collection.id } }"
-            size="large"
-            class="mr-1 mt-1"
-            label
-          >
-            <template #prepend>
-              <r-avatar :size="25" :collection="collection" />
-            </template>
-            <span class="ml-2">{{ collection.name }}</span>
-          </v-chip>
-        </v-col>
-      </v-row>
     </v-col>
   </v-row>
 </template>
diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index e8fbf7a0e..994c2ce44 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type FilterType } from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
+import RAvatar from "@/components/common/Collection/RAvatar.vue";
 import type { DetailedRom } from "@/stores/roms";
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
@@ -30,6 +31,35 @@ function onFilterClick(filter: FilterType, value: string) {
   <v-row no-gutters>
     <v-col>
       <v-divider class="mx-2 my-4" />
+      <v-row
+        v-if="rom.user_collections && rom.user_collections.length > 0"
+        no-gutters
+        class="align-center my-3"
+      >
+        <v-col cols="3" xl="2">
+          <span>RomM Collections</span>
+        </v-col>
+        <v-col>
+          <v-row no-gutters>
+            <v-col cols="12" v-for="collection in rom.user_collections">
+              <v-chip
+                :to="{
+                  name: 'collection',
+                  params: { collection: collection.id },
+                }"
+                size="large"
+                class="mr-1 mt-1"
+                label
+              >
+                <template #prepend>
+                  <r-avatar :size="25" :collection="collection" />
+                </template>
+                <span class="ml-4">{{ collection.name }}</span>
+              </v-chip>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
       <template v-for="filter in filters" :key="filter">
         <v-row
           v-if="rom[filter].length > 0"
diff --git a/frontend/src/components/Home/Collections.vue b/frontend/src/components/Home/Collections.vue
index 6ddc3976f..2ae1ec892 100644
--- a/frontend/src/components/Home/Collections.vue
+++ b/frontend/src/components/Home/Collections.vue
@@ -24,10 +24,10 @@ const collections = storeCollections();
           <collection-card
             show-rom-count
             show-title
-            transformScale
+            transform-scale
             :key="collection.updated_at"
             :collection="collection"
-            withLink
+            with-link
           />
         </v-col>
       </v-row>
diff --git a/frontend/src/components/Home/Recent.vue b/frontend/src/components/Home/Recent.vue
index 51c7bb71c..9e27069fc 100644
--- a/frontend/src/components/Home/Recent.vue
+++ b/frontend/src/components/Home/Recent.vue
@@ -42,14 +42,14 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
             :key="rom.updated_at"
             :rom="rom"
             @click="onGameClick"
-            titleOnHover
-            pointerOnHover
-            withLink
-            showFlags
-            showFav
-            transformScale
-            showActionBar
-            showPlatformIcon
+            title-on-hover
+            pointer-on-hover
+            with-link
+            show-flags
+            show-fav
+            transform-scale
+            show-action-bar
+            show-platform-icon
           />
         </v-col>
       </v-row>

From 8a6520d045665472f6a670ab891833134aabab14 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 00:18:38 +0000
Subject: [PATCH 26/49] refactor: adjust avatar sizes and layout in GameInfo,
 ListItem, HomeBtn, UserBtn, and Platform components

---
 frontend/src/components/Details/Info/GameInfo.vue      | 6 +++---
 frontend/src/components/common/Collection/ListItem.vue | 2 +-
 frontend/src/components/common/Navigation/HomeBtn.vue  | 2 +-
 frontend/src/components/common/Navigation/UserBtn.vue  | 2 +-
 frontend/src/components/common/Platform/ListItem.vue   | 1 +
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index 994c2ce44..a7fd6befa 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -48,13 +48,13 @@ function onFilterClick(filter: FilterType, value: string) {
                   params: { collection: collection.id },
                 }"
                 size="large"
-                class="mr-1 mt-1"
+                class="mr-1 mt-1 px-0"
                 label
               >
                 <template #prepend>
-                  <r-avatar :size="25" :collection="collection" />
+                  <r-avatar :size="38" :collection="collection" />
                 </template>
-                <span class="ml-4">{{ collection.name }}</span>
+                <span class="px-4">{{ collection.name }}</span>
               </v-chip>
             </v-col>
           </v-row>
diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
index 5e0f52f3f..4b017914d 100644
--- a/frontend/src/components/common/Collection/ListItem.vue
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -13,7 +13,7 @@ defineProps<{ collection: Collection }>();
     :value="collection.name"
   >
     <template #prepend>
-      <r-avatar :collection="collection" />
+      <r-avatar :size="50" :collection="collection" />
     </template>
     <v-row no-gutters
       ><v-col
diff --git a/frontend/src/components/common/Navigation/HomeBtn.vue b/frontend/src/components/common/Navigation/HomeBtn.vue
index 5c3834edb..6c95ed294 100644
--- a/frontend/src/components/common/Navigation/HomeBtn.vue
+++ b/frontend/src/components/common/Navigation/HomeBtn.vue
@@ -11,7 +11,7 @@ const navigationStore = storeNavigation();
     :to="homeUrl"
     @click="navigationStore.goHome"
     class="cursor-pointer"
-    :size="35"
+    :size="40"
   />
 </template>
 
diff --git a/frontend/src/components/common/Navigation/UserBtn.vue b/frontend/src/components/common/Navigation/UserBtn.vue
index f0ba93d8a..73caf36d1 100644
--- a/frontend/src/components/common/Navigation/UserBtn.vue
+++ b/frontend/src/components/common/Navigation/UserBtn.vue
@@ -13,7 +13,7 @@ const { user } = storeToRefs(auth);
   <v-avatar
     @click="navigationStore.switchActiveSettingsDrawer"
     class="pointer"
-    size="35"
+    :size="40"
     :class="{ active: navigationStore.activeSettingsDrawer }"
   >
     <v-img
diff --git a/frontend/src/components/common/Platform/ListItem.vue b/frontend/src/components/common/Platform/ListItem.vue
index bdced0c83..c07044b77 100644
--- a/frontend/src/components/common/Platform/ListItem.vue
+++ b/frontend/src/components/common/Platform/ListItem.vue
@@ -19,6 +19,7 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
         :key="platform.slug"
         :slug="platform.slug"
         :name="platform.name"
+        :size="50"
       >
         <v-tooltip
           location="bottom"

From 96e619d6f89644889f894c485a41dfddd0902192 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 14:32:39 +0000
Subject: [PATCH 27/49] refactor: update avatar sizes and adjust padding in
 Collection and Platform ListItem components

---
 frontend/src/components/common/Collection/ListItem.vue | 3 ++-
 frontend/src/components/common/Platform/ListItem.vue   | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
index 4b017914d..d3a46dcf2 100644
--- a/frontend/src/components/common/Collection/ListItem.vue
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -11,9 +11,10 @@ defineProps<{ collection: Collection }>();
     :key="collection.id"
     :to="{ name: 'collection', params: { collection: collection.id } }"
     :value="collection.name"
+    class="py-1 pl-1"
   >
     <template #prepend>
-      <r-avatar :size="50" :collection="collection" />
+      <r-avatar :size="80" :collection="collection" />
     </template>
     <v-row no-gutters
       ><v-col
diff --git a/frontend/src/components/common/Platform/ListItem.vue b/frontend/src/components/common/Platform/ListItem.vue
index c07044b77..392dbc11c 100644
--- a/frontend/src/components/common/Platform/ListItem.vue
+++ b/frontend/src/components/common/Platform/ListItem.vue
@@ -13,6 +13,7 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
     :key="platform.slug"
     :to="{ name: 'platform', params: { platform: platform.id } }"
     :value="platform.slug"
+    class="py-0"
   >
     <template #prepend>
       <platform-icon

From e19c2e89c12b1d63b756bd35356d436eabbb5dd6 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 15:23:34 +0000
Subject: [PATCH 28/49] refactor: rename routes and update navigation links for
 user interface and library management

---
 .../components/common/Navigation/SettingsDrawer.vue    |  4 ++--
 frontend/src/plugins/router.ts                         | 10 +++++-----
 frontend/src/views/Scan.vue                            |  3 ++-
 .../Settings/{Management.vue => LibraryManagement.vue} |  0
 4 files changed, 9 insertions(+), 8 deletions(-)
 rename frontend/src/views/Settings/{Management.vue => LibraryManagement.vue} (100%)

diff --git a/frontend/src/components/common/Navigation/SettingsDrawer.vue b/frontend/src/components/common/Navigation/SettingsDrawer.vue
index e3a8cf7cb..7cd2b0a4b 100644
--- a/frontend/src/components/common/Navigation/SettingsDrawer.vue
+++ b/frontend/src/components/common/Navigation/SettingsDrawer.vue
@@ -72,13 +72,13 @@ async function logout() {
         append-icon="mdi-account"
         >Profile</v-list-item
       >
-      <v-list-item :to="{ name: 'ui' }" append-icon="mdi-palette"
+      <v-list-item :to="{ name: 'userInterface' }" append-icon="mdi-palette"
         >User Interface</v-list-item
       >
       <v-list-item
         v-if="scopes.includes('platforms.write')"
         append-icon="mdi-table-cog"
-        :to="{ name: 'management' }"
+        :to="{ name: 'libraryManagement' }"
         >Library Management
       </v-list-item>
       <v-list-item
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index 86fea5f7d..f1c85bd89 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -68,24 +68,24 @@ const routes = [
         component: () => import("@/views/Scan.vue"),
       },
       {
-        path: "/ui",
+        path: "/user-interface",
         component: () => import("@/layouts/Settings.vue"),
         children: [
           {
             path: "",
-            name: "ui",
+            name: "userInterface",
             component: () => import("@/views/Settings/UserInterface.vue"),
           },
         ],
       },
       {
-        path: "/management",
+        path: "/library-management",
         component: () => import("@/layouts/Settings.vue"),
         children: [
           {
             path: "",
-            name: "management",
-            component: () => import("@/views/Settings/Management.vue"),
+            name: "libraryManagement",
+            component: () => import("@/views/Settings/LibraryManagement.vue"),
           },
         ],
       },
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index f545032d0..acbd45e5e 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -99,6 +99,7 @@ async function stopScan() {
   <v-row class="align-center pt-4 px-4" no-gutters>
     <!-- Platform selector -->
     <v-col cols="12" md="5" lg="6" class="px-1">
+      <!-- TODO: add 'ALL' default option -->
       <v-select
         v-model="platformsToScan"
         :items="platforms.allPlatforms"
@@ -259,7 +260,7 @@ async function stopScan() {
       rounded="4"
       height="40"
       class="ml-2"
-      :to="{ name: 'management' }"
+      :to="{ name: 'libraryManagement' }"
     >
       Manage
     </v-btn>
diff --git a/frontend/src/views/Settings/Management.vue b/frontend/src/views/Settings/LibraryManagement.vue
similarity index 100%
rename from frontend/src/views/Settings/Management.vue
rename to frontend/src/views/Settings/LibraryManagement.vue

From 8e0d43f37ff245094751ccfeb9c4d194d4522ecd Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 15:35:54 +0000
Subject: [PATCH 29/49] refactor: consolidate Interface and Theme components
 into UserInterface, enhancing settings management

---
 .../src/components/Settings/Interface.vue     | 122 ------------
 frontend/src/components/Settings/Theme.vue    |  65 -------
 frontend/src/views/Settings/UserInterface.vue | 176 +++++++++++++++++-
 3 files changed, 172 insertions(+), 191 deletions(-)
 delete mode 100644 frontend/src/components/Settings/Interface.vue
 delete mode 100644 frontend/src/components/Settings/Theme.vue

diff --git a/frontend/src/components/Settings/Interface.vue b/frontend/src/components/Settings/Interface.vue
deleted file mode 100644
index d2c0daf44..000000000
--- a/frontend/src/components/Settings/Interface.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import InterfaceOption from "@/components/Settings/InterfaceOption.vue";
-import RSection from "@/components/common/RSection.vue";
-import { isNull } from "lodash";
-import { computed, ref } from "vue";
-
-// Initializing refs from localStorage
-const storedGroupRoms = localStorage.getItem("settings.groupRoms");
-const groupRomsRef = ref(
-  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
-);
-
-const storedSiblings = localStorage.getItem("settings.showSiblings");
-const siblingsRef = ref(
-  isNull(storedSiblings) ? true : storedSiblings === "true",
-);
-
-const storedRegions = localStorage.getItem("settings.showRegions");
-const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
-
-const storedLanguages = localStorage.getItem("settings.showLanguages");
-const languagesRef = ref(
-  isNull(storedLanguages) ? true : storedLanguages === "true",
-);
-
-const storedStatus = localStorage.getItem("settings.showStatus");
-const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
-
-// Functions to update localStorage
-const toggleGroupRoms = (value: boolean) => {
-  groupRomsRef.value = value;
-  localStorage.setItem("settings.groupRoms", value.toString());
-};
-
-const toggleSiblings = (value: boolean) => {
-  siblingsRef.value = value;
-  localStorage.setItem("settings.showSiblings", value.toString());
-};
-
-const toggleRegions = (value: boolean) => {
-  regionsRef.value = value;
-  localStorage.setItem("settings.showRegions", value.toString());
-};
-
-const toggleLanguages = (value: boolean) => {
-  languagesRef.value = value;
-  localStorage.setItem("settings.showLanguages", value.toString());
-};
-
-const toggleStatus = (value: boolean) => {
-  statusRef.value = value;
-  localStorage.setItem("settings.showStatus", value.toString());
-};
-
-const options = computed(() => [
-  {
-    title: "Group roms",
-    description: "Group versions of the same rom together in the gallery",
-    iconEnabled: "mdi-group",
-    iconDisabled: "mdi-ungroup",
-    model: groupRomsRef,
-    modelTrigger: toggleGroupRoms,
-  },
-  {
-    title: "Show siblings",
-    description:
-      'Show siblings count in the gallery when "Group roms" option is enabled',
-    iconEnabled: "mdi-account-group-outline",
-    iconDisabled: "mdi-account-outline",
-    model: siblingsRef,
-    disabled: !groupRomsRef.value,
-    modelTrigger: toggleSiblings,
-  },
-  {
-    title: "Show regions",
-    description: "Show region flags in the gallery",
-    iconEnabled: "mdi-flag-outline",
-    iconDisabled: "mdi-flag-off-outline",
-    model: regionsRef,
-    modelTrigger: toggleRegions,
-  },
-  {
-    title: "Show languages",
-    description: "Show language flags in the gallery",
-    iconEnabled: "mdi-flag-outline",
-    iconDisabled: "mdi-flag-off-outline",
-    model: languagesRef,
-    modelTrigger: toggleLanguages,
-  },
-  {
-    title: "Show status",
-    description:
-      "Show status icons in the gallery (backlogged, playing, completed, etc)",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: statusRef,
-    modelTrigger: toggleStatus,
-  },
-]);
-</script>
-
-<template>
-  <r-section icon="mdi-palette-swatch-outline" title="Interface">
-    <template #content>
-      <v-row no-gutters>
-        <v-col cols="12" md="6" v-for="option in options" :key="option.title">
-          <interface-option
-            class="mx-2"
-            :disabled="option.disabled"
-            :title="option.title"
-            :description="option.description"
-            :icon="
-              option.model.value ? option.iconEnabled : option.iconDisabled
-            "
-            v-model="option.model.value"
-            @update:model-value="option.modelTrigger"
-          />
-        </v-col>
-      </v-row>
-    </template>
-  </r-section>
-</template>
diff --git a/frontend/src/components/Settings/Theme.vue b/frontend/src/components/Settings/Theme.vue
deleted file mode 100644
index ef5ffdba7..000000000
--- a/frontend/src/components/Settings/Theme.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import ThemeOption from "@/components/Settings/ThemeOption.vue";
-import RSection from "@/components/common/RSection.vue";
-import { autoThemeKey, themes } from "@/styles/themes";
-import { isKeyof } from "@/types";
-import { computed, ref } from "vue";
-import { useTheme } from "vuetify";
-
-const theme = useTheme();
-const storedTheme = parseInt(localStorage.getItem("settings.theme") ?? "");
-const selectedTheme = ref(isNaN(storedTheme) ? autoThemeKey : storedTheme);
-const themeOptions = computed(() => [
-  {
-    name: "dark",
-    icon: "mdi-moon-waning-crescent",
-  },
-  {
-    name: "light",
-    icon: "mdi-white-balance-sunny",
-  },
-  {
-    name: "auto",
-    icon: "mdi-theme-light-dark",
-  },
-]);
-
-// Functions
-function toggleTheme() {
-  localStorage.setItem("settings.theme", selectedTheme.value.toString());
-  const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)");
-  if (selectedTheme.value === autoThemeKey) {
-    theme.global.name.value = mediaMatch.matches ? "dark" : "light";
-  } else if (isKeyof(selectedTheme.value, themes)) {
-    theme.global.name.value = themes[selectedTheme.value];
-  }
-}
-</script>
-
-<template>
-  <r-section icon="mdi-brush-variant" title="Theme">
-    <template #content>
-      <v-item-group
-        v-model="selectedTheme"
-        mandatory
-        @update:model-value="toggleTheme"
-      >
-        <v-row no-gutters>
-          <v-col
-            cols="4"
-            sm="3"
-            md="2"
-            class="pa-2"
-            v-for="theme in themeOptions"
-          >
-            <theme-option
-              :key="theme.name"
-              :text="theme.name"
-              :icon="theme.icon"
-            />
-          </v-col>
-        </v-row>
-      </v-item-group>
-    </template>
-  </r-section>
-</template>
diff --git a/frontend/src/views/Settings/UserInterface.vue b/frontend/src/views/Settings/UserInterface.vue
index ac4922df9..f99a3999b 100644
--- a/frontend/src/views/Settings/UserInterface.vue
+++ b/frontend/src/views/Settings/UserInterface.vue
@@ -1,8 +1,176 @@
 <script setup lang="ts">
-import Interface from "@/components/Settings/Interface.vue";
-import Theme from "@/components/Settings/Theme.vue";
+import ThemeOption from "@/components/Settings/ThemeOption.vue";
+import InterfaceOption from "@/components/Settings/InterfaceOption.vue";
+import RSection from "@/components/common/RSection.vue";
+import { autoThemeKey, themes } from "@/styles/themes";
+import { isKeyof } from "@/types";
+import { computed, ref } from "vue";
+import { useTheme } from "vuetify";
+import { isNull } from "lodash";
+
+// Props
+const theme = useTheme();
+const storedTheme = parseInt(localStorage.getItem("settings.theme") ?? "");
+const selectedTheme = ref(isNaN(storedTheme) ? autoThemeKey : storedTheme);
+const themeOptions = computed(() => [
+  {
+    name: "dark",
+    icon: "mdi-moon-waning-crescent",
+  },
+  {
+    name: "light",
+    icon: "mdi-white-balance-sunny",
+  },
+  {
+    name: "auto",
+    icon: "mdi-theme-light-dark",
+  },
+]);
+
+// Initializing refs from localStorage
+const storedGroupRoms = localStorage.getItem("settings.groupRoms");
+const groupRomsRef = ref(
+  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
+);
+const storedSiblings = localStorage.getItem("settings.showSiblings");
+const siblingsRef = ref(
+  isNull(storedSiblings) ? true : storedSiblings === "true",
+);
+const storedRegions = localStorage.getItem("settings.showRegions");
+const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
+const storedLanguages = localStorage.getItem("settings.showLanguages");
+const languagesRef = ref(
+  isNull(storedLanguages) ? true : storedLanguages === "true",
+);
+const storedStatus = localStorage.getItem("settings.showStatus");
+const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
+const options = computed(() => [
+  {
+    title: "Group roms",
+    description: "Group versions of the same rom together in the gallery",
+    iconEnabled: "mdi-group",
+    iconDisabled: "mdi-ungroup",
+    model: groupRomsRef,
+    modelTrigger: toggleGroupRoms,
+  },
+  {
+    title: "Show siblings",
+    description:
+      'Show siblings count in the gallery when "Group roms" option is enabled',
+    iconEnabled: "mdi-account-group-outline",
+    iconDisabled: "mdi-account-outline",
+    model: siblingsRef,
+    disabled: !groupRomsRef.value,
+    modelTrigger: toggleSiblings,
+  },
+  {
+    title: "Show regions",
+    description: "Show region flags in the gallery",
+    iconEnabled: "mdi-flag-outline",
+    iconDisabled: "mdi-flag-off-outline",
+    model: regionsRef,
+    modelTrigger: toggleRegions,
+  },
+  {
+    title: "Show languages",
+    description: "Show language flags in the gallery",
+    iconEnabled: "mdi-flag-outline",
+    iconDisabled: "mdi-flag-off-outline",
+    model: languagesRef,
+    modelTrigger: toggleLanguages,
+  },
+  {
+    title: "Show status",
+    description:
+      "Show status icons in the gallery (backlogged, playing, completed, etc)",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: statusRef,
+    modelTrigger: toggleStatus,
+  },
+]);
+
+// Functions
+function toggleTheme() {
+  localStorage.setItem("settings.theme", selectedTheme.value.toString());
+  const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)");
+  if (selectedTheme.value === autoThemeKey) {
+    theme.global.name.value = mediaMatch.matches ? "dark" : "light";
+  } else if (isKeyof(selectedTheme.value, themes)) {
+    theme.global.name.value = themes[selectedTheme.value];
+  }
+}
+
+// Functions to update localStorage
+const toggleGroupRoms = (value: boolean) => {
+  groupRomsRef.value = value;
+  localStorage.setItem("settings.groupRoms", value.toString());
+};
+
+const toggleSiblings = (value: boolean) => {
+  siblingsRef.value = value;
+  localStorage.setItem("settings.showSiblings", value.toString());
+};
+
+const toggleRegions = (value: boolean) => {
+  regionsRef.value = value;
+  localStorage.setItem("settings.showRegions", value.toString());
+};
+
+const toggleLanguages = (value: boolean) => {
+  languagesRef.value = value;
+  localStorage.setItem("settings.showLanguages", value.toString());
+};
+
+const toggleStatus = (value: boolean) => {
+  statusRef.value = value;
+  localStorage.setItem("settings.showStatus", value.toString());
+};
 </script>
 <template>
-  <theme />
-  <interface />
+  <r-section icon="mdi-brush-variant" title="Theme">
+    <template #content>
+      <v-item-group
+        v-model="selectedTheme"
+        mandatory
+        @update:model-value="toggleTheme"
+      >
+        <v-row no-gutters>
+          <v-col
+            cols="4"
+            sm="3"
+            md="2"
+            class="pa-2"
+            v-for="theme in themeOptions"
+          >
+            <theme-option
+              :key="theme.name"
+              :text="theme.name"
+              :icon="theme.icon"
+            />
+          </v-col>
+        </v-row>
+      </v-item-group>
+    </template>
+  </r-section>
+
+  <r-section icon="mdi-palette-swatch-outline" title="Interface">
+    <template #content>
+      <v-row no-gutters>
+        <v-col cols="12" md="6" v-for="option in options" :key="option.title">
+          <interface-option
+            class="mx-2"
+            :disabled="option.disabled"
+            :title="option.title"
+            :description="option.description"
+            :icon="
+              option.model.value ? option.iconEnabled : option.iconDisabled
+            "
+            v-model="option.model.value"
+            @update:model-value="option.modelTrigger"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </r-section>
 </template>

From 2c3adde30f63a755f4df5e5ad0e7a49504abc13c Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 15:50:04 +0000
Subject: [PATCH 30/49] refactor: rename components and update import paths for
 better organization in Settings

---
 .../Settings/{ => Administration}/TaskOption.vue          | 0
 .../components/{ => Settings}/Administration/Tasks.vue    | 2 +-
 .../Administration/Users/Dialog/CreateUser.vue            | 0
 .../Administration/Users/Dialog/DeleteUser.vue            | 0
 .../Administration/Users/Dialog/EditUser.vue              | 0
 .../{ => Settings}/Administration/Users/Table.vue         | 4 ++--
 .../{Management => Settings/LibraryManagement}/AddBtn.vue | 0
 .../LibraryManagement}/Dialog/CreateExclusion.vue         | 0
 .../LibraryManagement}/Dialog/CreatePlatformBinding.vue   | 0
 .../LibraryManagement}/Dialog/CreatePlatformVersion.vue   | 0
 .../LibraryManagement}/Dialog/DeletePlatformBinding.vue   | 0
 .../LibraryManagement}/Dialog/DeletePlatformVersion.vue   | 0
 .../LibraryManagement}/Excluded.vue                       | 4 ++--
 .../LibraryManagement}/ExcludedCard.vue                   | 0
 .../LibraryManagement}/PlatformBindCard.vue               | 0
 .../LibraryManagement}/PlatformBinding.vue                | 8 ++++----
 .../LibraryManagement}/PlatformVersions.vue               | 8 ++++----
 .../Settings/{ => UserInterface}/InterfaceOption.vue      | 0
 .../Settings/{ => UserInterface}/ThemeOption.vue          | 0
 frontend/src/layouts/Main.vue                             | 2 +-
 frontend/src/views/Settings/Administration.vue            | 4 ++--
 frontend/src/views/Settings/LibraryManagement.vue         | 6 +++---
 frontend/src/views/Settings/UserInterface.vue             | 4 ++--
 23 files changed, 21 insertions(+), 21 deletions(-)
 rename frontend/src/components/Settings/{ => Administration}/TaskOption.vue (100%)
 rename frontend/src/components/{ => Settings}/Administration/Tasks.vue (97%)
 rename frontend/src/components/{ => Settings}/Administration/Users/Dialog/CreateUser.vue (100%)
 rename frontend/src/components/{ => Settings}/Administration/Users/Dialog/DeleteUser.vue (100%)
 rename frontend/src/components/{ => Settings}/Administration/Users/Dialog/EditUser.vue (100%)
 rename frontend/src/components/{ => Settings}/Administration/Users/Table.vue (96%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/AddBtn.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/Dialog/CreateExclusion.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/Dialog/CreatePlatformBinding.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/Dialog/CreatePlatformVersion.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/Dialog/DeletePlatformBinding.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/Dialog/DeletePlatformVersion.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/Excluded.vue (91%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/ExcludedCard.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/PlatformBindCard.vue (100%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/PlatformBinding.vue (84%)
 rename frontend/src/components/{Management => Settings/LibraryManagement}/PlatformVersions.vue (84%)
 rename frontend/src/components/Settings/{ => UserInterface}/InterfaceOption.vue (100%)
 rename frontend/src/components/Settings/{ => UserInterface}/ThemeOption.vue (100%)

diff --git a/frontend/src/components/Settings/TaskOption.vue b/frontend/src/components/Settings/Administration/TaskOption.vue
similarity index 100%
rename from frontend/src/components/Settings/TaskOption.vue
rename to frontend/src/components/Settings/Administration/TaskOption.vue
diff --git a/frontend/src/components/Administration/Tasks.vue b/frontend/src/components/Settings/Administration/Tasks.vue
similarity index 97%
rename from frontend/src/components/Administration/Tasks.vue
rename to frontend/src/components/Settings/Administration/Tasks.vue
index 29a857a86..d18282295 100644
--- a/frontend/src/components/Administration/Tasks.vue
+++ b/frontend/src/components/Settings/Administration/Tasks.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Task from "@/components/Settings/TaskOption.vue";
+import Task from "@/components/Settings/Administration/TaskOption.vue";
 import RSection from "@/components/common/RSection.vue";
 import api from "@/services/api/index";
 import storeHeartbeat from "@/stores/heartbeat";
diff --git a/frontend/src/components/Administration/Users/Dialog/CreateUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue
similarity index 100%
rename from frontend/src/components/Administration/Users/Dialog/CreateUser.vue
rename to frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue
diff --git a/frontend/src/components/Administration/Users/Dialog/DeleteUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
similarity index 100%
rename from frontend/src/components/Administration/Users/Dialog/DeleteUser.vue
rename to frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
diff --git a/frontend/src/components/Administration/Users/Dialog/EditUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
similarity index 100%
rename from frontend/src/components/Administration/Users/Dialog/EditUser.vue
rename to frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
diff --git a/frontend/src/components/Administration/Users/Table.vue b/frontend/src/components/Settings/Administration/Users/Table.vue
similarity index 96%
rename from frontend/src/components/Administration/Users/Table.vue
rename to frontend/src/components/Settings/Administration/Users/Table.vue
index 08ec7a623..6105d8054 100644
--- a/frontend/src/components/Administration/Users/Table.vue
+++ b/frontend/src/components/Settings/Administration/Users/Table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CreateUserDialog from "@/components/Administration/Users/Dialog/CreateUser.vue";
-import DeleteUserDialog from "@/components/Administration/Users/Dialog/DeleteUser.vue";
+import CreateUserDialog from "@/components/Settings/Administration/Users/Dialog/CreateUser.vue";
+import DeleteUserDialog from "@/components/Settings/Administration/Users/Dialog/DeleteUser.vue";
 import RSection from "@/components/common/RSection.vue";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
diff --git a/frontend/src/components/Management/AddBtn.vue b/frontend/src/components/Settings/LibraryManagement/AddBtn.vue
similarity index 100%
rename from frontend/src/components/Management/AddBtn.vue
rename to frontend/src/components/Settings/LibraryManagement/AddBtn.vue
diff --git a/frontend/src/components/Management/Dialog/CreateExclusion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/CreateExclusion.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue
diff --git a/frontend/src/components/Management/Dialog/CreatePlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/CreatePlatformBinding.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue
diff --git a/frontend/src/components/Management/Dialog/CreatePlatformVersion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/CreatePlatformVersion.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue
diff --git a/frontend/src/components/Management/Dialog/DeletePlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/DeletePlatformBinding.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue
diff --git a/frontend/src/components/Management/Dialog/DeletePlatformVersion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/DeletePlatformVersion.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue
diff --git a/frontend/src/components/Management/Excluded.vue b/frontend/src/components/Settings/LibraryManagement/Excluded.vue
similarity index 91%
rename from frontend/src/components/Management/Excluded.vue
rename to frontend/src/components/Settings/LibraryManagement/Excluded.vue
index 80c2be151..6bae7f9f9 100644
--- a/frontend/src/components/Management/Excluded.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Excluded.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import RSection from "@/components/common/RSection.vue";
-import CreateExclusionDialog from "@/components/Management/Dialog/CreateExclusion.vue";
-import ExcludedCard from "@/components/Management/ExcludedCard.vue";
+import CreateExclusionDialog from "@/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue";
+import ExcludedCard from "@/components/Settings/LibraryManagement/ExcludedCard.vue";
 import storeAuth from "@/stores/auth";
 import storeConfig from "@/stores/config";
 import { ref } from "vue";
diff --git a/frontend/src/components/Management/ExcludedCard.vue b/frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue
similarity index 100%
rename from frontend/src/components/Management/ExcludedCard.vue
rename to frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue
diff --git a/frontend/src/components/Management/PlatformBindCard.vue b/frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue
similarity index 100%
rename from frontend/src/components/Management/PlatformBindCard.vue
rename to frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue
diff --git a/frontend/src/components/Management/PlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
similarity index 84%
rename from frontend/src/components/Management/PlatformBinding.vue
rename to frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
index 9cc7ae1f1..38c84b080 100644
--- a/frontend/src/components/Management/PlatformBinding.vue
+++ b/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import AddBtn from "@/components/Management/AddBtn.vue";
-import CreatePlatformBindingDialog from "@/components/Management/Dialog/CreatePlatformBinding.vue";
-import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
-import PlatformBindCard from "@/components/Management/PlatformBindCard.vue";
+import AddBtn from "@/components/Settings/LibraryManagement/AddBtn.vue";
+import CreatePlatformBindingDialog from "@/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue";
+import DeletePlatformBindingDialog from "@/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue";
+import PlatformBindCard from "@/components/Settings/LibraryManagement/PlatformBindCard.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
 import storeConfig from "@/stores/config";
diff --git a/frontend/src/components/Management/PlatformVersions.vue b/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
similarity index 84%
rename from frontend/src/components/Management/PlatformVersions.vue
rename to frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
index 01205e6a0..73e5a36c7 100644
--- a/frontend/src/components/Management/PlatformVersions.vue
+++ b/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import AddBtn from "@/components/Management/AddBtn.vue";
-import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePlatformVersion.vue";
-import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
-import PlatformBindCard from "@/components/Management/PlatformBindCard.vue";
+import AddBtn from "@/components/Settings/LibraryManagement/AddBtn.vue";
+import CreatePlatformVersionDialog from "@/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue";
+import DeletePlatformVersionDialog from "@/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue";
+import PlatformBindCard from "@/components/Settings/LibraryManagement/PlatformBindCard.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
 import storeConfig from "@/stores/config";
diff --git a/frontend/src/components/Settings/InterfaceOption.vue b/frontend/src/components/Settings/UserInterface/InterfaceOption.vue
similarity index 100%
rename from frontend/src/components/Settings/InterfaceOption.vue
rename to frontend/src/components/Settings/UserInterface/InterfaceOption.vue
diff --git a/frontend/src/components/Settings/ThemeOption.vue b/frontend/src/components/Settings/UserInterface/ThemeOption.vue
similarity index 100%
rename from frontend/src/components/Settings/ThemeOption.vue
rename to frontend/src/components/Settings/UserInterface/ThemeOption.vue
diff --git a/frontend/src/layouts/Main.vue b/frontend/src/layouts/Main.vue
index d017d691b..6bcc2037a 100644
--- a/frontend/src/layouts/Main.vue
+++ b/frontend/src/layouts/Main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import EditUserDialog from "@/components/Administration/Users/Dialog/EditUser.vue";
+import EditUserDialog from "@/components/Settings/Administration/Users/Dialog/EditUser.vue";
 import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
 import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialog/RemoveRoms.vue";
 import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
diff --git a/frontend/src/views/Settings/Administration.vue b/frontend/src/views/Settings/Administration.vue
index 00662f320..34266b998 100644
--- a/frontend/src/views/Settings/Administration.vue
+++ b/frontend/src/views/Settings/Administration.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import UsersTable from "@/components/Administration/Users/Table.vue";
-import Tasks from "@/components/Administration/Tasks.vue";
+import UsersTable from "@/components/Settings/Administration/Users/Table.vue";
+import Tasks from "@/components/Settings/Administration/Tasks.vue";
 import storeAuth from "@/stores/auth";
 
 // Props
diff --git a/frontend/src/views/Settings/LibraryManagement.vue b/frontend/src/views/Settings/LibraryManagement.vue
index 8d03b9621..3a7c6be2d 100644
--- a/frontend/src/views/Settings/LibraryManagement.vue
+++ b/frontend/src/views/Settings/LibraryManagement.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Excluded from "@/components/Management/Excluded.vue";
-import PlatformBinding from "@/components/Management/PlatformBinding.vue";
-import PlatformVersions from "@/components/Management/PlatformVersions.vue";
+import Excluded from "@/components/Settings/LibraryManagement/Excluded.vue";
+import PlatformBinding from "@/components/Settings/LibraryManagement/PlatformBinding.vue";
+import PlatformVersions from "@/components/Settings/LibraryManagement/PlatformVersions.vue";
 </script>
 
 <template>
diff --git a/frontend/src/views/Settings/UserInterface.vue b/frontend/src/views/Settings/UserInterface.vue
index f99a3999b..86ed8efb4 100644
--- a/frontend/src/views/Settings/UserInterface.vue
+++ b/frontend/src/views/Settings/UserInterface.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import ThemeOption from "@/components/Settings/ThemeOption.vue";
-import InterfaceOption from "@/components/Settings/InterfaceOption.vue";
+import ThemeOption from "@/components/Settings/UserInterface/ThemeOption.vue";
+import InterfaceOption from "@/components/Settings/UserInterface/InterfaceOption.vue";
 import RSection from "@/components/common/RSection.vue";
 import { autoThemeKey, themes } from "@/styles/themes";
 import { isKeyof } from "@/types";

From 72df2f5671c21ae3125c8d390d8bac09fc2fae6f Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 16:02:18 +0000
Subject: [PATCH 31/49] refactor: create Interface and Theme components for
 improved settings management

---
 .../Settings/UserInterface/Interface.vue      | 116 ++++++++++++
 .../Settings/UserInterface/Theme.vue          |  64 +++++++
 frontend/src/views/Settings/UserInterface.vue | 176 +-----------------
 3 files changed, 184 insertions(+), 172 deletions(-)
 create mode 100644 frontend/src/components/Settings/UserInterface/Interface.vue
 create mode 100644 frontend/src/components/Settings/UserInterface/Theme.vue

diff --git a/frontend/src/components/Settings/UserInterface/Interface.vue b/frontend/src/components/Settings/UserInterface/Interface.vue
new file mode 100644
index 000000000..ff71b7767
--- /dev/null
+++ b/frontend/src/components/Settings/UserInterface/Interface.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import InterfaceOption from "@/components/Settings/UserInterface/InterfaceOption.vue";
+import RSection from "@/components/common/RSection.vue";
+import { computed, ref } from "vue";
+import { isNull } from "lodash";
+
+// Initializing refs from localStorage
+const storedGroupRoms = localStorage.getItem("settings.groupRoms");
+const groupRomsRef = ref(
+  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
+);
+const storedSiblings = localStorage.getItem("settings.showSiblings");
+const siblingsRef = ref(
+  isNull(storedSiblings) ? true : storedSiblings === "true",
+);
+const storedRegions = localStorage.getItem("settings.showRegions");
+const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
+const storedLanguages = localStorage.getItem("settings.showLanguages");
+const languagesRef = ref(
+  isNull(storedLanguages) ? true : storedLanguages === "true",
+);
+const storedStatus = localStorage.getItem("settings.showStatus");
+const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
+const options = computed(() => [
+  {
+    title: "Group roms",
+    description: "Group versions of the same rom together in the gallery",
+    iconEnabled: "mdi-group",
+    iconDisabled: "mdi-ungroup",
+    model: groupRomsRef,
+    modelTrigger: toggleGroupRoms,
+  },
+  {
+    title: "Show siblings",
+    description:
+      'Show siblings count in the gallery when "Group roms" option is enabled',
+    iconEnabled: "mdi-account-group-outline",
+    iconDisabled: "mdi-account-outline",
+    model: siblingsRef,
+    disabled: !groupRomsRef.value,
+    modelTrigger: toggleSiblings,
+  },
+  {
+    title: "Show regions",
+    description: "Show region flags in the gallery",
+    iconEnabled: "mdi-flag-outline",
+    iconDisabled: "mdi-flag-off-outline",
+    model: regionsRef,
+    modelTrigger: toggleRegions,
+  },
+  {
+    title: "Show languages",
+    description: "Show language flags in the gallery",
+    iconEnabled: "mdi-flag-outline",
+    iconDisabled: "mdi-flag-off-outline",
+    model: languagesRef,
+    modelTrigger: toggleLanguages,
+  },
+  {
+    title: "Show status",
+    description:
+      "Show status icons in the gallery (backlogged, playing, completed, etc)",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: statusRef,
+    modelTrigger: toggleStatus,
+  },
+]);
+
+// Functions to update localStorage
+const toggleGroupRoms = (value: boolean) => {
+  groupRomsRef.value = value;
+  localStorage.setItem("settings.groupRoms", value.toString());
+};
+
+const toggleSiblings = (value: boolean) => {
+  siblingsRef.value = value;
+  localStorage.setItem("settings.showSiblings", value.toString());
+};
+
+const toggleRegions = (value: boolean) => {
+  regionsRef.value = value;
+  localStorage.setItem("settings.showRegions", value.toString());
+};
+
+const toggleLanguages = (value: boolean) => {
+  languagesRef.value = value;
+  localStorage.setItem("settings.showLanguages", value.toString());
+};
+
+const toggleStatus = (value: boolean) => {
+  statusRef.value = value;
+  localStorage.setItem("settings.showStatus", value.toString());
+};
+</script>
+<template>
+  <r-section icon="mdi-palette-swatch-outline" title="Interface">
+    <template #content>
+      <v-row no-gutters>
+        <v-col cols="12" md="6" v-for="option in options" :key="option.title">
+          <interface-option
+            class="mx-2"
+            :disabled="option.disabled"
+            :title="option.title"
+            :description="option.description"
+            :icon="
+              option.model.value ? option.iconEnabled : option.iconDisabled
+            "
+            v-model="option.model.value"
+            @update:model-value="option.modelTrigger"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </r-section>
+</template>
diff --git a/frontend/src/components/Settings/UserInterface/Theme.vue b/frontend/src/components/Settings/UserInterface/Theme.vue
new file mode 100644
index 000000000..71b0410e7
--- /dev/null
+++ b/frontend/src/components/Settings/UserInterface/Theme.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import ThemeOption from "@/components/Settings/UserInterface/ThemeOption.vue";
+import RSection from "@/components/common/RSection.vue";
+import { autoThemeKey, themes } from "@/styles/themes";
+import { isKeyof } from "@/types";
+import { computed, ref } from "vue";
+import { useTheme } from "vuetify";
+
+// Props
+const theme = useTheme();
+const storedTheme = parseInt(localStorage.getItem("settings.theme") ?? "");
+const selectedTheme = ref(isNaN(storedTheme) ? autoThemeKey : storedTheme);
+const themeOptions = computed(() => [
+  {
+    name: "dark",
+    icon: "mdi-moon-waning-crescent",
+  },
+  {
+    name: "light",
+    icon: "mdi-white-balance-sunny",
+  },
+  {
+    name: "auto",
+    icon: "mdi-theme-light-dark",
+  },
+]);
+// Functions
+function toggleTheme() {
+  localStorage.setItem("settings.theme", selectedTheme.value.toString());
+  const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)");
+  if (selectedTheme.value === autoThemeKey) {
+    theme.global.name.value = mediaMatch.matches ? "dark" : "light";
+  } else if (isKeyof(selectedTheme.value, themes)) {
+    theme.global.name.value = themes[selectedTheme.value];
+  }
+}
+</script>
+<template>
+  <r-section icon="mdi-brush-variant" title="Theme">
+    <template #content>
+      <v-item-group
+        v-model="selectedTheme"
+        mandatory
+        @update:model-value="toggleTheme"
+      >
+        <v-row no-gutters>
+          <v-col
+            cols="4"
+            sm="3"
+            md="2"
+            class="pa-2"
+            v-for="theme in themeOptions"
+          >
+            <theme-option
+              :key="theme.name"
+              :text="theme.name"
+              :icon="theme.icon"
+            />
+          </v-col>
+        </v-row>
+      </v-item-group>
+    </template>
+  </r-section>
+</template>
diff --git a/frontend/src/views/Settings/UserInterface.vue b/frontend/src/views/Settings/UserInterface.vue
index 86ed8efb4..e6e6e6b52 100644
--- a/frontend/src/views/Settings/UserInterface.vue
+++ b/frontend/src/views/Settings/UserInterface.vue
@@ -1,176 +1,8 @@
 <script setup lang="ts">
-import ThemeOption from "@/components/Settings/UserInterface/ThemeOption.vue";
-import InterfaceOption from "@/components/Settings/UserInterface/InterfaceOption.vue";
-import RSection from "@/components/common/RSection.vue";
-import { autoThemeKey, themes } from "@/styles/themes";
-import { isKeyof } from "@/types";
-import { computed, ref } from "vue";
-import { useTheme } from "vuetify";
-import { isNull } from "lodash";
-
-// Props
-const theme = useTheme();
-const storedTheme = parseInt(localStorage.getItem("settings.theme") ?? "");
-const selectedTheme = ref(isNaN(storedTheme) ? autoThemeKey : storedTheme);
-const themeOptions = computed(() => [
-  {
-    name: "dark",
-    icon: "mdi-moon-waning-crescent",
-  },
-  {
-    name: "light",
-    icon: "mdi-white-balance-sunny",
-  },
-  {
-    name: "auto",
-    icon: "mdi-theme-light-dark",
-  },
-]);
-
-// Initializing refs from localStorage
-const storedGroupRoms = localStorage.getItem("settings.groupRoms");
-const groupRomsRef = ref(
-  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
-);
-const storedSiblings = localStorage.getItem("settings.showSiblings");
-const siblingsRef = ref(
-  isNull(storedSiblings) ? true : storedSiblings === "true",
-);
-const storedRegions = localStorage.getItem("settings.showRegions");
-const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
-const storedLanguages = localStorage.getItem("settings.showLanguages");
-const languagesRef = ref(
-  isNull(storedLanguages) ? true : storedLanguages === "true",
-);
-const storedStatus = localStorage.getItem("settings.showStatus");
-const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
-const options = computed(() => [
-  {
-    title: "Group roms",
-    description: "Group versions of the same rom together in the gallery",
-    iconEnabled: "mdi-group",
-    iconDisabled: "mdi-ungroup",
-    model: groupRomsRef,
-    modelTrigger: toggleGroupRoms,
-  },
-  {
-    title: "Show siblings",
-    description:
-      'Show siblings count in the gallery when "Group roms" option is enabled',
-    iconEnabled: "mdi-account-group-outline",
-    iconDisabled: "mdi-account-outline",
-    model: siblingsRef,
-    disabled: !groupRomsRef.value,
-    modelTrigger: toggleSiblings,
-  },
-  {
-    title: "Show regions",
-    description: "Show region flags in the gallery",
-    iconEnabled: "mdi-flag-outline",
-    iconDisabled: "mdi-flag-off-outline",
-    model: regionsRef,
-    modelTrigger: toggleRegions,
-  },
-  {
-    title: "Show languages",
-    description: "Show language flags in the gallery",
-    iconEnabled: "mdi-flag-outline",
-    iconDisabled: "mdi-flag-off-outline",
-    model: languagesRef,
-    modelTrigger: toggleLanguages,
-  },
-  {
-    title: "Show status",
-    description:
-      "Show status icons in the gallery (backlogged, playing, completed, etc)",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: statusRef,
-    modelTrigger: toggleStatus,
-  },
-]);
-
-// Functions
-function toggleTheme() {
-  localStorage.setItem("settings.theme", selectedTheme.value.toString());
-  const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)");
-  if (selectedTheme.value === autoThemeKey) {
-    theme.global.name.value = mediaMatch.matches ? "dark" : "light";
-  } else if (isKeyof(selectedTheme.value, themes)) {
-    theme.global.name.value = themes[selectedTheme.value];
-  }
-}
-
-// Functions to update localStorage
-const toggleGroupRoms = (value: boolean) => {
-  groupRomsRef.value = value;
-  localStorage.setItem("settings.groupRoms", value.toString());
-};
-
-const toggleSiblings = (value: boolean) => {
-  siblingsRef.value = value;
-  localStorage.setItem("settings.showSiblings", value.toString());
-};
-
-const toggleRegions = (value: boolean) => {
-  regionsRef.value = value;
-  localStorage.setItem("settings.showRegions", value.toString());
-};
-
-const toggleLanguages = (value: boolean) => {
-  languagesRef.value = value;
-  localStorage.setItem("settings.showLanguages", value.toString());
-};
-
-const toggleStatus = (value: boolean) => {
-  statusRef.value = value;
-  localStorage.setItem("settings.showStatus", value.toString());
-};
+import Interface from "@/components/Settings/UserInterface/Interface.vue";
+import Theme from "@/components/Settings/UserInterface/Theme.vue";
 </script>
 <template>
-  <r-section icon="mdi-brush-variant" title="Theme">
-    <template #content>
-      <v-item-group
-        v-model="selectedTheme"
-        mandatory
-        @update:model-value="toggleTheme"
-      >
-        <v-row no-gutters>
-          <v-col
-            cols="4"
-            sm="3"
-            md="2"
-            class="pa-2"
-            v-for="theme in themeOptions"
-          >
-            <theme-option
-              :key="theme.name"
-              :text="theme.name"
-              :icon="theme.icon"
-            />
-          </v-col>
-        </v-row>
-      </v-item-group>
-    </template>
-  </r-section>
-
-  <r-section icon="mdi-palette-swatch-outline" title="Interface">
-    <template #content>
-      <v-row no-gutters>
-        <v-col cols="12" md="6" v-for="option in options" :key="option.title">
-          <interface-option
-            class="mx-2"
-            :disabled="option.disabled"
-            :title="option.title"
-            :description="option.description"
-            :icon="
-              option.model.value ? option.iconEnabled : option.iconDisabled
-            "
-            v-model="option.model.value"
-            @update:model-value="option.modelTrigger"
-          />
-        </v-col>
-      </v-row>
-    </template>
-  </r-section>
+  <theme />
+  <interface />
 </template>

From dd5ba970065eedf77d99f722a6d48ea003056f33 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 16:24:17 +0000
Subject: [PATCH 32/49] refactor: implement wrap settings for Collections,
 Platforms, and Recent components to enhance UI flexibility

---
 frontend/src/components/Home/Collections.vue  |  9 ++-
 frontend/src/components/Home/Platforms.vue    |  9 ++-
 frontend/src/components/Home/Recent.vue       | 23 +++-----
 .../Settings/UserInterface/Interface.vue      | 58 ++++++++++++++++---
 frontend/src/views/Settings/UserInterface.vue |  2 +-
 5 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Home/Collections.vue b/frontend/src/components/Home/Collections.vue
index 2ae1ec892..3eefa9159 100644
--- a/frontend/src/components/Home/Collections.vue
+++ b/frontend/src/components/Home/Collections.vue
@@ -3,14 +3,21 @@ import CollectionCard from "@/components/common/Collection/Card.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeCollections from "@/stores/collections";
 import { views } from "@/utils";
+import { isNull } from "lodash";
 
 // Props
 const collections = storeCollections();
+const wrapCollections = isNull(localStorage.getItem("settings.wrapCollections"))
+  ? true
+  : localStorage.getItem("settings.wrapCollections") === "true";
 </script>
 <template>
   <r-section icon="mdi-bookmark-box-multiple" title="Collections">
     <template #content>
-      <v-row no-gutters>
+      <v-row
+        :class="{ 'flex-nowrap overflow-x-auto': wrapCollections }"
+        no-gutters
+      >
         <v-col
           v-for="collection in collections.allCollections"
           :key="collection.name"
diff --git a/frontend/src/components/Home/Platforms.vue b/frontend/src/components/Home/Platforms.vue
index ad3bd1b9a..2913702a1 100644
--- a/frontend/src/components/Home/Platforms.vue
+++ b/frontend/src/components/Home/Platforms.vue
@@ -2,15 +2,22 @@
 import PlatformCard from "@/components/common/Platform/Card.vue";
 import RSection from "@/components/common/RSection.vue";
 import storePlatforms from "@/stores/platforms";
+import { isNull } from "lodash";
 import { views } from "@/utils";
 
 // Props
 const platforms = storePlatforms();
+const wrapPlatforms = isNull(localStorage.getItem("settings.wrapPlatforms"))
+  ? true
+  : localStorage.getItem("settings.wrapPlatforms") === "true";
 </script>
 <template>
   <r-section icon="mdi-controller" title="Platforms">
     <template #content>
-      <v-row no-gutters>
+      <v-row
+        :class="{ 'flex-nowrap overflow-x-auto': wrapPlatforms }"
+        no-gutters
+      >
         <v-col
           v-for="platform in platforms.filledPlatforms"
           :key="platform.slug"
diff --git a/frontend/src/components/Home/Recent.vue b/frontend/src/components/Home/Recent.vue
index 9e27069fc..69482535a 100644
--- a/frontend/src/components/Home/Recent.vue
+++ b/frontend/src/components/Home/Recent.vue
@@ -5,29 +5,23 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import { views } from "@/utils";
 import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
+import { isNull } from "lodash";
 
 // Props
 const romsStore = storeRoms();
 const { recentRoms } = storeToRefs(romsStore);
 const router = useRouter();
-
-// Functions
-function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
-  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 } });
-  }
-}
+const wrapRecentRoms = isNull(localStorage.getItem("settings.wrapRecentRoms"))
+  ? true
+  : localStorage.getItem("settings.wrapRecentRoms") === "true";
 </script>
 <template>
   <r-section icon="mdi-shimmer" title="Recently added">
     <template #content>
-      <v-row class="flex-nowrap overflow-x-auto" no-gutters>
+      <v-row
+        :class="{ 'flex-nowrap overflow-x-auto': wrapPlatforms }"
+        no-gutters
+      >
         <v-col
           v-for="rom in recentRoms"
           :key="rom.id"
@@ -41,7 +35,6 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
           <game-card
             :key="rom.updated_at"
             :rom="rom"
-            @click="onGameClick"
             title-on-hover
             pointer-on-hover
             with-link
diff --git a/frontend/src/components/Settings/UserInterface/Interface.vue b/frontend/src/components/Settings/UserInterface/Interface.vue
index ff71b7767..82e4b46ef 100644
--- a/frontend/src/components/Settings/UserInterface/Interface.vue
+++ b/frontend/src/components/Settings/UserInterface/Interface.vue
@@ -6,21 +6,23 @@ import { isNull } from "lodash";
 
 // Initializing refs from localStorage
 const storedGroupRoms = localStorage.getItem("settings.groupRoms");
-const groupRomsRef = ref(
-  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
-);
+const groupRomsRef = ref(isNull(storedGroupRoms) ? true : storedGroupRoms === "true");
 const storedSiblings = localStorage.getItem("settings.showSiblings");
-const siblingsRef = ref(
-  isNull(storedSiblings) ? true : storedSiblings === "true",
-);
+const siblingsRef = ref(isNull(storedSiblings) ? true : storedSiblings === "true");
 const storedRegions = localStorage.getItem("settings.showRegions");
 const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
 const storedLanguages = localStorage.getItem("settings.showLanguages");
-const languagesRef = ref(
-  isNull(storedLanguages) ? true : storedLanguages === "true",
-);
+const languagesRef = ref(isNull(storedLanguages) ? true : storedLanguages === "true");
 const storedStatus = localStorage.getItem("settings.showStatus");
 const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
+
+const storedWrapRecentRoms = localStorage.getItem("settings.wrapRecentRoms");
+const wrapRecentRomsRef = ref(isNull(storedWrapRecentRoms) ? true : storedWrapRecentRoms === "true");
+
+const storedWrapPlatforms = localStorage.getItem("settings.wrapPlatforms");
+const wrapPlatformsRef = ref(isNull(storedWrapPlatforms) ? true : storedWrapPlatforms === "true");
+const storedWrapCollections = localStorage.getItem("settings.wrapCollections");
+const wrapCollectionsRef = ref(isNull(storedWrapCollections) ? true : storedWrapCollections === "true");
 const options = computed(() => [
   {
     title: "Group roms",
@@ -65,6 +67,33 @@ const options = computed(() => [
     model: statusRef,
     modelTrigger: toggleStatus,
   },
+  {
+    title: "Wrap recent added roms",
+    description:
+      "Wrap recent added rom cards as a grid in the home page",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: wrapRecentRomsRef,
+    modelTrigger: toggleWrapRecentRoms,
+  },
+  {
+    title: "Wrap platforms",
+    description:
+      "Wrap platform cards as a grid in the home page",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: wrapPlatformsRef,
+    modelTrigger: toggleWrapPlatforms,
+  },
+  {
+    title: "Wrap collections",
+    description:
+      "Wrap collection cards as a grid in the home page",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: wrapCollectionsRef,
+    modelTrigger: toggleWrapCollections,
+  },
 ]);
 
 // Functions to update localStorage
@@ -92,6 +121,17 @@ const toggleStatus = (value: boolean) => {
   statusRef.value = value;
   localStorage.setItem("settings.showStatus", value.toString());
 };
+const toggleWrapRecentRoms = (value: boolean) => {
+  wrapRecentRomsRef.value = value
+  localStorage.setItem("settings.wrapRecentRoms", value.toString());
+const toggleWrapPlatforms = (value: boolean) => {
+  wrapPlatformsRef.value = value;
+  localStorage.setItem("settings.wrapPlatforms", value.toString());
+};
+const toggleWrapCollections = (value: boolean) => {
+  wrapCollectionsRef = value;
+  localStorage.setItem("settings.wrapCollections", value.toString());
+};
 </script>
 <template>
   <r-section icon="mdi-palette-swatch-outline" title="Interface">
diff --git a/frontend/src/views/Settings/UserInterface.vue b/frontend/src/views/Settings/UserInterface.vue
index e6e6e6b52..dc874d4f0 100644
--- a/frontend/src/views/Settings/UserInterface.vue
+++ b/frontend/src/views/Settings/UserInterface.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Interface from "@/components/Settings/UserInterface/Interface.vue";
 import Theme from "@/components/Settings/UserInterface/Theme.vue";
+import Interface from "@/components/Settings/UserInterface/Interface.vue";
 </script>
 <template>
   <theme />

From f1171e0a4bbf31fccca1591f4c44a8eee52d5671 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 21:16:04 +0000
Subject: [PATCH 33/49] refactor: improve dialog messages for clarity and
 conciseness in collection and asset deletion components

---
 .../components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue | 2 +-
 .../components/common/Collection/Dialog/DeleteCollection.vue  | 4 ++--
 .../src/components/common/Game/Dialog/Asset/DeleteAssets.vue  | 4 +---
 frontend/src/components/common/Game/Dialog/DeleteRom.vue      | 4 ++--
 .../src/components/common/Platform/Dialog/DeletePlatform.vue  | 2 +-
 5 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 2bb7993f1..dc35e303a 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -234,7 +234,7 @@ async function setAspectRatio() {
       <template #content>
         <div class="text-center">
           <v-chip label variant="text" prepend-icon="mdi-aspect-ratio"
-            >Set cover style</v-chip
+            >Cover style</v-chip
           >
           <v-divider class="border-opacity-25 mx-2" />
           <v-item-group
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
index 6d6240649..f403fef4c 100644
--- a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -71,8 +71,8 @@ function closeDialog() {
       <v-row class="justify-center align-center pa-2" no-gutters>
         <span>Removing collection</span>
         <r-avatar class="ml-1" :collection="collection" />
-        <span class="ml-1 text-romm-accent-1">{{ collection.name }}</span>
-        <span class="ml-1">from RomM. Do you confirm?</span>
+        <span class="ml-1 text-romm-accent-1">{{ collection.name }}.</span>
+        <span class="ml-1">Do you confirm?</span>
       </v-row>
     </template>
     <template #append>
diff --git a/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue b/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
index d68e21d5f..3a44666b3 100644
--- a/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
+++ b/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
@@ -119,15 +119,13 @@ function closeDialog() {
         <span class="text-romm-accent-1 mx-1">{{ assets.length }}</span>
         <span>{{ assetType.slice(5) }} of</span>
         <span class="text-romm-accent-1 mx-1">{{ romRef?.name }}</span>
-        <span>from RomM</span>
       </v-row>
     </template>
     <template #prepend>
       <v-list-item class="text-caption text-center">
         <span
           >Select the {{ assetType.slice(5) }} you want to remove from your
-          filesystem, otherwise they will only be deleted from RomM
-          database.</span
+          filesystem, otherwise they will only be deleted from database.</span
         >
       </v-list-item>
     </template>
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index ad01c72ca..356b7a31d 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -98,14 +98,14 @@ function closeDialog() {
       <v-row no-gutters class="justify-center">
         <span>Removing</span>
         <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
-        <span>games from RomM</span>
+        <span>games</span>
       </v-row>
     </template>
     <template #prepend>
       <v-list-item class="text-caption text-center">
         <span
           >Select the games you want to remove from your filesystem, otherwise
-          they will only be deleted from RomM database.</span
+          they will only be deleted from database.</span
         >
       </v-list-item>
     </template>
diff --git a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
index 4d3837de8..f6f1042b6 100644
--- a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
+++ b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
@@ -71,7 +71,7 @@ function closeDialog() {
           >{{ platform.name }} - [<span class="text-romm-accent-1">{{
             platform.fs_slug
           }}</span
-          >] from RomM.</span
+          >].</span
         >
         <span class="ml-1">Do you confirm?</span>
       </v-row>

From 54adf91bed1ce96c9ecc49a4c93a2069e35c9af6 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 21:16:16 +0000
Subject: [PATCH 34/49] refactor: update Recent and Interface components for
 improved settings management and UI consistency

---
 frontend/src/components/Home/Recent.vue       |   2 +-
 .../Settings/UserInterface/Interface.vue      | 128 ++++++++++++------
 .../components/common/Collection/ListItem.vue |   2 +-
 3 files changed, 92 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/Home/Recent.vue b/frontend/src/components/Home/Recent.vue
index 69482535a..287a4cc7a 100644
--- a/frontend/src/components/Home/Recent.vue
+++ b/frontend/src/components/Home/Recent.vue
@@ -19,7 +19,7 @@ const wrapRecentRoms = isNull(localStorage.getItem("settings.wrapRecentRoms"))
   <r-section icon="mdi-shimmer" title="Recently added">
     <template #content>
       <v-row
-        :class="{ 'flex-nowrap overflow-x-auto': wrapPlatforms }"
+        :class="{ 'flex-nowrap overflow-x-auto': wrapRecentRoms }"
         no-gutters
       >
         <v-col
diff --git a/frontend/src/components/Settings/UserInterface/Interface.vue b/frontend/src/components/Settings/UserInterface/Interface.vue
index 82e4b46ef..54ab24ce4 100644
--- a/frontend/src/components/Settings/UserInterface/Interface.vue
+++ b/frontend/src/components/Settings/UserInterface/Interface.vue
@@ -6,24 +6,64 @@ import { isNull } from "lodash";
 
 // Initializing refs from localStorage
 const storedGroupRoms = localStorage.getItem("settings.groupRoms");
-const groupRomsRef = ref(isNull(storedGroupRoms) ? true : storedGroupRoms === "true");
+const groupRomsRef = ref(
+  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
+);
 const storedSiblings = localStorage.getItem("settings.showSiblings");
-const siblingsRef = ref(isNull(storedSiblings) ? true : storedSiblings === "true");
+const siblingsRef = ref(
+  isNull(storedSiblings) ? true : storedSiblings === "true",
+);
 const storedRegions = localStorage.getItem("settings.showRegions");
 const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
 const storedLanguages = localStorage.getItem("settings.showLanguages");
-const languagesRef = ref(isNull(storedLanguages) ? true : storedLanguages === "true");
+const languagesRef = ref(
+  isNull(storedLanguages) ? true : storedLanguages === "true",
+);
 const storedStatus = localStorage.getItem("settings.showStatus");
 const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
 
 const storedWrapRecentRoms = localStorage.getItem("settings.wrapRecentRoms");
-const wrapRecentRomsRef = ref(isNull(storedWrapRecentRoms) ? true : storedWrapRecentRoms === "true");
+const wrapRecentRomsRef = ref(
+  isNull(storedWrapRecentRoms) ? true : storedWrapRecentRoms === "true",
+);
 
 const storedWrapPlatforms = localStorage.getItem("settings.wrapPlatforms");
-const wrapPlatformsRef = ref(isNull(storedWrapPlatforms) ? true : storedWrapPlatforms === "true");
+const wrapPlatformsRef = ref(
+  isNull(storedWrapPlatforms) ? true : storedWrapPlatforms === "true",
+);
 const storedWrapCollections = localStorage.getItem("settings.wrapCollections");
-const wrapCollectionsRef = ref(isNull(storedWrapCollections) ? true : storedWrapCollections === "true");
-const options = computed(() => [
+const wrapCollectionsRef = ref(
+  isNull(storedWrapCollections) ? true : storedWrapCollections === "true",
+);
+
+const homeOptions = computed(() => [
+  {
+    title: "Wrap recent added roms",
+    description: "Wrap recent added rom cards as a grid in the home page",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: wrapRecentRomsRef,
+    modelTrigger: toggleWrapRecentRoms,
+  },
+  {
+    title: "Wrap platforms",
+    description: "Wrap platform cards as a grid in the home page",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: wrapPlatformsRef,
+    modelTrigger: toggleWrapPlatforms,
+  },
+  {
+    title: "Wrap collections",
+    description: "Wrap collection cards as a grid in the home page",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: wrapCollectionsRef,
+    modelTrigger: toggleWrapCollections,
+  },
+]);
+
+const galleryOptions = computed(() => [
   {
     title: "Group roms",
     description: "Group versions of the same rom together in the gallery",
@@ -67,33 +107,6 @@ const options = computed(() => [
     model: statusRef,
     modelTrigger: toggleStatus,
   },
-  {
-    title: "Wrap recent added roms",
-    description:
-      "Wrap recent added rom cards as a grid in the home page",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: wrapRecentRomsRef,
-    modelTrigger: toggleWrapRecentRoms,
-  },
-  {
-    title: "Wrap platforms",
-    description:
-      "Wrap platform cards as a grid in the home page",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: wrapPlatformsRef,
-    modelTrigger: toggleWrapPlatforms,
-  },
-  {
-    title: "Wrap collections",
-    description:
-      "Wrap collection cards as a grid in the home page",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: wrapCollectionsRef,
-    modelTrigger: toggleWrapCollections,
-  },
 ]);
 
 // Functions to update localStorage
@@ -122,22 +135,61 @@ const toggleStatus = (value: boolean) => {
   localStorage.setItem("settings.showStatus", value.toString());
 };
 const toggleWrapRecentRoms = (value: boolean) => {
-  wrapRecentRomsRef.value = value
+  wrapRecentRomsRef.value = value;
   localStorage.setItem("settings.wrapRecentRoms", value.toString());
+};
 const toggleWrapPlatforms = (value: boolean) => {
   wrapPlatformsRef.value = value;
   localStorage.setItem("settings.wrapPlatforms", value.toString());
 };
+
 const toggleWrapCollections = (value: boolean) => {
-  wrapCollectionsRef = value;
+  wrapCollectionsRef.value = value;
   localStorage.setItem("settings.wrapCollections", value.toString());
 };
 </script>
 <template>
   <r-section icon="mdi-palette-swatch-outline" title="Interface">
     <template #content>
-      <v-row no-gutters>
-        <v-col cols="12" md="6" v-for="option in options" :key="option.title">
+      <v-chip label variant="text" prepend-icon="mdi-home" class="ml-2"
+        >Home</v-chip
+      >
+      <v-divider class="border-opacity-25 mx-2" />
+      <v-row class="py-1" no-gutters>
+        <v-col
+          cols="12"
+          md="6"
+          v-for="option in homeOptions"
+          :key="option.title"
+        >
+          <interface-option
+            class="mx-2"
+            :disabled="option.disabled"
+            :title="option.title"
+            :description="option.description"
+            :icon="
+              option.model.value ? option.iconEnabled : option.iconDisabled
+            "
+            v-model="option.model.value"
+            @update:model-value="option.modelTrigger"
+          />
+        </v-col>
+      </v-row>
+      <v-chip
+        label
+        variant="text"
+        prepend-icon="mdi-view-grid"
+        class="ml-2 mt-4"
+        >Gallery</v-chip
+      >
+      <v-divider class="border-opacity-25 mx-2" />
+      <v-row class="py-1" no-gutters>
+        <v-col
+          cols="12"
+          md="6"
+          v-for="option in galleryOptions"
+          :key="option.title"
+        >
           <interface-option
             class="mx-2"
             :disabled="option.disabled"
diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
index d3a46dcf2..886d04b2b 100644
--- a/frontend/src/components/common/Collection/ListItem.vue
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -14,7 +14,7 @@ defineProps<{ collection: Collection }>();
     class="py-1 pl-1"
   >
     <template #prepend>
-      <r-avatar :size="80" :collection="collection" />
+      <r-avatar :size="75" :collection="collection" />
     </template>
     <v-row no-gutters
       ><v-col

From c3f646b15cbb1590cbc9b3f04750b1eddd127ecc Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 21:49:46 +0000
Subject: [PATCH 35/49] refactor: added options to show or hide sections at the
 home page

---
 frontend/src/components/Home/Collections.vue  |   6 +-
 frontend/src/components/Home/Platforms.vue    |   6 +-
 frontend/src/components/Home/Recent.vue       |   6 +-
 .../Settings/UserInterface/Interface.vue      | 140 ++++++++++++------
 frontend/src/views/Home.vue                   |  16 +-
 5 files changed, 117 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/Home/Collections.vue b/frontend/src/components/Home/Collections.vue
index 3eefa9159..286b4a344 100644
--- a/frontend/src/components/Home/Collections.vue
+++ b/frontend/src/components/Home/Collections.vue
@@ -7,15 +7,15 @@ import { isNull } from "lodash";
 
 // Props
 const collections = storeCollections();
-const wrapCollections = isNull(localStorage.getItem("settings.wrapCollections"))
+const gridCollections = isNull(localStorage.getItem("settings.gridCollections"))
   ? true
-  : localStorage.getItem("settings.wrapCollections") === "true";
+  : localStorage.getItem("settings.gridCollections") === "true";
 </script>
 <template>
   <r-section icon="mdi-bookmark-box-multiple" title="Collections">
     <template #content>
       <v-row
-        :class="{ 'flex-nowrap overflow-x-auto': wrapCollections }"
+        :class="{ 'flex-nowrap overflow-x-auto': !gridCollections }"
         no-gutters
       >
         <v-col
diff --git a/frontend/src/components/Home/Platforms.vue b/frontend/src/components/Home/Platforms.vue
index 2913702a1..131b4d1c2 100644
--- a/frontend/src/components/Home/Platforms.vue
+++ b/frontend/src/components/Home/Platforms.vue
@@ -7,15 +7,15 @@ import { views } from "@/utils";
 
 // Props
 const platforms = storePlatforms();
-const wrapPlatforms = isNull(localStorage.getItem("settings.wrapPlatforms"))
+const gridPlatforms = isNull(localStorage.getItem("settings.gridPlatforms"))
   ? true
-  : localStorage.getItem("settings.wrapPlatforms") === "true";
+  : localStorage.getItem("settings.gridPlatforms") === "true";
 </script>
 <template>
   <r-section icon="mdi-controller" title="Platforms">
     <template #content>
       <v-row
-        :class="{ 'flex-nowrap overflow-x-auto': wrapPlatforms }"
+        :class="{ 'flex-nowrap overflow-x-auto': !gridPlatforms }"
         no-gutters
       >
         <v-col
diff --git a/frontend/src/components/Home/Recent.vue b/frontend/src/components/Home/Recent.vue
index 287a4cc7a..1f3ecd2cf 100644
--- a/frontend/src/components/Home/Recent.vue
+++ b/frontend/src/components/Home/Recent.vue
@@ -11,15 +11,15 @@ import { isNull } from "lodash";
 const romsStore = storeRoms();
 const { recentRoms } = storeToRefs(romsStore);
 const router = useRouter();
-const wrapRecentRoms = isNull(localStorage.getItem("settings.wrapRecentRoms"))
+const gridRecentRoms = isNull(localStorage.getItem("settings.gridRecentRoms"))
   ? true
-  : localStorage.getItem("settings.wrapRecentRoms") === "true";
+  : localStorage.getItem("settings.gridRecentRoms") === "true";
 </script>
 <template>
   <r-section icon="mdi-shimmer" title="Recently added">
     <template #content>
       <v-row
-        :class="{ 'flex-nowrap overflow-x-auto': wrapRecentRoms }"
+        :class="{ 'flex-nowrap overflow-x-auto': !gridRecentRoms }"
         no-gutters
       >
         <v-col
diff --git a/frontend/src/components/Settings/UserInterface/Interface.vue b/frontend/src/components/Settings/UserInterface/Interface.vue
index 54ab24ce4..51d8dba17 100644
--- a/frontend/src/components/Settings/UserInterface/Interface.vue
+++ b/frontend/src/components/Settings/UserInterface/Interface.vue
@@ -5,6 +5,31 @@ import { computed, ref } from "vue";
 import { isNull } from "lodash";
 
 // Initializing refs from localStorage
+const storedShowRecentRoms = localStorage.getItem("settings.showRecentRoms");
+const showRecentRomsRef = ref(
+  isNull(storedShowRecentRoms) ? true : storedShowRecentRoms === "true",
+);
+const storedGridRecentRoms = localStorage.getItem("settings.gridRecentRoms");
+const gridRecentRomsRef = ref(
+  isNull(storedGridRecentRoms) ? true : storedGridRecentRoms === "true",
+);
+const storedShowPlatforms = localStorage.getItem("settings.showPlatforms");
+const showPlatformsRef = ref(
+  isNull(storedShowPlatforms) ? true : storedShowPlatforms === "true",
+);
+const storedGridPlatforms = localStorage.getItem("settings.gridPlatforms");
+const gridPlatformsRef = ref(
+  isNull(storedGridPlatforms) ? true : storedGridPlatforms === "true",
+);
+const storedShowCollections = localStorage.getItem("settings.showCollections");
+const showCollectionsRef = ref(
+  isNull(storedShowCollections) ? true : storedShowCollections === "true",
+);
+const storedGridCollections = localStorage.getItem("settings.gridCollections");
+const gridCollectionsRef = ref(
+  isNull(storedGridCollections) ? true : storedGridCollections === "true",
+);
+
 const storedGroupRoms = localStorage.getItem("settings.groupRoms");
 const groupRomsRef = ref(
   isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
@@ -22,44 +47,57 @@ const languagesRef = ref(
 const storedStatus = localStorage.getItem("settings.showStatus");
 const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
 
-const storedWrapRecentRoms = localStorage.getItem("settings.wrapRecentRoms");
-const wrapRecentRomsRef = ref(
-  isNull(storedWrapRecentRoms) ? true : storedWrapRecentRoms === "true",
-);
-
-const storedWrapPlatforms = localStorage.getItem("settings.wrapPlatforms");
-const wrapPlatformsRef = ref(
-  isNull(storedWrapPlatforms) ? true : storedWrapPlatforms === "true",
-);
-const storedWrapCollections = localStorage.getItem("settings.wrapCollections");
-const wrapCollectionsRef = ref(
-  isNull(storedWrapCollections) ? true : storedWrapCollections === "true",
-);
-
 const homeOptions = computed(() => [
   {
-    title: "Wrap recent added roms",
-    description: "Wrap recent added rom cards as a grid in the home page",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: wrapRecentRomsRef,
-    modelTrigger: toggleWrapRecentRoms,
+    title: "Show recently added roms",
+    description: "Show recently added roms section at the home page",
+    iconEnabled: "mdi-checkbox-marked-outline",
+    iconDisabled: "mdi-checkbox-blank-outline",
+    model: showRecentRomsRef,
+    modelTrigger: toggleShowRecentRoms,
   },
   {
-    title: "Wrap platforms",
-    description: "Wrap platform cards as a grid in the home page",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: wrapPlatformsRef,
-    modelTrigger: toggleWrapPlatforms,
+    title: "Recently added roms as grid",
+    description: "View recently added rom cards as a grid at the home page",
+    iconEnabled: "mdi-view-comfy",
+    iconDisabled: "mdi-view-column",
+    disabled: !showRecentRomsRef.value,
+    model: gridRecentRomsRef,
+    modelTrigger: toggleGridRecentRoms,
   },
   {
-    title: "Wrap collections",
-    description: "Wrap collection cards as a grid in the home page",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: wrapCollectionsRef,
-    modelTrigger: toggleWrapCollections,
+    title: "Show platforms",
+    description: "Show platform section at the home page",
+    iconEnabled: "mdi-checkbox-marked-outline",
+    iconDisabled: "mdi-checkbox-blank-outline",
+    model: showPlatformsRef,
+    modelTrigger: toggleShowPlatforms,
+  },
+  {
+    title: "Platforms as grid",
+    description: "View platform cards as a grid at the home page",
+    iconEnabled: "mdi-view-comfy",
+    iconDisabled: "mdi-view-column",
+    disabled: !showPlatformsRef.value,
+    model: gridPlatformsRef,
+    modelTrigger: toggleGridPlatforms,
+  },
+  {
+    title: "Show collections",
+    description: "Show collections section at the home page",
+    iconEnabled: "mdi-checkbox-marked-outline",
+    iconDisabled: "mdi-checkbox-blank-outline",
+    model: showCollectionsRef,
+    modelTrigger: toggleShowCollections,
+  },
+  {
+    title: "Collections a grid",
+    description: "View collection cards as a grid at the home page",
+    iconEnabled: "mdi-view-comfy",
+    iconDisabled: "mdi-view-column",
+    disabled: !showCollectionsRef.value,
+    model: gridCollectionsRef,
+    modelTrigger: toggleGridCollections,
   },
 ]);
 
@@ -110,6 +148,31 @@ const galleryOptions = computed(() => [
 ]);
 
 // Functions to update localStorage
+const toggleShowRecentRoms = (value: boolean) => {
+  showRecentRomsRef.value = value;
+  localStorage.setItem("settings.showRecentRoms", value.toString());
+};
+const toggleGridRecentRoms = (value: boolean) => {
+  gridRecentRomsRef.value = value;
+  localStorage.setItem("settings.gridRecentRoms", value.toString());
+};
+const toggleShowPlatforms = (value: boolean) => {
+  showPlatformsRef.value = value;
+  localStorage.setItem("settings.showPlatforms", value.toString());
+};
+const toggleGridPlatforms = (value: boolean) => {
+  gridPlatformsRef.value = value;
+  localStorage.setItem("settings.gridPlatforms", value.toString());
+};
+const toggleShowCollections = (value: boolean) => {
+  showCollectionsRef.value = value;
+  localStorage.setItem("settings.showCollections", value.toString());
+};
+const toggleGridCollections = (value: boolean) => {
+  gridCollectionsRef.value = value;
+  localStorage.setItem("settings.gridCollections", value.toString());
+};
+
 const toggleGroupRoms = (value: boolean) => {
   groupRomsRef.value = value;
   localStorage.setItem("settings.groupRoms", value.toString());
@@ -134,19 +197,6 @@ const toggleStatus = (value: boolean) => {
   statusRef.value = value;
   localStorage.setItem("settings.showStatus", value.toString());
 };
-const toggleWrapRecentRoms = (value: boolean) => {
-  wrapRecentRomsRef.value = value;
-  localStorage.setItem("settings.wrapRecentRoms", value.toString());
-};
-const toggleWrapPlatforms = (value: boolean) => {
-  wrapPlatformsRef.value = value;
-  localStorage.setItem("settings.wrapPlatforms", value.toString());
-};
-
-const toggleWrapCollections = (value: boolean) => {
-  wrapCollectionsRef.value = value;
-  localStorage.setItem("settings.wrapCollections", value.toString());
-};
 </script>
 <template>
   <r-section icon="mdi-palette-swatch-outline" title="Interface">
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 9bb9b4c8b..9b2a5b1ae 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -9,6 +9,7 @@ import storePlatforms from "@/stores/platforms";
 import storeRoms from "@/stores/roms";
 import { storeToRefs } from "pinia";
 import { onMounted } from "vue";
+import { isNull } from "lodash";
 
 // Props
 const romsStore = storeRoms();
@@ -17,6 +18,15 @@ const platforms = storePlatforms();
 const { filledPlatforms } = storeToRefs(platforms);
 const collections = storeCollections();
 const { allCollections } = storeToRefs(collections);
+const showRecentRoms = isNull(localStorage.getItem("settings.showRecentRoms"))
+  ? true
+  : localStorage.getItem("settings.showRecentRoms") === "true";
+const showPlatforms = isNull(localStorage.getItem("settings.showPlatforms"))
+  ? true
+  : localStorage.getItem("settings.showPlatforms") === "true";
+const showCollections = isNull(localStorage.getItem("settings.showCollections"))
+  ? true
+  : localStorage.getItem("settings.showCollections") === "true";
 
 // Functions
 onMounted(async () => {
@@ -33,7 +43,7 @@ onMounted(async () => {
 
 <template>
   <stats />
-  <recently-added v-if="recentRoms.length > 0" />
-  <platforms v-if="filledPlatforms.length > 0" />
-  <collections v-if="allCollections.length > 0" />
+  <recently-added v-if="recentRoms.length > 0 && showRecentRoms" />
+  <platforms v-if="filledPlatforms.length > 0 && showPlatforms" />
+  <collections v-if="allCollections.length > 0 && showCollections" />
 </template>

From 9365b6b83d32172a73a89cad8905602225484d69 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 22:34:24 +0000
Subject: [PATCH 36/49] refactor: enhance CollectionListItem options

---
 .../common/Collection/Dialog/AddRoms.vue      | 19 ++-----
 .../components/common/Collection/ListItem.vue | 30 +++++++++--
 .../common/Game/Dialog/DeleteRom.vue          |  4 +-
 .../src/components/common/Game/ListItem.vue   |  0
 frontend/src/components/common/Game/Table.vue |  4 +-
 .../common/Navigation/CollectionsDrawer.vue   |  1 +
 .../common/Navigation/MainAppBar.vue          | 52 +++++++++++++++++++
 .../common/Navigation/MainDrawer.vue          | 45 ----------------
 frontend/src/layouts/Main.vue                 | 20 +------
 frontend/src/views/Player/EmulatorJS/Base.vue |  4 +-
 frontend/src/views/Player/RuffleRS/Base.vue   |  4 +-
 frontend/src/views/Scan.vue                   |  4 +-
 12 files changed, 94 insertions(+), 93 deletions(-)
 create mode 100644 frontend/src/components/common/Game/ListItem.vue
 delete mode 100644 frontend/src/components/common/Navigation/MainDrawer.vue

diff --git a/frontend/src/components/common/Collection/Dialog/AddRoms.vue b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
index aafd72931..8abfafcbd 100644
--- a/frontend/src/components/common/Collection/Dialog/AddRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import RAvatarCollection from "@/components/common/Collection/RAvatar.vue";
+import CollectionListItem from "@/components/common/Collection/ListItem.vue";
 import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import type { UpdatedCollection } from "@/services/api/collection";
@@ -110,21 +111,11 @@ function closeDialog() {
         clearable
       >
         <template #item="{ props, item }">
-          <v-list-item
-            class="py-4"
+          <collection-list-item
+            :collection="item.raw"
             v-bind="props"
-            :title="item.raw.name ?? ''"
-            :subtitle="item.raw.description"
-          >
-            <template #prepend>
-              <r-avatar-collection :collection="item.raw" />
-            </template>
-            <template #append>
-              <v-chip class="ml-2" size="x-small" label>
-                {{ item.raw.rom_count }}
-              </v-chip>
-            </template>
-          </v-list-item>
+            :with-title="false"
+          />
         </template>
       </v-autocomplete>
     </template>
diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
index 886d04b2b..6176bc6a1 100644
--- a/frontend/src/components/common/Collection/ListItem.vue
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -3,30 +3,50 @@ import type { Collection } from "@/stores/collections";
 import RAvatar from "@/components/common/Collection/RAvatar.vue";
 
 // Props
-defineProps<{ collection: Collection }>();
+withDefaults(
+  defineProps<{
+    collection: Collection;
+    withTitle?: boolean;
+    withDescription?: boolean;
+    withRomCount?: boolean;
+    withLink?: boolean;
+  }>(),
+  {
+    withTitle: true,
+    withDescription: true,
+    withRomCount: true,
+    withLink: false,
+  },
+);
 </script>
 
 <template>
   <v-list-item
     :key="collection.id"
-    :to="{ name: 'collection', params: { collection: collection.id } }"
+    v-bind="{
+      ...(withLink && collection
+        ? {
+            to: { name: 'collection', params: { collection: collection.id } },
+          }
+        : {}),
+    }"
     :value="collection.name"
     class="py-1 pl-1"
   >
     <template #prepend>
       <r-avatar :size="75" :collection="collection" />
     </template>
-    <v-row no-gutters
+    <v-row v-if="withTitle" no-gutters
       ><v-col
         ><span class="text-body-1">{{ collection.name }}</span></v-col
       ></v-row
     >
-    <v-row no-gutters>
+    <v-row v-if="withDescription" no-gutters>
       <v-col>
         <span class="text-caption text-grey">{{ collection.description }}</span>
       </v-col>
     </v-row>
-    <template #append>
+    <template v-if="withRomCount" #append>
       <v-chip class="ml-2" size="x-small" label>
         {{ collection.rom_count }}
       </v-chip>
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index 356b7a31d..6e6313457 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -124,7 +124,7 @@ function closeDialog() {
         <template #item.name="{ item }">
           <v-list-item class="px-0">
             <template #prepend>
-              <r-avatar :rom="item" />
+              <r-avatar-rom :rom="item" />
             </template>
             <v-row no-gutters
               ><v-col>{{ item.name }}</v-col></v-row
diff --git a/frontend/src/components/common/Game/ListItem.vue b/frontend/src/components/common/Game/ListItem.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index 150ee7f7c..b6cb50d2b 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
 import FavBtn from "@/components/common/Game/FavBtn.vue";
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -154,7 +154,7 @@ onMounted(() => {
       <td class="name-row">
         <v-list-item class="px-0">
           <template #prepend>
-            <r-avatar :rom="item" />
+            <r-avatar-rom :rom="item" />
           </template>
           <v-row no-gutters
             ><v-col>{{ item.name }}</v-col></v-row
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index e1a35ff1a..2086a87c7 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -51,6 +51,7 @@ function clear() {
       <collection-list-item
         v-for="collection in filteredCollections"
         :collection="collection"
+        with-link
       />
     </v-list>
     <template #append>
diff --git a/frontend/src/components/common/Navigation/MainAppBar.vue b/frontend/src/components/common/Navigation/MainAppBar.vue
index 6b4327f1d..3066e8415 100644
--- a/frontend/src/components/common/Navigation/MainAppBar.vue
+++ b/frontend/src/components/common/Navigation/MainAppBar.vue
@@ -6,9 +6,25 @@ import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
 import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
 import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
 import UserBtn from "@/components/common/Navigation/UserBtn.vue";
+import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
+import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
+import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
+import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
+import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
+import storeNavigation from "@/stores/navigation";
+import { storeToRefs } from "pinia";
+import { useDisplay } from "vuetify";
+
+// Props
+const { smAndDown } = useDisplay();
+const navigationStore = storeNavigation();
+const { activePlatformsDrawer, activeCollectionsDrawer, activeSettingsDrawer } =
+  storeToRefs(navigationStore);
 </script>
 <template>
+  <!-- Mobile app bar -->
   <v-app-bar
+    v-if="smAndDown"
     elevation="0"
     class="bg-primary justify-center px-1"
     mode="shift"
@@ -32,4 +48,40 @@ import UserBtn from "@/components/common/Navigation/UserBtn.vue";
       <user-btn />
     </template>
   </v-app-bar>
+
+  <!-- Desktop app bar -->
+  <v-navigation-drawer
+    v-else
+    permanent
+    rail
+    :floating="
+      activePlatformsDrawer || activeCollectionsDrawer || activeSettingsDrawer
+    "
+    rail-width="60"
+  >
+    <template #prepend>
+      <v-row no-gutters class="my-2 justify-center">
+        <home-btn />
+      </v-row>
+    </template>
+
+    <v-divider opacity="0" class="my-4" />
+    <search-btn block />
+    <platforms-btn block />
+    <collections-btn block />
+    <v-divider opacity="0" class="my-3" />
+    <upload-btn block />
+    <scan-btn block />
+    <template #append>
+      <v-row no-gutters class="my-2 justify-center">
+        <user-btn />
+      </v-row>
+    </template>
+  </v-navigation-drawer>
+
+  <search-rom-dialog />
+  <platforms-drawer />
+  <collections-drawer />
+  <upload-rom-dialog />
+  <settings-drawer />
 </template>
diff --git a/frontend/src/components/common/Navigation/MainDrawer.vue b/frontend/src/components/common/Navigation/MainDrawer.vue
deleted file mode 100644
index 57137581d..000000000
--- a/frontend/src/components/common/Navigation/MainDrawer.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import HomeBtn from "@/components/common/Navigation/HomeBtn.vue";
-import PlatformsBtn from "@/components/common/Navigation/PlatformsBtn.vue";
-import CollectionsBtn from "@/components/common/Navigation/CollectionsBtn.vue";
-import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
-import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
-import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
-import UserBtn from "@/components/common/Navigation/UserBtn.vue";
-import storeNavigation from "@/stores/navigation";
-import { storeToRefs } from "pinia";
-
-// Props
-const navigationStore = storeNavigation();
-const { activePlatformsDrawer, activeCollectionsDrawer, activeSettingsDrawer } =
-  storeToRefs(navigationStore);
-</script>
-<template>
-  <v-navigation-drawer
-    permanent
-    rail
-    :floating="
-      activePlatformsDrawer || activeCollectionsDrawer || activeSettingsDrawer
-    "
-    rail-width="60"
-  >
-    <template #prepend>
-      <v-row no-gutters class="my-2 justify-center">
-        <home-btn />
-      </v-row>
-    </template>
-
-    <v-divider opacity="0" class="my-4" />
-    <search-btn block />
-    <platforms-btn block />
-    <collections-btn block />
-    <v-divider opacity="0" class="my-3" />
-    <upload-btn block />
-    <scan-btn block />
-    <template #append>
-      <v-row no-gutters class="my-2 justify-center">
-        <user-btn />
-      </v-row>
-    </template>
-  </v-navigation-drawer>
-</template>
diff --git a/frontend/src/layouts/Main.vue b/frontend/src/layouts/Main.vue
index 6bcc2037a..6802677c1 100644
--- a/frontend/src/layouts/Main.vue
+++ b/frontend/src/layouts/Main.vue
@@ -5,13 +5,7 @@ import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialo
 import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
 import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
 import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
-import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
-import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
-import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
 import MainAppBar from "@/components/common/Navigation/MainAppBar.vue";
-import MainDrawer from "@/components/common/Navigation/MainDrawer.vue";
-import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
-import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
 import NewVersionDialog from "@/components/common/NewVersionDialog.vue";
 import Notification from "@/components/common/Notifications/Notification.vue";
 import UploadProgress from "@/components/common/Notifications/UploadProgress.vue";
@@ -31,10 +25,8 @@ import storePlatforms from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeMount } from "vue";
-import { useDisplay } from "vuetify";
 
 // Props
-const { smAndDown } = useDisplay();
 const heartbeat = storeHeartbeat();
 const configStore = storeConfig();
 const navigationStore = storeNavigation();
@@ -97,17 +89,7 @@ onBeforeMount(async () => {
 <template>
   <notification />
 
-  <template v-if="!smAndDown">
-    <main-drawer />
-  </template>
-  <template v-else>
-    <main-app-bar />
-  </template>
-  <search-rom-dialog />
-  <platforms-drawer />
-  <collections-drawer />
-  <upload-rom-dialog />
-  <settings-drawer />
+  <main-app-bar />
 
   <view-loader />
   <router-view />
diff --git a/frontend/src/views/Player/EmulatorJS/Base.vue b/frontend/src/views/Player/EmulatorJS/Base.vue
index a4dfa4dcb..91f190329 100644
--- a/frontend/src/views/Player/EmulatorJS/Base.vue
+++ b/frontend/src/views/Player/EmulatorJS/Base.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import firmwareApi from "@/services/api/firmware";
 import romApi from "@/services/api/rom";
 import storeGalleryView from "@/stores/galleryView";
@@ -133,7 +133,7 @@ onMounted(async () => {
           <v-divider class="my-4" />
           <v-list-item class="px-2">
             <template #prepend>
-              <r-avatar :rom="rom" />
+              <r-avatar-rom :rom="rom" />
             </template>
             <v-row no-gutters
               ><v-col>{{ rom.name }}</v-col></v-row
diff --git a/frontend/src/views/Player/RuffleRS/Base.vue b/frontend/src/views/Player/RuffleRS/Base.vue
index 229a88737..be8fa9377 100644
--- a/frontend/src/views/Player/RuffleRS/Base.vue
+++ b/frontend/src/views/Player/RuffleRS/Base.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import romApi from "@/services/api/rom";
 import storeGalleryView from "@/stores/galleryView";
 import type { DetailedRom } from "@/stores/roms";
@@ -98,7 +98,7 @@ onMounted(async () => {
           <v-divider class="my-4" />
           <v-list-item class="px-2">
             <template #prepend>
-              <r-avatar :rom="rom" />
+              <r-avatar-rom :rom="rom" />
             </template>
             <v-row no-gutters
               ><v-col>{{ rom.name }}</v-col></v-row
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index acbd45e5e..be9b8715b 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import socket from "@/services/socket";
 import storeHeartbeat from "@/stores/heartbeat";
@@ -336,7 +336,7 @@ async function stopScan() {
               :to="{ name: 'rom', params: { rom: rom.id } }"
             >
               <template #prepend>
-                <r-avatar :rom="rom" />
+                <r-avatar-rom :rom="rom" />
               </template>
               <v-row no-gutters>
                 <span

From 391829568f0c4ce951d902c961b8812e3d365b10 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 23:31:40 +0000
Subject: [PATCH 37/49] refactor: added a Rom list item an used/replaces where
 needed

---
 .../common/Collection/Dialog/AddRoms.vue      | 21 ++++---
 .../common/Collection/Dialog/RemoveRoms.vue   | 11 +---
 .../common/Game/Dialog/DeleteRom.vue          | 52 +++--------------
 .../src/components/common/Game/ListItem.vue   | 57 +++++++++++++++++++
 frontend/src/views/Player/EmulatorJS/Base.vue | 16 +-----
 frontend/src/views/Player/RuffleRS/Base.vue   | 20 ++-----
 frontend/src/views/Scan.vue                   |  1 +
 7 files changed, 86 insertions(+), 92 deletions(-)

diff --git a/frontend/src/components/common/Collection/Dialog/AddRoms.vue b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
index 8abfafcbd..f7295f5c7 100644
--- a/frontend/src/components/common/Collection/Dialog/AddRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import RAvatarCollection from "@/components/common/Collection/RAvatar.vue";
 import CollectionListItem from "@/components/common/Collection/ListItem.vue";
-import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import type { UpdatedCollection } from "@/services/api/collection";
 import collectionApi from "@/services/api/collection";
@@ -117,6 +117,16 @@ function closeDialog() {
             :with-title="false"
           />
         </template>
+        <template #chip="{ item }">
+          <v-chip class="pl-0" label>
+            <r-avatar-collection
+              :collection="item.raw"
+              :size="35"
+              class="mr-2"
+            />
+            {{ item.raw.name }}
+          </v-chip>
+        </template>
       </v-autocomplete>
     </template>
     <template #content>
@@ -131,14 +141,7 @@ function closeDialog() {
         hide-default-header
       >
         <template #item.name="{ item }">
-          <v-list-item class="px-0">
-            <template #prepend>
-              <r-avatar-rom :rom="item" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ item.name }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="item" with-filename />
         </template>
         <template #bottom>
           <v-divider />
diff --git a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
index 916042e0e..a99581db4 100644
--- a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import router from "@/plugins/router";
 import collectionApi from "@/services/api/collection";
@@ -118,14 +118,7 @@ function closeDialog() {
         hide-default-header
       >
         <template #item.name="{ item }">
-          <v-list-item class="px-0">
-            <template #prepend>
-              <r-avatar-rom :rom="item" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ item.name }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="item" with-filename />
         </template>
         <template #bottom>
           <v-divider />
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index 6e6313457..f1a686b89 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -122,53 +122,17 @@ function closeDialog() {
         show-select
       >
         <template #item.name="{ item }">
-          <v-list-item class="px-0">
-            <template #prepend>
-              <r-avatar-rom :rom="item" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ item.name }}</v-col></v-row
-            >
-            <v-row v-if="romsToDeleteFromFs.includes(item.id)" no-gutters
-              ><v-col class="text-romm-accent-1"
-                >{{ item.file_name
-                }}<v-chip
-                  v-if="romsToDeleteFromFs.includes(item.id) && smAndUp"
-                  label
-                  size="x-small"
-                  class="text-romm-red ml-1"
-                >
-                  Removing from filesystem
-                </v-chip></v-col
-              ></v-row
-            >
-            <v-row
-              v-if="romsToDeleteFromFs.includes(item.id) && !smAndUp"
-              no-gutters
-            >
-              <v-col>
-                <v-chip label size="x-small" class="text-romm-red">
-                  Removing from filesystem
-                </v-chip>
-              </v-col>
-            </v-row>
-            <v-row no-gutters>
-              <v-col>
-                <v-chip v-if="!smAndUp" size="x-small" label
-                  >{{ formatBytes(item.file_size_bytes) }}
-                </v-chip>
-              </v-col>
-            </v-row>
-            <template #append>
-              <v-row no-gutters v-if="smAndUp">
+          <rom-list-item :rom="item" with-filename>
+            <template #append-body>
+              <v-row v-if="romsToDeleteFromFs.includes(item.id)" no-gutters>
                 <v-col>
-                  <v-chip size="x-small" label>{{
-                    formatBytes(item.file_size_bytes)
-                  }}</v-chip>
+                  <v-chip label size="x-small" class="text-romm-red">
+                    Removing from filesystem
+                  </v-chip>
                 </v-col>
               </v-row>
             </template>
-          </v-list-item>
+          </rom-list-item>
         </template>
         <template #bottom>
           <v-divider />
diff --git a/frontend/src/components/common/Game/ListItem.vue b/frontend/src/components/common/Game/ListItem.vue
index e69de29bb..10a8fb05f 100644
--- a/frontend/src/components/common/Game/ListItem.vue
+++ b/frontend/src/components/common/Game/ListItem.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { SimpleRom } from "@/stores/roms";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import { formatBytes } from "@/utils";
+import { useDisplay } from "vuetify";
+
+// Props
+withDefaults(
+  defineProps<{
+    rom: SimpleRom;
+    withAvatar?: boolean;
+    withName?: boolean;
+    withFilename?: boolean;
+    withSize?: boolean;
+    withLink?: boolean;
+  }>(),
+  {
+    withAvatar: true,
+    withName: true,
+    withFilename: false,
+    withSize: true,
+    withLink: false,
+  },
+);
+</script>
+<template>
+  <v-list-item
+    class="px-0"
+    v-bind="{
+      ...(withLink && rom
+        ? {
+            to: { name: 'rom', params: { rom: rom.id } },
+          }
+        : {}),
+    }"
+  >
+    <template v-if="withAvatar" #prepend>
+      <r-avatar-rom :rom="rom" />
+    </template>
+    <v-row v-if="withName" no-gutters
+      ><v-col>{{ rom.name }}</v-col></v-row
+    >
+    <v-row v-if="withFilename" no-gutters
+      ><v-col class="text-romm-accent-1">{{ rom.file_name }}</v-col></v-row
+    >
+    <slot name="append-body"></slot>
+    <template #append>
+      <v-row v-if="withSize" no-gutters>
+        <v-col>
+          <v-chip size="x-small" label>{{
+            formatBytes(rom.file_size_bytes)
+          }}</v-chip>
+        </v-col>
+      </v-row>
+    </template>
+  </v-list-item>
+</template>
diff --git a/frontend/src/views/Player/EmulatorJS/Base.vue b/frontend/src/views/Player/EmulatorJS/Base.vue
index 91f190329..33a37a610 100644
--- a/frontend/src/views/Player/EmulatorJS/Base.vue
+++ b/frontend/src/views/Player/EmulatorJS/Base.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
-import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import firmwareApi from "@/services/api/firmware";
 import romApi from "@/services/api/rom";
 import storeGalleryView from "@/stores/galleryView";
@@ -131,19 +131,7 @@ onMounted(async () => {
             src="/assets/emulatorjs/powered_by_emulatorjs.png"
           />
           <v-divider class="my-4" />
-          <v-list-item class="px-2">
-            <template #prepend>
-              <r-avatar-rom :rom="rom" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ rom.name }}</v-col></v-row
-            >
-            <v-row no-gutters
-              ><v-col class="text-romm-accent-1">{{
-                rom.file_name
-              }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="rom" with-filename />
           <v-divider class="my-4" />
           <v-select
             v-if="supportedCores.length > 1"
diff --git a/frontend/src/views/Player/RuffleRS/Base.vue b/frontend/src/views/Player/RuffleRS/Base.vue
index be8fa9377..abe7f1170 100644
--- a/frontend/src/views/Player/RuffleRS/Base.vue
+++ b/frontend/src/views/Player/RuffleRS/Base.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import romApi from "@/services/api/rom";
 import storeGalleryView from "@/stores/galleryView";
 import type { DetailedRom } from "@/stores/roms";
@@ -96,24 +96,12 @@ onMounted(async () => {
             src="/assets/ruffle/powered_by_ruffle.png"
           />
           <v-divider class="my-4" />
-          <v-list-item class="px-2">
-            <template #prepend>
-              <r-avatar-rom :rom="rom" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ rom.name }}</v-col></v-row
-            >
-            <v-row no-gutters
-              ><v-col class="text-romm-accent-1">{{
-                rom.file_name
-              }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="rom" with-filename />
+          <v-divider class="my-4" />
         </v-col>
       </v-row>
-      <v-row class="px-3 py-3 text-center" no-gutters>
+      <v-row class="px-3 text-center" no-gutters>
         <v-col>
-          <v-divider class="my-4" />
           <v-row class="align-center" no-gutters>
             <v-col>
               <v-btn
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index be9b8715b..222ae1ea5 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -329,6 +329,7 @@ async function stopScan() {
             </v-list-item>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="bg-terciary">
+            <!-- TODO: change for RomListItem -->
             <v-list-item
               v-for="rom in platform.roms"
               :key="rom.id"

From 534770df6203b49df51dad45303ae5911a7f2de9 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 6 Dec 2024 23:34:29 +0000
Subject: [PATCH 38/49] refactor: streamline PlatformInfoDrawer layout and
 improve aspect ratio selection UI

---
 .../AppBar/Platform/PlatformInfoDrawer.vue    | 84 ++++++++++---------
 frontend/src/components/Settings/Footer.vue   |  6 +-
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index dc35e303a..33466cf53 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -232,51 +232,53 @@ async function setAspectRatio() {
       elevation="0"
     >
       <template #content>
-        <div class="text-center">
-          <v-chip label variant="text" prepend-icon="mdi-aspect-ratio"
-            >Cover style</v-chip
-          >
-          <v-divider class="border-opacity-25 mx-2" />
-          <v-item-group
-            v-model="selectedAspectRatio"
-            mandatory
-            @update:model-value="setAspectRatio"
+        <v-chip
+          label
+          variant="text"
+          class="ml-2"
+          prepend-icon="mdi-aspect-ratio"
+          >Cover style</v-chip
+        >
+        <v-divider class="border-opacity-25 mx-2" />
+        <v-item-group
+          v-model="selectedAspectRatio"
+          mandatory
+          @update:model-value="setAspectRatio"
+        >
+          <v-row
+            no-gutters
+            class="text-center justify-center align-center pa-2"
           >
-            <v-row
-              no-gutters
-              class="text-center justify-center align-center pa-2"
-            >
-              <v-col class="pa-2" v-for="aspectRatio in aspectRatioOptions">
-                <v-item v-slot="{ isSelected, toggle }">
-                  <v-card
-                    :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
-                    variant="outlined"
-                    @click="toggle"
+            <v-col class="pa-2" v-for="aspectRatio in aspectRatioOptions">
+              <v-item v-slot="{ isSelected, toggle }">
+                <v-card
+                  :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
+                  variant="outlined"
+                  @click="toggle"
+                >
+                  <v-card-text
+                    class="pa-0 text-center align-center justify-center"
                   >
-                    <v-card-text
-                      class="pa-0 text-center align-center justify-center"
+                    <v-img
+                      :aspect-ratio="aspectRatio.size"
+                      cover
+                      src="/assets/login_bg.png"
+                      :class="{ greyscale: !isSelected }"
+                      class="d-flex align-center justify-center"
                     >
-                      <v-img
-                        :aspect-ratio="aspectRatio.size"
-                        cover
-                        src="/assets/login_bg.png"
-                        :class="{ greyscale: !isSelected }"
-                        class="d-flex align-center justify-center"
-                      >
-                        <p class="text-h5 text-romm-white">
-                          {{ aspectRatio.name }}
-                        </p>
-                      </v-img>
-                      <p class="text-center text-caption">
-                        {{ aspectRatio.source }}
+                      <p class="text-h5 text-romm-white">
+                        {{ aspectRatio.name }}
                       </p>
-                    </v-card-text>
-                  </v-card>
-                </v-item>
-              </v-col>
-            </v-row>
-          </v-item-group>
-        </div>
+                    </v-img>
+                    <p class="text-center text-caption">
+                      {{ aspectRatio.source }}
+                    </p>
+                  </v-card-text>
+                </v-card>
+              </v-item>
+            </v-col>
+          </v-row>
+        </v-item-group>
       </template>
     </r-section>
     <r-section
diff --git a/frontend/src/components/Settings/Footer.vue b/frontend/src/components/Settings/Footer.vue
index 3dec00fe0..7afb1eadb 100644
--- a/frontend/src/components/Settings/Footer.vue
+++ b/frontend/src/components/Settings/Footer.vue
@@ -4,7 +4,11 @@ import storeHeartbeat from "@/stores/heartbeat";
 const heartbeatStore = storeHeartbeat();
 </script>
 <template>
-  <v-bottom-navigation :elevation="0" height="36" class="text-caption">
+  <v-bottom-navigation
+    :elevation="0"
+    height="36"
+    class="bg-terciary text-caption"
+  >
     <v-row class="align-center justify-center" no-gutters>
       <span class="text-romm-accent-1">RomM</span>
       <span class="ml-1">{{ heartbeatStore.value.VERSION }}</span>

From 6ac744552c43810b1cfca9a9c36ed1d180a11c13 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 7 Dec 2024 16:02:00 +0000
Subject: [PATCH 39/49] refactor: add 'showNotIdentified' prop and enhance game
 identification UI in ListItem and Table components

---
 .../src/components/common/Game/Card/Base.vue  | 15 ++++---
 .../src/components/common/Game/ListItem.vue   |  9 +++--
 frontend/src/components/common/Game/Table.vue | 11 ++++-
 frontend/src/views/Scan.vue                   | 40 +++++++++----------
 4 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index d811e7c33..4b3c008a4 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -28,6 +28,7 @@ const props = withDefaults(
     showActionBar?: boolean;
     showPlatformIcon?: boolean;
     showFav?: boolean;
+    showNotIdentified?: boolean;
     withBorder?: boolean;
     withBorderRommAccent?: boolean;
     withLink?: boolean;
@@ -45,6 +46,7 @@ const props = withDefaults(
     showActionBar: false,
     showPlatformIcon: false,
     showFav: false,
+    showNotIdentified: true,
     withBorder: false,
     withBorderRommAccent: false,
     withLink: false,
@@ -156,10 +158,6 @@ const computedAspectRatio = computed(() => {
                         !rom.moby_url_cover)
                     "
                     class="translucent-dark text-caption text-white"
-                    :class="{
-                      'text-truncate':
-                        galleryViewStore.currentView == 0 && !isHovering,
-                    }"
                   >
                     <v-list-item>{{ rom.name }}</v-list-item>
                   </div>
@@ -183,6 +181,13 @@ const computedAspectRatio = computed(() => {
                 :name="rom.platform_name"
                 class="label-platform"
               />
+              <v-icon
+                v-if="!rom.igdb_id && !rom.moby_id"
+                title="Game not identified"
+                color="yellow"
+                class="ml-1"
+                >mdi-alert</v-icon
+              >
             </div>
             <div class="position-absolute append-inner-right">
               <v-btn
@@ -210,7 +215,7 @@ const computedAspectRatio = computed(() => {
               class="position-absolute append-inner-left"
               v-if="!showPlatformIcon"
             >
-              <slot name="append-inner-left"> </slot>
+              <slot name="append-inner-left"></slot>
             </div>
             <div class="position-absolute append-inner-right" v-if="!showFav">
               <slot name="append-inner-right"> </slot>
diff --git a/frontend/src/components/common/Game/ListItem.vue b/frontend/src/components/common/Game/ListItem.vue
index 10a8fb05f..6f1db5fff 100644
--- a/frontend/src/components/common/Game/ListItem.vue
+++ b/frontend/src/components/common/Game/ListItem.vue
@@ -25,7 +25,6 @@ withDefaults(
 </script>
 <template>
   <v-list-item
-    class="px-0"
     v-bind="{
       ...(withLink && rom
         ? {
@@ -35,6 +34,7 @@ withDefaults(
     }"
   >
     <template v-if="withAvatar" #prepend>
+      <slot name="prepend"></slot>
       <r-avatar-rom :rom="rom" />
     </template>
     <v-row v-if="withName" no-gutters
@@ -45,12 +45,15 @@ withDefaults(
     >
     <slot name="append-body"></slot>
     <template #append>
-      <v-row v-if="withSize" no-gutters>
-        <v-col>
+      <v-row no-gutters>
+        <v-col v-if="withSize" cols="auto">
           <v-chip size="x-small" label>{{
             formatBytes(rom.file_size_bytes)
           }}</v-chip>
         </v-col>
+        <v-col>
+          <slot name="append"></slot>
+        </v-col>
       </v-row>
     </template>
   </v-list-item>
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index b6cb50d2b..aaf828363 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -156,8 +156,8 @@ onMounted(() => {
           <template #prepend>
             <r-avatar-rom :rom="item" />
           </template>
-          <v-row no-gutters
-            ><v-col>{{ item.name }}</v-col></v-row
+          <v-row no-gutters>
+            <v-col>{{ item.name }}</v-col></v-row
           >
           <v-row no-gutters
             ><v-col class="text-romm-accent-1">{{
@@ -165,6 +165,13 @@ onMounted(() => {
             }}</v-col></v-row
           >
           <template #append>
+            <v-icon
+              v-if="!item.igdb_id && !item.moby_id"
+              title="Game not identified"
+              color="yellow"
+              class="ml-2"
+              >mdi-alert</v-icon
+            >
             <v-chip
               v-if="
                 item.sibling_roms &&
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 222ae1ea5..1168a5609 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import socket from "@/services/socket";
 import storeHeartbeat from "@/stores/heartbeat";
@@ -329,29 +330,23 @@ async function stopScan() {
             </v-list-item>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="bg-terciary">
-            <!-- TODO: change for RomListItem -->
-            <v-list-item
+            <rom-list-item
               v-for="rom in platform.roms"
-              :key="rom.id"
-              class="text-body-2 romm-grey px-10 py-2"
-              :to="{ name: 'rom', params: { rom: rom.id } }"
+              class="pa-4"
+              :rom="rom"
+              with-link
+              with-filename
             >
-              <template #prepend>
-                <r-avatar-rom :rom="rom" />
-              </template>
-              <v-row no-gutters>
-                <span
-                  :class="{ 'text-romm-red': !rom.igdb_id && !rom.moby_id }"
-                  >{{ rom.name }}</span
+              <template #append-body>
+                <v-chip
+                  v-if="!rom.igdb_id && !rom.moby_id"
+                  color="red"
+                  size="x-small"
+                  label
+                  >Not identified<v-icon class="ml-1">mdi-close</v-icon></v-chip
                 >
-                <span v-if="!rom.igdb_id && !rom.moby_id" class="ml-1">❌</span>
-              </v-row>
-              <v-row no-gutters>
-                <v-col class="text-romm-accent-1">
-                  {{ rom.file_name }}
-                </v-col>
-              </v-row>
-            </v-list-item>
+              </template>
+            </rom-list-item>
             <v-list-item
               v-if="platform.roms.length == 0"
               class="text-center mt-2"
@@ -406,3 +401,8 @@ async function stopScan() {
     </v-chip>
   </v-bottom-navigation>
 </template>
+<style lang="css">
+.v-expansion-panel-text__wrapper {
+  padding: 0px;
+}
+</style>

From b3429ce109cdaacf384150959ef1b10d84d126e4 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 7 Dec 2024 16:08:21 +0000
Subject: [PATCH 40/49] refactor: remove 'game not identified' icon from Card
 and Table components, update Title component layout

---
 frontend/src/components/Details/Title.vue         | 2 +-
 frontend/src/components/common/Game/Card/Base.vue | 7 -------
 frontend/src/components/common/Game/Table.vue     | 7 -------
 frontend/src/views/GameDetails.vue                | 6 +++++-
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index bf99efd47..e31b60a69 100644
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -29,7 +29,7 @@ const hasReleaseDate = Number(props.rom.first_release_date) > 0;
       <v-col>
         <p class="text-h5 font-weight-bold pl-0">
           <span>{{ rom.name }}</span>
-          <fav-btn class="ml-1" :rom="rom" />
+          <fav-btn class="ml-2" :rom="rom" />
         </p>
       </v-col>
     </v-row>
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 4b3c008a4..49515ec6b 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -181,13 +181,6 @@ const computedAspectRatio = computed(() => {
                 :name="rom.platform_name"
                 class="label-platform"
               />
-              <v-icon
-                v-if="!rom.igdb_id && !rom.moby_id"
-                title="Game not identified"
-                color="yellow"
-                class="ml-1"
-                >mdi-alert</v-icon
-              >
             </div>
             <div class="position-absolute append-inner-right">
               <v-btn
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index aaf828363..f1e02ba9e 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -165,13 +165,6 @@ onMounted(() => {
             }}</v-col></v-row
           >
           <template #append>
-            <v-icon
-              v-if="!item.igdb_id && !item.moby_id"
-              title="Game not identified"
-              color="yellow"
-              class="ml-2"
-              >mdi-alert</v-icon
-            >
             <v-chip
               v-if="
                 item.sibling_roms &&
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 99856d51a..347e77030 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -90,7 +90,11 @@ watch(
     <v-row class="px-5" no-gutters :class="{ 'justify-center': smAndDown }">
       <v-col cols="auto">
         <v-container :width="270" id="artwork-container" class="pa-0">
-          <game-card :key="currentRom.updated_at" :rom="currentRom" />
+          <game-card
+            :show-not-identified="false"
+            :key="currentRom.updated_at"
+            :rom="currentRom"
+          />
           <action-bar class="mt-2" :rom="currentRom" />
           <related-games v-if="mdAndUp" class="mt-4" :rom="currentRom" />
         </v-container>

From 9c7aa77991f6950cac02e08acd721c343a53a841 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 7 Dec 2024 16:09:04 +0000
Subject: [PATCH 41/49] refactor: remove 'showNotIdentified' prop from Card
 component

---
 frontend/src/components/common/Game/Card/Base.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 49515ec6b..9e149d315 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -28,7 +28,6 @@ const props = withDefaults(
     showActionBar?: boolean;
     showPlatformIcon?: boolean;
     showFav?: boolean;
-    showNotIdentified?: boolean;
     withBorder?: boolean;
     withBorderRommAccent?: boolean;
     withLink?: boolean;
@@ -46,7 +45,6 @@ const props = withDefaults(
     showActionBar: false,
     showPlatformIcon: false,
     showFav: false,
-    showNotIdentified: true,
     withBorder: false,
     withBorderRommAccent: false,
     withLink: false,

From cd73bfb9c8cf9d0044e040b85eb2042d2372b967 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 7 Dec 2024 16:31:51 +0000
Subject: [PATCH 42/49] refactor: enhance search cover dialog to accept
 platform aspect ratio and update related components

---
 .../components/common/Game/Dialog/EditRom.vue  | 18 ++++++++++++++----
 frontend/src/components/common/SearchCover.vue | 12 +++++++++---
 frontend/src/types/emitter.d.ts                |  2 +-
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index f2b96b412..24e50c212 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -2,7 +2,9 @@
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi, { type UpdateRom } from "@/services/api/rom";
+import storeGalleryView from "@/stores/galleryView";
 import storeHeartbeat from "@/stores/heartbeat";
+import storePlatforms from "@/stores/platforms";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -20,6 +22,8 @@ const rom = ref<UpdateRom>();
 const romsStore = storeRoms();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
+const platfotmsStore = storePlatforms();
+const galleryViewStore = storeGalleryView();
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showEditRomDialog", (romToEdit: UpdateRom | undefined) => {
   show.value = true;
@@ -31,6 +35,12 @@ emitter?.on("updateUrlCover", (url_cover) => {
   rom.value.url_cover = url_cover;
   setArtwork(url_cover);
 });
+const computedAspectRatio = computed(() => {
+  const ratio = rom.value?.platform_id
+    ? platfotmsStore.getAspectRatio(rom.value?.platform_id)
+    : galleryViewStore.defaultAspectRatioCover;
+  return parseFloat(ratio.toString());
+});
 
 // Functions
 function triggerFileInput() {
@@ -216,10 +226,10 @@ function closeDialog() {
                       size="small"
                       class="translucent-dark"
                       @click="
-                        emitter?.emit(
-                          'showSearchCoverDialog',
-                          rom.name as string,
-                        )
+                        emitter?.emit('showSearchCoverDialog', {
+                          term: rom.name as string,
+                          platformAspectRatio: computedAspectRatio,
+                        })
                       "
                     >
                       <v-icon size="large">mdi-image-search-outline</v-icon>
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index 1af108689..5dfd2089d 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -2,11 +2,12 @@
 import type { SearchCoverSchema } from "@/__generated__";
 import RDialog from "@/components/common/RDialog.vue";
 import sgdbApi from "@/services/api/sgdb";
+import storeGalleryView from "@/stores/galleryView";
+import storePlatforms from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeUnmount, ref } from "vue";
 import { useDisplay } from "vuetify";
-import storeGalleryView from "@/stores/galleryView";
 
 // Props
 const { lgAndUp } = useDisplay();
@@ -16,12 +17,17 @@ const searchTerm = ref("");
 const coverType = ref("all");
 const covers = ref<SearchCoverSchema[]>([]);
 const filteredCovers = ref<SearchCoverSchema[]>();
+const platfotmsStore = storePlatforms();
 const galleryViewStore = storeGalleryView();
 const panels = ref([0]);
 const emitter = inject<Emitter<Events>>("emitter");
-emitter?.on("showSearchCoverDialog", (term) => {
+const aspectRatio = ref(
+  parseFloat(galleryViewStore.defaultAspectRatioCover.toString()),
+);
+emitter?.on("showSearchCoverDialog", ({ term, platformAspectRatio }) => {
   searchTerm.value = term;
   show.value = true;
+  if (platformAspectRatio) aspectRatio.value = platformAspectRatio;
   if (searchTerm.value) searchCovers();
 });
 
@@ -184,7 +190,7 @@ onBeforeUnmount(() => {
                     :class="{ 'on-hover': isHovering }"
                     class="transform-scale pointer"
                     @click="selectCover(resource.url)"
-                    :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
+                    :aspect-ratio="aspectRatio"
                     :src="resource.thumb"
                     cover
                   >
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index ed6793e79..1f3a00f42 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -20,7 +20,7 @@ export type Events = {
   showRemoveFromCollectionDialog: SimpleRom[];
   showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
-  showSearchCoverDialog: string;
+  showSearchCoverDialog: { term: string; platformAspectRatio: number };
   updateUrlCover: string;
   showSearchRomDialog: null;
   showEditRomDialog: SimpleRom;

From 5ee1f8309c4c7145944d50106c7f93ede4330959 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 7 Dec 2024 16:49:14 +0000
Subject: [PATCH 43/49] refactor: update showSearchCoverDialog to accept
 nullable platformAspectRatio and adjust related components

---
 frontend/src/components/common/SearchCover.vue | 10 +++++++---
 frontend/src/types/emitter.d.ts                |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index 5dfd2089d..f5dabfdc4 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -17,14 +17,13 @@ const searchTerm = ref("");
 const coverType = ref("all");
 const covers = ref<SearchCoverSchema[]>([]);
 const filteredCovers = ref<SearchCoverSchema[]>();
-const platfotmsStore = storePlatforms();
 const galleryViewStore = storeGalleryView();
 const panels = ref([0]);
 const emitter = inject<Emitter<Events>>("emitter");
 const aspectRatio = ref(
   parseFloat(galleryViewStore.defaultAspectRatioCover.toString()),
 );
-emitter?.on("showSearchCoverDialog", ({ term, platformAspectRatio }) => {
+emitter?.on("showSearchCoverDialog", ({ term, platformAspectRatio = null }) => {
   searchTerm.value = term;
   show.value = true;
   if (platformAspectRatio) aspectRatio.value = platformAspectRatio;
@@ -174,7 +173,7 @@ onBeforeUnmount(() => {
               <v-list-item class="pa-0">{{ game.name }}</v-list-item>
             </v-row>
           </v-expansion-panel-title>
-          <v-expansion-panel-text class="pa-0">
+          <v-expansion-panel-text class="py-1">
             <v-row no-gutters>
               <v-col
                 class="pa-1"
@@ -224,3 +223,8 @@ onBeforeUnmount(() => {
     </template>
   </r-dialog>
 </template>
+<style lang="css">
+.v-expansion-panel-text__wrapper {
+  padding: 0px !important;
+}
+</style>
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index 1f3a00f42..d426a0bb3 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -20,7 +20,7 @@ export type Events = {
   showRemoveFromCollectionDialog: SimpleRom[];
   showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
-  showSearchCoverDialog: { term: string; platformAspectRatio: number };
+  showSearchCoverDialog: { term: string; platformAspectRatio: number | null };
   updateUrlCover: string;
   showSearchRomDialog: null;
   showEditRomDialog: SimpleRom;

From fd4ea3b9d2ed371e9d9cec1286d61decdba98d6b Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 7 Dec 2024 16:59:25 +0000
Subject: [PATCH 44/49] refactor: update showSearchCoverDialog emission to
 include platformAspectRatio as null

---
 .../common/Collection/Dialog/CreateCollection.vue         | 8 ++++----
 .../common/Collection/Dialog/EditCollection.vue           | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index 8507ea346..8dc8978c0 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -158,10 +158,10 @@ function closeDialog() {
                       size="small"
                       class="translucent-dark"
                       @click="
-                        emitter?.emit(
-                          'showSearchCoverDialog',
-                          collection.name as string,
-                        )
+                        emitter?.emit('showSearchCoverDialog', {
+                          term: collection.name as string,
+                          platformAspectRatio: null,
+                        })
                       "
                     >
                       <v-icon size="large">mdi-image-search-outline</v-icon>
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index 664f07141..c8d05ad0e 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -180,10 +180,10 @@ function closeDialog() {
                       size="small"
                       class="translucent-dark"
                       @click="
-                        emitter?.emit(
-                          'showSearchCoverDialog',
-                          collection.name as string,
-                        )
+                        emitter?.emit('showSearchCoverDialog', {
+                          term: collection.name as string,
+                          platformAspectRatio: null,
+                        })
                       "
                     >
                       <v-icon size="large">mdi-image-search-outline</v-icon>

From e6648d9ed13d99ac180c440959f4e037e3a18358 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 7 Dec 2024 17:00:46 +0000
Subject: [PATCH 45/49] refactor: rename platformAspectRatio to aspectRatio in
 showSearchCoverDialog emissions and related components

---
 .../common/Collection/Dialog/CreateCollection.vue         | 2 +-
 .../common/Collection/Dialog/EditCollection.vue           | 2 +-
 frontend/src/components/common/Game/Dialog/EditRom.vue    | 2 +-
 frontend/src/components/common/SearchCover.vue            | 8 ++++----
 frontend/src/types/emitter.d.ts                           | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index 8dc8978c0..b7759e951 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -160,7 +160,7 @@ function closeDialog() {
                       @click="
                         emitter?.emit('showSearchCoverDialog', {
                           term: collection.name as string,
-                          platformAspectRatio: null,
+                          aspectRatio: null,
                         })
                       "
                     >
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index c8d05ad0e..71859cdc6 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -182,7 +182,7 @@ function closeDialog() {
                       @click="
                         emitter?.emit('showSearchCoverDialog', {
                           term: collection.name as string,
-                          platformAspectRatio: null,
+                          aspectRatio: null,
                         })
                       "
                     >
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 24e50c212..2a623a217 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -228,7 +228,7 @@ function closeDialog() {
                       @click="
                         emitter?.emit('showSearchCoverDialog', {
                           term: rom.name as string,
-                          platformAspectRatio: computedAspectRatio,
+                          aspectRatio: computedAspectRatio,
                         })
                       "
                     >
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index f5dabfdc4..f3e5a1670 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -20,13 +20,13 @@ const filteredCovers = ref<SearchCoverSchema[]>();
 const galleryViewStore = storeGalleryView();
 const panels = ref([0]);
 const emitter = inject<Emitter<Events>>("emitter");
-const aspectRatio = ref(
+const coverAspectRatio = ref(
   parseFloat(galleryViewStore.defaultAspectRatioCover.toString()),
 );
-emitter?.on("showSearchCoverDialog", ({ term, platformAspectRatio = null }) => {
+emitter?.on("showSearchCoverDialog", ({ term, aspectRatio = null }) => {
   searchTerm.value = term;
   show.value = true;
-  if (platformAspectRatio) aspectRatio.value = platformAspectRatio;
+  if (aspectRatio) coverAspectRatio.value = aspectRatio;
   if (searchTerm.value) searchCovers();
 });
 
@@ -189,7 +189,7 @@ onBeforeUnmount(() => {
                     :class="{ 'on-hover': isHovering }"
                     class="transform-scale pointer"
                     @click="selectCover(resource.url)"
-                    :aspect-ratio="aspectRatio"
+                    :aspect-ratio="coverAspectRatio"
                     :src="resource.thumb"
                     cover
                   >
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index d426a0bb3..e95f3b301 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -20,7 +20,7 @@ export type Events = {
   showRemoveFromCollectionDialog: SimpleRom[];
   showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
-  showSearchCoverDialog: { term: string; platformAspectRatio: number | null };
+  showSearchCoverDialog: { term: string; aspectRatio: number | null };
   updateUrlCover: string;
   showSearchRomDialog: null;
   showEditRomDialog: SimpleRom;

From d687acccfe5089099b2ac7baaf24be2ca72c7771 Mon Sep 17 00:00:00 2001
From: Zurdi <34356590+zurdi15@users.noreply.github.com>
Date: Sun, 8 Dec 2024 09:22:47 +0100
Subject: [PATCH 46/49] Actualizar AdditionalContent.vue

---
 frontend/src/components/Details/AdditionalContent.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/Details/AdditionalContent.vue b/frontend/src/components/Details/AdditionalContent.vue
index 3af0abcbe..d3bbdecfa 100644
--- a/frontend/src/components/Details/AdditionalContent.vue
+++ b/frontend/src/components/Details/AdditionalContent.vue
@@ -14,7 +14,6 @@ const combined = computed(() => [
     <v-col
       cols="4"
       sm="3"
-      md="3"
       lg="6"
       class="pa-1"
       v-for="expansion in combined"

From 7d1d26e49e28ed43210a94ed7684044cdd111866 Mon Sep 17 00:00:00 2001
From: Zurdi <34356590+zurdi15@users.noreply.github.com>
Date: Sun, 8 Dec 2024 10:01:36 +0100
Subject: [PATCH 47/49] Actualizar DeleteCollection.vue

---
 .../components/common/Collection/Dialog/DeleteCollection.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
index f403fef4c..629b3b099 100644
--- a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -72,7 +72,7 @@ function closeDialog() {
         <span>Removing collection</span>
         <r-avatar class="ml-1" :collection="collection" />
         <span class="ml-1 text-romm-accent-1">{{ collection.name }}.</span>
-        <span class="ml-1">Do you confirm?</span>
+        <span class="ml-1">from RomM. Do you confirm?</span>
       </v-row>
     </template>
     <template #append>

From 3cbefeaf04434a5680561b30195da2aa0988e760 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 8 Dec 2024 09:58:14 +0000
Subject: [PATCH 48/49] refactor: update dialog messages to specify deletion
 from RomM database

---
 .../src/components/common/Game/Dialog/Asset/DeleteAssets.vue  | 4 +++-
 frontend/src/components/common/Game/Dialog/DeleteRom.vue      | 4 ++--
 .../src/components/common/Platform/Dialog/DeletePlatform.vue  | 2 +-
 frontend/src/components/common/SearchCover.vue                | 1 +
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue b/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
index 3a44666b3..d68e21d5f 100644
--- a/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
+++ b/frontend/src/components/common/Game/Dialog/Asset/DeleteAssets.vue
@@ -119,13 +119,15 @@ function closeDialog() {
         <span class="text-romm-accent-1 mx-1">{{ assets.length }}</span>
         <span>{{ assetType.slice(5) }} of</span>
         <span class="text-romm-accent-1 mx-1">{{ romRef?.name }}</span>
+        <span>from RomM</span>
       </v-row>
     </template>
     <template #prepend>
       <v-list-item class="text-caption text-center">
         <span
           >Select the {{ assetType.slice(5) }} you want to remove from your
-          filesystem, otherwise they will only be deleted from database.</span
+          filesystem, otherwise they will only be deleted from RomM
+          database.</span
         >
       </v-list-item>
     </template>
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index f1a686b89..6a43e8f5e 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -98,14 +98,14 @@ function closeDialog() {
       <v-row no-gutters class="justify-center">
         <span>Removing</span>
         <span class="text-romm-accent-1 mx-1">{{ roms.length }}</span>
-        <span>games</span>
+        <span>games from RomM</span>
       </v-row>
     </template>
     <template #prepend>
       <v-list-item class="text-caption text-center">
         <span
           >Select the games you want to remove from your filesystem, otherwise
-          they will only be deleted from database.</span
+          they will only be deleted from RomM database.</span
         >
       </v-list-item>
     </template>
diff --git a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
index f6f1042b6..4d3837de8 100644
--- a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
+++ b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
@@ -71,7 +71,7 @@ function closeDialog() {
           >{{ platform.name }} - [<span class="text-romm-accent-1">{{
             platform.fs_slug
           }}</span
-          >].</span
+          >] from RomM.</span
         >
         <span class="ml-1">Do you confirm?</span>
       </v-row>
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index f3e5a1670..d394bc504 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -26,6 +26,7 @@ const coverAspectRatio = ref(
 emitter?.on("showSearchCoverDialog", ({ term, aspectRatio = null }) => {
   searchTerm.value = term;
   show.value = true;
+  // TODO: set default aspect ratio to 2/3
   if (aspectRatio) coverAspectRatio.value = aspectRatio;
   if (searchTerm.value) searchCovers();
 });

From 94548bb5993ee6f9be8689ed16d308bcd388cee2 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 8 Dec 2024 10:05:36 +0000
Subject: [PATCH 49/49] chore: update dependencies and optimize
 AdditionalContent.vue layout

---
 .trunk/trunk.yaml                                     | 6 +++---
 frontend/src/components/Details/AdditionalContent.vue | 8 +-------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
index 4b2f8ffe3..781cf81b8 100644
--- a/.trunk/trunk.yaml
+++ b/.trunk/trunk.yaml
@@ -23,20 +23,20 @@ lint:
     - actionlint@1.7.4
     - bandit@1.8.0
     - black@24.10.0
-    - checkov@3.2.328
+    - checkov@3.2.332
     - git-diff-check
     - isort@5.13.2
     - mypy@1.13.0
     - osv-scanner@1.9.1
     - oxipng@9.1.3
     - prettier@3.4.2
-    - ruff@0.8.1
+    - ruff@0.8.2
     - shellcheck@0.10.0
     - shfmt@3.6.0
     - svgo@3.3.2
     - taplo@0.9.3
     - trivy@0.56.2
-    - trufflehog@3.84.2
+    - trufflehog@3.85.0
     - yamllint@1.35.1
   ignore:
     - linters: [ALL]
diff --git a/frontend/src/components/Details/AdditionalContent.vue b/frontend/src/components/Details/AdditionalContent.vue
index d3bbdecfa..294e65875 100644
--- a/frontend/src/components/Details/AdditionalContent.vue
+++ b/frontend/src/components/Details/AdditionalContent.vue
@@ -11,13 +11,7 @@ const combined = computed(() => [
 </script>
 <template>
   <v-row no-gutters>
-    <v-col
-      cols="4"
-      sm="3"
-      lg="6"
-      class="pa-1"
-      v-for="expansion in combined"
-    >
+    <v-col cols="4" sm="3" lg="6" class="pa-1" v-for="expansion in combined">
       <related-card :game="expansion" />
     </v-col>
   </v-row>