From 80b7cc7333b4d69f22e72d2dc8b1b53b5ce78967 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 27 Nov 2024 11:43:06 +0000
Subject: [PATCH 01/44] added basic platform info from the igdb api call

---
 .trunk/trunk.yaml                             | 24 +++++------
 .../alembic/versions/0027_platforms_data.py   | 40 +++++++++++++++++++
 backend/handler/metadata/igdb_handler.py      | 35 ++++++++++++++--
 backend/handler/scan_handler.py               |  2 +
 backend/models/platform.py                    |  5 +++
 5 files changed, 90 insertions(+), 16 deletions(-)
 create mode 100644 backend/alembic/versions/0027_platforms_data.py

diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
index 1b01f49fe..b76ad3d43 100644
--- a/.trunk/trunk.yaml
+++ b/.trunk/trunk.yaml
@@ -2,12 +2,12 @@
 # To learn more about the format of this file, see https://docs.trunk.io/reference/trunk-yaml
 version: 0.1
 cli:
-  version: 1.22.4
+  version: 1.22.8
 # Trunk provides extensibility via plugins. (https://docs.trunk.io/plugins)
 plugins:
   sources:
     - id: trunk
-      ref: v1.6.2
+      ref: v1.6.5
       uri: https://github.com/trunk-io/plugins
 # Many linters and tools depend on runtimes - configure them here. (https://docs.trunk.io/runtimes)
 runtimes:
@@ -18,25 +18,25 @@ runtimes:
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   enabled:
-    - markdownlint@0.41.0
-    - eslint@9.9.1
-    - actionlint@1.7.1
-    - bandit@1.7.9
-    - black@24.8.0
-    - checkov@3.2.239
+    - markdownlint@0.42.0
+    - eslint@9.14.0
+    - actionlint@1.7.4
+    - bandit@1.7.10
+    - black@24.10.0
+    - checkov@3.2.296
     - git-diff-check
     - isort@5.13.2
     - mypy@1.13.0
-    - osv-scanner@1.8.4
+    - osv-scanner@1.9.1
     - oxipng@9.1.2
     - prettier@3.3.3
-    - ruff@0.6.3
+    - ruff@0.7.3
     - shellcheck@0.10.0
     - shfmt@3.6.0
     - svgo@3.3.2
     - taplo@0.9.3
-    - trivy@0.54.1
-    - trufflehog@3.81.10
+    - trivy@0.56.2
+    - trufflehog@3.83.6
     - yamllint@1.35.1
   ignore:
     - linters: [ALL]
diff --git a/backend/alembic/versions/0027_platforms_data.py b/backend/alembic/versions/0027_platforms_data.py
new file mode 100644
index 000000000..24dd7c689
--- /dev/null
+++ b/backend/alembic/versions/0027_platforms_data.py
@@ -0,0 +1,40 @@
+"""platforms_data
+
+Revision ID: 0027_platforms_data
+Revises: 0026_romuser_status_fields
+Create Date: 2024-11-17 23:05:31.038917
+
+"""
+
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "0027_platforms_data"
+down_revision = "0026_romuser_status_fields"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("platforms", schema=None) as batch_op:
+        batch_op.add_column(sa.Column("category", sa.String(length=50), nullable=True))
+        batch_op.add_column(sa.Column("generation", sa.Integer(), nullable=True))
+        batch_op.add_column(sa.Column("family", sa.String(length=1000), nullable=True))
+        batch_op.add_column(sa.Column("url", sa.String(length=1000), nullable=True))
+        batch_op.add_column(
+            sa.Column("url_logo", sa.String(length=1000), nullable=True)
+        )
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table("platforms", schema=None) as batch_op:
+        batch_op.drop_column("url_logo")
+        batch_op.drop_column("url")
+        batch_op.drop_column("family")
+        batch_op.drop_column("generation")
+        batch_op.drop_column("category")
+    # ### end Alembic commands ###
diff --git a/backend/handler/metadata/igdb_handler.py b/backend/handler/metadata/igdb_handler.py
index 5ded7e7ea..b8978712a 100644
--- a/backend/handler/metadata/igdb_handler.py
+++ b/backend/handler/metadata/igdb_handler.py
@@ -35,6 +35,12 @@ class IGDBPlatform(TypedDict):
     slug: str
     igdb_id: int | None
     name: NotRequired[str]
+    category: NotRequired[str]
+    generation: NotRequired[str]
+    family: NotRequired[int]
+    url: NotRequired[str]
+    url_logo: NotRequired[str]
+    logo_path: NotRequired[str]
 
 
 class IGDBAgeRating(TypedDict):
@@ -323,13 +329,17 @@ class IGDBBaseHandler(MetadataHandler):
             self.platform_endpoint,
             data=f'fields {",".join(self.platforms_fields)}; where slug="{slug.lower()}";',
         )
-
         platform = pydash.get(platforms, "[0]", None)
         if platform:
             return IGDBPlatform(
-                igdb_id=platform["id"],
+                igdb_id=platform.get("id", None),
                 slug=slug,
-                name=platform["name"],
+                name=platform.get("name", slug),
+                category=IGDB_PLATFORM_CATEGORIES.get(platform["category"], "Unknown"),
+                generation=platform.get("generation", None),
+                family=platform.get("family", None),
+                url=platform.get("url", None),
+                url_logo=platform.get("url_logo", None),
             )
 
         # Check if platform is a version if not found
@@ -651,7 +661,15 @@ class TwitchAuth:
         return token
 
 
