From 86aae89f153866d9cc4a64fdc52a026f6e1050b5 Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Fri, 30 Aug 2024 11:21:18 +0100
Subject: [PATCH 1/9] feat - Allow user to unmatch rom

---
 backend/endpoints/rom.py                      | 27 ++++++++++++++++++-
 .../components/common/Game/Dialog/EditRom.vue | 12 +++++++--
 frontend/src/services/api/rom.ts              |  8 +++++-
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 1d5eacb6c..62bbd6681 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -286,6 +286,7 @@ async def update_rom(
     rename_as_source: bool = False,
     remove_cover: bool = False,
     artwork: UploadFile | None = None,
+    unmatch: bool = False
 ) -> DetailedRomSchema:
     """Update rom endpoint
 
@@ -294,6 +295,7 @@ async def update_rom(
         id (Rom): Rom internal id
         rename_as_source (bool, optional): Flag to rename rom file as matched IGDB game. Defaults to False.
         artwork (UploadFile, optional): Custom artork to set as cover. Defaults to File(None).
+        unmatch: Weather to remove the match for this game. Defaults to false
 
     Raises:
         HTTPException: If a rom already have that name when enabling the rename_as_source flag
@@ -308,6 +310,29 @@ async def update_rom(
 
     if not rom:
         raise RomNotFoundInDatabaseException(id)
+    
+    if(unmatch):
+        cleaned_data = {
+            "igdb_id":  None,
+            "sgdb_id": None,
+            "moby_id": None,
+            "name": rom.file_name,
+            "summary": "",
+            "url_screenshots": {},
+            "path_cover_s": "",
+            "path_cover_l": "",
+            "url_cover": "",
+            "slug": "",
+            "igdb_metadata": {},
+            "moby_metadata": {},
+            "revision": "",
+        }
+
+        db_rom_handler.update_rom(id, cleaned_data)
+
+        return DetailedRomSchema.from_orm_with_request(db_rom_handler.get_rom(id), request)
+    
+
 
     cleaned_data = {
         "igdb_id": data.get("igdb_id", None),
@@ -423,7 +448,7 @@ async def update_rom(
                 cleaned_data.update(
                     {"path_cover_s": path_cover_s, "path_cover_l": path_cover_l}
                 )
-
+    
     db_rom_handler.update_rom(id, cleaned_data)
 
     return DetailedRomSchema.from_orm_with_request(db_rom_handler.get_rom(id), request)
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index d81bcaac7..a437ea24d 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -55,7 +55,7 @@ async function removeArtwork() {
   removeCover.value = true;
 }
 
-async function updateRom() {
+async function updateRom({ unmatch }: { unmatch?: boolean } = {}) {
   if (!rom.value) return;
 
   if (!rom.value.file_name) {
@@ -71,7 +71,7 @@ async function updateRom() {
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
   await romApi
-    .updateRom({ rom: rom.value, removeCover: removeCover.value })
+    .updateRom({ rom: rom.value, removeCover: removeCover.value, unmatch })
     .then(({ data }) => {
       emitter?.emit("snackbarShow", {
         msg: "Rom updated successfully!",
@@ -214,6 +214,14 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
+          <v-btn
+            v-if="rom.igdb_id || rom.moby_id"
+            class="text-romm-red bg-terciary"
+            variant="flat"
+            @click="() => updateRom({ unmatch: true })"
+          >
+            Unmatch Rom
+          </v-btn>
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
           <v-btn class="text-romm-green bg-terciary" @click="updateRom">
             Apply
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 31225d71d..9e2345dd6 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -128,10 +128,12 @@ async function updateRom({
   rom,
   renameAsSource = false,
   removeCover = false,
+  unmatch = false,
 }: {
   rom: UpdateRom;
   renameAsSource?: boolean;
   removeCover?: boolean;
+  unmatch?: boolean;
 }): Promise<{ data: DetailedRom }> {
   const formData = new FormData();
   if (rom.igdb_id) formData.append("igdb_id", rom.igdb_id.toString());
@@ -143,7 +145,11 @@ async function updateRom({
   if (rom.artwork) formData.append("artwork", rom.artwork);
 
   return api.put(`/roms/${rom.id}`, formData, {
-    params: { rename_as_source: renameAsSource, remove_cover: removeCover },
+    params: {
+      rename_as_source: renameAsSource,
+      remove_cover: removeCover,
+      unmatch,
+    },
   });
 }
 

From dd61afd9fe3bd211d9aa381046ca5242c4141854 Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Fri, 30 Aug 2024 11:24:17 +0100
Subject: [PATCH 2/9] add steamgrid

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

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index a437ea24d..e2e116d37 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -215,7 +215,7 @@ function closeDialog() {
       <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn
-            v-if="rom.igdb_id || rom.moby_id"
+            v-if="rom.igdb_id || rom.moby_id || rom.sgdb_id"
             class="text-romm-red bg-terciary"
             variant="flat"
             @click="() => updateRom({ unmatch: true })"

From 6de94aa7673885bd9584837688cbcdd160f594cb Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Fri, 30 Aug 2024 19:12:28 +0100
Subject: [PATCH 3/9] Apply suggestions from code review

Co-authored-by: Georges-Antoine Assi <3247106+gantoine@users.noreply.github.com>
---
 backend/endpoints/rom.py                               | 4 ++--
 frontend/src/components/common/Game/Dialog/EditRom.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 3c8564591..f01e752ef 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -290,7 +290,7 @@ async def update_rom(
     rename_as_source: bool = False,
     remove_cover: bool = False,
     artwork: UploadFile | None = None,
-    unmatch: bool = False
+    unmatch_metadata: bool = False
 ) -> DetailedRomSchema:
     """Update rom endpoint
 