-PLATFORMS_FIELDS = ["id", "name"]
+PLATFORMS_FIELDS = [
+    "id",
+    "name",
+    "category",
+    "generation",
+    "url",
+    # "platform_families.name",
+    # "platform_logos.image_id",
+]
 
 GAMES_FIELDS = [
     "id",
@@ -931,6 +949,15 @@ IGDB_PLATFORM_LIST = [
     {"slug": "airconsole", "name": "AirConsole"},
 ]
 
+IGDB_PLATFORM_CATEGORIES: dict[int, str] = {
+    1: "Console",
+    2: "Arcade",
+    3: "Platform",
+    4: "Operative System",
+    5: "Portable Console",
+    6: "Computer",
+}
+
 IGDB_AGE_RATINGS: dict[int, IGDBAgeRating] = {
     1: {
         "rating": "Three",
diff --git a/backend/handler/scan_handler.py b/backend/handler/scan_handler.py
index b6d43009b..564065f62 100644
--- a/backend/handler/scan_handler.py
+++ b/backend/handler/scan_handler.py
@@ -95,6 +95,8 @@ async def scan_platform(
         if "igdb" in metadata_sources
         else IGDBPlatform(igdb_id=None, slug=platform_attrs["slug"])
     )
+    for key, value in igdb_platform.items():
+        log.debug(key + ": " + str(value))
     moby_platform = (
         meta_moby_handler.get_platform(platform_attrs["slug"])
         if "moby" in metadata_sources
diff --git a/backend/models/platform.py b/backend/models/platform.py
index 2e0d9ffdc..f0bc91da4 100644
--- a/backend/models/platform.py
+++ b/backend/models/platform.py
@@ -21,6 +21,11 @@ class Platform(BaseModel):
     slug: Mapped[str] = mapped_column(String(length=50))
     fs_slug: Mapped[str] = mapped_column(String(length=50))
     name: Mapped[str] = mapped_column(String(length=400))
+    category: Mapped[str | None] = mapped_column(String(length=50), default="")
+    generation: Mapped[int | None]
+    family: Mapped[str | None] = mapped_column(String(length=1000), default="")
+    url: Mapped[str | None] = mapped_column(String(length=1000), default="")
+    url_logo: Mapped[str | None] = mapped_column(String(length=1000), default="")
     logo_path: Mapped[str | None] = mapped_column(String(length=1000), default="")
 
     roms: Mapped[list[Rom]] = relationship(back_populates="platform")

From 81507fa93c6372e9f9cf1ad06fb74927f2c2f62f Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Wed, 27 Nov 2024 11:43:21 +0000
Subject: [PATCH 02/44] added platform info drawer

---
 .../src/components/Details/Info/GameInfo.vue  |  4 +
 .../Gallery/AppBar/Platform/Base.vue          | 84 +++++++++++++++++--
 .../components/Settings/InterfaceOption.vue   | 11 +++
 .../src/components/common/Collection/Card.vue |  7 +-
 .../src/components/common/Game/Card/Base.vue  |  5 +-
 .../components/common/Game/Card/Related.vue   |  4 +-
 .../common/Game/Dialog/MatchRom.vue           |  4 +-
 .../common/Navigation/CollectionsDrawer.vue   |  2 +-
 .../common/Navigation/PlatformsDrawer.vue     |  2 +-
 .../common/Navigation/SettingsDrawer.vue      |  2 +-
 .../components/common/Navigation/UserBtn.vue  | 40 +++++----
 .../src/components/common/SearchCover.vue     |  7 +-
 frontend/src/stores/galleryView.ts            |  3 +
 frontend/src/stores/navigation.ts             | 10 +++
 frontend/src/views/EmulatorJS/Base.vue        |  4 +-
 frontend/src/views/RuffleRS/Base.vue          |  4 +-
 16 files changed, 157 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index 42ebaff42..c8906bb6c 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import storeGalleryFilter, { type FilterType } from "@/stores/galleryFilter";
 import type { DetailedRom } from "@/stores/roms";
+import storeGalleryView from "@/stores/galleryView";
 import { ref } from "vue";
 import { useDisplay } from "vuetify";
 import { useRouter } from "vue-router";
 
+// Props
 const props = defineProps<{ rom: DetailedRom }>();
 const { xs } = useDisplay();
 const show = ref(false);
+const galleryViewStore = storeGalleryView();
 const carousel = ref(0);
 const router = useRouter();
 const filters = ["genres", "franchises", "collections", "companies"] as const;
 
+// Functions
 function onFilterClick(filter: FilterType, value: string) {
   router.push({
     name: "platform",
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 364a460b3..eba7b6926 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -13,22 +13,30 @@ import storeRoms from "@/stores/roms";
 import { storeToRefs } from "pinia";
 import { useDisplay } from "vuetify";
 
-const { xs } = useDisplay();
+// Props
+const { xs, smAndDown, mdAndUp } = useDisplay();
 const romsStore = storeRoms();
 const { currentPlatform, currentCollection } = storeToRefs(romsStore);
-
-// Props
 const auth = storeAuth();
+import storeNavigation from "@/stores/navigation";
+const navigationStore = storeNavigation();
+const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
+
+function setAspectRatio(ratio: string) {
+  console.log(`Aspect ratio set to: ${ratio}`);
+}
 </script>
 
 <template>
-  <v-app-bar id="gallery-app-bar" elevation="0" density="compact">
+  <v-app-bar id="gallery-app-bar" elevation="0" density="compact" class="pl-3">
     <platform-icon
       v-if="currentPlatform"
       :slug="currentPlatform.slug"
       :name="currentPlatform.name"
       :size="36"
-      class="ml-3 mr-2 platform-icon"
+      class="mr-3 platform-icon"
+      :class="{ active: activePlatformInfoDrawer }"
+      @click="navigationStore.switchActivePlatformInfoDrawer"
     />
     <firmware-btn />
     <filter-btn />
@@ -52,6 +60,55 @@ const auth = storeAuth();
     </v-menu>
   </v-app-bar>
 
+  <v-navigation-drawer
+    id="platform-info-drawer"
+    location="top"
+    floating
+    mobile
+    v-model="activePlatformInfoDrawer"
+    class="bg-terciary"
+    :scrim="false"
+  >
+    <v-row no-gutters>
+      <v-col class="pl-4 text-center" cols="12" sm="auto">
+        <platform-icon
+          v-if="currentPlatform"
+          :slug="currentPlatform.slug"
+          :name="currentPlatform.name"
+          class="platform-logo"
+          :size="180"
+        />
+      </v-col>
+      <v-col cols="auto" :class="{ 'w-30': mdAndUp }">
+        <div class="pa-6">
+          <p>
+            The Game Boy Advance (GBA) is a 32-bit handheld game console
+            developed, manufactured, and marketed by Nintendo as the successor
+            to the Game Boy Color. It was released in Japan on March 21, 2001,
+            in North America on June 11, 2001, in Australia and Europe on June
+            22, 2001, and in mainland China as iQue Game Boy Advance on June 8,
+            2004. The GBA is part of the sixth generation of video game
+            consoles.
+          </p>
+          <br />
+          <p>
+            The GBA features a 2.9-inch reflective TFT color LCD screen, capable
+            of displaying 32,768 colors. It is powered by a 16.8 MHz 32-bit
+            ARM7TDMI CPU with embedded memory. The console is backward
+            compatible with Game Boy and Game Boy Color games, making it a
+            versatile device for gamers.
+          </p>
+          <br />
+          <p>
+            The GBA has a rich library of games, including popular titles such
+            as Pokémon Ruby and Sapphire, The Legend of Zelda: The Minish Cap,
+            and Metroid Fusion. Its compact design and extensive game library
+            have made it a beloved console among gamers.
+          </p>
+        </div>
+      </v-col>
+    </v-row>
+  </v-navigation-drawer>
   <filter-drawer />
   <firmware-drawer />
 </template>
@@ -61,6 +118,21 @@ const auth = storeAuth();
   z-index: 999 !important;
 }
 .platform-icon {
-  filter: drop-shadow(0px 0px 2px #a452fe);
+  cursor: pointer;
+  transition: filter 0.15s ease-in-out;
+}
+.platform-icon {
+  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
+}
+.platform-icon:hover,
+.platform-icon.active {
+  filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-romm-accent-1)));
+}
+.platform-logo {
+  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
+}
+#platform-info-drawer {
+  z-index: 3 !important;
+  height: calc(100dvh - 48px) !important;
 }
 </style>
diff --git a/frontend/src/components/Settings/InterfaceOption.vue b/frontend/src/components/Settings/InterfaceOption.vue
index e45b1c55b..e35bc96ae 100644
--- a/frontend/src/components/Settings/InterfaceOption.vue
+++ b/frontend/src/components/Settings/InterfaceOption.vue
@@ -38,3 +38,14 @@ const emit = defineEmits(["update:modelValue"]);
     ></v-list-item>
   </v-card>
 </template>
+
+<style scoped>
+.text-romm-accent-1 {
+  transition: color 0.3s ease-in-out;
+}
+
+.v-list-item-title,
+.v-icon {
+  transition: color 0.3s ease-in-out;
+}
+</style>
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
index e93992346..552e4f2d0 100644
--- a/frontend/src/components/common/Collection/Card.vue
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { Collection } from "@/stores/collections";
+import storeGalleryView from "@/stores/galleryView";
 import { useTheme } from "vuetify";
 
+// Props
 withDefaults(
   defineProps<{
     collection: Collection;
@@ -20,6 +22,7 @@ withDefaults(
   },
 );
 const theme = useTheme();
+const galleryViewStore = storeGalleryView();
 </script>
 
 <template>
@@ -65,7 +68,7 @@ const theme = useTheme();
                 ? `/assets/default/cover/small_${theme.global.name.value}_fav.png`
                 : `/assets/default/cover/small_${theme.global.name.value}_collection.png`
         "
-        :aspect-ratio="2 / 3"
+        :aspect-ratio="galleryViewStore.aspectRatioCollection"
       >
         <div class="position-absolute append-inner">
           <slot name="append-inner"></slot>
@@ -75,7 +78,7 @@ const theme = useTheme();
           <v-img
             :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
             cover
-            :aspect-ratio="2 / 3"
+            :aspect-ratio="galleryViewStore.aspectRatioCollection"
           ></v-img>
         </template>
         <template #placeholder>
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 3f892a104..a31d57933 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -59,6 +59,7 @@ const theme = useTheme();
 const galleryViewStore = storeGalleryView();
 const collectionsStore = storeCollections();
 
+// Functions
 onMounted(() => {
   card.value.$el.addEventListener("contextmenu", (event: Event) => {
     event.preventDefault();
@@ -123,7 +124,7 @@ onMounted(() => {
                   ? rom.igdb_url_cover
                   : rom.moby_url_cover
           "
-          :aspect-ratio="2 / 3"
+          :aspect-ratio="galleryViewStore.aspectRatioCover"
         >
           <div v-bind="props" style="position: absolute; top: 0; width: 100%">
             <template v-if="titleOnHover">
@@ -198,7 +199,7 @@ onMounted(() => {
             <v-img
               :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
               cover
-              :aspect-ratio="2 / 3"
+              :aspect-ratio="galleryViewStore.aspectRatioCover"
             ></v-img>
           </template>
           <template #placeholder>
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index 7172b50ee..c5a4b1024 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { IGDBRelatedGame } from "@/__generated__";
 import { useTheme } from "vuetify";
+import storeGalleryView from "@/stores/galleryView";
 
 // Props
 const props = defineProps<{
   game: IGDBRelatedGame;
 }>();
 const theme = useTheme();
+const galleryViewStore = storeGalleryView();
 const handleClick = () => {
   if (props.game.slug) {
     window.open(
@@ -35,7 +37,7 @@ const handleClick = () => {
           ? `https:${game.cover_url.replace('t_thumb', 't_cover_big')}`
           : `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
       "
-      :aspect-ratio="2 / 3"
+      :aspect-ratio="galleryViewStore.aspectRatioCover"
       cover
       lazy
       ><v-chip
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index cc8bd5e6d..373cc6b11 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -4,6 +4,7 @@ import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
 import storeHeartbeat from "@/stores/heartbeat";
+import storeGalleryView from "@/stores/galleryView";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -22,6 +23,7 @@ const { xs, lgAndUp } = useDisplay();
 const show = ref(false);
 const rom = ref<SimpleRom | null>(null);
 const romsStore = storeRoms();
+const galleryViewStore = storeGalleryView();
 const searching = ref(false);
 const route = useRoute();
 const searchTerm = ref("");
@@ -394,7 +396,7 @@ onBeforeUnmount(() => {
                           ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
                           : source.url_cover
                       "
-                      :aspect-ratio="2 / 3"
+                      :aspect-ratio="galleryViewStore.aspectRatioCover"
                       cover
                       lazy
                     >
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index f83ba60ac..665f271d2 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -28,7 +28,7 @@ function clear() {
   <v-navigation-drawer
     :location="smAndDown ? 'top' : 'left'"
     mobile
-    width="400"
+    width="500"
     v-model="activeCollectionsDrawer"
     class="bg-terciary"
   >
diff --git a/frontend/src/components/common/Navigation/PlatformsDrawer.vue b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
index 765c87e54..acb685acc 100644
--- a/frontend/src/components/common/Navigation/PlatformsDrawer.vue
+++ b/frontend/src/components/common/Navigation/PlatformsDrawer.vue
@@ -21,7 +21,7 @@ function clear() {
     :location="smAndDown ? 'top' : 'left'"
     mobile
     @update:model-value="clear"
-    width="400"
+    width="500"
     v-model="activePlatformsDrawer"
     class="bg-terciary"
   >
diff --git a/frontend/src/components/common/Navigation/SettingsDrawer.vue b/frontend/src/components/common/Navigation/SettingsDrawer.vue
index 6a6341630..15591f4a2 100644
--- a/frontend/src/components/common/Navigation/SettingsDrawer.vue
+++ b/frontend/src/components/common/Navigation/SettingsDrawer.vue
@@ -42,7 +42,7 @@ async function logout() {
   <v-navigation-drawer
     :location="smAndDown ? 'top' : 'left'"
     mobile
-    width="400"
+    width="500"
     v-model="activeSettingsDrawer"
     class="bg-terciary"
   >
diff --git a/frontend/src/components/common/Navigation/UserBtn.vue b/frontend/src/components/common/Navigation/UserBtn.vue
index c5b98fda1..f0ba93d8a 100644
--- a/frontend/src/components/common/Navigation/UserBtn.vue
+++ b/frontend/src/components/common/Navigation/UserBtn.vue
@@ -10,21 +10,27 @@ const auth = storeAuth();
 const { user } = storeToRefs(auth);
 </script>
 <template>
-  <v-hover v-slot="{ isHovering, props: hoverProps }">
-    <v-avatar
-      @click="navigationStore.switchActiveSettingsDrawer"
-      class="pointer"
-      size="35"
-      v-bind="hoverProps"
-      :class="{ 'border-romm-accent-1': isHovering }"
-    >
-      <v-img
-        :src="
-          user?.avatar_path
-            ? `/assets/romm/assets/${user?.avatar_path}?ts=${user?.updated_at}`
-            : defaultAvatarPath
-        "
-      />
-    </v-avatar>
-  </v-hover>
+  <v-avatar
+    @click="navigationStore.switchActiveSettingsDrawer"
+    class="pointer"
+    size="35"
+    :class="{ active: navigationStore.activeSettingsDrawer }"
+  >
+    <v-img
+      :src="
+        user?.avatar_path
+          ? `/assets/romm/assets/${user?.avatar_path}?ts=${user?.updated_at}`
+          : defaultAvatarPath
+      "
+    />
+  </v-avatar>
 </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/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index d8b3fd897..9ea057ead 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -6,6 +6,7 @@ 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();
@@ -15,6 +16,7 @@ const searchTerm = ref("");
 const coverType = ref("all");
 const covers = ref<SearchCoverSchema[]>([]);
 const filteredCovers = ref<SearchCoverSchema[]>();
+const galleryViewStore = storeGalleryView();
 const panels = ref([0]);
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showSearchCoverDialog", (term) => {
@@ -23,6 +25,7 @@ emitter?.on("showSearchCoverDialog", (term) => {
   if (searchTerm.value) searchCovers();
 });
 
+// Functions
 async function searchCovers() {
   covers.value = [];
 
@@ -180,7 +183,7 @@ onBeforeUnmount(() => {
                     :class="{ 'on-hover': isHovering }"
                     class="transform-scale pointer"
                     @click="selectCover(resource.url)"
-                    :aspect-ratio="2 / 3"
+                    :aspect-ratio="galleryViewStore.aspectRatioCover"
                     :src="resource.thumb"
                     cover
                   >
@@ -188,7 +191,7 @@ onBeforeUnmount(() => {
                       <v-img
                         :src="resource.url"
                         cover
-                        :aspect-ratio="2 / 3"
+                        :aspect-ratio="galleryViewStore.aspectRatioCover"
                       ></v-img>
                     </template>
                     <template #placeholder>
diff --git a/frontend/src/stores/galleryView.ts b/frontend/src/stores/galleryView.ts
index 65ec0e35a..61326cd9a 100644
--- a/frontend/src/stores/galleryView.ts
+++ b/frontend/src/stores/galleryView.ts
@@ -5,6 +5,9 @@ export default defineStore("galleryView", {
     currentView: JSON.parse(
       localStorage.getItem("currentView") ?? "0",
     ) as number,
+    aspectRatioCover: 2 / 3,
+    aspectRatioCollection: 2 / 3,
+    aspectRatioScreenshot: 16 / 9,
     activeFirmwareDrawer: false,
     scrolledToTop: false,
     scroll: 0,
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index d2a4225f4..7478ca3e4 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -5,6 +5,7 @@ export default defineStore("navigation", {
     activePlatformsDrawer: false,
     activeCollectionsDrawer: false,
     activeSettingsDrawer: false,
+    activePlatformInfoDrawer: false,
   }),
 
   actions: {
@@ -12,16 +13,25 @@ export default defineStore("navigation", {
       this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = false;
       this.activePlatformsDrawer = !this.activePlatformsDrawer;
+      this.activePlatformInfoDrawer = false;
     },
     switchActiveCollectionsDrawer() {
       this.activePlatformsDrawer = false;
       this.activeSettingsDrawer = false;
       this.activeCollectionsDrawer = !this.activeCollectionsDrawer;
+      this.activePlatformInfoDrawer = false;
     },
     switchActiveSettingsDrawer() {
       this.activePlatformsDrawer = false;
       this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = !this.activeSettingsDrawer;
+      this.activePlatformInfoDrawer = false;
+    },
+    switchActivePlatformInfoDrawer() {
+      this.activePlatformsDrawer = false;
+      this.activeCollectionsDrawer = false;
+      this.activeSettingsDrawer = false;
+      this.activePlatformInfoDrawer = !this.activePlatformInfoDrawer;
     },
     goHome() {
       this.resetDrawers();
diff --git a/frontend/src/views/EmulatorJS/Base.vue b/frontend/src/views/EmulatorJS/Base.vue
index 9b31d0484..8545611f2 100644
--- a/frontend/src/views/EmulatorJS/Base.vue
+++ b/frontend/src/views/EmulatorJS/Base.vue
@@ -2,8 +2,8 @@
 import { isNull } from "lodash";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
+import storeGalleryView from "@/stores/galleryView";
 import RAvatar from "@/components/common/Game/RAvatar.vue";
 import firmwareApi from "@/services/api/firmware";
 import romApi from "@/services/api/rom";
@@ -13,6 +13,7 @@ import Player from "@/views/EmulatorJS/Player.vue";
 
 // Props
 const route = useRoute();
+const galleryViewStore = storeGalleryView();
 const rom = ref<DetailedRom | null>(null);
 const firmwareOptions = ref<FirmwareSchema[]>([]);
 const biosRef = ref<FirmwareSchema | null>(null);
@@ -27,6 +28,7 @@ const script = document.createElement("script");
 script.src = "/assets/emulatorjs/loader.js";
 script.async = true;
 
+// Functions
 function onPlay() {
   window.EJS_fullscreenOnLoaded = fullScreenOnPlay.value;
   document.body.appendChild(script);
diff --git a/frontend/src/views/RuffleRS/Base.vue b/frontend/src/views/RuffleRS/Base.vue
index 9cb82cdf6..d4d84548f 100644
--- a/frontend/src/views/RuffleRS/Base.vue
+++ b/frontend/src/views/RuffleRS/Base.vue
@@ -2,13 +2,14 @@
 import { isNull } from "lodash";
 import { onMounted, ref, nextTick } from "vue";
 import { useRoute } from "vue-router";
-
 import RAvatar from "@/components/common/Game/RAvatar.vue";
+import storeGalleryView from "@/stores/galleryView";
 import romApi from "@/services/api/rom";
 import type { DetailedRom } from "@/stores/roms";
 
 // Props
 const route = useRoute();
+const galleryViewStore = storeGalleryView();
 const rom = ref<DetailedRom | null>(null);
 const gameRunning = ref(false);
 const storedFSOP = localStorage.getItem("fullScreenOnPlay");
@@ -25,6 +26,7 @@ const script = document.createElement("script");
 script.src = "/assets/ruffle/ruffle.js";
 document.body.appendChild(script);
 
+// Functions
 function onPlay() {
   gameRunning.value = true;
 

From be87d92cf788622a8ed89270333245953af4662f Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 28 Nov 2024 12:28:29 +0000
Subject: [PATCH 03/44] fixed platform info migration and models

---
 .../alembic/versions/0027_platforms_data.py   | 10 +++++++--
 backend/endpoints/responses/platform.py       |  4 ++++
 backend/handler/metadata/igdb_handler.py      | 21 +++++++++++--------
 backend/models/platform.py                    |  3 ++-
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/backend/alembic/versions/0027_platforms_data.py b/backend/alembic/versions/0027_platforms_data.py
index 24dd7c689..94f0eff53 100644
--- a/backend/alembic/versions/0027_platforms_data.py
+++ b/backend/alembic/versions/0027_platforms_data.py
@@ -21,7 +21,12 @@ def upgrade() -> None:
     with op.batch_alter_table("platforms", schema=None) as batch_op:
         batch_op.add_column(sa.Column("category", sa.String(length=50), nullable=True))
         batch_op.add_column(sa.Column("generation", sa.Integer(), nullable=True))
-        batch_op.add_column(sa.Column("family", sa.String(length=1000), nullable=True))
+        batch_op.add_column(
+            sa.Column("family_name", sa.String(length=1000), nullable=True)
+        )
+        batch_op.add_column(
+            sa.Column("family_slug", sa.String(length=1000), nullable=True)
+        )
         batch_op.add_column(sa.Column("url", sa.String(length=1000), nullable=True))
         batch_op.add_column(
             sa.Column("url_logo", sa.String(length=1000), nullable=True)
@@ -34,7 +39,8 @@ def downgrade() -> None:
     with op.batch_alter_table("platforms", schema=None) as batch_op:
         batch_op.drop_column("url_logo")
         batch_op.drop_column("url")
-        batch_op.drop_column("family")
+        batch_op.drop_column("family_name")
+        batch_op.drop_column("family_slug")
         batch_op.drop_column("generation")
         batch_op.drop_column("category")
     # ### end Alembic commands ###
diff --git a/backend/endpoints/responses/platform.py b/backend/endpoints/responses/platform.py
index 5d7126794..2c4341dd6 100644
--- a/backend/endpoints/responses/platform.py
+++ b/backend/endpoints/responses/platform.py
@@ -14,6 +14,10 @@ class PlatformSchema(BaseModel):
     igdb_id: int | None = None
     sgdb_id: int | None = None
     moby_id: int | None = None
+    family_name: str | None = ""
+    family_slug: str | None = ""
+    url: str | None = ""
+    url_logo: str | None = ""
     logo_path: str | None = ""
     firmware: list[FirmwareSchema] = Field(default_factory=list)
 
diff --git a/backend/handler/metadata/igdb_handler.py b/backend/handler/metadata/igdb_handler.py
index 96c692deb..3503bf97f 100644
--- a/backend/handler/metadata/igdb_handler.py
+++ b/backend/handler/metadata/igdb_handler.py
@@ -37,23 +37,24 @@ class IGDBPlatform(TypedDict):
     name: NotRequired[str]
     category: NotRequired[str]
     generation: NotRequired[str]
-    family: NotRequired[int]
+    family_name: NotRequired[str]
+    family_slug: NotRequired[str]
     url: NotRequired[str]
     url_logo: NotRequired[str]
     logo_path: NotRequired[str]
 
 
+class IGDBMetadataPlatform(TypedDict):
+    igdb_id: int
+    name: str
+
+
 class IGDBAgeRating(TypedDict):
     rating: str
     category: str
     rating_cover_url: str
 
 
-class IGDBMetadataPlatform(TypedDict):
-    igdb_id: int
-    name: str
-
-
 class IGDBRelatedGame(TypedDict):
     id: int
     name: str
@@ -353,7 +354,8 @@ class IGDBBaseHandler(MetadataHandler):
                 name=platform.get("name", slug),
                 category=IGDB_PLATFORM_CATEGORIES.get(platform["category"], "Unknown"),
                 generation=platform.get("generation", None),
-                family=platform.get("family", None),
+                family_name=platform.get("family_name", None),
+                family_slug=platform.get("family_slug", None),
                 url=platform.get("url", None),
                 url_logo=platform.get("url_logo", None),
             )
@@ -683,8 +685,9 @@ PLATFORMS_FIELDS = [
     "category",
     "generation",
     "url",
-    # "platform_families.name",
-    # "platform_logos.image_id",
+    "platform_family.name",
+    "platform_family.slug",
+    "platform_logo.url",
 ]
 
 GAMES_FIELDS = [
diff --git a/backend/models/platform.py b/backend/models/platform.py
index f0bc91da4..5d31418d4 100644
--- a/backend/models/platform.py
+++ b/backend/models/platform.py
@@ -23,7 +23,8 @@ class Platform(BaseModel):
     name: Mapped[str] = mapped_column(String(length=400))
     category: Mapped[str | None] = mapped_column(String(length=50), default="")
     generation: Mapped[int | None]
-    family: Mapped[str | None] = mapped_column(String(length=1000), default="")
+    family_name: Mapped[str | None] = mapped_column(String(length=1000), default="")
+    family_slug: Mapped[str | None] = mapped_column(String(length=1000), default="")
     url: Mapped[str | None] = mapped_column(String(length=1000), default="")
     url_logo: Mapped[str | None] = mapped_column(String(length=1000), default="")
     logo_path: Mapped[str | None] = mapped_column(String(length=1000), default="")

From a29a14aefb9f7867f23744bc642430ddb5e40116 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 28 Nov 2024 15:23:20 +0000
Subject: [PATCH 04/44] normalized covers and logos

---
 backend/handler/metadata/igdb_handler.py | 38 +++++++++++++++++-------
 backend/handler/scan_handler.py          |  2 --
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/backend/handler/metadata/igdb_handler.py b/backend/handler/metadata/igdb_handler.py
index 3503bf97f..a266fec01 100644
--- a/backend/handler/metadata/igdb_handler.py
+++ b/backend/handler/metadata/igdb_handler.py
@@ -127,7 +127,9 @@ def extract_metadata_from_igdb_rom(
                     id=e["id"],
                     slug=e["slug"],
                     name=e["name"],
-                    cover_url=pydash.get(e, "cover.url", ""),
+                    cover_url=MetadataHandler._normalize_cover_url(
+                        pydash.get(e, "cover.url", "").replace("t_thumb", "t_1080p")
+                    ),
                     type="expansion",
                 )
                 for e in rom.get("expansions", [])
@@ -137,7 +139,9 @@ def extract_metadata_from_igdb_rom(
                     id=d["id"],
                     slug=d["slug"],
                     name=d["name"],
-                    cover_url=pydash.get(d, "cover.url", ""),
+                    cover_url=MetadataHandler._normalize_cover_url(
+                        pydash.get(d, "cover.url", "").replace("t_thumb", "t_1080p")
+                    ),
                     type="dlc",
                 )
                 for d in rom.get("dlcs", [])
@@ -147,7 +151,9 @@ def extract_metadata_from_igdb_rom(
                     id=r["id"],
                     slug=r["slug"],
                     name=r["name"],
-                    cover_url=pydash.get(r, "cover.url", ""),
+                    cover_url=MetadataHandler._normalize_cover_url(
+                        pydash.get(r, "cover.url", "").replace("t_thumb", "t_1080p")
+                    ),
                     type="remaster",
                 )
                 for r in rom.get("remasters", [])
@@ -157,7 +163,9 @@ def extract_metadata_from_igdb_rom(
                     id=r["id"],
                     slug=r["slug"],
                     name=r["name"],
-                    cover_url=pydash.get(r, "cover.url", ""),
+                    cover_url=MetadataHandler._normalize_cover_url(
+                        pydash.get(r, "cover.url", "").replace("t_thumb", "t_1080p")
+                    ),
                     type="remake",
                 )
                 for r in rom.get("remakes", [])
@@ -167,7 +175,9 @@ def extract_metadata_from_igdb_rom(
                     id=g["id"],
                     slug=g["slug"],
                     name=g["name"],
-                    cover_url=pydash.get(g, "cover.url", ""),
+                    cover_url=MetadataHandler._normalize_cover_url(
+                        pydash.get(g, "cover.url", "").replace("t_thumb", "t_1080p")
+                    ),
                     type="expanded",
                 )
                 for g in rom.get("expanded_games", [])
@@ -177,7 +187,9 @@ def extract_metadata_from_igdb_rom(
                     id=p["id"],
                     slug=p["slug"],
                     name=p["name"],
-                    cover_url=pydash.get(p, "cover.url", ""),
+                    cover_url=MetadataHandler._normalize_cover_url(
+                        pydash.get(p, "cover.url", "").replace("t_thumb", "t_1080p")
+                    ),
                     type="port",
                 )
                 for p in rom.get("ports", [])
@@ -187,7 +199,9 @@ def extract_metadata_from_igdb_rom(
                     id=s["id"],
                     slug=s["slug"],
                     name=s["name"],
-                    cover_url=pydash.get(s, "cover.url", ""),
+                    cover_url=MetadataHandler._normalize_cover_url(
+                        pydash.get(s, "cover.url", "").replace("t_thumb", "t_1080p")
+                    ),
                     type="similar",
                 )
                 for s in rom.get("similar_games", [])
@@ -354,10 +368,14 @@ class IGDBBaseHandler(MetadataHandler):
                 name=platform.get("name", slug),
                 category=IGDB_PLATFORM_CATEGORIES.get(platform["category"], "Unknown"),
                 generation=platform.get("generation", None),
-                family_name=platform.get("family_name", None),
-                family_slug=platform.get("family_slug", None),
+                family_name=pydash.get(platform, "platform_family.name", None),
+                family_slug=pydash.get(platform, "platform_family.slug", None),
                 url=platform.get("url", None),
-                url_logo=platform.get("url_logo", None),
+                url_logo=self._normalize_cover_url(
+                    pydash.get(platform, "platform_logo.url", None).replace(
+                        "t_thumb", "t_1080p"
+                    )
+                ),
             )
 
         # Check if platform is a version if not found
diff --git a/backend/handler/scan_handler.py b/backend/handler/scan_handler.py
index 564065f62..b6d43009b 100644
--- a/backend/handler/scan_handler.py
+++ b/backend/handler/scan_handler.py
@@ -95,8 +95,6 @@ async def scan_platform(
         if "igdb" in metadata_sources
         else IGDBPlatform(igdb_id=None, slug=platform_attrs["slug"])
     )
-    for key, value in igdb_platform.items():
-        log.debug(key + ": " + str(value))
     moby_platform = (
         meta_moby_handler.get_platform(platform_attrs["slug"])
         if "moby" in metadata_sources

From 6a7433e1f9bb47958448372b66b4d81a02bc56c7 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 28 Nov 2024 16:12:05 +0000
Subject: [PATCH 05/44] removed unnecessary video endpoint request

---
 backend/handler/metadata/igdb_handler.py | 42 ++++++++++++------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/backend/handler/metadata/igdb_handler.py b/backend/handler/metadata/igdb_handler.py
index 828673fba..19a90aa00 100644
--- a/backend/handler/metadata/igdb_handler.py
+++ b/backend/handler/metadata/igdb_handler.py
@@ -95,12 +95,10 @@ class IGDBRom(TypedDict):
     igdb_metadata: NotRequired[IGDBMetadata]
 
 
-def extract_metadata_from_igdb_rom(
-    rom: dict, video_id: str | None = None
-) -> IGDBMetadata:
+def extract_metadata_from_igdb_rom(rom: dict) -> IGDBMetadata:
     return IGDBMetadata(
         {
-            "youtube_video_id": video_id,
+            "youtube_video_id": str(pydash.get(rom, "videos[0].video_id", None)),
             "total_rating": str(round(rom.get("total_rating", 0.0), 2)),
             "aggregated_rating": str(round(rom.get("aggregated_rating", 0.0), 2)),
             "first_release_date": rom.get("first_release_date", None),
@@ -220,7 +218,6 @@ class IGDBBaseHandler(MetadataHandler):
         self.games_fields = GAMES_FIELDS
         self.search_endpoint = f"{self.BASE_URL}/search"
         self.search_fields = SEARCH_FIELDS
-        self.video_endpoint = f"{self.BASE_URL}/game_videos"
         self.pagination_limit = 200
         self.twitch_auth = TwitchAuth()
         self.headers = {
@@ -339,6 +336,7 @@ class IGDBBaseHandler(MetadataHandler):
                 for rom_name in rom_names
             )
 
+        log.debug("Searching in games endpoint with category %s", category_filter)
         roms = await self._request(
             self.games_endpoint,
             data=f'search "{search_term}"; fields {",".join(self.games_fields)}; where platforms=[{platform_igdb_id}] {category_filter};',
@@ -348,11 +346,16 @@ class IGDBBaseHandler(MetadataHandler):
             if is_exact_match(rom, search_term):
                 return rom
 
+        log.debug("Searching expanded in search endpoint")
         roms_expanded = await self._request(
             self.search_endpoint,
             data=f'fields {",".join(self.search_fields)}; where game.platforms=[{platform_igdb_id}] & (name ~ *"{search_term}"* | alternative_name ~ *"{search_term}"*);',
         )
         if roms_expanded:
+            log.debug(
+                "Searching expanded in games endpoint for expanded game %s",
+                roms_expanded[0]["game"],
+            )
             extra_roms = await self._request(
                 self.games_endpoint,
                 f'fields {",".join(self.games_fields)}; where id={roms_expanded[0]["game"]["id"]};',
@@ -478,13 +481,19 @@ class IGDBBaseHandler(MetadataHandler):
 
         search_term = self.normalize_search_term(search_term)
 
+        log.debug("Searching for %s on IGDB with category", search_term)
         rom = await self._search_rom(search_term, platform_igdb_id, with_category=True)
         if not rom:
+            log.debug("Searching for %s on IGDB without category", search_term)
             rom = await self._search_rom(search_term, platform_igdb_id)
 
         # Split the search term since igdb struggles with colons
         if not rom and ":" in search_term:
             for term in search_term.split(":")[::-1]:
+                log.debug(
+                    "Searching for %s on IGDB without category after splitting semicolon",
+                    term,
+                )
                 rom = await self._search_rom(term, platform_igdb_id)
                 if rom:
                     break
@@ -492,6 +501,10 @@ class IGDBBaseHandler(MetadataHandler):
         # Some MAME games have two titles split by a slash
         if not rom and "/" in search_term:
             for term in search_term.split("/"):
+                log.debug(
+                    "Searching for %s on IGDB without category after splitting slash",
+                    term,
+                )
                 rom = await self._search_rom(term.strip(), platform_igdb_id)
                 if rom:
                     break
@@ -499,13 +512,6 @@ class IGDBBaseHandler(MetadataHandler):
         if not rom:
             return fallback_rom
 
-        # Get the video ID for the game
-        video_ids = await self._request(
-            self.video_endpoint,
-            f'fields video_id; where game={rom["id"]};',
-        )
-        video_id = pydash.get(video_ids, "[0].video_id", None)
-
         return IGDBRom(
             igdb_id=rom["id"],
             slug=rom["slug"],
@@ -518,7 +524,7 @@ class IGDBBaseHandler(MetadataHandler):
                 self._normalize_cover_url(s.get("url", "")).replace("t_thumb", "t_720p")
                 for s in rom.get("screenshots", [])
             ],
-            igdb_metadata=extract_metadata_from_igdb_rom(rom, video_id),
+            igdb_metadata=extract_metadata_from_igdb_rom(rom),
         )
 
     @check_twitch_token
@@ -535,13 +541,6 @@ class IGDBBaseHandler(MetadataHandler):
         if not rom:
             return IGDBRom(igdb_id=None)
 
-        # Get the video ID for the game
-        video_ids = await self._request(
-            self.video_endpoint,
-            f'fields video_id; where game={rom["id"]};',
-        )
-        video_id = pydash.get(video_ids, "[0].video_id", None)
-
         return IGDBRom(
             igdb_id=rom["id"],
             slug=rom["slug"],
@@ -554,7 +553,7 @@ class IGDBBaseHandler(MetadataHandler):
                 self._normalize_cover_url(s.get("url", "")).replace("t_thumb", "t_720p")
                 for s in rom.get("screenshots", [])
             ],
-            igdb_metadata=extract_metadata_from_igdb_rom(rom, video_id),
+            igdb_metadata=extract_metadata_from_igdb_rom(rom),
         )
 
     @check_twitch_token
@@ -784,6 +783,7 @@ GAMES_FIELDS = [
     "similar_games.name",
     "similar_games.cover.url",
     "age_ratings.rating",
+    "videos.video_id",
 ]
 
 SEARCH_FIELDS = ["game.id", "name"]

From c661a98347f2441a22770af48d5baf18b03d66ce Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 28 Nov 2024 16:24:44 +0000
Subject: [PATCH 06/44] removed unnecessary structure path value to the front

---
 backend/endpoints/config.py                         | 1 -
 backend/endpoints/responses/config.py               | 1 -
 frontend/src/__generated__/models/ConfigResponse.ts | 1 -
 frontend/src/stores/config.ts                       | 1 -
 4 files changed, 4 deletions(-)

diff --git a/backend/endpoints/config.py b/backend/endpoints/config.py
index 1198fa6c5..7f82c9fac 100644
--- a/backend/endpoints/config.py
+++ b/backend/endpoints/config.py
@@ -35,7 +35,6 @@ def get_config() -> ConfigResponse:
             PLATFORMS_VERSIONS=cfg.PLATFORMS_VERSIONS,
             ROMS_FOLDER_NAME=cfg.ROMS_FOLDER_NAME,
             FIRMWARE_FOLDER_NAME=cfg.FIRMWARE_FOLDER_NAME,
-            HIGH_PRIO_STRUCTURE_PATH=cfg.HIGH_PRIO_STRUCTURE_PATH,
         )
     except ConfigNotReadableException as exc:
         log.critical(exc.message)
diff --git a/backend/endpoints/responses/config.py b/backend/endpoints/responses/config.py
index 4420a9354..85e211c37 100644
--- a/backend/endpoints/responses/config.py
+++ b/backend/endpoints/responses/config.py
@@ -12,4 +12,3 @@ class ConfigResponse(TypedDict):
     PLATFORMS_VERSIONS: dict[str, str]
     ROMS_FOLDER_NAME: str
     FIRMWARE_FOLDER_NAME: str
-    HIGH_PRIO_STRUCTURE_PATH: str
diff --git a/frontend/src/__generated__/models/ConfigResponse.ts b/frontend/src/__generated__/models/ConfigResponse.ts
index 71f01543b..c289c0921 100644
--- a/frontend/src/__generated__/models/ConfigResponse.ts
+++ b/frontend/src/__generated__/models/ConfigResponse.ts
@@ -14,6 +14,5 @@ export type ConfigResponse = {
     PLATFORMS_VERSIONS: Record<string, string>;
     ROMS_FOLDER_NAME: string;
     FIRMWARE_FOLDER_NAME: string;
-    HIGH_PRIO_STRUCTURE_PATH: string;
 };
 
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index 89660268e..8b12f0cdc 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -24,7 +24,6 @@ export default defineStore("config", {
         PLATFORMS_VERSIONS: {} as Record<string, string>,
         ROMS_FOLDER_NAME: "",
         FIRMWARE_FOLDER_NAME: "",
-        HIGH_PRIO_STRUCTURE_PATH: "",
       } as ConfigResponse,
     };
   },

From 2bed0a8b23e36f5b67c2144b90f7d405bd917f8d Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 28 Nov 2024 16:34:00 +0000
Subject: [PATCH 07/44] removed unnecessary config variables from config
 endpoint

---
 backend/endpoints/config.py                         | 2 --
 backend/endpoints/responses/config.py               | 2 --
 frontend/src/__generated__/models/ConfigResponse.ts | 2 --
 frontend/src/stores/config.ts                       | 2 --
 4 files changed, 8 deletions(-)

diff --git a/backend/endpoints/config.py b/backend/endpoints/config.py
index 7f82c9fac..2a06ab886 100644
--- a/backend/endpoints/config.py
+++ b/backend/endpoints/config.py
@@ -33,8 +33,6 @@ def get_config() -> ConfigResponse:
             EXCLUDED_MULTI_PARTS_FILES=cfg.EXCLUDED_MULTI_PARTS_FILES,
             PLATFORMS_BINDING=cfg.PLATFORMS_BINDING,
             PLATFORMS_VERSIONS=cfg.PLATFORMS_VERSIONS,
-            ROMS_FOLDER_NAME=cfg.ROMS_FOLDER_NAME,
-            FIRMWARE_FOLDER_NAME=cfg.FIRMWARE_FOLDER_NAME,
         )
     except ConfigNotReadableException as exc:
         log.critical(exc.message)
diff --git a/backend/endpoints/responses/config.py b/backend/endpoints/responses/config.py
index 85e211c37..0b537501c 100644
--- a/backend/endpoints/responses/config.py
+++ b/backend/endpoints/responses/config.py
@@ -10,5 +10,3 @@ class ConfigResponse(TypedDict):
     EXCLUDED_MULTI_PARTS_FILES: list[str]
     PLATFORMS_BINDING: dict[str, str]
     PLATFORMS_VERSIONS: dict[str, str]
-    ROMS_FOLDER_NAME: str
-    FIRMWARE_FOLDER_NAME: str
diff --git a/frontend/src/__generated__/models/ConfigResponse.ts b/frontend/src/__generated__/models/ConfigResponse.ts
index c289c0921..4b60f7097 100644
--- a/frontend/src/__generated__/models/ConfigResponse.ts
+++ b/frontend/src/__generated__/models/ConfigResponse.ts
@@ -12,7 +12,5 @@ export type ConfigResponse = {
     EXCLUDED_MULTI_PARTS_FILES: Array<string>;
     PLATFORMS_BINDING: Record<string, string>;
     PLATFORMS_VERSIONS: Record<string, string>;
-    ROMS_FOLDER_NAME: string;
-    FIRMWARE_FOLDER_NAME: string;
 };
 
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index 8b12f0cdc..6d6af0cad 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -22,8 +22,6 @@ export default defineStore("config", {
         EXCLUDED_MULTI_PARTS_FILES: [] as string[],
         PLATFORMS_BINDING: {} as Record<string, string>,
         PLATFORMS_VERSIONS: {} as Record<string, string>,
-        ROMS_FOLDER_NAME: "",
-        FIRMWARE_FOLDER_NAME: "",
       } as ConfigResponse,
     };
   },

From 2c85a6446ad763b0505cc4de0811e6bc4624b070 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 28 Nov 2024 16:35:47 +0000
Subject: [PATCH 08/44] removed unnecessary current user api call

---
 frontend/src/views/Home.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index dc78b98b7..8ac6d929e 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -74,14 +74,6 @@ onBeforeMount(async () => {
     .catch((error) => {
       console.error(error);
     });
-  await userApi
-    .fetchCurrentUser()
-    .then(({ data: user }) => {
-      auth.setUser(user);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
   navigationStore.resetDrawers();
 });
 </script>

From a4867252d933adf42a9080d8fcaf7823f82a186a Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Thu, 28 Nov 2024 17:28:08 +0000
Subject: [PATCH 09/44] removed unnecessary platforms api call from gallery and
 details view and simplified gallery logic based on stores

---
 frontend/src/stores/platforms.ts        | 26 ++++---
 frontend/src/views/Gallery/Platform.vue | 94 +++++++++++++------------
 frontend/src/views/GameDetails.vue      | 17 ++---
 frontend/src/views/Scan.vue             |  2 +-
 4 files changed, 71 insertions(+), 68 deletions(-)

diff --git a/frontend/src/stores/platforms.ts b/frontend/src/stores/platforms.ts
index 6df4aac3e..171b8b347 100644
--- a/frontend/src/stores/platforms.ts
+++ b/frontend/src/stores/platforms.ts
@@ -7,15 +7,16 @@ export type Platform = PlatformSchema;
 export default defineStore("platforms", {
   state: () => {
     return {
-      all: [] as Platform[],
+      allPlatforms: [] as Platform[],
       searchText: "" as string,
     };
   },
   getters: {
-    totalGames: ({ all: value }) =>
+    totalGames: ({ allPlatforms: value }) =>
       value.reduce((count, p) => count + p.rom_count, 0),
-    filledPlatforms: ({ all }) => all.filter((p) => p.rom_count > 0),
-    filteredPlatforms: ({ all, searchText }) =>
+    filledPlatforms: ({ allPlatforms: all }) =>
+      all.filter((p) => p.rom_count > 0),
+    filteredPlatforms: ({ allPlatforms: all, searchText }) =>
       all.filter(
         (p) =>
           p.rom_count > 0 &&
@@ -24,28 +25,31 @@ export default defineStore("platforms", {
   },
   actions: {
     _reorder() {
-      this.all = this.all.sort((a, b) => {
+      this.allPlatforms = this.allPlatforms.sort((a, b) => {
         return a.name.localeCompare(b.name);
       });
-      this.all = uniqBy(this.all, "id");
+      this.allPlatforms = uniqBy(this.allPlatforms, "id");
     },
     set(platforms: Platform[]) {
-      this.all = platforms;
+      this.allPlatforms = platforms;
     },
     add(platform: Platform) {
-      this.all.push(platform);
+      this.allPlatforms.push(platform);
       this._reorder();
     },
     exists(platform: Platform) {
-      return this.all.filter((p) => p.fs_slug == platform.fs_slug).length > 0;
+      return (
+        this.allPlatforms.filter((p) => p.fs_slug == platform.fs_slug).length >
+        0
+      );
     },
     remove(platform: Platform) {
-      this.all = this.all.filter((p) => {
+      this.allPlatforms = this.allPlatforms.filter((p) => {
         return p.slug !== platform.slug;
       });
     },
     get(platformId: number) {
-      return this.all.find((p) => p.id === platformId);
+      return this.allPlatforms.find((p) => p.id === platformId);
     },
   },
 });
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 733adf385..9ed783dc0 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -15,7 +15,7 @@ import type { Events } from "@/types/emitter";
 import { normalizeString, views } from "@/utils";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, onBeforeUnmount, onMounted, ref } from "vue";
+import { inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
 
@@ -25,7 +25,8 @@ const route = useRoute();
 const galleryViewStore = storeGalleryView();
 const galleryFilterStore = storeGalleryFilter();
 const { scrolledToTop, currentView } = storeToRefs(galleryViewStore);
-const platforms = storePlatforms();
+const platformsStore = storePlatforms();
+const { allPlatforms } = storeToRefs(platformsStore);
 const romsStore = storeRoms();
 const {
   allRoms,
@@ -218,62 +219,65 @@ const filterToSetFilter: Record<FilterType, Function> = {
 
 onMounted(async () => {
   const routePlatformId = Number(route.params.platform);
-  const routePlatform = platforms.get(routePlatformId);
+  const routePlatform = platformsStore.get(routePlatformId);
 
-  if (!routePlatform) {
-    await platformApi
-      .getPlatform(routePlatformId)
-      .then((data) => {
-        platforms.add(data.data);
-        romsStore.setCurrentPlatform(data.data);
-      })
-      .catch((error) => {
-        console.log(error);
-        noPlatformError.value = true;
-      });
-  } else {
-    romsStore.setCurrentPlatform(routePlatform);
-  }
+  watch(
+    () => allPlatforms.value,
+    (platforms) => {
+      if (
+        platforms.length > 0 &&
+        platforms.some((platform) => platform.id === routePlatformId)
+      ) {
+        romsStore.setCurrentPlatform(
+          platforms.find((platform) => platform.id === routePlatformId),
+        );
+        resetGallery();
+        fetchRoms();
+        setFilters();
 
-  if (!noPlatformError.value) {
-    resetGallery();
-    await fetchRoms();
-    setFilters();
+        // Check if there are query params to set filters
+        if (route.query.filter && route.query.value) {
+          const filter = route.query.filter as FilterType;
+          const value = route.query.value as string;
+          filterToSetFilter[filter](value);
+          onFilterChange(); // Update the UI
+          router.replace({ query: {} }); // Clear query params
+        }
 
-    // Check if there are query params to set filters
-    if (route.query.filter && route.query.value) {
-      const filter = route.query.filter as FilterType;
-      const value = route.query.value as string;
-      filterToSetFilter[filter](value);
-      onFilterChange(); // Update the UI
-      router.replace({ query: {} }); // Clear query params
-    }
-
-    window.addEventListener("wheel", onScroll);
-    window.addEventListener("scroll", onScroll);
-  }
+        window.addEventListener("wheel", onScroll);
+        window.addEventListener("scroll", onScroll);
+      }
+    },
+    { immediate: true }, // This ensures the watcher is triggered immediately if allPlatforms is already populated
+  );
 });
 
 onBeforeRouteUpdate(async (to, from) => {
   // Triggers when change param of the same route
   // Reset store if switching to another platform
-  if (to.path === from.path) return true;
+  if (to.path === from.path) return;
 
   resetGallery();
 
   const routePlatformId = Number(to.params.platform);
-  const routePlatform = platforms.get(routePlatformId);
-  if (!routePlatform) {
-    const { data } = await platformApi.getPlatform(routePlatformId);
-    platforms.add(data);
-  } else {
-    romsStore.setCurrentPlatform(routePlatform);
-  }
+  const routePlatform = platformsStore.get(routePlatformId);
 
-  await fetchRoms();
-  setFilters();
-
-  return true;
+  watch(
+    () => allPlatforms.value,
+    (platforms) => {
+      if (
+        platforms.length > 0 &&
+        platforms.some((platform) => platform.id === routePlatformId)
+      ) {
+        romsStore.setCurrentPlatform(
+          platforms.find((platform) => platform.id === routePlatformId),
+        );
+        fetchRoms();
+        setFilters();
+      }
+    },
+    { immediate: true }, // This ensures the watcher is triggered immediately if allPlatforms is already populated
+  );
 });
 
 onBeforeUnmount(() => {
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index b34d4e760..52e24a85f 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -15,6 +15,7 @@ import platformApi from "@/services/api/platform";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
 import type { Platform } from "@/stores/platforms";
+import storePlatforms from "@/stores/platforms";
 import storeRoms from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -56,17 +57,11 @@ async function fetchDetails() {
     });
 
   if (!noRomError.value) {
-    await platformApi
-      .getPlatform(currentRom.value?.platform_id)
-      .then((response) => {
-        platform.value = response.data;
-      })
-      .catch((error) => {
-        console.log(error);
-      })
-      .finally(() => {
-        emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
-      });
+    const platformsStore = storePlatforms();
+    const { allPlatforms } = storeToRefs(platformsStore);
+    platform.value = allPlatforms.value.find(
+      (platform) => platform.id === currentRom.value?.platform_id,
+    );
   }
 }
 
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index aa534de3c..be10d73cb 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -105,7 +105,7 @@ async function stopScan() {
         v-model="platformsToScan"
         label="Platforms"
         item-title="name"
-        :items="platforms.all"
+        :items="platforms.allPlatforms"
         variant="outlined"
         density="comfortable"
         multiple

From faea2016282deaa04af134ff699eb36d5fee0f0d Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 29 Nov 2024 00:01:11 +0000
Subject: [PATCH 10/44] improved api requests of gallery and details based on
 stores

---
 frontend/src/views/Gallery/Platform.vue | 51 +++++++++++++++----------
 frontend/src/views/GameDetails.vue      | 35 +++++++++--------
 2 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 9ed783dc0..3fff5801a 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -219,7 +219,6 @@ const filterToSetFilter: Record<FilterType, Function> = {
 
 onMounted(async () => {
   const routePlatformId = Number(route.params.platform);
-  const routePlatform = platformsStore.get(routePlatformId);
 
   watch(
     () => allPlatforms.value,
@@ -228,14 +227,22 @@ onMounted(async () => {
         platforms.length > 0 &&
         platforms.some((platform) => platform.id === routePlatformId)
       ) {
-        romsStore.setCurrentPlatform(
-          platforms.find((platform) => platform.id === routePlatformId),
+        const newPlatform = platforms.find(
+          (platform) => platform.id === routePlatformId,
         );
-        resetGallery();
-        fetchRoms();
-        setFilters();
 
-        // Check if there are query params to set filters
+        // Check if the current platform is different or no ROMs have been loaded
+        if (
+          currentPlatform.value?.id !== routePlatformId ||
+          allRoms.value.length === 0
+        ) {
+          romsStore.setCurrentPlatform(newPlatform);
+          resetGallery();
+          fetchRoms();
+          setFilters();
+        }
+
+        // Check for query params to set filters
         if (route.query.filter && route.query.value) {
           const filter = route.query.filter as FilterType;
           const value = route.query.value as string;
@@ -248,40 +255,42 @@ onMounted(async () => {
         window.addEventListener("scroll", onScroll);
       }
     },
-    { immediate: true }, // This ensures the watcher is triggered immediately if allPlatforms is already populated
+    { immediate: true }, // Ensure watcher is triggered immediately
   );
 });
 
 onBeforeRouteUpdate(async (to, from) => {
-  // Triggers when change param of the same route
-  // Reset store if switching to another platform
+  // Avoid unnecessary actions if navigating within the same path
   if (to.path === from.path) return;
 
   resetGallery();
 
   const routePlatformId = Number(to.params.platform);
-  const routePlatform = platformsStore.get(routePlatformId);
 
   watch(
     () => allPlatforms.value,
     (platforms) => {
-      if (
-        platforms.length > 0 &&
-        platforms.some((platform) => platform.id === routePlatformId)
-      ) {
-        romsStore.setCurrentPlatform(
-          platforms.find((platform) => platform.id === routePlatformId),
+      if (platforms.length > 0) {
+        const newPlatform = platforms.find(
+          (platform) => platform.id === routePlatformId,
         );
-        fetchRoms();
-        setFilters();
+
+        // Only trigger fetchRoms if switching platforms or ROMs are not loaded
+        if (
+          currentPlatform.value?.id !== routePlatformId ||
+          allRoms.value.length === 0
+        ) {
+          romsStore.setCurrentPlatform(newPlatform);
+          fetchRoms();
+          setFilters();
+        }
       }
     },
-    { immediate: true }, // This ensures the watcher is triggered immediately if allPlatforms is already populated
+    { immediate: true }, // Ensure watcher is triggered immediately
   );
 });
 
 onBeforeUnmount(() => {
-  romsStore.setCurrentPlatform(null);
   window.removeEventListener("wheel", onScroll);
   window.removeEventListener("scroll", onScroll);
 });
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 52e24a85f..a450ff2c3 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -26,7 +26,6 @@ import { useDisplay } from "vuetify";
 
 // Props
 const route = useRoute();
-const platform = ref<Platform>();
 const tab = ref<
   | "details"
   | "saves"
@@ -40,9 +39,10 @@ const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const noRomError = ref(false);
 const romsStore = storeRoms();
-const { currentRom } = storeToRefs(romsStore);
+const { currentRom, currentPlatform, gettingRoms } = storeToRefs(romsStore);
 
 async function fetchDetails() {
+  gettingRoms.value = true;
   await romApi
     .getRom({ romId: parseInt(route.params.rom as string) })
     .then(({ data }) => {
@@ -54,44 +54,49 @@ async function fetchDetails() {
     })
     .finally(() => {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      gettingRoms.value = false;
     });
 
   if (!noRomError.value) {
     const platformsStore = storePlatforms();
     const { allPlatforms } = storeToRefs(platformsStore);
-    platform.value = allPlatforms.value.find(
+    currentPlatform.value = allPlatforms.value.find(
       (platform) => platform.id === currentRom.value?.platform_id,
     );
   }
 }
 
 onBeforeMount(async () => {
-  emitter?.emit("showLoadingDialog", { loading: true, scrim: false });
-  if (currentRom.value?.id == parseInt(route.params.rom as string)) {
-    emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
-  } else {
+  const romId = parseInt(route.params.rom as string);
+
+  // Only fetch details if the currentRom ID differs
+  if (currentRom.value?.id !== romId) {
+    emitter?.emit("showLoadingDialog", { loading: true, scrim: false });
     await fetchDetails();
+  } else {
+    emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
   }
+
   const downloadStore = storeDownload();
   downloadStore.clear();
 });
 
-onBeforeRouteLeave(() => {
-  currentRom.value = null;
-  return true;
-});
-
 watch(
   () => route.fullPath,
   async () => {
-    await fetchDetails();
+    const romId = parseInt(route.params.rom as string);
+
+    // Only fetch details if the currentRom ID differs
+    if (currentRom.value?.id !== romId) {
+      await fetchDetails();
+    }
   },
 );
 </script>
 
 <template>
   <!-- TODO: review layout on certain roms - ej: mortal kombat 2 for gb  -->
-  <template v-if="currentRom && platform">
+  <template v-if="currentRom && currentPlatform && !gettingRoms">
     <background-header />
 
     <v-row
@@ -134,7 +139,7 @@ watch(
             'justify-center': smAndDown,
           }"
         >
-          <title-info :rom="currentRom" :platform="platform" />
+          <title-info :rom="currentRom" :platform="currentPlatform" />
         </div>
         <v-row
           :class="{

From f57e5b80291deec659edeb45aa247f350ade2835 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 29 Nov 2024 00:12:40 +0000
Subject: [PATCH 11/44] fixed title info params

---
 frontend/src/views/GameDetails.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index a450ff2c3..ed2e7934d 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -56,14 +56,6 @@ async function fetchDetails() {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
       gettingRoms.value = false;
     });
-
-  if (!noRomError.value) {
-    const platformsStore = storePlatforms();
-    const { allPlatforms } = storeToRefs(platformsStore);
-    currentPlatform.value = allPlatforms.value.find(
-      (platform) => platform.id === currentRom.value?.platform_id,
-    );
-  }
 }
 
 onBeforeMount(async () => {
@@ -139,7 +131,15 @@ watch(
             'justify-center': smAndDown,
           }"
         >
-          <title-info :rom="currentRom" :platform="currentPlatform" />
+          <title-info
+            :rom="currentRom"
+            :platform="{
+              id: currentRom.platform_id,
+              name: currentRom.platform_name,
+              slug: currentRom.platform_slug,
+            }"
+          />
+          <
         </div>
         <v-row
           :class="{

From 8f38e41d8c17e137437dd085ebcfb6b3b651782a Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 29 Nov 2024 01:19:45 +0000
Subject: [PATCH 12/44] improved platform info in details view

---
 frontend/src/components/Details/Info/FileInfo.vue   | 5 ++---
 frontend/src/components/Details/VersionSwitcher.vue | 3 +--
 frontend/src/views/GameDetails.vue                  | 7 +++----
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index 551154f5f..1e8d6f459 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -5,13 +5,12 @@ import romApi from "@/services/api/rom";
 import storeAuth from "@/stores/auth";
 import type { Collection } from "@/stores/collections";
 import storeDownload from "@/stores/download";
-import type { Platform } from "@/stores/platforms";
 import type { DetailedRom } from "@/stores/roms";
 import { formatBytes } from "@/utils";
 import { ref, watch } from "vue";
 
 // Props
-const props = defineProps<{ rom: DetailedRom; platform: Platform }>();
+const props = defineProps<{ rom: DetailedRom }>();
 const downloadStore = storeDownload();
 const auth = storeAuth();
 const romUser = ref(props.rom.rom_user);
@@ -47,7 +46,7 @@ watch(
         </v-col>
         <v-col>
           <v-row class="align-center" no-gutters>
-            <version-switcher :rom="rom" :platform="platform" />
+            <version-switcher :rom="rom" />
             <v-tooltip
               location="top"
               class="tooltip"
diff --git a/frontend/src/components/Details/VersionSwitcher.vue b/frontend/src/components/Details/VersionSwitcher.vue
index 96b1cc9e3..5cb45353e 100644
--- a/frontend/src/components/Details/VersionSwitcher.vue
+++ b/frontend/src/components/Details/VersionSwitcher.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Platform } from "@/stores/platforms";
 import type { DetailedRom } from "@/stores/roms";
 import { languageToEmoji, regionToEmoji } from "@/utils";
 import type { RomSchema } from "@/__generated__";
@@ -7,7 +6,7 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 // Props
-const props = defineProps<{ rom: DetailedRom; platform: Platform }>();
+const props = defineProps<{ rom: DetailedRom }>();
 const router = useRouter();
 const version = ref(props.rom.id);
 
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index ed2e7934d..7d175e93b 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -39,7 +39,7 @@ const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const noRomError = ref(false);
 const romsStore = storeRoms();
-const { currentRom, currentPlatform, gettingRoms } = storeToRefs(romsStore);
+const { currentRom, gettingRoms } = storeToRefs(romsStore);
 
 async function fetchDetails() {
   gettingRoms.value = true;
@@ -88,7 +88,7 @@ watch(
 
 <template>
   <!-- TODO: review layout on certain roms - ej: mortal kombat 2 for gb  -->
-  <template v-if="currentRom && currentPlatform && !gettingRoms">
+  <template v-if="currentRom && !gettingRoms">
     <background-header />
 
     <v-row
@@ -139,7 +139,6 @@ watch(
               slug: currentRom.platform_slug,
             }"
           />
-          <
         </div>
         <v-row
           :class="{
@@ -185,7 +184,7 @@ watch(
               <v-window-item value="details">
                 <v-row no-gutters :class="{ 'mx-2': mdAndUp }">
                   <v-col>
-                    <file-info :rom="currentRom" :platform="platform" />
+                    <file-info :rom="currentRom" />
                     <game-info :rom="currentRom" />
                   </v-col>
                 </v-row>

From c0bf14a915f2c7057d26af2b23e8c24294a59ac2 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 29 Nov 2024 10:03:52 +0000
Subject: [PATCH 13/44] fixed path overlap in rom edit dialog

---
 .../components/common/Game/Dialog/EditRom.vue | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 54a399d78..a5ed00494 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -170,21 +170,18 @@ function closeDialog() {
                 label="Filename"
                 variant="outlined"
                 required
-                hide-details
                 @keyup.enter="updateRom()"
               >
-                <v-label
-                  v-if="smAndUp"
-                  id="file-name-label"
-                  class="text-caption"
-                >
-                  <v-icon size="small" class="mr-1">
-                    mdi-folder-file-outline
-                  </v-icon>
-                  <span>
-                    /romm/library/{{ rom.file_path }}/{{ rom.file_name }}
-                  </span>
-                </v-label>
+                <template #details>
+                  <v-label class="text-caption text-wrap">
+                    <v-icon size="small" class="mr-2 text-romm-accent-1">
+                      mdi-folder-file-outline
+                    </v-icon>
+                    <span>
+                      /romm/library/{{ rom.file_path }}/{{ rom.file_name }}
+                    </span>
+                  </v-label>
+                </template>
               </v-text-field>
             </v-col>
           </v-row>
@@ -309,10 +306,3 @@ function closeDialog() {
   max-height: 330px;
 }
 </style>
-
-<style>
-#file-name-label {
-  position: absolute;
-  right: 1rem;
-}
-</style>

From 22a8b1b57f5d09c0fe320a10110f39a3bf5aff94 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 29 Nov 2024 11:15:14 +0000
Subject: [PATCH 14/44] fixed typecheck

---
 .../__generated__/models/PlatformSchema.ts    |  4 ++++
 frontend/src/components/Details/Title.vue     | 12 ++++++------
 frontend/src/views/Gallery/Platform.vue       | 19 +++++++++++--------
 frontend/src/views/GameDetails.vue            |  9 +--------
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/src/__generated__/models/PlatformSchema.ts b/frontend/src/__generated__/models/PlatformSchema.ts
index 822c036ad..e80c5422e 100644
--- a/frontend/src/__generated__/models/PlatformSchema.ts
+++ b/frontend/src/__generated__/models/PlatformSchema.ts
@@ -14,6 +14,10 @@ export type PlatformSchema = {
     igdb_id?: (number | null);
     sgdb_id?: (number | null);
     moby_id?: (number | null);
+    family_name?: (string | null);
+    family_slug?: (string | null);
+    url?: (string | null);
+    url_logo?: (string | null);
     logo_path?: (string | null);
     firmware?: Array<FirmwareSchema>;
     created_at: string;
diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index 53db24705..22df03ba2 100644
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -8,7 +8,7 @@ import { identity } from "lodash";
 import { useDisplay } from "vuetify";
 
 // Props
-const props = defineProps<{ rom: DetailedRom; platform: Platform }>();
+const props = defineProps<{ rom: DetailedRom }>();
 const { smAndDown } = useDisplay();
 const releaseDate = new Date(
   Number(props.rom.first_release_date) * 1000,
@@ -39,12 +39,12 @@ const hasReleaseDate = Number(props.rom.first_release_date) > 0;
     no-gutters
   >
     <v-col>
-      <v-chip :to="{ name: 'platform', params: { platform: platform.id } }">
-        {{ platform.name }}
+      <v-chip :to="{ name: 'platform', params: { platform: rom.platform_id } }">
+        {{ rom.platform_name }}
         <platform-icon
-          :key="platform.slug"
-          :slug="platform.slug"
-          :name="platform.name"
+          :key="rom.platform_slug"
+          :slug="rom.platform_slug"
+          :name="rom.platform_name"
           :size="30"
           class="ml-2"
         />
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 3fff5801a..652cf093c 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -14,6 +14,7 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import { normalizeString, views } from "@/utils";
 import type { Emitter } from "mitt";
+import { platform } from "os";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
@@ -227,16 +228,17 @@ onMounted(async () => {
         platforms.length > 0 &&
         platforms.some((platform) => platform.id === routePlatformId)
       ) {
-        const newPlatform = platforms.find(
+        const platform = platforms.find(
           (platform) => platform.id === routePlatformId,
         );
 
         // Check if the current platform is different or no ROMs have been loaded
         if (
-          currentPlatform.value?.id !== routePlatformId ||
-          allRoms.value.length === 0
+          (currentPlatform.value?.id !== routePlatformId ||
+            allRoms.value.length === 0) &&
+          platform
         ) {
-          romsStore.setCurrentPlatform(newPlatform);
+          romsStore.setCurrentPlatform(platform);
           resetGallery();
           fetchRoms();
           setFilters();
@@ -271,16 +273,17 @@ onBeforeRouteUpdate(async (to, from) => {
     () => allPlatforms.value,
     (platforms) => {
       if (platforms.length > 0) {
-        const newPlatform = platforms.find(
+        const platform = platforms.find(
           (platform) => platform.id === routePlatformId,
         );
 
         // Only trigger fetchRoms if switching platforms or ROMs are not loaded
         if (
-          currentPlatform.value?.id !== routePlatformId ||
-          allRoms.value.length === 0
+          (currentPlatform.value?.id !== routePlatformId ||
+            allRoms.value.length === 0) &&
+          platform
         ) {
-          romsStore.setCurrentPlatform(newPlatform);
+          romsStore.setCurrentPlatform(platform);
           fetchRoms();
           setFilters();
         }
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 7d175e93b..e1fb8d2a6 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -131,14 +131,7 @@ watch(
             'justify-center': smAndDown,
           }"
         >
-          <title-info
-            :rom="currentRom"
-            :platform="{
-              id: currentRom.platform_id,
-              name: currentRom.platform_name,
-              slug: currentRom.platform_slug,
-            }"
-          />
+          <title-info :rom="currentRom" />
         </div>
         <v-row
           :class="{

From 5d91dd805d01b1d825871346b08c05715e98ac82 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Fri, 29 Nov 2024 14:19:36 +0000
Subject: [PATCH 15/44] added base aspect ratio selection

---
 .../Gallery/AppBar/Platform/Base.vue          | 129 ++++++++++++------
 1 file changed, 90 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index eba7b6926..1aa4cdf37 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -8,22 +8,43 @@ import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.
 import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
 import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
+import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
+import storeNavigation from "@/stores/navigation";
 import storeRoms from "@/stores/roms";
 import { storeToRefs } from "pinia";
+import { computed, ref } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
-const { xs, smAndDown, mdAndUp } = useDisplay();
+const { xs } = useDisplay();
 const romsStore = storeRoms();
-const { currentPlatform, currentCollection } = storeToRefs(romsStore);
+const { currentPlatform } = storeToRefs(romsStore);
 const auth = storeAuth();
-import storeNavigation from "@/stores/navigation";
 const navigationStore = storeNavigation();
 const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
+const selectedAspectRatio = ref(2);
+const aspectRatioOptions = computed(() => [
+  {
+    name: "2 / 3",
+    size: 2 / 3,
+    source: "SteamGridDB",
+  },
+  {
+    name: "3 / 4",
+    size: 3 / 4,
+    source: "IGDB / MobyGames",
+  },
+  {
+    name: "1 / 1",
+    size: 1 / 1,
+    source: "Old squared cases",
+  },
+]);
 
-function setAspectRatio(ratio: string) {
-  console.log(`Aspect ratio set to: ${ratio}`);
+function setAspectRatio() {
+  // TODO: save aspect ratio on database
+  console.log(aspectRatioOptions.value[selectedAspectRatio.value]);
 }
 </script>
 
@@ -66,46 +87,73 @@ function setAspectRatio(ratio: string) {
     floating
     mobile
     v-model="activePlatformInfoDrawer"
-    class="bg-terciary"
     :scrim="false"
+    v-if="currentPlatform"
   >
-    <v-row no-gutters>
-      <v-col class="pl-4 text-center" cols="12" sm="auto">
+    <!-- <v-row no-gutters class="justify-center mx-auto">
+      <v-col cols="auto">
         <platform-icon
-          v-if="currentPlatform"
           :slug="currentPlatform.slug"
           :name="currentPlatform.name"
-          class="platform-logo"
-          :size="180"
+          class="platform-icon-big"
+          :size="160"
         />
       </v-col>
-      <v-col cols="auto" :class="{ 'w-30': mdAndUp }">
-        <div class="pa-6">
-          <p>
-            The Game Boy Advance (GBA) is a 32-bit handheld game console
-            developed, manufactured, and marketed by Nintendo as the successor
-            to the Game Boy Color. It was released in Japan on March 21, 2001,
-            in North America on June 11, 2001, in Australia and Europe on June
-            22, 2001, and in mainland China as iQue Game Boy Advance on June 8,
-            2004. The GBA is part of the sixth generation of video game
-            consoles.
-          </p>
-          <br />
-          <p>
-            The GBA features a 2.9-inch reflective TFT color LCD screen, capable
-            of displaying 32,768 colors. It is powered by a 16.8 MHz 32-bit
-            ARM7TDMI CPU with embedded memory. The console is backward
-            compatible with Game Boy and Game Boy Color games, making it a
-            versatile device for gamers.
-          </p>
-          <br />
-          <p>
-            The GBA has a rich library of games, including popular titles such
-            as Pokémon Ruby and Sapphire, The Legend of Zelda: The Minish Cap,
-            and Metroid Fusion. Its compact design and extensive game library
-            have made it a beloved console among gamers.
-          </p>
-        </div>
+      <v-col cols="auto"
+        ><v-img
+          max-width="200"
+          v-if="currentPlatform.url_logo"
+          :src="currentPlatform.url_logo"
+      /></v-col>
+    </v-row> -->
+    <v-row no-gutters class="justify-center">
+      <v-col>
+        <r-section icon="mdi-aspect-ratio" title="Cover aspect ratio">
+          <template #content>
+            <v-item-group
+              v-model="selectedAspectRatio"
+              mandatory
+              @update:model-value="setAspectRatio"
+            >
+              <v-row no-gutters class="align-center">
+                <v-col
+                  cols="4"
+                  sm="3"
+                  md="2"
+                  class="pa-2 mx-auto"
+                  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-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>
+                      </v-card-text>
+                    </v-card>
+                  </v-item>
+                </v-col>
+              </v-row>
+            </v-item-group>
+          </template>
+        </r-section>
       </v-col>
     </v-row>
   </v-navigation-drawer>
@@ -128,11 +176,14 @@ function setAspectRatio(ratio: string) {
 .platform-icon.active {
   filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-romm-accent-1)));
 }
-.platform-logo {
+.platform-icon-big {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
 }
 #platform-info-drawer {
   z-index: 3 !important;
   height: calc(100dvh - 48px) !important;
 }
+.greyscale {
+  filter: grayscale(100%);
+}
 </style>

From 6771956846325d573958ad995a887ce195e1a168 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sat, 30 Nov 2024 17:51:00 +0000
Subject: [PATCH 16/44] fixed platform fields in response

---
 backend/endpoints/responses/platform.py       |  13 +-
 .../__generated__/models/PlatformSchema.ts    |   2 +
 .../Gallery/AppBar/Platform/Base.vue          | 119 +++++++++++-------
 3 files changed, 86 insertions(+), 48 deletions(-)

diff --git a/backend/endpoints/responses/platform.py b/backend/endpoints/responses/platform.py
index 2c4341dd6..8de9afb65 100644
--- a/backend/endpoints/responses/platform.py
+++ b/backend/endpoints/responses/platform.py
@@ -14,13 +14,14 @@ class PlatformSchema(BaseModel):
     igdb_id: int | None = None
     sgdb_id: int | None = None
     moby_id: int | None = None
-    family_name: str | None = ""
-    family_slug: str | None = ""
-    url: str | None = ""
-    url_logo: str | None = ""
-    logo_path: str | None = ""
+    category: str | None = None
+    generation: int | None = None
+    family_name: str | None = None
+    family_slug: str | None = None
+    url: str | None = None
+    url_logo: str | None = None
+    logo_path: str | None = None
     firmware: list[FirmwareSchema] = Field(default_factory=list)
-
     created_at: datetime
     updated_at: datetime
 
diff --git a/frontend/src/__generated__/models/PlatformSchema.ts b/frontend/src/__generated__/models/PlatformSchema.ts
index e80c5422e..991518060 100644
--- a/frontend/src/__generated__/models/PlatformSchema.ts
+++ b/frontend/src/__generated__/models/PlatformSchema.ts
@@ -14,6 +14,8 @@ export type PlatformSchema = {
     igdb_id?: (number | null);
     sgdb_id?: (number | null);
     moby_id?: (number | null);
+    category?: (string | null);
+    generation?: (number | null);
     family_name?: (string | null);
     family_slug?: (string | null);
     url?: (string | null);
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 1aa4cdf37..4e86a0515 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -56,8 +56,6 @@ function setAspectRatio() {
       :name="currentPlatform.name"
       :size="36"
       class="mr-3 platform-icon"
-      :class="{ active: activePlatformInfoDrawer }"
-      @click="navigationStore.switchActivePlatformInfoDrawer"
     />
     <firmware-btn />
     <filter-btn />
@@ -65,50 +63,86 @@ function setAspectRatio() {
     <div v-if="xs" class="flex-grow-1" />
     <selecting-btn />
     <gallery-view-btn />
-    <v-menu location="bottom">
-      <template #activator="{ props }">
-        <v-btn
-          v-if="auth.scopes.includes('roms.write')"
-          v-bind="props"
-          rounded="0"
-          variant="text"
-          class="mr-0"
-          icon="mdi-dots-vertical"
-          @click.stop
-        />
-      </template>
-      <admin-menu />
-    </v-menu>
+    <!-- <v-menu location="bottom"> -->
+    <!-- <template #activator="{ props }"> -->
+    <v-btn
+      v-if="auth.scopes.includes('platforms.write')"
+      rounded="0"
+      variant="text"
+      class="mr-0"
+      icon="mdi-information"
+      :color="navigationStore.activePlatformInfoDrawer ? 'romm-accent-1' : ''"
+      @click="navigationStore.switchActivePlatformInfoDrawer"
+    />
+    <v-btn
+      v-if="auth.scopes.includes('platforms.write')"
+      rounded="0"
+      variant="text"
+      class="mr-0"
+      icon="mdi-cog"
+      :color="navigationStore.activePlatformInfoDrawer ? 'romm-accent-1' : ''"
+      @click="navigationStore.switchActivePlatformInfoDrawer"
+    />
+    <!-- </template> -->
+    <!-- <admin-menu /> -->
+    <!-- </v-menu> -->
   </v-app-bar>
 
   <v-navigation-drawer
     id="platform-info-drawer"
-    location="top"
+    location="right"
     floating
+    width="345"
     mobile
     v-model="activePlatformInfoDrawer"
     :scrim="false"
     v-if="currentPlatform"
   >
-    <!-- <v-row no-gutters class="justify-center mx-auto">
-      <v-col cols="auto">
-        <platform-icon
-          :slug="currentPlatform.slug"
-          :name="currentPlatform.name"
-          class="platform-icon-big"
-          :size="160"
-        />
+    <v-row no-gutters>
+      <v-col cols="12" md="auto">
+        <div class="text-center">
+          <platform-icon
+            :slug="currentPlatform.slug"
+            :name="currentPlatform.name"
+            class="platform-icon-big"
+            :size="160"
+          />
+        </div>
+        <p class="text-center text-h6">{{ currentPlatform.name }}</p>
+        <v-card min-width="300" class="mx-6 my-8 bg-terciary" elevation="3">
+          <v-card-text class="pa-4">
+            <p>Name: {{ currentPlatform.name }}</p>
+            <br />
+            <p>Slug: {{ currentPlatform.slug }}</p>
+            <br />
+            <p>Filesystem folder name: {{ currentPlatform.fs_slug }}</p>
+            <br />
+            <p>IGDB id: {{ currentPlatform.igdb_id }}</p>
+            <br />
+            <p>SGDB id: {{ currentPlatform.sgdb_id }}</p>
+            <br />
+            <p>MOBY id: {{ currentPlatform.moby_id }}</p>
+            <br />
+            <p>Category: {{ currentPlatform.category }}</p>
+            <br />
+            <p>Generation: {{ currentPlatform.generation }}</p>
+            <br />
+            <p>Family name: {{ currentPlatform.family_name }}</p>
+            <br />
+            <p>IGDB url: {{ currentPlatform.url }}</p>
+            <br />
+            <p>Created at: {{ currentPlatform.created_at }}</p>
+            <br />
+            <p>Updated at: {{ currentPlatform.updated_at }}</p>
+          </v-card-text>
+        </v-card>
       </v-col>
-      <v-col cols="auto"
-        ><v-img
-          max-width="200"
-          v-if="currentPlatform.url_logo"
-          :src="currentPlatform.url_logo"
-      /></v-col>
-    </v-row> -->
-    <v-row no-gutters class="justify-center">
       <v-col>
-        <r-section icon="mdi-aspect-ratio" title="Cover aspect ratio">
+        <r-section
+          icon="mdi-aspect-ratio"
+          title="Cover aspect ratio"
+          elevation="0"
+        >
           <template #content>
             <v-item-group
               v-model="selectedAspectRatio"
@@ -154,8 +188,17 @@ function setAspectRatio() {
             </v-item-group>
           </template>
         </r-section>
+        <r-section icon="mdi-upload" title="Upload roms" elevation="0">
+          <template #content> </template>
+        </r-section>
+        <r-section icon="mdi-delete" title="Delete platform" elevation="0">
+          <template #content> </template>
+        </r-section>
       </v-col>
     </v-row>
+    <v-row no-gutters class="justify-center">
+      <v-col> </v-col>
+    </v-row>
   </v-navigation-drawer>
   <filter-drawer />
   <firmware-drawer />
@@ -165,17 +208,9 @@ function setAspectRatio() {
 #gallery-app-bar {
   z-index: 999 !important;
 }
-.platform-icon {
-  cursor: pointer;
-  transition: filter 0.15s ease-in-out;
-}
 .platform-icon {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
 }
-.platform-icon:hover,
-.platform-icon.active {
-  filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-romm-accent-1)));
-}
 .platform-icon-big {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
 }

From 28d1ad6ebf7ba4c8f1105f422ed40a0a995240b9 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 02:48:41 +0000
Subject: [PATCH 17/44] final platform info drawer design

---
 frontend/package-lock.json                    | 227 +++++++++++-------
 frontend/package.json                         |   4 +-
 .../src/components/Details/Info/FileInfo.vue  |  10 +-
 .../Gallery/AppBar/Collection/Base.vue        |  10 +-
 .../Gallery/AppBar/Platform/Base.vue          | 216 ++++++++++-------
 .../AppBar/Platform/FirmwareDrawer.vue        |   7 +-
 .../AppBar/common/FilterDrawer/Base.vue       |   4 +-
 .../common/Navigation/MainAppBar.vue          |   5 +-
 frontend/src/components/common/RSection.vue   |   5 +-
 frontend/src/stores/navigation.ts             |  23 +-
 10 files changed, 304 insertions(+), 207 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4146fc6c8..e764f973a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -29,7 +29,7 @@
         "socket.io-client": "^4.7.5",
         "vue": "^3.4.27",
         "vue-router": "^4.3.2",
-        "vuetify": "^3.6.5",
+        "vuetify": "^3.7.4",
         "webfontloader": "^1.6.28"
       },
       "devDependencies": {
@@ -56,7 +56,7 @@
         "vite-plugin-pwa": "^0.14.7",
         "vite-plugin-static-copy": "0.17.1",
         "vite-plugin-vuetify": "^1.0.2",
-        "vue-tsc": "^1.8.27"
+        "vue-tsc": "^2.1.10"
       },
       "engines": {
         "node": "18"
@@ -434,17 +434,17 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.1",
-      "dev": true,
-      "license": "MIT",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.5",
-      "dev": true,
-      "license": "MIT",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -562,8 +562,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.5",
-      "license": "MIT",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1763,13 +1767,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.24.5",
-      "dev": true,
-      "license": "MIT",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.1",
-        "@babel/helper-validator-identifier": "^7.24.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2934,28 +2937,29 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "1.11.1",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.10.tgz",
+      "integrity": "sha512-hG3Z13+nJmGaT+fnQzAkS0hjJRa2FCeqZt6Bd+oGNhUkQ+mTFsDETg5rqUTxyzIh5pSOGY7FHCWUS8G82AzLCA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "1.11.1"
+        "@volar/source-map": "2.4.10"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "1.11.1",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "muggle-string": "^0.3.1"
-      }
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.10.tgz",
+      "integrity": "sha512-OCV+b5ihV0RF3A7vEvNyHPi4G4kFa6ukPmyVocmqm5QzOd8r5yAtiNvaPEjl8dNvgC/lj4JPryeeHLdXd62rWA==",
+      "dev": true
     },
     "node_modules/@volar/typescript": {
-      "version": "1.11.1",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.10.tgz",
+      "integrity": "sha512-F8ZtBMhSXyYKuBfGpYwqA5rsONnOwAVvjyE7KPYJ7wgZqo2roASqNWUnianOomJX5u1cxeRooHV59N0PhvEOgw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "1.11.1",
-        "path-browserify": "^1.0.1"
+        "@volar/language-core": "2.4.10",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vue/compiler-core": {
@@ -3000,24 +3004,34 @@
         "@vue/shared": "3.4.27"
       }
     },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "node_modules/@vue/devtools-api": {
       "version": "6.6.1",
       "license": "MIT"
     },
     "node_modules/@vue/language-core": {
-      "version": "1.8.27",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.10.tgz",
+      "integrity": "sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "~1.11.1",
-        "@volar/source-map": "~1.11.1",
-        "@vue/compiler-dom": "^3.3.0",
-        "@vue/shared": "^3.3.0",
-        "computeds": "^0.0.1",
+        "@volar/language-core": "~2.4.8",
+        "@vue/compiler-dom": "^3.5.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.5.0",
+        "alien-signals": "^0.2.0",
         "minimatch": "^9.0.3",
-        "muggle-string": "^0.3.1",
-        "path-browserify": "^1.0.1",
-        "vue-template-compiler": "^2.7.14"
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -3028,18 +3042,49 @@
         }
       }
     },
+    "node_modules/@vue/language-core/node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
     "node_modules/@vue/language-core/node_modules/brace-expansion": {
       "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
     },
     "node_modules/@vue/language-core/node_modules/minimatch": {
-      "version": "9.0.4",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
-      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -3141,6 +3186,12 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/alien-signals": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-0.2.2.tgz",
+      "integrity": "sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==",
+      "dev": true
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "dev": true,
@@ -3577,11 +3628,6 @@
       "devOptional": true,
       "license": "MIT"
     },
-    "node_modules/computeds": {
-      "version": "0.0.1",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "dev": true,
@@ -3644,9 +3690,10 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3733,8 +3780,9 @@
     },
     "node_modules/de-indent": {
       "version": "1.0.2",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -5502,11 +5550,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -5579,9 +5628,10 @@
       "license": "MIT"
     },
     "node_modules/muggle-string": {
-      "version": "0.3.1",
-      "dev": true,
-      "license": "MIT"
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true
     },
     "node_modules/nanoid": {
       "version": "5.0.7",
@@ -5765,8 +5815,9 @@
     },
     "node_modules/path-browserify": {
       "version": "1.0.1",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true
     },
     "node_modules/path-exists": {
       "version": "4.0.0",
@@ -6265,9 +6316,10 @@
       "license": "Apache-2.0"
     },
     "node_modules/rollup": {
-      "version": "2.79.1",
+      "version": "2.79.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+      "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "devOptional": true,
-      "license": "MIT",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -6740,14 +6792,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -7075,9 +7119,10 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "3.2.10",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.11.tgz",
+      "integrity": "sha512-K/jGKL/PgbIgKCiJo5QbASQhFiV02X9Jh+Qq0AKCRCRKZtOTVi4t6wh75FDpGf2N9rYOnzH87OEFQNaFy6pdxQ==",
       "devOptional": true,
-      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.15.9",
         "postcss": "^8.4.18",
@@ -7145,9 +7190,10 @@
       }
     },
     "node_modules/vite-plugin-pwa/node_modules/rollup": {
-      "version": "3.29.4",
+      "version": "3.29.5",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz",
+      "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -7229,6 +7275,12 @@
         "esbuild-windows-arm64": "0.15.18"
       }
     },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true
+    },
     "node_modules/vue": {
       "version": "3.4.27",
       "license": "MIT",
@@ -7284,34 +7336,27 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue-template-compiler": {
-      "version": "2.7.16",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "de-indent": "^1.0.2",
-        "he": "^1.2.0"
-      }
-    },
     "node_modules/vue-tsc": {
-      "version": "1.8.27",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
+      "integrity": "sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "@volar/typescript": "~1.11.1",
-        "@vue/language-core": "1.8.27",
+        "@volar/typescript": "~2.4.8",
+        "@vue/language-core": "2.1.10",
         "semver": "^7.5.4"
       },
       "bin": {
         "vue-tsc": "bin/vue-tsc.js"
       },
       "peerDependencies": {
-        "typescript": "*"
+        "typescript": ">=5.0.0"
       }
     },
     "node_modules/vuetify": {
-      "version": "3.6.5",
-      "license": "MIT",
+      "version": "3.7.4",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.4.tgz",
+      "integrity": "sha512-Y8UU5wUDQXC3oz2uumPb8IOdvB4XMCxtxnmqdOc+LihNuPlkSgxIwf92ndRzbOtJFKHsggFUxpyLqpQp+A+5kg==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -7323,7 +7368,6 @@
         "typescript": ">=4.7",
         "vite-plugin-vuetify": ">=1.0.0",
         "vue": "^3.3.0",
-        "vue-i18n": "^9.0.0",
         "webpack-plugin-vuetify": ">=2.0.0"
       },
       "peerDependenciesMeta": {
@@ -7333,9 +7377,6 @@
         "vite-plugin-vuetify": {
           "optional": true
         },
-        "vue-i18n": {
-          "optional": true
-        },
         "webpack-plugin-vuetify": {
           "optional": true
         }
diff --git a/frontend/package.json b/frontend/package.json
index c0f3e7c68..0b0fd29b3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,7 +47,7 @@
     "socket.io-client": "^4.7.5",
     "vue": "^3.4.27",
     "vue-router": "^4.3.2",
-    "vuetify": "^3.6.5",
+    "vuetify": "^3.7.4",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
@@ -74,7 +74,7 @@
     "vite-plugin-pwa": "^0.14.7",
     "vite-plugin-static-copy": "0.17.1",
     "vite-plugin-vuetify": "^1.0.2",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.1.10"
   },
   "engines": {
     "node": "18"
diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index 1e8d6f459..18dac9539 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -110,15 +110,15 @@ watch(
         <v-col cols="3" xl="2">
           <span>Info</span>
         </v-col>
-        <v-col>
-          <v-chip size="small" label class="mx-1 my-1">
+        <v-col class="my-1">
+          <v-chip size="small" label>
             Size: {{ formatBytes(rom.file_size_bytes) }}
           </v-chip>
           <v-chip
             v-if="!rom.multi && rom.sha1_hash"
             size="small"
             label
-            class="mx-1 my-1"
+            class="ml-1"
           >
             SHA-1: {{ rom.sha1_hash }}
           </v-chip>
@@ -126,7 +126,7 @@ watch(
             v-if="!rom.multi && rom.md5_hash"
             size="small"
             label
-            class="mx-1 my-1"
+            class="ml-1"
           >
             MD5: {{ rom.md5_hash }}
           </v-chip>
@@ -134,7 +134,7 @@ watch(
             v-if="!rom.multi && rom.crc_hash"
             size="small"
             label
-            class="mx-1 my-1"
+            class="ml-1"
           >
             CRC: {{ rom.crc_hash }}
           </v-chip>
diff --git a/frontend/src/components/Gallery/AppBar/Collection/Base.vue b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
index b867a1c7c..9bf32ecac 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
@@ -14,7 +14,15 @@ const auth = storeAuth();
 </script>
 
 <template>
-  <v-app-bar id="gallery-app-bar" elevation="0" density="compact">
+  <v-app-bar
+    id="gallery-app-bar"
+    elevation="0"
+    density="compact"
+    mode="shift"
+    app
+    fixed
+    top
+  >
     <filter-btn />
     <filter-text-field v-if="!xs" />
     <div v-if="xs" class="flex-grow-1" />
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 4e86a0515..2c72d6240 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import AdminMenu from "@/components/Gallery/AppBar/Platform/AdminMenu.vue";
 import FirmwareBtn from "@/components/Gallery/AppBar/Platform/FirmwareBtn.vue";
 import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
 import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
@@ -12,17 +11,23 @@ import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import storeRoms from "@/stores/roms";
+import { formatTimestamp } from "@/utils";
 import { storeToRefs } from "pinia";
-import { computed, ref } from "vue";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { computed, ref, inject } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
+const emitter = inject<Emitter<Events>>("emitter");
 const { xs } = useDisplay();
+const viewportWidth = ref(window.innerWidth);
 const romsStore = storeRoms();
 const { currentPlatform } = storeToRefs(romsStore);
 const auth = storeAuth();
 const navigationStore = storeNavigation();
-const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
+const { activePlatformInfoDrawer, activePlatformSettingsDrawer } =
+  storeToRefs(navigationStore);
 const selectedAspectRatio = ref(2);
 const aspectRatioOptions = computed(() => [
   {
@@ -42,6 +47,15 @@ const aspectRatioOptions = computed(() => [
   },
 ]);
 
+const platformInfoFields = [
+  { key: "name", label: "Name" },
+  { key: "slug", label: "Slug" },
+  { key: "fs_slug", label: "Filesystem folder name" },
+  { key: "category", label: "Category" },
+  { key: "generation", label: "Generation" },
+  { key: "family_name", label: "Family" },
+];
+
 function setAspectRatio() {
   // TODO: save aspect ratio on database
   console.log(aspectRatioOptions.value[selectedAspectRatio.value]);
@@ -49,13 +63,23 @@ function setAspectRatio() {
 </script>
 
 <template>
-  <v-app-bar id="gallery-app-bar" elevation="0" density="compact" class="pl-3">
+  <v-app-bar
+    id="gallery-app-bar"
+    elevation="0"
+    density="compact"
+    mode="shift"
+    app
+    fixed
+    top
+  >
     <platform-icon
       v-if="currentPlatform"
       :slug="currentPlatform.slug"
       :name="currentPlatform.name"
       :size="36"
-      class="mr-3 platform-icon"
+      class="mx-3 platform-icon"
+      :class="{ active: activePlatformInfoDrawer }"
+      @click="navigationStore.switchActivePlatformInfoDrawer"
     />
     <firmware-btn />
     <filter-btn />
@@ -63,43 +87,17 @@ function setAspectRatio() {
     <div v-if="xs" class="flex-grow-1" />
     <selecting-btn />
     <gallery-view-btn />
-    <!-- <v-menu location="bottom"> -->
-    <!-- <template #activator="{ props }"> -->
-    <v-btn
-      v-if="auth.scopes.includes('platforms.write')"
-      rounded="0"
-      variant="text"
-      class="mr-0"
-      icon="mdi-information"
-      :color="navigationStore.activePlatformInfoDrawer ? 'romm-accent-1' : ''"
-      @click="navigationStore.switchActivePlatformInfoDrawer"
-    />
-    <v-btn
-      v-if="auth.scopes.includes('platforms.write')"
-      rounded="0"
-      variant="text"
-      class="mr-0"
-      icon="mdi-cog"
-      :color="navigationStore.activePlatformInfoDrawer ? 'romm-accent-1' : ''"
-      @click="navigationStore.switchActivePlatformInfoDrawer"
-    />
-    <!-- </template> -->
-    <!-- <admin-menu /> -->
-    <!-- </v-menu> -->
   </v-app-bar>
 
   <v-navigation-drawer
-    id="platform-info-drawer"
-    location="right"
-    floating
-    width="345"
-    mobile
     v-model="activePlatformInfoDrawer"
-    :scrim="false"
+    floating
+    mobile
+    :width="xs ? viewportWidth : '500'"
     v-if="currentPlatform"
   >
-    <v-row no-gutters>
-      <v-col cols="12" md="auto">
+    <v-row no-gutters class="justify-center align-center">
+      <v-col cols="12">
         <div class="text-center">
           <platform-icon
             :slug="currentPlatform.slug"
@@ -108,55 +106,77 @@ function setAspectRatio() {
             :size="160"
           />
         </div>
-        <p class="text-center text-h6">{{ currentPlatform.name }}</p>
-        <v-card min-width="300" class="mx-6 my-8 bg-terciary" elevation="3">
+        <div class="text-center">
+          <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>
+        </div>
+        <div class="mt-4 text-center">
+          <a
+            v-if="currentPlatform.igdb_id"
+            style="text-decoration: none; color: inherit"
+            :href="currentPlatform.url"
+            target="_blank"
+          >
+            <v-chip size="x-small" @click.stop>
+              <span>IGDB</span>
+              <v-divider class="mx-2 border-opacity-25" vertical />
+              <span>ID: {{ currentPlatform.igdb_id }}</span>
+            </v-chip>
+          </a>
+          <v-chip
+            size="x-small"
+            class="ml-1"
+            @click.stop
+            :class="{ 'ml-1': currentPlatform.igdb_id }"
+            v-if="currentPlatform.moby_id"
+          >
+            <span>Mobygames</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>ID: {{ currentPlatform.moby_id }}</span>
+          </v-chip>
+        </div>
+        <v-card class="mt-4 mx-4 bg-terciary fill-width" elevation="0">
           <v-card-text class="pa-4">
-            <p>Name: {{ currentPlatform.name }}</p>
-            <br />
-            <p>Slug: {{ currentPlatform.slug }}</p>
-            <br />
-            <p>Filesystem folder name: {{ currentPlatform.fs_slug }}</p>
-            <br />
-            <p>IGDB id: {{ currentPlatform.igdb_id }}</p>
-            <br />
-            <p>SGDB id: {{ currentPlatform.sgdb_id }}</p>
-            <br />
-            <p>MOBY id: {{ currentPlatform.moby_id }}</p>
-            <br />
-            <p>Category: {{ currentPlatform.category }}</p>
-            <br />
-            <p>Generation: {{ currentPlatform.generation }}</p>
-            <br />
-            <p>Family name: {{ currentPlatform.family_name }}</p>
-            <br />
-            <p>IGDB url: {{ currentPlatform.url }}</p>
-            <br />
-            <p>Created at: {{ currentPlatform.created_at }}</p>
-            <br />
-            <p>Updated at: {{ currentPlatform.updated_at }}</p>
+            <template
+              v-for="(field, index) in platformInfoFields"
+              :key="field.key"
+            >
+              <div
+                v-if="currentPlatform[field.key]"
+                :class="{ 'mt-4': index !== 0 }"
+              >
+                <p class="text-subtitle-1 text-decoration-underline">
+                  {{ field.label }}
+                </p>
+                <p class="text-subtitle-2">
+                  {{
+                    field.format
+                      ? field.format(currentPlatform[field.key])
+                      : currentPlatform[field.key]
+                  }}
+                </p>
+              </div>
+            </template>
           </v-card-text>
         </v-card>
       </v-col>
-      <v-col>
-        <r-section
-          icon="mdi-aspect-ratio"
-          title="Cover aspect ratio"
-          elevation="0"
-        >
+    </v-row>
+    <v-row class="mt-4" no-gutters>
+      <v-col cols="12">
+        <r-section icon="mdi-aspect-ratio" title="UI Settings" elevation="0">
           <template #content>
             <v-item-group
               v-model="selectedAspectRatio"
               mandatory
               @update:model-value="setAspectRatio"
             >
-              <v-row no-gutters class="align-center">
-                <v-col
-                  cols="4"
-                  sm="3"
-                  md="2"
-                  class="pa-2 mx-auto"
-                  v-for="aspectRatio in aspectRatioOptions"
-                >
+              <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'"
@@ -177,7 +197,7 @@ function setAspectRatio() {
                             {{ aspectRatio.name }}
                           </p>
                         </v-img>
-                        <p class="text-center text-caption">
+                        <p class="text-center mx-2 text-caption">
                           {{ aspectRatio.source }}
                         </p>
                       </v-card-text>
@@ -188,18 +208,34 @@ function setAspectRatio() {
             </v-item-group>
           </template>
         </r-section>
-        <r-section icon="mdi-upload" title="Upload roms" elevation="0">
-          <template #content> </template>
-        </r-section>
-        <r-section icon="mdi-delete" title="Delete platform" elevation="0">
-          <template #content> </template>
+        <r-section
+          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 as Platform,
+                  )
+                "
+              >
+                <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-row no-gutters class="justify-center">
-      <v-col> </v-col>
-    </v-row>
   </v-navigation-drawer>
+
   <filter-drawer />
   <firmware-drawer />
 </template>
@@ -208,16 +244,20 @@ function setAspectRatio() {
 #gallery-app-bar {
   z-index: 999 !important;
 }
+.platform-icon {
+  cursor: pointer;
+  transition: filter 0.15s ease-in-out;
+}
 .platform-icon {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
 }
+.platform-icon:hover,
+.platform-icon.active {
+  filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-romm-accent-1)));
+}
 .platform-icon-big {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
 }
-#platform-info-drawer {
-  z-index: 3 !important;
-  height: calc(100dvh - 48px) !important;
-}
 .greyscale {
   filter: grayscale(100%);
 }
diff --git a/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
index e5a8f390f..326bee471 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
@@ -67,7 +67,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-navigation-drawer v-model="activeFirmwareDrawer" mobile location="bottom">
+  <v-navigation-drawer
+    v-model="activeFirmwareDrawer"
+    mobile
+    floating
+    location="bottom"
+  >
     <v-data-table
       :items="currentPlatform?.firmware ?? []"
       :width="mdAndUp ? '60vw' : '95vw'"
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
index 7bee95ee1..693b1e3df 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
@@ -78,11 +78,11 @@ function resetFilters() {
 
 <template>
   <v-navigation-drawer
-    @update:model-value="galleryFilterStore.switchActiveFilterDrawer()"
     floating
     width="300"
-    v-model="activeFilterDrawer"
     mobile
+    @update:model-value="galleryFilterStore.switchActiveFilterDrawer()"
+    v-model="activeFilterDrawer"
   >
     <v-list>
       <v-list-item v-if="xs">
diff --git a/frontend/src/components/common/Navigation/MainAppBar.vue b/frontend/src/components/common/Navigation/MainAppBar.vue
index 7f2c211e8..6b4327f1d 100644
--- a/frontend/src/components/common/Navigation/MainAppBar.vue
+++ b/frontend/src/components/common/Navigation/MainAppBar.vue
@@ -9,10 +9,13 @@ import UserBtn from "@/components/common/Navigation/UserBtn.vue";
 </script>
 <template>
   <v-app-bar
-    :elevation="0"
+    elevation="0"
     class="bg-primary justify-center px-1"
     mode="shift"
     height="45"
+    app
+    fixed
+    left
   >
     <template #prepend>
       <home-btn />
diff --git a/frontend/src/components/common/RSection.vue b/frontend/src/components/common/RSection.vue
index e638dbbcd..d655ee2a6 100644
--- a/frontend/src/components/common/RSection.vue
+++ b/frontend/src/components/common/RSection.vue
@@ -3,15 +3,16 @@ withDefaults(
   defineProps<{
     title: string;
     icon: string;
+    iconColor?: string;
   }>(),
-  { title: "", icon: "" },
+  { title: "", icon: "", iconColor: "" },
 );
 </script>
 <template>
   <v-card rounded="0">
     <v-toolbar class="bg-terciary" density="compact">
       <v-toolbar-title class="text-button">
-        <v-icon class="mr-3">{{ icon }}</v-icon>
+        <v-icon :color="iconColor" class="mr-3">{{ icon }}</v-icon>
         {{ title }}
       </v-toolbar-title>
       <slot name="toolbar-append"></slot>
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index 7478ca3e4..5e0e7cb9d 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -6,33 +6,30 @@ export default defineStore("navigation", {
     activeCollectionsDrawer: false,
     activeSettingsDrawer: false,
     activePlatformInfoDrawer: false,
+    activePlatformSettingsDrawer: false,
   }),
 
   actions: {
     switchActivePlatformsDrawer() {
-      this.activeCollectionsDrawer = false;
-      this.activeSettingsDrawer = false;
+      this.resetDrawers();
       this.activePlatformsDrawer = !this.activePlatformsDrawer;
-      this.activePlatformInfoDrawer = false;
     },
     switchActiveCollectionsDrawer() {
-      this.activePlatformsDrawer = false;
-      this.activeSettingsDrawer = false;
+      this.resetDrawers();
       this.activeCollectionsDrawer = !this.activeCollectionsDrawer;
-      this.activePlatformInfoDrawer = false;
     },
     switchActiveSettingsDrawer() {
-      this.activePlatformsDrawer = false;
-      this.activeCollectionsDrawer = false;
+      this.resetDrawers();
       this.activeSettingsDrawer = !this.activeSettingsDrawer;
-      this.activePlatformInfoDrawer = false;
     },
     switchActivePlatformInfoDrawer() {
-      this.activePlatformsDrawer = false;
-      this.activeCollectionsDrawer = false;
-      this.activeSettingsDrawer = false;
+      this.resetDrawers();
       this.activePlatformInfoDrawer = !this.activePlatformInfoDrawer;
     },
+    switchActivePlatformSettingsDrawer() {
+      this.resetDrawers();
+      this.activePlatformSettingsDrawer = !this.activePlatformSettingsDrawer;
+    },
     goHome() {
       this.resetDrawers();
       this.$router.push({ name: "dashboard" });
@@ -45,6 +42,8 @@ export default defineStore("navigation", {
       this.activePlatformsDrawer = false;
       this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = false;
+      this.activePlatformInfoDrawer = false;
+      this.activePlatformSettingsDrawer = false;
     },
   },
 });

From a765cacdad6d8f7810c663259585ae35e7e7c1ce Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 10:58:01 +0000
Subject: [PATCH 18/44] added scan button to platform info drawer

---
 .../Gallery/AppBar/Platform/Base.vue          | 46 +++++++++++++------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 2c72d6240..cbe3fbe96 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -8,21 +8,25 @@ import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vu
 import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import RSection from "@/components/common/RSection.vue";
+import socket from "@/services/socket";
+import storeHeartbeat from "@/stores/heartbeat";
 import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import storeRoms from "@/stores/roms";
-import { formatTimestamp } from "@/utils";
-import { storeToRefs } from "pinia";
+import storeScanning from "@/stores/scanning";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
-import { computed, ref, inject } from "vue";
+import { storeToRefs } from "pinia";
+import { computed, inject, ref } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
 const emitter = inject<Emitter<Events>>("emitter");
 const { xs } = useDisplay();
 const viewportWidth = ref(window.innerWidth);
+const heartbeat = storeHeartbeat();
 const romsStore = storeRoms();
+const scanningStore = storeScanning();
 const { currentPlatform } = storeToRefs(romsStore);
 const auth = storeAuth();
 const navigationStore = storeNavigation();
@@ -56,6 +60,19 @@ const platformInfoFields = [
   { key: "family_name", label: "Family" },
 ];
 
+// Functions
+async function scan() {
+  scanningStore.set(true);
+
+  if (!socket.connected) socket.connect();
+
+  socket.emit("scan", {
+    platforms: [romsStore.currentPlatform?.id],
+    type: "quick",
+    apis: heartbeat.getMetadataOptions().map((s) => s.value),
+  });
+}
+
 function setAspectRatio() {
   // TODO: save aspect ratio on database
   console.log(aspectRatioOptions.value[selectedAspectRatio.value]);
@@ -114,12 +131,20 @@ function setAspectRatio() {
             <v-icon class="text-romm-green mr-2">mdi-upload</v-icon>
             Upload roms
           </v-btn>
+          <v-btn
+            v-if="romsStore.currentPlatform?.id"
+            class="bg-terciary ml-2"
+            @click="scan"
+          >
+            <v-icon icon="mdi-magnify-scan" class="text-romm-accent-1 mr-2" />
+            Scan platform
+          </v-btn>
         </div>
         <div class="mt-4 text-center">
           <a
             v-if="currentPlatform.igdb_id"
             style="text-decoration: none; color: inherit"
-            :href="currentPlatform.url"
+            :href="currentPlatform.url ? currentPlatform.url : ''"
             target="_blank"
           >
             <v-chip size="x-small" @click.stop>
@@ -144,7 +169,7 @@ function setAspectRatio() {
           <v-card-text class="pa-4">
             <template
               v-for="(field, index) in platformInfoFields"
-              :key="field.key"
+              :key="field.key as string"
             >
               <div
                 v-if="currentPlatform[field.key]"
@@ -154,11 +179,7 @@ function setAspectRatio() {
                   {{ field.label }}
                 </p>
                 <p class="text-subtitle-2">
-                  {{
-                    field.format
-                      ? field.format(currentPlatform[field.key])
-                      : currentPlatform[field.key]
-                  }}
+                  {{ currentPlatform[field.key] }}
                 </p>
               </div>
             </template>
@@ -220,10 +241,7 @@ function setAspectRatio() {
                 class="text-romm-red bg-terciary"
                 variant="flat"
                 @click="
-                  emitter?.emit(
-                    'showDeletePlatformDialog',
-                    currentPlatform as Platform,
-                  )
+                  emitter?.emit('showDeletePlatformDialog', currentPlatform)
                 "
               >
                 <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>

From 9a08037a76c09f564cdb65cc0cb6f1f467d86bd2 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 16:57:02 +0000
Subject: [PATCH 19/44] improved scan platform btn

---
 .../Gallery/AppBar/Platform/Base.vue          | 21 ++++++++++++++++---
 frontend/src/views/Scan.vue                   |  9 ++------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index cbe3fbe96..3c2a37a39 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -27,6 +27,7 @@ const viewportWidth = ref(window.innerWidth);
 const heartbeat = storeHeartbeat();
 const romsStore = storeRoms();
 const scanningStore = storeScanning();
+const { scanning } = storeToRefs(scanningStore);
 const { currentPlatform } = storeToRefs(romsStore);
 const auth = storeAuth();
 const navigationStore = storeNavigation();
@@ -132,12 +133,26 @@ function setAspectRatio() {
             Upload roms
           </v-btn>
           <v-btn
-            v-if="romsStore.currentPlatform?.id"
-            class="bg-terciary ml-2"
+            :disabled="scanning"
+            rounded="4"
+            :loading="scanning"
             @click="scan"
+            class="ml-2 bg-terciary"
           >
-            <v-icon icon="mdi-magnify-scan" class="text-romm-accent-1 mr-2" />
+            <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 class="mt-4 text-center">
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index be10d73cb..95df10486 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -231,12 +231,7 @@ async function stopScan() {
           >mdi-magnify-scan</v-icon
         >
       </template>
-      <span
-        :class="{
-          'text-romm-accent-1': !scanning,
-        }"
-        >Scan</span
-      >
+      Scan
       <template #loader>
         <v-progress-circular
           color="romm-accent-1"
@@ -256,7 +251,7 @@ async function stopScan() {
       <template #prepend>
         <v-icon :color="scanning ? 'red' : ''">mdi-alert-octagon</v-icon>
       </template>
-      <span :class="{ 'text-romm-red': scanning }">Abort</span>
+      Abort
     </v-btn>
     <v-btn
       prepend-icon="mdi-table-cog"

From f2cdc12c79128c83035361149591c6d7336beb0f Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 16:59:42 +0000
Subject: [PATCH 20/44] added platform icon in recent games

---
 frontend/src/layouts/Dashboard/Recent.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index d285c56c7..eafb659a8 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -47,6 +47,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
             show-fav
             transform-scale
             show-action-bar
+            show-platform-icon
           />
         </v-col>
       </v-row>

From 055a72c08c6b90fad369739c01e43999113cb561 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 17:07:24 +0000
Subject: [PATCH 21/44] fixed switch main drawers

---
 frontend/src/stores/navigation.ts | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index 5e0e7cb9d..111948136 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -11,23 +11,23 @@ export default defineStore("navigation", {
 
   actions: {
     switchActivePlatformsDrawer() {
-      this.resetDrawers();
+      this.resetDrawersExcept("activePlatformsDrawer");
       this.activePlatformsDrawer = !this.activePlatformsDrawer;
     },
     switchActiveCollectionsDrawer() {
-      this.resetDrawers();
+      this.resetDrawersExcept("activeCollectionsDrawer");
       this.activeCollectionsDrawer = !this.activeCollectionsDrawer;
     },
     switchActiveSettingsDrawer() {
-      this.resetDrawers();
+      this.resetDrawersExcept("activeSettingsDrawer");
       this.activeSettingsDrawer = !this.activeSettingsDrawer;
     },
     switchActivePlatformInfoDrawer() {
-      this.resetDrawers();
+      this.resetDrawersExcept("activePlatformInfoDrawer");
       this.activePlatformInfoDrawer = !this.activePlatformInfoDrawer;
     },
     switchActivePlatformSettingsDrawer() {
-      this.resetDrawers();
+      this.resetDrawersExcept("activePlatformSettingsDrawer");
       this.activePlatformSettingsDrawer = !this.activePlatformSettingsDrawer;
     },
     goHome() {
@@ -45,5 +45,23 @@ export default defineStore("navigation", {
       this.activePlatformInfoDrawer = false;
       this.activePlatformSettingsDrawer = false;
     },
+    resetDrawersExcept(drawer: string) {
+      this.activePlatformsDrawer =
+        drawer === "activePlatformsDrawer" ? this.activePlatformsDrawer : false;
+      this.activeCollectionsDrawer =
+        drawer === "activeCollectionsDrawer"
+          ? this.activeCollectionsDrawer
+          : false;
+      this.activeSettingsDrawer =
+        drawer === "activeSettingsDrawer" ? this.activeSettingsDrawer : false;
+      this.activePlatformInfoDrawer =
+        drawer === "activePlatformInfoDrawer"
+          ? this.activePlatformInfoDrawer
+          : false;
+      this.activePlatformSettingsDrawer =
+        drawer === "activePlatformSettingsDrawer"
+          ? this.activePlatformSettingsDrawer
+          : false;
+    },
   },
 });

From ac7ae5337c4e901d38929499dab56cada640ac48 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 17:30:13 +0000
Subject: [PATCH 22/44] fixed typescript check

---
 .../src/components/Gallery/AppBar/Platform/Base.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 3c2a37a39..468776be5 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -184,17 +184,21 @@ function setAspectRatio() {
           <v-card-text class="pa-4">
             <template
               v-for="(field, index) in platformInfoFields"
-              :key="field.key as string"
+              :key="field.key"
             >
               <div
-                v-if="currentPlatform[field.key]"
+                v-if="
+                  currentPlatform[field.key as keyof typeof currentPlatform]
+                "
                 :class="{ 'mt-4': index !== 0 }"
               >
                 <p class="text-subtitle-1 text-decoration-underline">
                   {{ field.label }}
                 </p>
                 <p class="text-subtitle-2">
-                  {{ currentPlatform[field.key] }}
+                  {{
+                    currentPlatform[field.key as keyof typeof currentPlatform]
+                  }}
                 </p>
               </div>
             </template>

From fb0769741de262e7d22db7e0e83aae00ffebe169 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 17:32:48 +0000
Subject: [PATCH 23/44] added animation to platform icon

---
 frontend/src/components/Gallery/AppBar/Platform/Base.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 468776be5..67357cbfa 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -284,6 +284,7 @@ function setAspectRatio() {
 .platform-icon {
   cursor: pointer;
   transition: filter 0.15s ease-in-out;
+  transition: transform 0.15s ease-in-out;
 }
 .platform-icon {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
@@ -291,6 +292,7 @@ function setAspectRatio() {
 .platform-icon:hover,
 .platform-icon.active {
   filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-romm-accent-1)));
+  transform: scale(1.1);
 }
 .platform-icon-big {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));

From 31fa703434448c5506c1c60ec34154e32149b93c Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 17:44:46 +0000
Subject: [PATCH 24/44] added show status flag option

---
 .../src/components/common/Game/Card/Flags.vue   |  5 ++++-
 frontend/src/layouts/Settings/Interface.vue     | 17 +++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Game/Card/Flags.vue b/frontend/src/components/common/Game/Card/Flags.vue
index 978702f3c..96017fc3f 100644
--- a/frontend/src/components/common/Game/Card/Flags.vue
+++ b/frontend/src/components/common/Game/Card/Flags.vue
@@ -19,6 +19,9 @@ const showLanguages = isNull(localStorage.getItem("settings.showLanguages"))
 const showSiblings = isNull(localStorage.getItem("settings.showSiblings"))
   ? true
   : localStorage.getItem("settings.showSiblings") === "true";
+const showStatus = isNull(localStorage.getItem("settings.showStatus"))
+  ? true
+  : localStorage.getItem("settings.showStatus") === "true";
 
 const playingStatus = computed(() => {
   if (props.rom.rom_user.now_playing) return "now_playing";
@@ -51,7 +54,7 @@ const playingStatus = computed(() => {
     </span>
   </v-chip>
   <v-chip
-    v-if="playingStatus"
+    v-if="playingStatus && showStatus"
     class="translucent-dark mr-1 mt-1"
     density="compact"
     :title="getTextForStatus(playingStatus)"
diff --git a/frontend/src/layouts/Settings/Interface.vue b/frontend/src/layouts/Settings/Interface.vue
index ed339d14b..d2c0daf44 100644
--- a/frontend/src/layouts/Settings/Interface.vue
+++ b/frontend/src/layouts/Settings/Interface.vue
@@ -23,6 +23,9 @@ 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;
@@ -44,6 +47,11 @@ const toggleLanguages = (value: boolean) => {
   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",
@@ -79,6 +87,15 @@ const options = computed(() => [
     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>
 

From b670b68df33faeb2ba04185b2d229d745fb690a6 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 18:22:27 +0000
Subject: [PATCH 25/44] added default aspect ratio in platform table

---
 backend/alembic/versions/0027_platforms_data.py | 10 ++++++++++
 backend/endpoints/responses/platform.py         |  2 ++
 backend/models/platform.py                      |  9 ++++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/backend/alembic/versions/0027_platforms_data.py b/backend/alembic/versions/0027_platforms_data.py
index 94f0eff53..a61eaae38 100644
--- a/backend/alembic/versions/0027_platforms_data.py
+++ b/backend/alembic/versions/0027_platforms_data.py
@@ -8,6 +8,7 @@ Create Date: 2024-11-17 23:05:31.038917
 
 import sqlalchemy as sa
 from alembic import op
+from models.platform import DEFAULT_COVER_ASPECT_RATIO
 
 # revision identifiers, used by Alembic.
 revision = "0027_platforms_data"
@@ -31,6 +32,14 @@ def upgrade() -> None:
         batch_op.add_column(
             sa.Column("url_logo", sa.String(length=1000), nullable=True)
         )
+        batch_op.add_column(
+            sa.Column(
+                "aspect_ratio",
+                sa.Float(),
+                nullable=False,
+                server_default=str(DEFAULT_COVER_ASPECT_RATIO),
+            )
+        )
     # ### end Alembic commands ###
 
 
@@ -43,4 +52,5 @@ def downgrade() -> None:
         batch_op.drop_column("family_slug")
         batch_op.drop_column("generation")
         batch_op.drop_column("category")
+        batch_op.drop_column("aspect_ratio")
     # ### end Alembic commands ###
diff --git a/backend/endpoints/responses/platform.py b/backend/endpoints/responses/platform.py
index 8de9afb65..60946aa03 100644
--- a/backend/endpoints/responses/platform.py
+++ b/backend/endpoints/responses/platform.py
@@ -1,5 +1,6 @@
 from datetime import datetime
 
+from models.platform import DEFAULT_COVER_ASPECT_RATIO
 from pydantic import BaseModel, Field
 
 from .firmware import FirmwareSchema
@@ -22,6 +23,7 @@ class PlatformSchema(BaseModel):
     url_logo: str | None = None
     logo_path: str | None = None
     firmware: list[FirmwareSchema] = Field(default_factory=list)
+    aspect_ratio: float = DEFAULT_COVER_ASPECT_RATIO
     created_at: datetime
     updated_at: datetime
 
diff --git a/backend/models/platform.py b/backend/models/platform.py
index 5d31418d4..9ab998192 100644
--- a/backend/models/platform.py
+++ b/backend/models/platform.py
@@ -4,13 +4,16 @@ from typing import TYPE_CHECKING
 
 from models.base import BaseModel
 from models.rom import Rom
-from sqlalchemy import String, func, select
+from sqlalchemy import Float, String, func, select
 from sqlalchemy.orm import Mapped, column_property, mapped_column, relationship
 
 if TYPE_CHECKING:
     from models.firmware import Firmware
 
 
+DEFAULT_COVER_ASPECT_RATIO = 2 / 3
+
+
 class Platform(BaseModel):
     __tablename__ = "platforms"
 
@@ -34,6 +37,10 @@ class Platform(BaseModel):
         lazy="selectin", back_populates="platform"
     )
 
+    aspect_ratio: Mapped[float] = mapped_column(
+        Float, server_default=str(DEFAULT_COVER_ASPECT_RATIO)
+    )
+
     # This runs a subquery to get the count of roms for the platform
     rom_count = column_property(
         select(func.count(Rom.id)).where(Rom.platform_id == id).scalar_subquery()

From 151cd9734130bc702f8173d09c00bfd8e9a0c01a Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 22:27:55 +0000
Subject: [PATCH 26/44] fixed update aspect ratio at platform change

---
 .../__generated__/models/PlatformSchema.ts    |  1 +
 .../Gallery/AppBar/Platform/Base.vue          | 32 ++++++++++++++++---
 frontend/src/stores/navigation.ts             | 10 ------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/frontend/src/__generated__/models/PlatformSchema.ts b/frontend/src/__generated__/models/PlatformSchema.ts
index 991518060..652ceffae 100644
--- a/frontend/src/__generated__/models/PlatformSchema.ts
+++ b/frontend/src/__generated__/models/PlatformSchema.ts
@@ -22,6 +22,7 @@ export type PlatformSchema = {
     url_logo?: (string | null);
     logo_path?: (string | null);
     firmware?: Array<FirmwareSchema>;
+    aspect_ratio?: number;
     created_at: string;
     updated_at: string;
 };
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 67357cbfa..79c79038f 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -17,7 +17,7 @@ import storeScanning from "@/stores/scanning";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { computed, inject, ref } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -31,9 +31,8 @@ const { scanning } = storeToRefs(scanningStore);
 const { currentPlatform } = storeToRefs(romsStore);
 const auth = storeAuth();
 const navigationStore = storeNavigation();
-const { activePlatformInfoDrawer, activePlatformSettingsDrawer } =
-  storeToRefs(navigationStore);
-const selectedAspectRatio = ref(2);
+const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
+const selectedAspectRatio = ref(0);
 const aspectRatioOptions = computed(() => [
   {
     name: "2 / 3",
@@ -61,6 +60,23 @@ const platformInfoFields = [
   { key: "family_name", label: "Family" },
 ];
 
+watch(
+  () => currentPlatform.value?.aspect_ratio,
+  (aspectRatio) => {
+    if (aspectRatio) {
+      // Find the index of the aspect ratio option that matches the current aspect ratio
+      const defaultAspectRatio = aspectRatioOptions.value.findIndex(
+        (option) => Math.abs(option.size - aspectRatio) < 0.01, // Handle floating-point precision issues
+      );
+      // If a matching aspect ratio option is found, update the selectedAspectRatio
+      if (defaultAspectRatio !== -1) {
+        selectedAspectRatio.value = defaultAspectRatio;
+      }
+    }
+  },
+  { immediate: true }, // Execute the callback immediately with the current value
+);
+
 // Functions
 async function scan() {
   scanningStore.set(true);
@@ -208,7 +224,12 @@ function setAspectRatio() {
     </v-row>
     <v-row class="mt-4" no-gutters>
       <v-col cols="12">
-        <r-section icon="mdi-aspect-ratio" title="UI Settings" elevation="0">
+        <r-section
+          v-if="auth.scopes.includes('platforms.write')"
+          icon="mdi-aspect-ratio"
+          title="UI Settings"
+          elevation="0"
+        >
           <template #content>
             <v-item-group
               v-model="selectedAspectRatio"
@@ -249,6 +270,7 @@ function setAspectRatio() {
           </template>
         </r-section>
         <r-section
+          v-if="auth.scopes.includes('platforms.write')"
           icon="mdi-alert"
           icon-color="red"
           title="Danger zone"
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index 111948136..f948cf72a 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -6,7 +6,6 @@ export default defineStore("navigation", {
     activeCollectionsDrawer: false,
     activeSettingsDrawer: false,
     activePlatformInfoDrawer: false,
-    activePlatformSettingsDrawer: false,
   }),
 
   actions: {
@@ -26,10 +25,6 @@ export default defineStore("navigation", {
       this.resetDrawersExcept("activePlatformInfoDrawer");
       this.activePlatformInfoDrawer = !this.activePlatformInfoDrawer;
     },
-    switchActivePlatformSettingsDrawer() {
-      this.resetDrawersExcept("activePlatformSettingsDrawer");
-      this.activePlatformSettingsDrawer = !this.activePlatformSettingsDrawer;
-    },
     goHome() {
       this.resetDrawers();
       this.$router.push({ name: "dashboard" });
@@ -43,7 +38,6 @@ export default defineStore("navigation", {
       this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = false;
       this.activePlatformInfoDrawer = false;
-      this.activePlatformSettingsDrawer = false;
     },
     resetDrawersExcept(drawer: string) {
       this.activePlatformsDrawer =
@@ -58,10 +52,6 @@ export default defineStore("navigation", {
         drawer === "activePlatformInfoDrawer"
           ? this.activePlatformInfoDrawer
           : false;
-      this.activePlatformSettingsDrawer =
-        drawer === "activePlatformSettingsDrawer"
-          ? this.activePlatformSettingsDrawer
-          : false;
     },
   },
 });

From 00ba3a18d8e90dc8624712b61ccb450468a27255 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 22:38:18 +0000
Subject: [PATCH 27/44] fixed firmware pagnation warning

---
 .../components/Gallery/AppBar/Platform/FirmwareDrawer.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
index 326bee471..da358e847 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/FirmwareDrawer.vue
@@ -52,9 +52,11 @@ function deleteSelectedFirmware() {
 }
 
 function updateDataTablePages() {
-  pageCount.value = Math.ceil(
-    Number(currentPlatform.value?.firmware?.length) / itemsPerPage.value,
-  );
+  if (currentPlatform.value?.firmware) {
+    pageCount.value = Math.ceil(
+      Number(currentPlatform.value.firmware.length) / itemsPerPage.value,
+    );
+  }
 }
 
 watch(itemsPerPage, async () => {

From ec41d72a8f2245bcbb4993b0a4027f634aabcb1e Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Sun, 1 Dec 2024 23:51:46 +0000
Subject: [PATCH 28/44] set gameCard aspect ratio based on platform

---
 backend/endpoints/platform.py                 | 13 ++++++--
 .../Gallery/AppBar/Platform/Base.vue          | 32 +++++++++++++++++--
 .../src/components/common/Game/Card/Base.vue  |  6 ++--
 .../components/common/Game/Card/Related.vue   |  1 +
 .../common/Game/Dialog/MatchRom.vue           |  1 +
 .../src/components/common/SearchCover.vue     |  2 ++
 frontend/src/services/api/platform.ts         |  2 +-
 frontend/src/views/Gallery/Platform.vue       |  1 +
 frontend/src/views/Home.vue                   |  1 -
 9 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/backend/endpoints/platform.py b/backend/endpoints/platform.py
index 54d4388f3..b7b7daf3a 100644
--- a/backend/endpoints/platform.py
+++ b/backend/endpoints/platform.py
@@ -112,17 +112,26 @@ def get_platform(request: Request, id: int) -> PlatformSchema:
 
 
 @protected_route(router.put, "/platforms/{id}", [Scope.PLATFORMS_WRITE])
-async def update_platform(request: Request) -> MessageResponse:
+async def update_platform(request: Request, id: int) -> MessageResponse:
     """Update platform endpoint
 
     Args:
         request (Request): Fastapi Request object
+        id (int): Platform id
 
     Returns:
         MessageResponse: Standard message response
     """
+    data = await request.json()
+    platform_db = db_platform_handler.get_platform(id)
 
-    return {"msg": "Enpoint not available yet"}
+    if not platform_db:
+        raise PlatformNotFoundInDatabaseException(id)
+
+    platform_db.aspect_ratio = data.get("aspect_ratio", platform_db.aspect_ratio)
+    db_platform_handler.add_platform(platform_db)
+
+    return {"msg": "Platform updated successfully"}
 
 
 @protected_route(router.delete, "/platforms/{id}", [Scope.PLATFORMS_WRITE])
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 79c79038f..20009bf2d 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -19,6 +19,7 @@ import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { computed, inject, ref, watch } from "vue";
 import { useDisplay } from "vuetify";
+import platformApi from "@/services/api/platform";
 
 // Props
 const emitter = inject<Emitter<Events>>("emitter");
@@ -90,9 +91,34 @@ async function scan() {
   });
 }
 
-function setAspectRatio() {
-  // TODO: save aspect ratio on database
-  console.log(aspectRatioOptions.value[selectedAspectRatio.value]);
+async function setAspectRatio() {
+  if (currentPlatform.value) {
+    const selectedOption = aspectRatioOptions.value[selectedAspectRatio.value];
+    platformApi
+      .updatePlatform({
+        platform: {
+          ...currentPlatform.value,
+          aspect_ratio: selectedOption.size,
+        },
+      })
+      .then(({ data }) => {
+        emitter?.emit("snackbarShow", {
+          msg: data.msg,
+          icon: "mdi-check-bold",
+          color: "green",
+        });
+        currentPlatform.value.aspect_ratio = selectedOption.size;
+      })
+      .catch((error) => {
+        emitter?.emit("snackbarShow", {
+          msg: `Failed to update aspect ratio: ${
+            error.response?.data?.msg || error.message
+          }`,
+          icon: "mdi-close-circle",
+          color: "red",
+        });
+      });
+  }
 }
 </script>
 
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index a31d57933..292a73ad6 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -16,6 +16,7 @@ import { useTheme } from "vuetify";
 const props = withDefaults(
   defineProps<{
     rom: SimpleRom | SearchRomSchema;
+    aspectRatio: number;
     transformScale?: boolean;
     titleOnHover?: boolean;
     showFlags?: boolean;
@@ -29,6 +30,7 @@ const props = withDefaults(
     src?: string;
   }>(),
   {
+    aspectRatio: 2 / 3,
     transformScale: false,
     titleOnHover: false,
     showFlags: false,
@@ -124,7 +126,7 @@ onMounted(() => {
                   ? rom.igdb_url_cover
                   : rom.moby_url_cover
           "
-          :aspect-ratio="galleryViewStore.aspectRatioCover"
+          :aspect-ratio="aspectRatio"
         >
           <div v-bind="props" style="position: absolute; top: 0; width: 100%">
             <template v-if="titleOnHover">
@@ -199,7 +201,7 @@ onMounted(() => {
             <v-img
               :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
               cover
-              :aspect-ratio="galleryViewStore.aspectRatioCover"
+              :aspect-ratio="aspectRatio"
             ></v-img>
           </template>
           <template #placeholder>
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index c5a4b1024..18dd52b42 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -30,6 +30,7 @@ const handleClick = () => {
       open-delay="1000"
       >{{ game.name }}</v-tooltip
     >
+    <!-- TODO: fix aspect ratio -->
     <v-img
       v-bind="props"
       :src="
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 373cc6b11..9dc25f823 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -390,6 +390,7 @@ onBeforeUnmount(() => {
                     :elevation="isHovering ? 20 : 3"
                     @click="selectCover(source)"
                   >
+                    <!-- TODO: fix aspect ratio -->
                     <v-img
                       :src="
                         !source.url_cover
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index 9ea057ead..bd9db2b84 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -178,6 +178,7 @@ onBeforeUnmount(() => {
                 v-for="resource in game.resources"
               >
                 <v-hover v-slot="{ isHovering, props: hoverProps }">
+                  <!-- TODO: fix aspect ratio -->
                   <v-img
                     v-bind="hoverProps"
                     :class="{ 'on-hover': isHovering }"
@@ -188,6 +189,7 @@ onBeforeUnmount(() => {
                     cover
                   >
                     <template #error>
+                      <!-- TODO: fix aspect ratio -->
                       <v-img
                         :src="resource.url"
                         cover
diff --git a/frontend/src/services/api/platform.ts b/frontend/src/services/api/platform.ts
index 12ad138e7..12bb31396 100644
--- a/frontend/src/services/api/platform.ts
+++ b/frontend/src/services/api/platform.ts
@@ -31,7 +31,7 @@ async function updatePlatform({
 }: {
   platform: Platform;
 }): Promise<{ data: MessageResponse }> {
-  return api.delete(`/platforms/${platform.id}`);
+  return api.put(`/platforms/${platform.id}`, platform);
 }
 
 async function deletePlatform({
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 652cf093c..7dacb27b1 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -325,6 +325,7 @@ onBeforeUnmount(() => {
             :key="rom.updated_at"
             :rom="rom"
             title-on-hover
+            :aspect-ratio="currentPlatform.aspect_ratio"
             show-flags
             show-action-bar
             show-fav
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 8ac6d929e..a139734b4 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -30,7 +30,6 @@ import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlat
 import SearchCoverDialog from "@/components/common/SearchCover.vue";
 import collectionApi from "@/services/api/collection";
 import platformApi from "@/services/api/platform";
-import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
 import storeCollections from "@/stores/collections";
 import storeNavigation from "@/stores/navigation";

From 16b828c08288da41d7928665deedbfd9523716ed Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 00:03:16 +0000
Subject: [PATCH 29/44] fixed mandatory aspect-ratio on game card

---
 frontend/src/components/Details/Info/GameInfo.vue | 2 --
 frontend/src/components/common/Game/Card/Base.vue | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index c8906bb6c..461ece3f7 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import storeGalleryFilter, { type FilterType } from "@/stores/galleryFilter";
 import type { DetailedRom } from "@/stores/roms";
-import storeGalleryView from "@/stores/galleryView";
 import { ref } from "vue";
 import { useDisplay } from "vuetify";
 import { useRouter } from "vue-router";
@@ -10,7 +9,6 @@ import { useRouter } from "vue-router";
 const props = defineProps<{ rom: DetailedRom }>();
 const { xs } = useDisplay();
 const show = ref(false);
-const galleryViewStore = storeGalleryView();
 const carousel = ref(0);
 const router = useRouter();
 const filters = ["genres", "franchises", "collections", "companies"] as const;
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 292a73ad6..791803bb7 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -16,7 +16,7 @@ import { useTheme } from "vuetify";
 const props = withDefaults(
   defineProps<{
     rom: SimpleRom | SearchRomSchema;
-    aspectRatio: number;
+    aspectRatio?: number;
     transformScale?: boolean;
     titleOnHover?: boolean;
     showFlags?: boolean;

From 0428ddb6f0e3c45deba0a2b0275f665f9907ad65 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 00:35:04 +0000
Subject: [PATCH 30/44] fixed min-height on RDialog

---
 frontend/src/components/common/RDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/RDialog.vue b/frontend/src/components/common/RDialog.vue
index 16da5e952..c60aa02a0 100644
--- a/frontend/src/components/common/RDialog.vue
+++ b/frontend/src/components/common/RDialog.vue
@@ -62,7 +62,7 @@ onMounted(() => {
     no-click-animation
     persistent
   >
-    <v-card rounded="0" :height="height">
+    <v-card rounded="0" :min-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" />

From 94d7de996edf4ed43b88b3d0f84378a9331d83d4 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 09:35:09 +0000
Subject: [PATCH 31/44] fixed RDialog dimensions

---
 frontend/src/components/common/RDialog.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/common/RDialog.vue b/frontend/src/components/common/RDialog.vue
index c60aa02a0..9bd0be430 100644
--- a/frontend/src/components/common/RDialog.vue
+++ b/frontend/src/components/common/RDialog.vue
@@ -16,8 +16,8 @@ withDefaults(
     scrollContent?: boolean;
     showRommIcon?: boolean;
     icon?: string | null;
-    width?: string;
-    height?: string;
+    width?: number | string;
+    height?: number | string;
   }>(),
   {
     loadingCondition: false,
@@ -27,8 +27,8 @@ withDefaults(
     scrollContent: false,
     showRommIcon: false,
     icon: null,
-    width: "",
-    height: "",
+    width: "auto",
+    height: "auto",
   },
 );
 const emit = defineEmits(["update:modelValue", "close"]);
@@ -62,7 +62,7 @@ onMounted(() => {
     no-click-animation
     persistent
   >
-    <v-card rounded="0" :min-height="height">
+    <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" />
@@ -90,12 +90,12 @@ onMounted(() => {
 
       <v-card-text
         id="r-dialog-content"
-        class="pa-1"
+        class="pa-1 d-flex flex-column"
         :class="{ scroll: scrollContent }"
       >
         <v-row
           v-if="loadingCondition"
-          class="justify-center align-center h-100"
+          class="justify-center align-center flex-grow-1"
           no-gutters
         >
           <v-progress-circular
@@ -108,7 +108,7 @@ onMounted(() => {
 
         <v-row
           v-if="!loadingCondition && emptyStateCondition"
-          class="justify-center align-center h-100"
+          class="justify-center align-center flex-grow-1"
           no-gutters
         >
           <empty-game v-if="emptyStateType == 'game'" />
@@ -117,7 +117,10 @@ onMounted(() => {
           <slot v-else name="emptyState"></slot>
         </v-row>
 
-        <slot name="content"></slot>
+        <slot
+          v-if="!loadingCondition && !emptyStateCondition"
+          name="content"
+        ></slot>
       </v-card-text>
       <v-card-text v-if="hasAppendSlot" class="pa-1">
         <slot name="append"></slot>

From 9b2f487d01fcaac6f7b2aefc986273ea3a02842c Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 09:45:46 +0000
Subject: [PATCH 32/44] fixed typecheck

---
 frontend/src/views/Gallery/Platform.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 7dacb27b1..421c4c8a1 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -322,6 +322,7 @@ onBeforeUnmount(() => {
           :xl="views[currentView]['size-xl']"
         >
           <game-card
+            v-if="currentPlatform"
             :key="rom.updated_at"
             :rom="rom"
             title-on-hover

From de93bb4f7e82dc67a0bb3f9e36f12642b47019e7 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 09:46:00 +0000
Subject: [PATCH 33/44] extracted platform info drawer to a component

---
 .../Gallery/AppBar/Platform/Base.vue          | 249 +--------------
 .../AppBar/Platform/PlatformInfoDrawer.vue    | 292 ++++++++++++++++++
 2 files changed, 299 insertions(+), 242 deletions(-)
 create mode 100644 frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue

diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 20009bf2d..e2da6c33b 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -1,36 +1,23 @@
 <script setup lang="ts">
 import FirmwareBtn from "@/components/Gallery/AppBar/Platform/FirmwareBtn.vue";
 import FirmwareDrawer from "@/components/Gallery/AppBar/Platform/FirmwareDrawer.vue";
+import PlatformInfoDrawer from "@/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue";
 import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
 import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
 import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
 import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
 import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
-import RSection from "@/components/common/RSection.vue";
-import socket from "@/services/socket";
-import storeHeartbeat from "@/stores/heartbeat";
-import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import storeRoms from "@/stores/roms";
-import storeScanning from "@/stores/scanning";
-import type { Events } from "@/types/emitter";
-import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { computed, inject, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useDisplay } from "vuetify";
-import platformApi from "@/services/api/platform";
 
 // Props
-const emitter = inject<Emitter<Events>>("emitter");
 const { xs } = useDisplay();
-const viewportWidth = ref(window.innerWidth);
-const heartbeat = storeHeartbeat();
 const romsStore = storeRoms();
-const scanningStore = storeScanning();
-const { scanning } = storeToRefs(scanningStore);
 const { currentPlatform } = storeToRefs(romsStore);
-const auth = storeAuth();
 const navigationStore = storeNavigation();
 const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
 const selectedAspectRatio = ref(0);
@@ -52,15 +39,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" },
-  { key: "generation", label: "Generation" },
-  { key: "family_name", label: "Family" },
-];
-
 watch(
   () => currentPlatform.value?.aspect_ratio,
   (aspectRatio) => {
@@ -77,49 +55,6 @@ watch(
   },
   { immediate: true }, // Execute the callback immediately with the current value
 );
-
-// Functions
-async function scan() {
-  scanningStore.set(true);
-
-  if (!socket.connected) socket.connect();
-
-  socket.emit("scan", {
-    platforms: [romsStore.currentPlatform?.id],
-    type: "quick",
-    apis: heartbeat.getMetadataOptions().map((s) => s.value),
-  });
-}
-
-async function setAspectRatio() {
-  if (currentPlatform.value) {
-    const selectedOption = aspectRatioOptions.value[selectedAspectRatio.value];
-    platformApi
-      .updatePlatform({
-        platform: {
-          ...currentPlatform.value,
-          aspect_ratio: selectedOption.size,
-        },
-      })
-      .then(({ data }) => {
-        emitter?.emit("snackbarShow", {
-          msg: data.msg,
-          icon: "mdi-check-bold",
-          color: "green",
-        });
-        currentPlatform.value.aspect_ratio = selectedOption.size;
-      })
-      .catch((error) => {
-        emitter?.emit("snackbarShow", {
-          msg: `Failed to update aspect ratio: ${
-            error.response?.data?.msg || error.message
-          }`,
-          icon: "mdi-close-circle",
-          color: "red",
-        });
-      });
-  }
-}
 </script>
 
 <template>
@@ -144,183 +79,13 @@ async function setAspectRatio() {
     <firmware-btn />
     <filter-btn />
     <filter-text-field v-if="!xs" />
-    <div v-if="xs" class="flex-grow-1" />
-    <selecting-btn />
-    <gallery-view-btn />
+    <template #append>
+      <selecting-btn />
+      <gallery-view-btn />
+    </template>
   </v-app-bar>
 
-  <v-navigation-drawer
-    v-model="activePlatformInfoDrawer"
-    floating
-    mobile
-    :width="xs ? viewportWidth : '500'"
-    v-if="currentPlatform"
-  >
-    <v-row no-gutters class="justify-center align-center">
-      <v-col cols="12">
-        <div class="text-center">
-          <platform-icon
-            :slug="currentPlatform.slug"
-            :name="currentPlatform.name"
-            class="platform-icon-big"
-            :size="160"
-          />
-        </div>
-        <div class="text-center">
-          <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 class="mt-4 text-center">
-          <a
-            v-if="currentPlatform.igdb_id"
-            style="text-decoration: none; color: inherit"
-            :href="currentPlatform.url ? currentPlatform.url : ''"
-            target="_blank"
-          >
-            <v-chip size="x-small" @click.stop>
-              <span>IGDB</span>
-              <v-divider class="mx-2 border-opacity-25" vertical />
-              <span>ID: {{ currentPlatform.igdb_id }}</span>
-            </v-chip>
-          </a>
-          <v-chip
-            size="x-small"
-            class="ml-1"
-            @click.stop
-            :class="{ 'ml-1': currentPlatform.igdb_id }"
-            v-if="currentPlatform.moby_id"
-          >
-            <span>Mobygames</span>
-            <v-divider class="mx-2 border-opacity-25" vertical />
-            <span>ID: {{ currentPlatform.moby_id }}</span>
-          </v-chip>
-        </div>
-        <v-card class="mt-4 mx-4 bg-terciary fill-width" elevation="0">
-          <v-card-text class="pa-4">
-            <template
-              v-for="(field, index) in platformInfoFields"
-              :key="field.key"
-            >
-              <div
-                v-if="
-                  currentPlatform[field.key as keyof typeof currentPlatform]
-                "
-                :class="{ 'mt-4': index !== 0 }"
-              >
-                <p class="text-subtitle-1 text-decoration-underline">
-                  {{ field.label }}
-                </p>
-                <p class="text-subtitle-2">
-                  {{
-                    currentPlatform[field.key as keyof typeof currentPlatform]
-                  }}
-                </p>
-              </div>
-            </template>
-          </v-card-text>
-        </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-aspect-ratio"
-          title="UI Settings"
-          elevation="0"
-        >
-          <template #content>
-            <v-item-group
-              v-model="selectedAspectRatio"
-              mandatory
-              @update:model-value="setAspectRatio"
-            >
-              <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-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"
-                        >
-                          <p class="text-h5 text-romm-white">
-                            {{ aspectRatio.name }}
-                          </p>
-                        </v-img>
-                        <p class="text-center mx-2 text-caption">
-                          {{ aspectRatio.source }}
-                        </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-navigation-drawer>
-
+  <platform-info-drawer />
   <filter-drawer />
   <firmware-drawer />
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
new file mode 100644
index 000000000..4650da457
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import PlatformIcon from "@/components/common/Platform/Icon.vue";
+import RSection from "@/components/common/RSection.vue";
+import socket from "@/services/socket";
+import storeHeartbeat from "@/stores/heartbeat";
+import storeAuth from "@/stores/auth";
+import storeNavigation from "@/stores/navigation";
+import storeRoms from "@/stores/roms";
+import storeScanning from "@/stores/scanning";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { computed, inject, ref, watch } from "vue";
+import { useDisplay } from "vuetify";
+import platformApi from "@/services/api/platform";
+
+// Props
+const emitter = inject<Emitter<Events>>("emitter");
+const { xs } = useDisplay();
+const viewportWidth = ref(window.innerWidth);
+const heartbeat = storeHeartbeat();
+const romsStore = storeRoms();
+const scanningStore = storeScanning();
+const { scanning } = storeToRefs(scanningStore);
+const { currentPlatform } = storeToRefs(romsStore);
+const auth = storeAuth();
+const navigationStore = storeNavigation();
+const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
+const selectedAspectRatio = ref(0);
+const aspectRatioOptions = computed(() => [
+  {
+    name: "2 / 3",
+    size: 2 / 3,
+    source: "SteamGridDB",
+  },
+  {
+    name: "3 / 4",
+    size: 3 / 4,
+    source: "IGDB / MobyGames",
+  },
+  {
+    name: "1 / 1",
+    size: 1 / 1,
+    source: "Old squared cases",
+  },
+]);
+
+const platformInfoFields = [
+  { key: "name", label: "Name" },
+  { key: "slug", label: "Slug" },
+  { key: "fs_slug", label: "Filesystem folder name" },
+  { key: "category", label: "Category" },
+  { key: "generation", label: "Generation" },
+  { key: "family_name", label: "Family" },
+];
+
+watch(
+  () => currentPlatform.value?.aspect_ratio,
+  (aspectRatio) => {
+    if (aspectRatio) {
+      // Find the index of the aspect ratio option that matches the current aspect ratio
+      const defaultAspectRatio = aspectRatioOptions.value.findIndex(
+        (option) => Math.abs(option.size - aspectRatio) < 0.01, // Handle floating-point precision issues
+      );
+      // If a matching aspect ratio option is found, update the selectedAspectRatio
+      if (defaultAspectRatio !== -1) {
+        selectedAspectRatio.value = defaultAspectRatio;
+      }
+    }
+  },
+  { immediate: true }, // Execute the callback immediately with the current value
+);
+
+// Functions
+async function scan() {
+  scanningStore.set(true);
+
+  if (!socket.connected) socket.connect();
+
+  socket.emit("scan", {
+    platforms: [romsStore.currentPlatform?.id],
+    type: "quick",
+    apis: heartbeat.getMetadataOptions().map((s) => s.value),
+  });
+}
+
+async function setAspectRatio() {
+  if (currentPlatform.value) {
+    const selectedOption = aspectRatioOptions.value[selectedAspectRatio.value];
+    platformApi
+      .updatePlatform({
+        platform: {
+          ...currentPlatform.value,
+          aspect_ratio: selectedOption.size,
+        },
+      })
+      .then(({ data }) => {
+        emitter?.emit("snackbarShow", {
+          msg: data.msg,
+          icon: "mdi-check-bold",
+          color: "green",
+        });
+        if (currentPlatform.value) {
+          currentPlatform.value.aspect_ratio = selectedOption.size;
+        }
+      })
+      .catch((error) => {
+        emitter?.emit("snackbarShow", {
+          msg: `Failed to update aspect ratio: ${
+            error.response?.data?.msg || error.message
+          }`,
+          icon: "mdi-close-circle",
+          color: "red",
+        });
+      });
+  }
+}
+</script>
+
+<template>
+  <v-navigation-drawer
+    v-model="activePlatformInfoDrawer"
+    floating
+    mobile
+    :width="xs ? viewportWidth : '500'"
+    v-if="currentPlatform"
+  >
+    <v-row no-gutters class="justify-center align-center">
+      <v-col cols="12">
+        <div class="text-center">
+          <platform-icon
+            :slug="currentPlatform.slug"
+            :name="currentPlatform.name"
+            class="platform-icon-big"
+            :size="160"
+          />
+        </div>
+        <div class="text-center">
+          <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 class="mt-4 text-center">
+          <a
+            v-if="currentPlatform.igdb_id"
+            style="text-decoration: none; color: inherit"
+            :href="currentPlatform.url ? currentPlatform.url : ''"
+            target="_blank"
+          >
+            <v-chip size="x-small" @click.stop>
+              <span>IGDB</span>
+              <v-divider class="mx-2 border-opacity-25" vertical />
+              <span>ID: {{ currentPlatform.igdb_id }}</span>
+            </v-chip>
+          </a>
+          <v-chip
+            size="x-small"
+            class="ml-1"
+            @click.stop
+            :class="{ 'ml-1': currentPlatform.igdb_id }"
+            v-if="currentPlatform.moby_id"
+          >
+            <span>Mobygames</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>ID: {{ currentPlatform.moby_id }}</span>
+          </v-chip>
+        </div>
+        <v-card class="mt-4 mx-4 bg-terciary fill-width" elevation="0">
+          <v-card-text class="pa-4">
+            <template
+              v-for="(field, index) in platformInfoFields"
+              :key="field.key"
+            >
+              <div
+                v-if="
+                  currentPlatform[field.key as keyof typeof currentPlatform]
+                "
+                :class="{ 'mt-4': index !== 0 }"
+              >
+                <p class="text-subtitle-1 text-decoration-underline">
+                  {{ field.label }}
+                </p>
+                <p class="text-subtitle-2">
+                  {{
+                    currentPlatform[field.key as keyof typeof currentPlatform]
+                  }}
+                </p>
+              </div>
+            </template>
+          </v-card-text>
+        </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-aspect-ratio"
+          title="UI Settings"
+          elevation="0"
+        >
+          <template #content>
+            <v-item-group
+              v-model="selectedAspectRatio"
+              mandatory
+              @update:model-value="setAspectRatio"
+            >
+              <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-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"
+                        >
+                          <p class="text-h5 text-romm-white">
+                            {{ aspectRatio.name }}
+                          </p>
+                        </v-img>
+                        <p class="text-center mx-2 text-caption">
+                          {{ aspectRatio.source }}
+                        </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-navigation-drawer>
+</template>

From d5f944a875ec5a9a7d97383349f0b2ba94b7cf25 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 10:06:17 +0000
Subject: [PATCH 34/44] unified aspect ratios

---
 .../src/components/Details/Info/GameInfo.vue    | 12 ++++++++----
 .../components/Gallery/AppBar/Platform/Base.vue |  3 ---
 .../AppBar/Platform/PlatformInfoDrawer.vue      |  9 +++++++--
 .../src/components/common/Collection/Card.vue   |  4 ++--
 .../src/components/common/Game/Card/Related.vue |  4 ++--
 .../components/common/Game/Dialog/MatchRom.vue  |  6 ++++--
 frontend/src/components/common/SearchCover.vue  |  4 ++--
 frontend/src/layouts/Dashboard/Recent.vue       |  5 ++++-
 frontend/src/stores/galleryView.ts              |  6 +++---
 frontend/src/stores/platforms.ts                |  6 +++++-
 frontend/src/views/EmulatorJS/Base.vue          | 17 +++++++----------
 frontend/src/views/RuffleRS/Base.vue            | 17 +++++++----------
 12 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index 461ece3f7..e8fbf7a0e 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import storeGalleryFilter, { type FilterType } from "@/stores/galleryFilter";
+import { type FilterType } from "@/stores/galleryFilter";
+import storeGalleryView from "@/stores/galleryView";
 import type { DetailedRom } from "@/stores/roms";
+import { storeToRefs } from "pinia";
 import { ref } from "vue";
-import { useDisplay } from "vuetify";
 import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
 
 // Props
 const props = defineProps<{ rom: DetailedRom }>();
@@ -12,6 +14,8 @@ const show = ref(false);
 const carousel = ref(0);
 const router = useRouter();
 const filters = ["genres", "franchises", "collections", "companies"] as const;
+const galleryViewStore = storeGalleryView();
+const { defaultAspectRatioScreenshot } = storeToRefs(galleryViewStore);
 
 // Functions
 function onFilterClick(filter: FilterType, value: string) {
@@ -117,7 +121,7 @@ function onFilterClick(filter: FilterType, value: string) {
                   frameborder="0"
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   referrerpolicy="strict-origin-when-cross-origin"
-                  style="aspect-ratio: 16 / 9"
+                  :style="`aspect-ratio: ${defaultAspectRatioScreenshot}`"
                   allowfullscreen
                 ></iframe>
               </v-carousel-item>
@@ -174,7 +178,7 @@ function onFilterClick(filter: FilterType, value: string) {
                     frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                     referrerpolicy="strict-origin-when-cross-origin"
-                    style="aspect-ratio: 16 / 9"
+                    :style="`aspect-ratio: ${defaultAspectRatioScreenshot}`"
                     allowfullscreen
                   ></iframe>
                 </v-carousel-item>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index e2da6c33b..184e6e7b8 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -110,7 +110,4 @@ watch(
 .platform-icon-big {
   filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
 }
-.greyscale {
-  filter: grayscale(100%);
-}
 </style>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 4650da457..6a883553e 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import RSection from "@/components/common/RSection.vue";
+import platformApi from "@/services/api/platform";
 import socket from "@/services/socket";
-import storeHeartbeat from "@/stores/heartbeat";
 import storeAuth from "@/stores/auth";
+import storeHeartbeat from "@/stores/heartbeat";
 import storeNavigation from "@/stores/navigation";
 import storeRoms from "@/stores/roms";
 import storeScanning from "@/stores/scanning";
@@ -12,7 +13,6 @@ import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { computed, inject, ref, watch } from "vue";
 import { useDisplay } from "vuetify";
-import platformApi from "@/services/api/platform";
 
 // Props
 const emitter = inject<Emitter<Events>>("emitter");
@@ -290,3 +290,8 @@ async function setAspectRatio() {
     </v-row>
   </v-navigation-drawer>
 </template>
+<style scoped>
+.greyscale {
+  filter: grayscale(100%);
+}
+</style>
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
index 552e4f2d0..9f1221270 100644
--- a/frontend/src/components/common/Collection/Card.vue
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -68,7 +68,7 @@ const galleryViewStore = storeGalleryView();
                 ? `/assets/default/cover/small_${theme.global.name.value}_fav.png`
                 : `/assets/default/cover/small_${theme.global.name.value}_collection.png`
         "
-        :aspect-ratio="galleryViewStore.aspectRatioCollection"
+        :aspect-ratio="galleryViewStore.defaultAspectRatioCollection"
       >
         <div class="position-absolute append-inner">
           <slot name="append-inner"></slot>
@@ -78,7 +78,7 @@ const galleryViewStore = storeGalleryView();
           <v-img
             :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
             cover
-            :aspect-ratio="galleryViewStore.aspectRatioCollection"
+            :aspect-ratio="galleryViewStore.defaultAspectRatioCollection"
           ></v-img>
         </template>
         <template #placeholder>
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index 18dd52b42..3be15c761 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IGDBRelatedGame } from "@/__generated__";
-import { useTheme } from "vuetify";
 import storeGalleryView from "@/stores/galleryView";
+import { useTheme } from "vuetify";
 
 // Props
 const props = defineProps<{
@@ -38,7 +38,7 @@ const handleClick = () => {
           ? `https:${game.cover_url.replace('t_thumb', 't_cover_big')}`
           : `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
       "
-      :aspect-ratio="galleryViewStore.aspectRatioCover"
+      :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
       cover
       lazy
       ><v-chip
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 9dc25f823..351415d70 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -3,8 +3,8 @@ import type { SearchRomSchema } from "@/__generated__";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
-import storeHeartbeat from "@/stores/heartbeat";
 import storeGalleryView from "@/stores/galleryView";
+import storeHeartbeat from "@/stores/heartbeat";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -397,7 +397,9 @@ onBeforeUnmount(() => {
                           ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
                           : source.url_cover
                       "
-                      :aspect-ratio="galleryViewStore.aspectRatioCover"
+                      :aspect-ratio="
+                        galleryViewStore.defaultAspectRatioCollection
+                      "
                       cover
                       lazy
                     >
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index bd9db2b84..1af108689 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -184,7 +184,7 @@ onBeforeUnmount(() => {
                     :class="{ 'on-hover': isHovering }"
                     class="transform-scale pointer"
                     @click="selectCover(resource.url)"
-                    :aspect-ratio="galleryViewStore.aspectRatioCover"
+                    :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
                     :src="resource.thumb"
                     cover
                   >
@@ -193,7 +193,7 @@ onBeforeUnmount(() => {
                       <v-img
                         :src="resource.url"
                         cover
-                        :aspect-ratio="galleryViewStore.aspectRatioCover"
+                        :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
                       ></v-img>
                     </template>
                     <template #placeholder>
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index eafb659a8..e97d0accb 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RSection from "@/components/common/RSection.vue";
+import storePlatforms from "@/stores/platforms";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import { views } from "@/utils";
 import { storeToRefs } from "pinia";
@@ -9,6 +10,7 @@ import { useRouter } from "vue-router";
 // Props
 const romsStore = storeRoms();
 const { recentRoms } = storeToRefs(romsStore);
+const platfotmsStore = storePlatforms();
 const router = useRouter();
 
 // Functions
@@ -27,7 +29,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" no-gutters>
+      <v-row class="flex-nowrap overflow-x-auto align-center" no-gutters>
         <v-col
           v-for="rom in recentRoms"
           :key="rom.id"
@@ -42,6 +44,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
             :key="rom.updated_at"
             @click="onGameClick"
             :rom="rom"
+            :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
             title-on-hover
             show-flags
             show-fav
diff --git a/frontend/src/stores/galleryView.ts b/frontend/src/stores/galleryView.ts
index 61326cd9a..d3064f4ef 100644
--- a/frontend/src/stores/galleryView.ts
+++ b/frontend/src/stores/galleryView.ts
@@ -5,9 +5,9 @@ export default defineStore("galleryView", {
     currentView: JSON.parse(
       localStorage.getItem("currentView") ?? "0",
     ) as number,
-    aspectRatioCover: 2 / 3,
-    aspectRatioCollection: 2 / 3,
-    aspectRatioScreenshot: 16 / 9,
+    defaultAspectRatioCover: 2 / 3,
+    defaultAspectRatioCollection: 2 / 3,
+    defaultAspectRatioScreenshot: 16 / 9,
     activeFirmwareDrawer: false,
     scrolledToTop: false,
     scroll: 0,
diff --git a/frontend/src/stores/platforms.ts b/frontend/src/stores/platforms.ts
index 171b8b347..4cabdf753 100644
--- a/frontend/src/stores/platforms.ts
+++ b/frontend/src/stores/platforms.ts
@@ -1,6 +1,6 @@
-import { defineStore } from "pinia";
 import type { PlatformSchema } from "@/__generated__";
 import { uniqBy } from "lodash";
+import { defineStore } from "pinia";
 
 export type Platform = PlatformSchema;
 
@@ -51,5 +51,9 @@ export default defineStore("platforms", {
     get(platformId: number) {
       return this.allPlatforms.find((p) => p.id === platformId);
     },
+    getAspectRatio(platformId: number): number {
+      const platform = this.allPlatforms.find((p) => p.id === platformId);
+      return platform && platform.aspect_ratio ? platform.aspect_ratio : 2 / 3;
+    },
   },
 });
diff --git a/frontend/src/views/EmulatorJS/Base.vue b/frontend/src/views/EmulatorJS/Base.vue
index 8545611f2..954aab42c 100644
--- a/frontend/src/views/EmulatorJS/Base.vue
+++ b/frontend/src/views/EmulatorJS/Base.vue
@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { isNull } from "lodash";
-import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
-import storeGalleryView from "@/stores/galleryView";
 import RAvatar from "@/components/common/Game/RAvatar.vue";
 import firmwareApi from "@/services/api/firmware";
 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 { isNull } from "lodash";
+import { storeToRefs } from "pinia";
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 
 // Props
 const route = useRoute();
 const galleryViewStore = storeGalleryView();
+const { defaultAspectRatioScreenshot } = storeToRefs(galleryViewStore);
 const rom = ref<DetailedRom | null>(null);
 const firmwareOptions = ref<FirmwareSchema[]>([]);
 const biosRef = ref<FirmwareSchema | null>(null);
@@ -102,6 +104,7 @@ onMounted(async () => {
       md="8"
       xl="10"
       id="game-wrapper"
+      :style="`aspect-ratio: ${defaultAspectRatioScreenshot}`"
       class="bg-primary"
       rounded
     >
@@ -378,9 +381,3 @@ onMounted(async () => {
     </v-col>
   </v-row>
 </template>
-
-<style>
-#game-wrapper {
-  aspect-ratio: 16 / 9;
-}
-</style>
diff --git a/frontend/src/views/RuffleRS/Base.vue b/frontend/src/views/RuffleRS/Base.vue
index d4d84548f..229a88737 100644
--- a/frontend/src/views/RuffleRS/Base.vue
+++ b/frontend/src/views/RuffleRS/Base.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { isNull } from "lodash";
-import { onMounted, ref, nextTick } from "vue";
-import { useRoute } from "vue-router";
 import RAvatar from "@/components/common/Game/RAvatar.vue";
-import storeGalleryView from "@/stores/galleryView";
 import romApi from "@/services/api/rom";
+import storeGalleryView from "@/stores/galleryView";
 import type { DetailedRom } from "@/stores/roms";
+import { isNull } from "lodash";
+import { storeToRefs } from "pinia";
+import { nextTick, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 
 // Props
 const route = useRoute();
 const galleryViewStore = storeGalleryView();
+const { defaultAspectRatioScreenshot } = storeToRefs(galleryViewStore);
 const rom = ref<DetailedRom | null>(null);
 const gameRunning = ref(false);
 const storedFSOP = localStorage.getItem("fullScreenOnPlay");
@@ -73,6 +75,7 @@ onMounted(async () => {
       md="8"
       xl="10"
       id="game-wrapper"
+      :style="`aspect-ratio: ${defaultAspectRatioScreenshot}`"
       class="bg-secondary"
       rounded
     >
@@ -193,12 +196,6 @@ onMounted(async () => {
   </v-row>
 </template>
 
-<style>
-#game-wrapper {
-  aspect-ratio: 16 / 9;
-}
-</style>
-
 <style scoped>
 #game {
   max-height: 100dvh;

From 9c0d2e08516ca8a4cca47dcc15c6e859a0d734b5 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 10:32:27 +0000
Subject: [PATCH 35/44] adapted aspect ratio in all dialogs

---
 .../src/components/common/Game/Dialog/EditRom.vue    | 12 +++++++++---
 .../src/components/common/Game/Dialog/MatchRom.vue   |  4 ++++
 .../src/components/common/Game/Dialog/SearchRom.vue  | 11 ++++++++---
 frontend/src/layouts/Dashboard/Recent.vue            |  2 +-
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index a5ed00494..1767fff92 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -3,10 +3,11 @@ 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 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";
-import { inject, ref, computed } from "vue";
+import { computed, inject, ref } from "vue";
 import { useRoute } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
 
@@ -18,6 +19,7 @@ const route = useRoute();
 const show = ref(false);
 const rom = ref<UpdateRom>();
 const romsStore = storeRoms();
+const platfotmsStore = storePlatforms();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
 const emitter = inject<Emitter<Events>>("emitter");
@@ -226,7 +228,11 @@ function closeDialog() {
         <v-col>
           <v-row class="justify-center">
             <v-col :class="{ 'mobile-cover': smAndDown, 'pa-8': !smAndDown }">
-              <game-card :rom="rom" :src="imagePreviewUrl">
+              <game-card
+                :rom="rom"
+                :src="imagePreviewUrl"
+                :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
+              >
                 <template #append-inner-right>
                   <v-btn-group rounded="0" divided density="compact">
                     <v-btn
@@ -238,7 +244,7 @@ function closeDialog() {
                       @click="
                         emitter?.emit(
                           'showSearchCoverDialog',
-                          rom?.name as string,
+                          rom.name as string,
                         )
                       "
                     >
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 351415d70..9066941b9 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -3,6 +3,7 @@ import type { SearchRomSchema } from "@/__generated__";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
+import storePlatforms from "@/stores/platforms";
 import storeGalleryView from "@/stores/galleryView";
 import storeHeartbeat from "@/stores/heartbeat";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -23,6 +24,7 @@ const { xs, lgAndUp } = useDisplay();
 const show = ref(false);
 const rom = ref<SimpleRom | null>(null);
 const romsStore = storeRoms();
+const platfotmsStore = storePlatforms();
 const galleryViewStore = storeGalleryView();
 const searching = ref(false);
 const route = useRoute();
@@ -332,8 +334,10 @@ onBeforeUnmount(() => {
           v-for="matchedRom in filteredMatchedRoms"
         >
           <game-card
+            v-if="rom"
             @click="showSources(matchedRom)"
             :rom="matchedRom"
+            :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
             title-on-footer
             transform-scale
             title-on-hover
diff --git a/frontend/src/components/common/Game/Dialog/SearchRom.vue b/frontend/src/components/common/Game/Dialog/SearchRom.vue
index 8134720a6..1eca5a418 100644
--- a/frontend/src/components/common/Game/Dialog/SearchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchRom.vue
@@ -3,6 +3,7 @@ import GameCard from "@/components/common/Game/Card/Base.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
+import storePlatforms from "@/stores/platforms";
 import type { SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -23,6 +24,7 @@ type SelectItem = {
 // Props
 const { lgAndUp } = useDisplay();
 const show = ref(false);
+const platfotmsStore = storePlatforms();
 const searching = ref(false);
 const searched = ref(false);
 const router = useRouter();
@@ -184,7 +186,7 @@ onBeforeUnmount(() => {
       </v-row>
     </template>
     <template #content>
-      <v-row no-gutters>
+      <v-row no-gutters class="align-content-start align-center">
         <v-col
           class="pa-1"
           cols="4"
@@ -194,13 +196,16 @@ onBeforeUnmount(() => {
           v-for="rom in filteredRoms"
         >
           <game-card
+            :key="rom.updated_at"
             :rom="rom"
             @click="onGameClick({ rom, event: $event })"
+            :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
             title-on-hover
             show-flags
-            transform-scale
-            show-platform-icon
             show-fav
+            transform-scale
+            show-action-bar
+            show-platform-icon
           />
         </v-col>
       </v-row>
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index e97d0accb..ca83a78cf 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -42,8 +42,8 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
         >
           <game-card
             :key="rom.updated_at"
-            @click="onGameClick"
             :rom="rom"
+            @click="onGameClick"
             :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
             title-on-hover
             show-flags

From da7401fe23633c32fb9866c937a58a480a9d21a6 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 10:37:42 +0000
Subject: [PATCH 36/44] fixed platform info drawer icon shadow

---
 frontend/src/components/Gallery/AppBar/Platform/Base.vue     | 3 ---
 .../Gallery/AppBar/Platform/PlatformInfoDrawer.vue           | 5 ++++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 184e6e7b8..621fcbe39 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -107,7 +107,4 @@ watch(
   filter: drop-shadow(0px 0px 3px rgba(var(--v-theme-romm-accent-1)));
   transform: scale(1.1);
 }
-.platform-icon-big {
-  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
-}
 </style>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 6a883553e..d35bedcd4 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -131,7 +131,7 @@ async function setAspectRatio() {
           <platform-icon
             :slug="currentPlatform.slug"
             :name="currentPlatform.name"
-            class="platform-icon-big"
+            class="platform-icon"
             :size="160"
           />
         </div>
@@ -291,6 +291,9 @@ async function setAspectRatio() {
   </v-navigation-drawer>
 </template>
 <style scoped>
+.platform-icon {
+  filter: drop-shadow(0px 0px 1px rgba(var(--v-theme-romm-accent-1)));
+}
 .greyscale {
   filter: grayscale(100%);
 }

From b545d1273162b6ba8d01c7bf54ca431f398e9468 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 11:03:01 +0000
Subject: [PATCH 37/44] improved aspect ratio set in gamecard

---
 backend/endpoints/responses/search.py                |  1 +
 backend/endpoints/search.py                          |  1 +
 frontend/src/__generated__/models/SearchRomSchema.ts |  1 +
 frontend/src/components/common/Game/Card/Base.vue    | 12 ++++++++++--
 .../src/components/common/Game/Dialog/EditRom.vue    | 10 ++--------
 .../src/components/common/Game/Dialog/MatchRom.vue   |  8 +-------
 .../src/components/common/Game/Dialog/SearchRom.vue  |  3 ---
 frontend/src/layouts/Dashboard/Recent.vue            |  3 ---
 frontend/src/views/Gallery/Platform.vue              |  3 ---
 frontend/src/views/GameDetails.vue                   |  9 +++------
 10 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/backend/endpoints/responses/search.py b/backend/endpoints/responses/search.py
index 0e3011ad9..7f1de633d 100644
--- a/backend/endpoints/responses/search.py
+++ b/backend/endpoints/responses/search.py
@@ -9,6 +9,7 @@ class SearchRomSchema(BaseModel):
     summary: str
     igdb_url_cover: str = ""
     moby_url_cover: str = ""
+    platform_id: int
 
 
 class SearchCoverSchema(BaseModel):
diff --git a/backend/endpoints/search.py b/backend/endpoints/search.py
index e6b66b6e7..e07d757f1 100644
--- a/backend/endpoints/search.py
+++ b/backend/endpoints/search.py
@@ -99,6 +99,7 @@ async def search_rom(
                 "summary": "",
                 "igdb_url_cover": "",
                 "moby_url_cover": "",
+                "platform_id": rom.platform_id,
             },
             **item,
         }
diff --git a/frontend/src/__generated__/models/SearchRomSchema.ts b/frontend/src/__generated__/models/SearchRomSchema.ts
index 8b5a102a3..efff5ede7 100644
--- a/frontend/src/__generated__/models/SearchRomSchema.ts
+++ b/frontend/src/__generated__/models/SearchRomSchema.ts
@@ -11,5 +11,6 @@ export type SearchRomSchema = {
     summary: string;
     igdb_url_cover?: string;
     moby_url_cover?: string;
+    platform_id: number;
 };
 
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 791803bb7..56597f289 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -3,6 +3,7 @@ import type { SearchRomSchema } from "@/__generated__";
 import ActionBar from "@/components/common/Game/Card/ActionBar.vue";
 import GameCardFlags from "@/components/common/Game/Card/Flags.vue";
 import Sources from "@/components/common/Game/Card/Sources.vue";
+import storePlatforms from "@/stores/platforms";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import storeCollections from "@/stores/collections";
 import storeDownload from "@/stores/download";
@@ -30,7 +31,7 @@ const props = withDefaults(
     src?: string;
   }>(),
   {
-    aspectRatio: 2 / 3,
+    aspectRatio: undefined,
     transformScale: false,
     titleOnHover: false,
     showFlags: false,
@@ -44,6 +45,7 @@ const props = withDefaults(
     src: "",
   },
 );
+const platfotmsStore = storePlatforms();
 const romsStore = storeRoms();
 const emit = defineEmits(["click", "touchstart", "touchend"]);
 const handleClick = (event: MouseEvent) => {
@@ -126,7 +128,13 @@ onMounted(() => {
                   ? rom.igdb_url_cover
                   : rom.moby_url_cover
           "
-          :aspect-ratio="aspectRatio"
+          :aspect-ratio="
+            aspectRatio
+              ? aspectRatio
+              : platfotmsStore.getAspectRatio(rom.platform_id)
+                ? platfotmsStore.getAspectRatio(rom.platform_id)
+                : galleryViewStore.defaultAspectRatioCover
+          "
         >
           <div v-bind="props" style="position: absolute; top: 0; width: 100%">
             <template v-if="titleOnHover">
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 1767fff92..9452d96a3 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -3,7 +3,6 @@ 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 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";
@@ -13,13 +12,12 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { lgAndUp, mdAndUp, smAndUp, smAndDown } = useDisplay();
+const { lgAndUp, mdAndUp, smAndDown } = useDisplay();
 const heartbeat = storeHeartbeat();
 const route = useRoute();
 const show = ref(false);
 const rom = ref<UpdateRom>();
 const romsStore = storeRoms();
-const platfotmsStore = storePlatforms();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
 const emitter = inject<Emitter<Events>>("emitter");
@@ -228,11 +226,7 @@ function closeDialog() {
         <v-col>
           <v-row class="justify-center">
             <v-col :class="{ 'mobile-cover': smAndDown, 'pa-8': !smAndDown }">
-              <game-card
-                :rom="rom"
-                :src="imagePreviewUrl"
-                :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
-              >
+              <game-card :rom="rom" :src="imagePreviewUrl">
                 <template #append-inner-right>
                   <v-btn-group rounded="0" divided density="compact">
                     <v-btn
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index 9066941b9..371f00d10 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -3,7 +3,6 @@ import type { SearchRomSchema } from "@/__generated__";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
-import storePlatforms from "@/stores/platforms";
 import storeGalleryView from "@/stores/galleryView";
 import storeHeartbeat from "@/stores/heartbeat";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -24,7 +23,6 @@ const { xs, lgAndUp } = useDisplay();
 const show = ref(false);
 const rom = ref<SimpleRom | null>(null);
 const romsStore = storeRoms();
-const platfotmsStore = storePlatforms();
 const galleryViewStore = storeGalleryView();
 const searching = ref(false);
 const route = useRoute();
@@ -337,7 +335,6 @@ onBeforeUnmount(() => {
             v-if="rom"
             @click="showSources(matchedRom)"
             :rom="matchedRom"
-            :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
             title-on-footer
             transform-scale
             title-on-hover
@@ -394,16 +391,13 @@ onBeforeUnmount(() => {
                     :elevation="isHovering ? 20 : 3"
                     @click="selectCover(source)"
                   >
-                    <!-- TODO: fix aspect ratio -->
                     <v-img
                       :src="
                         !source.url_cover
                           ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
                           : source.url_cover
                       "
-                      :aspect-ratio="
-                        galleryViewStore.defaultAspectRatioCollection
-                      "
+                      :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
                       cover
                       lazy
                     >
diff --git a/frontend/src/components/common/Game/Dialog/SearchRom.vue b/frontend/src/components/common/Game/Dialog/SearchRom.vue
index 1eca5a418..52842b28a 100644
--- a/frontend/src/components/common/Game/Dialog/SearchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchRom.vue
@@ -3,7 +3,6 @@ import GameCard from "@/components/common/Game/Card/Base.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
-import storePlatforms from "@/stores/platforms";
 import type { SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -24,7 +23,6 @@ type SelectItem = {
 // Props
 const { lgAndUp } = useDisplay();
 const show = ref(false);
-const platfotmsStore = storePlatforms();
 const searching = ref(false);
 const searched = ref(false);
 const router = useRouter();
@@ -199,7 +197,6 @@ onBeforeUnmount(() => {
             :key="rom.updated_at"
             :rom="rom"
             @click="onGameClick({ rom, event: $event })"
-            :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
             title-on-hover
             show-flags
             show-fav
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index ca83a78cf..cf80fa82d 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RSection from "@/components/common/RSection.vue";
-import storePlatforms from "@/stores/platforms";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import { views } from "@/utils";
 import { storeToRefs } from "pinia";
@@ -10,7 +9,6 @@ import { useRouter } from "vue-router";
 // Props
 const romsStore = storeRoms();
 const { recentRoms } = storeToRefs(romsStore);
-const platfotmsStore = storePlatforms();
 const router = useRouter();
 
 // Functions
@@ -44,7 +42,6 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
             :key="rom.updated_at"
             :rom="rom"
             @click="onGameClick"
-            :aspect-ratio="platfotmsStore.getAspectRatio(rom.platform_id)"
             title-on-hover
             show-flags
             show-fav
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index 421c4c8a1..4b815a444 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -5,7 +5,6 @@ import EmptyGame from "@/components/common/EmptyGame.vue";
 import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import GameDataTable from "@/components/common/Game/Table.vue";
-import platformApi from "@/services/api/platform";
 import romApi from "@/services/api/rom";
 import storeGalleryFilter, { type FilterType } from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
@@ -14,7 +13,6 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import { normalizeString, views } from "@/utils";
 import type { Emitter } from "mitt";
-import { platform } from "os";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
@@ -326,7 +324,6 @@ onBeforeUnmount(() => {
             :key="rom.updated_at"
             :rom="rom"
             title-on-hover
-            :aspect-ratio="currentPlatform.aspect_ratio"
             show-flags
             show-action-bar
             show-fav
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index e1fb8d2a6..03d3706ca 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -10,18 +10,15 @@ import Saves from "@/components/Details/Saves.vue";
 import States from "@/components/Details/States.vue";
 import TitleInfo from "@/components/Details/Title.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
-import Cover from "@/components/common/Game/Card/Base.vue";
-import platformApi from "@/services/api/platform";
+import GameCard from "@/components/common/Game/Card/Base.vue";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
-import type { Platform } from "@/stores/platforms";
-import storePlatforms from "@/stores/platforms";
 import storeRoms from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeMount, ref, watch } from "vue";
-import { onBeforeRouteLeave, useRoute } from "vue-router";
+import { useRoute } from "vue-router";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -106,7 +103,7 @@ watch(
           'cover-mobile': smAndDown,
         }"
       >
-        <cover
+        <game-card
           :key="currentRom.updated_at"
           :pointerOnHover="false"
           :rom="currentRom"

From 79d28792641b35e014f8d4c7bb4c38fc807b08e0 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 11:09:20 +0000
Subject: [PATCH 38/44] fixed runt test section

---
 DEVELOPER_SETUP.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/DEVELOPER_SETUP.md b/DEVELOPER_SETUP.md
index 60ae84726..7de5e370c 100644
--- a/DEVELOPER_SETUP.md
+++ b/DEVELOPER_SETUP.md
@@ -130,7 +130,7 @@ docker exec -i mariadb mariadb -u root -p<root password> < backend/romm_test/set
 
 ### - Run tests
 
-*\_\_*Migrations will be run automatically when running the tests.\_\_\*
+*\_\_*Migrations will be run automatically when running the tests.\_\_\_\_
 
 ```sh
 cd backend

From 52ccd1c72795b4c96a25ddf34bea5a4ffb3b4ae2 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 11:20:40 +0000
Subject: [PATCH 39/44] fixes based on unit testing

---
 backend/endpoints/tests/test_config.py   | 2 --
 backend/handler/metadata/igdb_handler.py | 7 +++++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/backend/endpoints/tests/test_config.py b/backend/endpoints/tests/test_config.py
index e256089fd..d8ff367c9 100644
--- a/backend/endpoints/tests/test_config.py
+++ b/backend/endpoints/tests/test_config.py
@@ -21,5 +21,3 @@ def test_config(client):
     assert config.get("EXCLUDED_MULTI_PARTS_EXT") == []
     assert config.get("EXCLUDED_MULTI_PARTS_FILES") == []
     assert config.get("PLATFORMS_BINDING") == {}
-    assert config.get("ROMS_FOLDER_NAME") == "roms"
-    assert config.get("FIRMWARE_FOLDER_NAME") == "bios"
diff --git a/backend/handler/metadata/igdb_handler.py b/backend/handler/metadata/igdb_handler.py
index 19a90aa00..f17604804 100644
--- a/backend/handler/metadata/igdb_handler.py
+++ b/backend/handler/metadata/igdb_handler.py
@@ -384,13 +384,15 @@ class IGDBBaseHandler(MetadataHandler):
                 igdb_id=platform.get("id", None),
                 slug=slug,
                 name=platform.get("name", slug),
-                category=IGDB_PLATFORM_CATEGORIES.get(platform["category"], "Unknown"),
+                category=IGDB_PLATFORM_CATEGORIES.get(
+                    platform.get("category", 0), "Unknown"
+                ),
                 generation=platform.get("generation", None),
                 family_name=pydash.get(platform, "platform_family.name", None),
                 family_slug=pydash.get(platform, "platform_family.slug", None),
                 url=platform.get("url", None),
                 url_logo=self._normalize_cover_url(
-                    pydash.get(platform, "platform_logo.url", None).replace(
+                    pydash.get(platform, "platform_logo.url", "").replace(
                         "t_thumb", "t_1080p"
                     )
                 ),
@@ -1014,6 +1016,7 @@ IGDB_PLATFORM_LIST = [
 ]
 
 IGDB_PLATFORM_CATEGORIES: dict[int, str] = {
+    0: "Unknown",
     1: "Console",
     2: "Arcade",
     3: "Platform",

From 1f7bcb353c6a3bda0b7841357df9e595681e92f1 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 11:27:55 +0000
Subject: [PATCH 40/44] fix developer setup instructions

---
 DEVELOPER_SETUP.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/DEVELOPER_SETUP.md b/DEVELOPER_SETUP.md
index 7de5e370c..fa46fddd9 100644
--- a/DEVELOPER_SETUP.md
+++ b/DEVELOPER_SETUP.md
@@ -130,7 +130,7 @@ docker exec -i mariadb mariadb -u root -p<root password> < backend/romm_test/set
 
 ### - Run tests
 
-*\_\_*Migrations will be run automatically when running the tests.\_\_\_\_
+*\_*Migrations will be run automatically when running the tests.\_\_\_
 
 ```sh
 cd backend

From 874ce91522fc7978b6adf83c313a433e77424df5 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 12:49:20 +0000
Subject: [PATCH 41/44] fixed game details view for 1/1 aspect ratio

---
 frontend/src/views/GameDetails.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index 03d3706ca..364e13b73 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -7,6 +7,7 @@ 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";
@@ -36,6 +37,7 @@ 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() {
@@ -84,7 +86,6 @@ watch(
 </script>
 
 <template>
-  <!-- TODO: review layout on certain roms - ej: mortal kombat 2 for gb  -->
   <template v-if="currentRom && !gettingRoms">
     <background-header />
 
@@ -100,8 +101,14 @@ watch(
         class="cover"
         :class="{
           'cover-desktop': mdAndUp,
-          'cover-mobile': smAndDown,
         }"
+        :style="
+          smAndDown
+            ? platfotmsStore.getAspectRatio(currentRom.platform_id) == 1 / 1
+              ? 'margin-top: -220px;'
+              : 'margin-top: -280px;'
+            : ''
+        "
       >
         <game-card
           :key="currentRom.updated_at"
@@ -118,8 +125,14 @@ watch(
         class="px-5"
         :class="{
           'info-lg': mdAndUp,
-          'info-mobile': smAndDown,
         }"
+        :style="
+          smAndDown
+            ? platfotmsStore.getAspectRatio(currentRom.platform_id) == 1 / 1
+              ? 'margin-top: -40px;'
+              : 'margin-top: 100px;'
+            : ''
+        "
       >
         <div
           class="px-3 pb-3"
@@ -243,9 +256,6 @@ watch(
   margin-top: -190px;
   margin-left: -20px;
 }
-.cover-mobile {
-  margin-top: -280px;
-}
 .info-mobile {
   margin-top: 100px;
 }

From 241d4ad3485ee717712433b9be576fe7986ad6cd Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 14:43:16 +0000
Subject: [PATCH 42/44] refactor EditRom component layout and improve code
 formatting

---
 .../components/common/Game/Dialog/EditRom.vue  | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 9452d96a3..364a5b217 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -147,7 +147,7 @@ function closeDialog() {
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" md="8" lg="8" xl="9">
+        <v-col cols="12" md="8" xl="9">
           <v-row class="px-2" no-gutters>
             <v-col>
               <v-text-field
@@ -223,9 +223,9 @@ function closeDialog() {
             </v-btn-group>
           </v-row>
         </v-col>
-        <v-col>
-          <v-row class="justify-center">
-            <v-col :class="{ 'mobile-cover': smAndDown, 'pa-8': !smAndDown }">
+        <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 }">
               <game-card :rom="rom" :src="imagePreviewUrl">
                 <template #append-inner-right>
                   <v-btn-group rounded="0" divided density="compact">
@@ -273,7 +273,7 @@ function closeDialog() {
               </game-card>
             </v-col>
           </v-row>
-          <v-row v-if="smAndDown" class="justify-space-between pa-4">
+          <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"
@@ -298,11 +298,3 @@ function closeDialog() {
     </template>
   </r-dialog>
 </template>
-<style scoped>
-.mobile-cover {
-  min-width: 240px;
-  min-height: 330px;
-  max-width: 240px;
-  max-height: 330px;
-}
-</style>

From c88ac9f364f1f8f8b9f7702bc1ef3d6badb53aa3 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Mon, 2 Dec 2024 14:46:53 +0000
Subject: [PATCH 43/44] enhance Collection.vue layout by aligning items in the
 gallery view

---
 frontend/src/views/Gallery/Collection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index b400f9bda..1615093e2 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -270,7 +270,7 @@ onBeforeUnmount(() => {
     <template v-if="filteredRoms.length > 0">
       <v-row
         no-gutters
-        class="overflow-hidden"
+        class="overflow-hidden align-center"
         :class="{ 'pa-1': currentView != 2 }"
       >
         <!-- Gallery cards view -->

From 5eefdda9d8c8840eef6499a3e50c6dd454d9423e Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 3 Dec 2024 10:51:29 +0000
Subject: [PATCH 44/44] refactor aspect_ratio field to use string type and
 update related components

---
 .../alembic/versions/0027_platforms_data.py   |  4 +--
 backend/endpoints/responses/platform.py       |  2 +-
 backend/models/platform.py                    |  8 ++---
 .../__generated__/models/PlatformSchema.ts    |  2 +-
 .../Gallery/AppBar/Platform/Base.vue          | 36 -------------------
 .../AppBar/Platform/PlatformInfoDrawer.vue    |  6 ++--
 .../src/components/common/Game/Card/Base.vue  | 21 +++++------
 frontend/src/stores/platforms.ts              |  4 ++-
 8 files changed, 25 insertions(+), 58 deletions(-)

diff --git a/backend/alembic/versions/0027_platforms_data.py b/backend/alembic/versions/0027_platforms_data.py
index a61eaae38..2254d6cf5 100644
--- a/backend/alembic/versions/0027_platforms_data.py
+++ b/backend/alembic/versions/0027_platforms_data.py
@@ -35,9 +35,9 @@ def upgrade() -> None:
         batch_op.add_column(
             sa.Column(
                 "aspect_ratio",
-                sa.Float(),
+                sa.String(length=10),
                 nullable=False,
-                server_default=str(DEFAULT_COVER_ASPECT_RATIO),
+                server_default=DEFAULT_COVER_ASPECT_RATIO,
             )
         )
     # ### end Alembic commands ###
diff --git a/backend/endpoints/responses/platform.py b/backend/endpoints/responses/platform.py
index 60946aa03..b8827fa50 100644
--- a/backend/endpoints/responses/platform.py
+++ b/backend/endpoints/responses/platform.py
@@ -23,7 +23,7 @@ class PlatformSchema(BaseModel):
     url_logo: str | None = None
     logo_path: str | None = None
     firmware: list[FirmwareSchema] = Field(default_factory=list)
-    aspect_ratio: float = DEFAULT_COVER_ASPECT_RATIO
+    aspect_ratio: str = DEFAULT_COVER_ASPECT_RATIO
     created_at: datetime
     updated_at: datetime
 
diff --git a/backend/models/platform.py b/backend/models/platform.py
index 9ab998192..06ceabdfb 100644
--- a/backend/models/platform.py
+++ b/backend/models/platform.py
@@ -4,14 +4,14 @@ from typing import TYPE_CHECKING
 
 from models.base import BaseModel
 from models.rom import Rom
-from sqlalchemy import Float, String, func, select
+from sqlalchemy import String, func, select
 from sqlalchemy.orm import Mapped, column_property, mapped_column, relationship
 
 if TYPE_CHECKING:
     from models.firmware import Firmware
 
 
-DEFAULT_COVER_ASPECT_RATIO = 2 / 3
+DEFAULT_COVER_ASPECT_RATIO = "2 / 3"
 
 
 class Platform(BaseModel):
@@ -37,8 +37,8 @@ class Platform(BaseModel):
         lazy="selectin", back_populates="platform"
     )
 
-    aspect_ratio: Mapped[float] = mapped_column(
-        Float, server_default=str(DEFAULT_COVER_ASPECT_RATIO)
+    aspect_ratio: Mapped[str] = mapped_column(
+        String, server_default=DEFAULT_COVER_ASPECT_RATIO
     )
 
     # This runs a subquery to get the count of roms for the platform
diff --git a/frontend/src/__generated__/models/PlatformSchema.ts b/frontend/src/__generated__/models/PlatformSchema.ts
index 652ceffae..67bfefcc3 100644
--- a/frontend/src/__generated__/models/PlatformSchema.ts
+++ b/frontend/src/__generated__/models/PlatformSchema.ts
@@ -22,7 +22,7 @@ export type PlatformSchema = {
     url_logo?: (string | null);
     logo_path?: (string | null);
     firmware?: Array<FirmwareSchema>;
-    aspect_ratio?: number;
+    aspect_ratio?: string;
     created_at: string;
     updated_at: string;
 };
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index 621fcbe39..d97e1a3b7 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -11,7 +11,6 @@ import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import storeNavigation from "@/stores/navigation";
 import storeRoms from "@/stores/roms";
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -20,41 +19,6 @@ const romsStore = storeRoms();
 const { currentPlatform } = storeToRefs(romsStore);
 const navigationStore = storeNavigation();
 const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
-const selectedAspectRatio = ref(0);
-const aspectRatioOptions = computed(() => [
-  {
-    name: "2 / 3",
-    size: 2 / 3,
-    source: "SteamGridDB",
-  },
-  {
-    name: "3 / 4",
-    size: 3 / 4,
-    source: "IGDB / MobyGames",
-  },
-  {
-    name: "1 / 1",
-    size: 1 / 1,
-    source: "Old squared cases",
-  },
-]);
-
-watch(
-  () => currentPlatform.value?.aspect_ratio,
-  (aspectRatio) => {
-    if (aspectRatio) {
-      // Find the index of the aspect ratio option that matches the current aspect ratio
-      const defaultAspectRatio = aspectRatioOptions.value.findIndex(
-        (option) => Math.abs(option.size - aspectRatio) < 0.01, // Handle floating-point precision issues
-      );
-      // If a matching aspect ratio option is found, update the selectedAspectRatio
-      if (defaultAspectRatio !== -1) {
-        selectedAspectRatio.value = defaultAspectRatio;
-      }
-    }
-  },
-  { immediate: true }, // Execute the callback immediately with the current value
-);
 </script>
 
 <template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index d35bedcd4..09a7d56cb 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -60,7 +60,7 @@ watch(
     if (aspectRatio) {
       // Find the index of the aspect ratio option that matches the current aspect ratio
       const defaultAspectRatio = aspectRatioOptions.value.findIndex(
-        (option) => Math.abs(option.size - aspectRatio) < 0.01, // Handle floating-point precision issues
+        (option) => option.name == aspectRatio,
       );
       // If a matching aspect ratio option is found, update the selectedAspectRatio
       if (defaultAspectRatio !== -1) {
@@ -91,7 +91,7 @@ async function setAspectRatio() {
       .updatePlatform({
         platform: {
           ...currentPlatform.value,
-          aspect_ratio: selectedOption.size,
+          aspect_ratio: selectedOption.name,
         },
       })
       .then(({ data }) => {
@@ -101,7 +101,7 @@ async function setAspectRatio() {
           color: "green",
         });
         if (currentPlatform.value) {
-          currentPlatform.value.aspect_ratio = selectedOption.size;
+          currentPlatform.value.aspect_ratio = selectedOption.name;
         }
       })
       .catch((error) => {
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 56597f289..a381d3944 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -10,14 +10,14 @@ import storeDownload from "@/stores/download";
 import storeGalleryView from "@/stores/galleryView";
 import storeRoms from "@/stores/roms";
 import { type SimpleRom } from "@/stores/roms.js";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { useTheme } from "vuetify";
 
 // Props
 const props = withDefaults(
   defineProps<{
     rom: SimpleRom | SearchRomSchema;
-    aspectRatio?: number;
+    aspectRatio?: string | number;
     transformScale?: boolean;
     titleOnHover?: boolean;
     showFlags?: boolean;
@@ -62,6 +62,13 @@ const card = ref();
 const theme = useTheme();
 const galleryViewStore = storeGalleryView();
 const collectionsStore = storeCollections();
+const computedAspectRatio = computed(() => {
+  const ratio =
+    props.aspectRatio ||
+    platfotmsStore.getAspectRatio(props.rom.platform_id) ||
+    galleryViewStore.defaultAspectRatioCover;
+  return parseFloat(ratio.toString());
+});
 
 // Functions
 onMounted(() => {
@@ -128,13 +135,7 @@ onMounted(() => {
                   ? rom.igdb_url_cover
                   : rom.moby_url_cover
           "
-          :aspect-ratio="
-            aspectRatio
-              ? aspectRatio
-              : platfotmsStore.getAspectRatio(rom.platform_id)
-                ? platfotmsStore.getAspectRatio(rom.platform_id)
-                : galleryViewStore.defaultAspectRatioCover
-          "
+          :aspect-ratio="computedAspectRatio"
         >
           <div v-bind="props" style="position: absolute; top: 0; width: 100%">
             <template v-if="titleOnHover">
@@ -209,7 +210,7 @@ onMounted(() => {
             <v-img
               :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
               cover
-              :aspect-ratio="aspectRatio"
+              :aspect-ratio="computedAspectRatio"
             ></v-img>
           </template>
           <template #placeholder>
diff --git a/frontend/src/stores/platforms.ts b/frontend/src/stores/platforms.ts
index 4cabdf753..adb4485f8 100644
--- a/frontend/src/stores/platforms.ts
+++ b/frontend/src/stores/platforms.ts
@@ -53,7 +53,9 @@ export default defineStore("platforms", {
     },
     getAspectRatio(platformId: number): number {
       const platform = this.allPlatforms.find((p) => p.id === platformId);
-      return platform && platform.aspect_ratio ? platform.aspect_ratio : 2 / 3;
+      return platform && platform.aspect_ratio
+        ? parseFloat(eval(platform.aspect_ratio as string))
+        : 2 / 3;
     },
   },
 });