@@ -299,7 +299,7 @@ async def update_rom(
         id (Rom): Rom internal id
         rename_as_source (bool, optional): Flag to rename rom file as matched IGDB game. Defaults to False.
         artwork (UploadFile, optional): Custom artork to set as cover. Defaults to File(None).
-        unmatch: Weather to remove the match for this game. Defaults to false
+        unmatch_metadata: Remove the metadata matches for this game. Defaults to False.
 
     Raises:
         HTTPException: If a rom already have that name when enabling the rename_as_source flag
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index e50cb1be8..99ea19bc6 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -226,7 +226,7 @@ function closeDialog() {
       <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn
-            v-if="rom.igdb_id || rom.moby_id || rom.sgdb_id"
+           :disabled="rom.igdb_id || rom.moby_id || rom.sgdb_id"
             class="text-romm-red bg-terciary"
             variant="flat"
             @click="() => updateRom({ unmatch: true })"

From c63f62a81399bfed2014091563ebea6c1419393d Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Fri, 30 Aug 2024 19:18:52 +0100
Subject: [PATCH 4/9] update edit modal

---
 backend/endpoints/rom.py                      |  2 +-
 .../components/common/Game/Dialog/EditRom.vue | 46 +++++++++++++++++--
 frontend/src/services/api/rom.ts              |  2 +-
 3 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index f01e752ef..ff32f0c70 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -315,7 +315,7 @@ async def update_rom(
     if not rom:
         raise RomNotFoundInDatabaseException(id)
     
-    if(unmatch):
+    if(unmatch_metadata):
         cleaned_data = {
             "igdb_id":  None,
             "sgdb_id": None,
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 99ea19bc6..9e94388f6 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -55,7 +55,43 @@ async function removeArtwork() {
   removeCover.value = true;
 }
 
-async function updateRom({ unmatch }: { unmatch?: boolean } = {}) {
+async function unmatchRom() {
+  if (!rom.value) return;
+
+  show.value = false;
+  emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
+
+  await romApi
+    .updateRom({
+      rom: rom.value,
+      unmatch: true,
+    })
+    .then(({ data }) => {
+      emitter?.emit("snackbarShow", {
+        msg: "Rom updated successfully!",
+        icon: "mdi-check-bold",
+        color: "green",
+      });
+      romsStore.update(data as SimpleRom);
+      if (route.name == "rom") {
+        romsStore.currentRom = data;
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+    })
+    .finally(() => {
+      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      closeDialog();
+    });
+}
+
+async function updateRom() {
   if (!rom.value) return;
 
   if (!rom.value.file_name) {
@@ -71,7 +107,7 @@ async function updateRom({ unmatch }: { unmatch?: boolean } = {}) {
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
   await romApi
-    .updateRom({ rom: rom.value, removeCover: removeCover.value, unmatch })
+    .updateRom({ rom: rom.value, removeCover: removeCover.value })
     .then(({ data }) => {
       emitter?.emit("snackbarShow", {
         msg: "Rom updated successfully!",
@@ -184,7 +220,7 @@ function closeDialog() {
                       @click="
                         emitter?.emit(
                           'showSearchCoverDialog',
-                          rom?.name as string,
+                          rom?.name as string
                         )
                       "
                     >
@@ -226,10 +262,10 @@ function closeDialog() {
       <v-row class="justify-center mt-4 mb-2" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn
-           :disabled="rom.igdb_id || rom.moby_id || rom.sgdb_id"
+            :disabled="!rom.igdb_id && !rom.moby_id && !rom.sgdb_id"
             class="text-romm-red bg-terciary"
             variant="flat"
-            @click="() => updateRom({ unmatch: true })"
+            @click="() => unmatchRom()"
           >
             Unmatch Rom
           </v-btn>
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 9e2345dd6..5d2210b81 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -148,7 +148,7 @@ async function updateRom({
     params: {
       rename_as_source: renameAsSource,
       remove_cover: removeCover,
-      unmatch,
+      unmatch_metadata: unmatch,
     },
   });
 }

From fd996e367c6002859f01037ed2e394f1a93546ae Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Fri, 30 Aug 2024 19:24:10 +0100
Subject: [PATCH 5/9] run trunk

---
 backend/endpoints/rom.py                      | 18 +++++------
 .../src/components/Details/Info/FileInfo.vue  | 31 ++++++++++++++-----
 frontend/src/components/Details/Title.vue     |  2 +-
 .../Gallery/AppBar/Platform/Base.vue          |  8 ++++-
 .../src/components/Gallery/FabOverlay.vue     |  8 ++---
 .../Dialog/CreatePlatformBinding.vue          |  6 ++--
 .../Dialog/CreatePlatformVersion.vue          |  6 ++--
 .../components/common/Game/Dialog/EditRom.vue |  2 +-
 .../common/Game/Dialog/SearchRom.vue          |  4 +--
 frontend/src/components/common/NewVersion.vue |  4 +--
 .../common/Platform/Dialog/DeletePlatform.vue |  9 ++----
 .../src/components/common/Platform/Icon.vue   |  2 +-
 .../components/common/Platform/ListItem.vue   |  6 +++-
 frontend/src/views/EmulatorJS/Base.vue        |  6 ++--
 frontend/src/views/Gallery/Collection.vue     | 14 ++++-----
 frontend/src/views/Login.vue                  |  6 ++--
 frontend/src/views/Scan.vue                   |  6 +++-
 frontend/src/views/Setup.vue                  | 24 +++++++++-----
 18 files changed, 98 insertions(+), 64 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index ff32f0c70..24a1f3e7e 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -290,7 +290,7 @@ async def update_rom(
     rename_as_source: bool = False,
     remove_cover: bool = False,
     artwork: UploadFile | None = None,
-    unmatch_metadata: bool = False
+    unmatch_metadata: bool = False,
 ) -> DetailedRomSchema:
     """Update rom endpoint
 
@@ -314,15 +314,15 @@ async def update_rom(
 
     if not rom:
         raise RomNotFoundInDatabaseException(id)
-    
-    if(unmatch_metadata):
+
+    if unmatch_metadata:
         cleaned_data = {
-            "igdb_id":  None,
+            "igdb_id": None,
             "sgdb_id": None,
             "moby_id": None,
             "name": rom.file_name,
             "summary": "",
-            "url_screenshots": {},
+            "url_screenshots": [],
             "path_cover_s": "",
             "path_cover_l": "",
             "url_cover": "",
@@ -334,9 +334,9 @@ async def update_rom(
 
         db_rom_handler.update_rom(id, cleaned_data)
 
-        return DetailedRomSchema.from_orm_with_request(db_rom_handler.get_rom(id), request)
-    
-
+        return DetailedRomSchema.from_orm_with_request(
+            db_rom_handler.get_rom(id), request
+        )
 
     cleaned_data = {
         "igdb_id": data.get("igdb_id", None),
@@ -452,7 +452,7 @@ async def update_rom(
                 cleaned_data.update(
                     {"path_cover_s": path_cover_s, "path_cover_l": path_cover_l}
                 )
-    
+
     db_rom_handler.update_rom(id, cleaned_data)
 
     return DetailedRomSchema.from_orm_with_request(db_rom_handler.get_rom(id), request)
diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index a121249ac..aa6153b1a 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -23,7 +23,7 @@ const romUser = ref(
     note_raw_markdown: "",
     note_is_public: false,
     is_main_sibling: false,
-  }
+  },
 );
 
 // Functions
@@ -53,7 +53,7 @@ watch(
       note_is_public: false,
       is_main_sibling: false,
     };
-  }
+  },
 );
 </script>
 <template>
@@ -117,7 +117,7 @@ watch(
             v-model="downloadStore.filesToDownload"
             :label="rom.file_name"
             item-title="file_name"
-            :items="rom.files.map(f => f.filename)"
+            :items="rom.files.map((f) => f.filename)"
             rounded="0"
             density="compact"
             variant="outlined"
@@ -137,13 +137,28 @@ watch(
           <v-chip size="small" label class="mx-1 my-1">
             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">
+          <v-chip
+            v-if="!rom.multi && rom.sha1_hash"
+            size="small"
+            label
+            class="mx-1 my-1"
+          >
             SHA-1: {{ rom.sha1_hash }}
           </v-chip>
-          <v-chip v-if="!rom.multi && rom.md5_hash" size="small" label class="mx-1 my-1">
-            MD5: {{ rom.md5_hash  }}
+          <v-chip
+            v-if="!rom.multi && rom.md5_hash"
+            size="small"
+            label
+            class="mx-1 my-1"
+          >
+            MD5: {{ rom.md5_hash }}
           </v-chip>
-          <v-chip v-if="!rom.multi && rom.crc_hash" size="small" label class="mx-1 my-1">
+          <v-chip
+            v-if="!rom.multi && rom.crc_hash"
+            size="small"
+            label
+            class="mx-1 my-1"
+          >
             CRC: {{ rom.crc_hash }}
           </v-chip>
         </v-col>
@@ -180,7 +195,7 @@ watch(
         <v-col>
           <v-chip
             v-for="collection in collectionsWithoutFavourites(
-              rom.user_collections
+              rom.user_collections,
             )"
             :to="{ name: 'collection', params: { collection: collection.id } }"
             size="large"
diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index d2f01c896..53db24705 100644
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -11,7 +11,7 @@ import { useDisplay } from "vuetify";
 const props = defineProps<{ rom: DetailedRom; platform: Platform }>();
 const { smAndDown } = useDisplay();
 const releaseDate = new Date(
-  Number(props.rom.first_release_date) * 1000
+  Number(props.rom.first_release_date) * 1000,
 ).toLocaleDateString("en-US", {
   day: "2-digit",
   month: "short",
diff --git a/frontend/src/components/Gallery/AppBar/Platform/Base.vue b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
index d9ea2060a..a5f57fde7 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/Base.vue
@@ -23,7 +23,13 @@ const auth = storeAuth();
 
 <template>
   <v-app-bar id="gallery-app-bar" elevation="0" density="compact">
-    <platform-icon v-if="currentPlatform" :slug="currentPlatform.slug" :name="currentPlatform.name":size="36" class="mx-2" />
+    <platform-icon
+      v-if="currentPlatform"
+      :slug="currentPlatform.slug"
+      :name="currentPlatform.name"
+      :size="36"
+      class="mx-2"
+    />
     <firmware-btn />
     <filter-btn />
     <filter-text-field v-if="!xs" />
diff --git a/frontend/src/components/Gallery/FabOverlay.vue b/frontend/src/components/Gallery/FabOverlay.vue
index ed1591492..c0dfd98d4 100644
--- a/frontend/src/components/Gallery/FabOverlay.vue
+++ b/frontend/src/components/Gallery/FabOverlay.vue
@@ -69,7 +69,7 @@ function resetSelection() {
 async function addToFavourites() {
   if (!favCollection.value) return;
   favCollection.value.roms = favCollection.value.roms.concat(
-    selectedRoms.value.map((r) => r.id)
+    selectedRoms.value.map((r) => r.id),
   );
   await collectionApi
     .updateCollection({ collection: favCollection.value as Collection })
@@ -98,7 +98,7 @@ async function addToFavourites() {
 async function removeFromFavourites() {
   if (!favCollection.value) return;
   favCollection.value.roms = favCollection.value.roms.filter(
-    (value) => !selectedRoms.value.map((r) => r.id).includes(value)
+    (value) => !selectedRoms.value.map((r) => r.id).includes(value),
   );
   if (romsStore.currentCollection?.name.toLowerCase() == "favourites") {
     romsStore.remove(selectedRoms.value);
@@ -210,7 +210,7 @@ function onDownload() {
             ? emitter?.emit('showAddToCollectionDialog', romsStore.selectedRoms)
             : emitter?.emit(
                 'showRemoveFromCollectionDialog',
-                romsStore.selectedRoms
+                romsStore.selectedRoms,
               )
         "
       />
@@ -259,6 +259,6 @@ function onDownload() {
   pointer-events: none;
 }
 .sticky-bottom * {
-    pointer-events: auto; /* Re-enables pointer events for all child elements */
+  pointer-events: auto; /* Re-enables pointer events for all child elements */
 }
 </style>
diff --git a/frontend/src/components/Management/Dialog/CreatePlatformBinding.vue b/frontend/src/components/Management/Dialog/CreatePlatformBinding.vue
index c34ae38c4..63f959dd1 100644
--- a/frontend/src/components/Management/Dialog/CreatePlatformBinding.vue
+++ b/frontend/src/components/Management/Dialog/CreatePlatformBinding.vue
@@ -42,10 +42,10 @@ emitter?.on(
       });
     fsSlugToCreate.value = fsSlug;
     selectedPlatform.value = supportedPlatforms.value?.find(
-      (platform) => platform.slug == slug
+      (platform) => platform.slug == slug,
     );
     show.value = true;
-  }
+  },
 );
 
 // Functions
@@ -60,7 +60,7 @@ function addBindPlatform() {
       if (selectedPlatform.value) {
         configStore.addPlatformBinding(
           fsSlugToCreate.value,
-          selectedPlatform.value.slug
+          selectedPlatform.value.slug,
         );
       }
     })
diff --git a/frontend/src/components/Management/Dialog/CreatePlatformVersion.vue b/frontend/src/components/Management/Dialog/CreatePlatformVersion.vue
index a86aa7326..c375864d2 100644
--- a/frontend/src/components/Management/Dialog/CreatePlatformVersion.vue
+++ b/frontend/src/components/Management/Dialog/CreatePlatformVersion.vue
@@ -42,10 +42,10 @@ emitter?.on(
       });
     fsSlugToCreate.value = fsSlug;
     selectedPlatform.value = supportedPlatforms.value?.find(
-      (platform) => platform.slug == slug
+      (platform) => platform.slug == slug,
     );
     show.value = true;
-  }
+  },
 );
 
 // Functions
@@ -60,7 +60,7 @@ function addVersionPlatform() {
       if (selectedPlatform.value) {
         configStore.addPlatformBinding(
           fsSlugToCreate.value,
-          selectedPlatform.value.slug
+          selectedPlatform.value.slug,
         );
       }
     })
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 9e94388f6..73583d7ef 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -220,7 +220,7 @@ function closeDialog() {
                       @click="
                         emitter?.emit(
                           'showSearchCoverDialog',
-                          rom?.name as string
+                          rom?.name as string,
                         )
                       "
                     >
diff --git a/frontend/src/components/common/Game/Dialog/SearchRom.vue b/frontend/src/components/common/Game/Dialog/SearchRom.vue
index 4e79af2fb..63c7414c9 100644
--- a/frontend/src/components/common/Game/Dialog/SearchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchRom.vue
@@ -43,7 +43,7 @@ async function filterRoms() {
   } else {
     filteredRoms.value = searchedRoms.value.filter(
       (rom: { platform_name: string }) =>
-        rom.platform_name == selectedPlatform.value?.platform_name
+        rom.platform_name == selectedPlatform.value?.platform_name,
     ) as SimpleRom[];
   }
 }
@@ -73,7 +73,7 @@ async function searchRoms() {
             platform_name: rom.platform_name,
             platform_slug: rom.platform_slug,
           },
-        ])
+        ]),
       ).values(),
     ];
     filterRoms();
diff --git a/frontend/src/components/common/NewVersion.vue b/frontend/src/components/common/NewVersion.vue
index 7b2b17510..976de1aca 100644
--- a/frontend/src/components/common/NewVersion.vue
+++ b/frontend/src/components/common/NewVersion.vue
@@ -18,7 +18,7 @@ function dismissVersionBanner() {
 }
 onMounted(async () => {
   const response = await fetch(
-    "https://api.github.com/repos/rommapp/romm/releases/latest"
+    "https://api.github.com/repos/rommapp/romm/releases/latest",
   );
   const json = await response.json();
   GITHUB_VERSION.value = json.tag_name;
@@ -72,6 +72,6 @@ onMounted(async () => {
   pointer-events: none;
 }
 .sticky-bottom * {
-    pointer-events: auto; /* Re-enables pointer events for all child elements */
+  pointer-events: auto; /* Re-enables pointer events for all child elements */
 }
 </style>
diff --git a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
index a012d9a5b..c34d661f1 100644
--- a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
+++ b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
@@ -79,13 +79,8 @@ function closeDialog() {
     <template #append>
       <v-row class="justify-center pa-2" no-gutters>
         <v-btn-group divided density="compact">
-          <v-btn class="bg-terciary" @click="closeDialog" >
-            Cancel
-          </v-btn>
-          <v-btn
-            class="bg-terciary text-romm-red"
-            @click="deletePlatform"
-          >
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-terciary text-romm-red" @click="deletePlatform">
             Confirm
           </v-btn>
         </v-btn-group>
diff --git a/frontend/src/components/common/Platform/Icon.vue b/frontend/src/components/common/Platform/Icon.vue
index 3b53ebf80..7d36a37ea 100644
--- a/frontend/src/components/common/Platform/Icon.vue
+++ b/frontend/src/components/common/Platform/Icon.vue
@@ -9,7 +9,7 @@ const props = withDefaults(
     size?: number;
     rounded?: number;
   }>(),
-  { size: 40, rounded: 0 }
+  { size: 40, rounded: 0 },
 );
 const configStore = storeConfig();
 const { config } = storeToRefs(configStore);
diff --git a/frontend/src/components/common/Platform/ListItem.vue b/frontend/src/components/common/Platform/ListItem.vue
index 0992ee41b..bdced0c83 100644
--- a/frontend/src/components/common/Platform/ListItem.vue
+++ b/frontend/src/components/common/Platform/ListItem.vue
@@ -15,7 +15,11 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
     :value="platform.slug"
   >
     <template #prepend>
-      <platform-icon :key="platform.slug" :slug="platform.slug" :name="platform.name">
+      <platform-icon
+        :key="platform.slug"
+        :slug="platform.slug"
+        :name="platform.name"
+      >
         <v-tooltip
           location="bottom"
           class="tooltip"
diff --git a/frontend/src/views/EmulatorJS/Base.vue b/frontend/src/views/EmulatorJS/Base.vue
index b0be98c97..2e57ef995 100644
--- a/frontend/src/views/EmulatorJS/Base.vue
+++ b/frontend/src/views/EmulatorJS/Base.vue
@@ -68,12 +68,12 @@ onMounted(async () => {
   } else if (rom.value.user_states) {
     // Otherwise auto select most recent state by last updated date
     stateRef.value = rom.value.user_states?.sort((a, b) =>
-      b.updated_at.localeCompare(a.updated_at)
+      b.updated_at.localeCompare(a.updated_at),
     )[0];
   }
 
   const storedBiosID = localStorage.getItem(
-    `player:${rom.value.platform_slug}:bios_id`
+    `player:${rom.value.platform_slug}:bios_id`,
   );
   if (storedBiosID) {
     biosRef.value =
@@ -82,7 +82,7 @@ onMounted(async () => {
   }
 
   const storedCore = localStorage.getItem(
-    `player:${rom.value.platform_slug}:core`
+    `player:${rom.value.platform_slug}:core`,
   );
   if (storedCore) {
     coreRef.value = storedCore;
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 6ba85da27..bf2e5b615 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -69,7 +69,7 @@ async function fetchRoms() {
         timeout: 4000,
       });
       console.error(
-        `Couldn't fetch roms for collection ID ${currentCollection.value?.id}: ${error}`
+        `Couldn't fetch roms for collection ID ${currentCollection.value?.id}: ${error}`,
       );
       noCollectionError.value = true;
     })
@@ -87,28 +87,28 @@ function setFilters() {
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.genres.map((genre) => genre))
-        .sort()
+        .sort(),
     ),
   ]);
   galleryFilterStore.setFilterFranchises([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.franchises.map((franchise) => franchise))
-        .sort()
+        .sort(),
     ),
   ]);
   galleryFilterStore.setFilterCompanies([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.companies.map((company) => company))
-        .sort()
+        .sort(),
     ),
   ]);
   galleryFilterStore.setFilterCollections([
     ...new Set(
       romsStore.filteredRoms
         .flatMap((rom) => rom.collections.map((collection) => collection))
-        .sort()
+        .sort(),
     ),
   ]);
 }
@@ -135,7 +135,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
     }
     if (emitData.event.shiftKey) {
       const [start, end] = [romsStore.lastSelectedIndex, index].sort(
-        (a, b) => a - b
+        (a, b) => a - b,
       );
       if (romsStore.selectedRoms.includes(emitData.rom)) {
         for (let i = start + 1; i < end; i++) {
@@ -147,7 +147,7 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
         }
       }
       romsStore.updateLastSelected(
-        romsStore.selectedRoms.includes(emitData.rom) ? index : index - 1
+        romsStore.selectedRoms.includes(emitData.rom) ? index : index - 1,
       );
     } else {
       romsStore.updateLastSelected(index);
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 89eaae4db..ab89c816d 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -42,7 +42,7 @@ async function login() {
       });
 
       console.error(
-        `[${response.status} ${response.statusText}] ${errorMessage}`
+        `[${response.status} ${response.statusText}] ${errorMessage}`,
       );
     })
     .finally(() => {
@@ -117,7 +117,9 @@ async function login() {
     </v-card>
 
     <div id="version" class="position-absolute">
-      <span class="text-white text-shadow">{{ heartbeatStore.value.VERSION }}</span>
+      <span class="text-white text-shadow">{{
+        heartbeatStore.value.VERSION
+      }}</span>
     </div>
   </v-container>
 </template>
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 05d1ae2b0..934a98420 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -311,7 +311,11 @@ async function stopScan() {
             <v-list-item class="pa-0">
               <template #prepend>
                 <v-avatar :rounded="0" size="40">
-                  <platform-icon :key="platform.slug" :slug="platform.slug" :name="platform.name" />
+                  <platform-icon
+                    :key="platform.slug"
+                    :slug="platform.slug"
+                    :name="platform.name"
+                  />
                 </v-avatar>
               </template>
               {{ platform.name }}
diff --git a/frontend/src/views/Setup.vue b/frontend/src/views/Setup.vue
index c8366fdbf..efb0e616e 100644
--- a/frontend/src/views/Setup.vue
+++ b/frontend/src/views/Setup.vue
@@ -43,7 +43,7 @@ const step = ref(1);
 const filledAdminUser = computed(
   () =>
     defaultAdminUser.value.username != "" &&
-    defaultAdminUser.value.password != ""
+    defaultAdminUser.value.password != "",
 );
 const isFirstStep = computed(() => step.value == 1);
 const isLastStep = computed(() => step.value == 2);
@@ -189,14 +189,20 @@ async function finishWizard() {
 
           <v-stepper-actions :disabled="!filledAdminUser">
             <template #prev>
-              <v-btn class="text-white text-shadow" :ripple="false" :disabled="isFirstStep" @click="prev">{{
-                isFirstStep ? "" : "previous"
-              }}</v-btn>
+              <v-btn
+                class="text-white text-shadow"
+                :ripple="false"
+                :disabled="isFirstStep"
+                @click="prev"
+                >{{ isFirstStep ? "" : "previous" }}</v-btn
+              >
             </template>
             <template #next>
-              <v-btn class="text-white text-shadow" @click="!isLastStep ? next() : finishWizard()">{{
-                !isLastStep ? "Next" : "Finish"
-              }}</v-btn>
+              <v-btn
+                class="text-white text-shadow"
+                @click="!isLastStep ? next() : finishWizard()"
+                >{{ !isLastStep ? "Next" : "Finish" }}</v-btn
+              >
             </template>
           </v-stepper-actions>
         </template>
@@ -223,7 +229,9 @@ async function finishWizard() {
   max-width: 300px;
 }
 #version {
-  text-shadow: 1px 1px 1px #000000, 0 0 1px #000000;
+  text-shadow:
+    1px 1px 1px #000000,
+    0 0 1px #000000;
   bottom: 0.3rem;
   right: 0.5rem;
 }

From 36177839cc9e507a296b9f7e32be259e4b7f8437 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 30 Aug 2024 14:46:31 -0400
Subject: [PATCH 6/9] small refactor in component

---
 .../components/common/Game/Dialog/EditRom.vue | 50 ++++++-------------
 1 file changed, 14 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 73583d7ef..ddb4e85f7 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -55,20 +55,17 @@ async function removeArtwork() {
   removeCover.value = true;
 }
 
-async function unmatchRom() {
+async function handleRomUpdate(options, successMessage) {
   if (!rom.value) return;
 
   show.value = false;
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
   await romApi
-    .updateRom({
-      rom: rom.value,
-      unmatch: true,
-    })
+    .updateRom(options)
     .then(({ data }) => {
       emitter?.emit("snackbarShow", {
-        msg: "Rom updated successfully!",
+        msg: successMessage,
         icon: "mdi-check-bold",
         color: "green",
       });
@@ -91,9 +88,14 @@ async function unmatchRom() {
     });
 }
 
-async function updateRom() {
-  if (!rom.value) return;
+async function unmatchRom() {
+  await handleRomUpdate(
+    { rom: rom.value, unmatch: true },
+    "Rom unmatched successfully",
+  );
+}
 
+async function updateRom() {
   if (!rom.value.file_name) {
     emitter?.emit("snackbarShow", {
       msg: "Cannot save: file name is required",
@@ -103,34 +105,10 @@ async function updateRom() {
     return;
   }
 
-  show.value = false;
-  emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
-
-  await romApi
-    .updateRom({ rom: rom.value, removeCover: removeCover.value })
-    .then(({ data }) => {
-      emitter?.emit("snackbarShow", {
-        msg: "Rom updated successfully!",
-        icon: "mdi-check-bold",
-        color: "green",
-      });
-      romsStore.update(data as SimpleRom);
-      if (route.name == "rom") {
-        romsStore.currentRom = data;
-      }
-    })
-    .catch((error) => {
-      console.log(error);
-      emitter?.emit("snackbarShow", {
-        msg: error.response.data.detail,
-        icon: "mdi-close-circle",
-        color: "red",
-      });
-    })
-    .finally(() => {
-      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
-      closeDialog();
-    });
+  await handleRomUpdate(
+    { rom: rom.value, removeCover: removeCover.value },
+    "Rom updated successfully!",
+  );
 }
 
 function closeDialog() {

From a7aba7374db1798f19aa666ea81d000091e1d722 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 30 Aug 2024 14:49:58 -0400
Subject: [PATCH 7/9] fix trunk issues

---
 backend/endpoints/rom.py | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 24a1f3e7e..399a6db7d 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -316,23 +316,24 @@ async def update_rom(
         raise RomNotFoundInDatabaseException(id)
 
     if unmatch_metadata:
-        cleaned_data = {
-            "igdb_id": None,
-            "sgdb_id": None,
-            "moby_id": None,
-            "name": rom.file_name,
-            "summary": "",
-            "url_screenshots": [],
-            "path_cover_s": "",
-            "path_cover_l": "",
-            "url_cover": "",
-            "slug": "",
-            "igdb_metadata": {},
-            "moby_metadata": {},
-            "revision": "",
-        }
-
-        db_rom_handler.update_rom(id, cleaned_data)
+        db_rom_handler.update_rom(
+            id,
+            {
+                "igdb_id": None,
+                "sgdb_id": None,
+                "moby_id": None,
+                "name": rom.file_name,
+                "summary": "",
+                "url_screenshots": [],
+                "path_cover_s": "",
+                "path_cover_l": "",
+                "url_cover": "",
+                "slug": "",
+                "igdb_metadata": {},
+                "moby_metadata": {},
+                "revision": "",
+            },
+        )
 
         return DetailedRomSchema.from_orm_with_request(
             db_rom_handler.get_rom(id), request

From f3f6b6e8846285ce413cc178cc01a1aeffcc011f Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 30 Aug 2024 15:06:01 -0400
Subject: [PATCH 8/9] small tweaks to ui

---
 backend/endpoints/rom.py                      |  1 +
 .../components/common/Game/Dialog/EditRom.vue | 44 ++++++++++---------
 2 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 399a6db7d..0168bc730 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -325,6 +325,7 @@ async def update_rom(
                 "name": rom.file_name,
                 "summary": "",
                 "url_screenshots": [],
+                "path_screenshots": [],
                 "path_cover_s": "",
                 "path_cover_l": "",
                 "url_cover": "",
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index ddb4e85f7..b0f4b8821 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -6,7 +6,7 @@ import storeHeartbeat from "@/stores/heartbeat";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
-import { inject, ref } from "vue";
+import { inject, ref, computed } from "vue";
 import { useRoute } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
 
@@ -55,6 +55,10 @@ async function removeArtwork() {
   removeCover.value = true;
 }
 
+const noMetadataMatch = computed(() => {
+  return !rom.value.igdb_id && !rom.value.moby_id && !rom.value.sgdb_id;
+});
+
 async function handleRomUpdate(options, successMessage) {
   if (!rom.value) return;
 
@@ -178,10 +182,28 @@ function closeDialog() {
                 variant="outlined"
                 required
                 hide-details
-                @keyup.enter="updateRom()"
+                @keyup.enter="updateRom"
               />
             </v-col>
           </v-row>
+          <v-row class="justify-space-between mt-4 mb-2 mx-2" no-gutters>
+            <v-btn-group divided density="compact">
+              <v-btn
+                :disabled="noMetadataMatch"
+                :class="` ${noMetadataMatch ? '' : 'bg-terciary text-romm-red'}`"
+                variant="flat"
+                @click="unmatchRom"
+              >
+                Unmatch Rom
+              </v-btn>
+            </v-btn-group>
+            <v-btn-group divided density="compact">
+              <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+              <v-btn class="text-romm-green bg-terciary" @click="updateRom">
+                Save
+              </v-btn>
+            </v-btn-group>
+          </v-row>
         </v-col>
         <v-col>
           <v-row class="pa-2 justify-center" no-gutters>
@@ -236,24 +258,6 @@ function closeDialog() {
         </v-col>
       </v-row>
     </template>
-    <template #append>
-      <v-row class="justify-center mt-4 mb-2" no-gutters>
-        <v-btn-group divided density="compact">
-          <v-btn
-            :disabled="!rom.igdb_id && !rom.moby_id && !rom.sgdb_id"
-            class="text-romm-red bg-terciary"
-            variant="flat"
-            @click="() => unmatchRom()"
-          >
-            Unmatch Rom
-          </v-btn>
-          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-          <v-btn class="text-romm-green bg-terciary" @click="updateRom">
-            Apply
-          </v-btn>
-        </v-btn-group>
-      </v-row>
-    </template>
   </r-dialog>
 </template>
 <style scoped>

From 885aeab705b0626196cdff42503b85358650819e Mon Sep 17 00:00:00 2001
From: SaraVieira <hey@iamsaravieira.com>
Date: Fri, 30 Aug 2024 21:29:48 +0100
Subject: [PATCH 9/9] fix ts

---
 .../components/common/Game/Dialog/EditRom.vue | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index b0f4b8821..0606c2073 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -56,12 +56,18 @@ async function removeArtwork() {
 }
 
 const noMetadataMatch = computed(() => {
-  return !rom.value.igdb_id && !rom.value.moby_id && !rom.value.sgdb_id;
+  return !rom.value?.igdb_id && !rom.value?.moby_id && !rom.value?.sgdb_id;
 });
 
-async function handleRomUpdate(options, successMessage) {
-  if (!rom.value) return;
-
+async function handleRomUpdate(
+  options: {
+    rom: UpdateRom;
+    renameAsSource?: boolean;
+    removeCover?: boolean;
+    unmatch?: boolean;
+  },
+  successMessage: string,
+) {
   show.value = false;
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
@@ -93,6 +99,7 @@ async function handleRomUpdate(options, successMessage) {
 }
 
 async function unmatchRom() {
+  if (!rom.value) return;
   await handleRomUpdate(
     { rom: rom.value, unmatch: true },
     "Rom unmatched successfully",
@@ -100,7 +107,7 @@ async function unmatchRom() {
 }
 
 async function updateRom() {
-  if (!rom.value.file_name) {
+  if (!rom.value?.file_name) {
     emitter?.emit("snackbarShow", {
       msg: "Cannot save: file name is required",
       icon: "mdi-close-circle",
@@ -190,7 +197,9 @@ function closeDialog() {
             <v-btn-group divided density="compact">
               <v-btn
                 :disabled="noMetadataMatch"
-                :class="` ${noMetadataMatch ? '' : 'bg-terciary text-romm-red'}`"
+                :class="` ${
+                  noMetadataMatch ? '' : 'bg-terciary text-romm-red'
+                }`"
                 variant="flat"
                 @click="unmatchRom"
               >