From 9e4e71681262a3cf8ebe83b303ec0e106220271f Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Thu, 9 Jan 2025 19:27:29 -0500
Subject: [PATCH 1/2] Rework columns in table view

---
 backend/models/rom.py                         |   2 +-
 frontend/src/components/Details/Title.vue     |   2 +-
 .../src/components/common/Game/FavBtn.vue     |   3 +-
 frontend/src/components/common/Game/Table.vue | 114 +++++++++++++-----
 4 files changed, 84 insertions(+), 37 deletions(-)

diff --git a/backend/models/rom.py b/backend/models/rom.py
index d45f877b6..230f9ded8 100644
--- a/backend/models/rom.py
+++ b/backend/models/rom.py
@@ -167,7 +167,7 @@ def alternative_names(self) -> list[str]:
     @property
     def first_release_date(self) -> int:
         if self.igdb_metadata:
-            return self.igdb_metadata.get("first_release_date", 0)
+            return self.igdb_metadata.get("first_release_date", 0) * 1000
         return 0
 
     @property
diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index b32cd0c4a..67539f405 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 }>();
 const { smAndDown } = useDisplay();
 const releaseDate = new Date(
-  Number(props.rom.first_release_date) * 1000,
+  Number(props.rom.first_release_date),
 ).toLocaleDateString("en-US", {
   day: "2-digit",
   month: "short",
diff --git a/frontend/src/components/common/Game/FavBtn.vue b/frontend/src/components/common/Game/FavBtn.vue
index 6c193790e..26934213c 100644
--- a/frontend/src/components/common/Game/FavBtn.vue
+++ b/frontend/src/components/common/Game/FavBtn.vue
@@ -88,9 +88,8 @@ async function switchFromFavourites() {
     @click.stop="switchFromFavourites"
     class="translucent text-shadow"
     rouded="0"
-    size="x-small"
+    size="small"
     variant="text"
-    icon
     ><v-icon color="romm-accent-1">{{
       collectionsStore.isFav(rom) ? "mdi-star" : "mdi-star-outline"
     }}</v-icon></v-btn
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index 021ae87d5..a924b0c0e 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -46,12 +46,6 @@ const HEADERS = [
     sortable: true,
     key: "name",
   },
-  {
-    title: "",
-    align: "start",
-    sortable: false,
-    key: "is_fav",
-  },
   {
     title: "Size",
     align: "start",
@@ -59,24 +53,30 @@ const HEADERS = [
     key: "file_size_bytes",
   },
   {
-    title: "Reg",
+    title: "Added",
     align: "start",
     sortable: true,
-    key: "regions",
+    key: "created_at",
   },
   {
-    title: "Lang",
+    title: "Released",
     align: "start",
     sortable: true,
+    key: "first_release_date",
+  },
+  {
+    title: "Languages",
+    align: "start",
+    sortable: false,
     key: "languages",
   },
   {
-    title: "Rev",
+    title: "Regions",
     align: "start",
-    sortable: true,
-    key: "revision",
+    sortable: false,
+    key: "regions",
   },
-  { title: "", align: "end", key: "actions", sortable: false },
+  { title: "", align: "center", key: "actions", sortable: false },
 ] as const;
 
 const selectedRomIDs = computed(() => selectedRoms.value.map((rom) => rom.id));
@@ -170,18 +170,18 @@ onMounted(() => {
     </template>
     <template #item.name="{ item }">
       <td>
-        <v-list-item :min-width="400" class="px-0">
+        <v-list-item class="px-0">
           <template #prepend>
             <r-avatar-rom :rom="item" />
           </template>
           <v-row no-gutters>
-            <v-col>{{ item.name }}</v-col></v-row
-          >
-          <v-row no-gutters
-            ><v-col class="text-romm-accent-1">{{
-              item.file_name
-            }}</v-col></v-row
-          >
+            <v-col>{{ item.name }}</v-col>
+          </v-row>
+          <v-row no-gutters>
+            <v-col class="text-romm-accent-1">
+              {{ item.file_name }}
+            </v-col>
+          </v-row>
           <template #append>
             <v-chip
               v-if="
@@ -189,7 +189,7 @@ onMounted(() => {
                 item.sibling_roms.length > 0 &&
                 showSiblings
               "
-              class="translucent-dark ml-2"
+              class="translucent-dark ml-4"
               size="x-small"
             >
               <span class="text-caption">+{{ item.sibling_roms.length }}</span>
@@ -198,26 +198,66 @@ onMounted(() => {
         </v-list-item>
       </td>
     </template>
-    <template #item.is_fav="{ item }">
-      <fav-btn :rom="item" />
-    </template>
     <template #item.file_size_bytes="{ item }">
       <v-chip size="x-small" label>{{
         formatBytes(item.file_size_bytes)
       }}</v-chip>
     </template>
-    <template #item.regions="{ item }">
-      <span class="px-1" v-for="region in item.regions">
-        {{ regionToEmoji(region) }}
-      </span>
+    <template #item.created_at="{ item }">
+      <v-chip v-if="item.created_at" size="x-small" label>{{
+        new Date(item.created_at).toLocaleDateString("en-US", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+        })
+      }}</v-chip>
+    </template>
+    <template #item.first_release_date="{ item }">
+      <v-chip v-if="item.first_release_date" size="x-small" label>{{
+        new Date(item.first_release_date).toLocaleDateString("en-US", {
+          day: "2-digit",
+          month: "short",
+          year: "numeric",
+        })
+      }}</v-chip>
     </template>
     <template #item.languages="{ item }">
-      <span class="px-1" v-for="language in item.languages">
-        {{ languageToEmoji(language) }}
-      </span>
+      <div class="d-flex">
+        <span
+          class="emoji"
+          v-for="language in item.languages.slice(0, 3)"
+          :title="`Languages: ${item.languages.join(', ')}`"
+          :class="{ 'emoji-collection': item.regions.length > 3 }"
+        >
+          {{ languageToEmoji(language) }}
+        </span>
+        <spa class="reglang-super">
+          {{
+            item.languages.length > 3
+              ? `&nbsp;+${item.languages.length - 3}`
+              : ""
+          }}
+        </spa>
+      </div>
+    </template>
+    <template #item.regions="{ item }">
+      <div class="d-flex">
+        <span
+          class="emoji"
+          v-for="region in item.regions.slice(0, 3)"
+          :title="`Regions: ${item.regions.join(', ')}`"
+          :class="{ 'emoji-collection': item.regions.length > 3 }"
+        >
+          {{ regionToEmoji(region) }}
+        </span>
+      </div>
+      <spa class="reglang-super">
+        {{ item.regions.length > 3 ? `&nbsp;+${item.regions.length - 3}` : "" }}
+      </spa>
     </template>
     <template #item.actions="{ item }">
-      <v-btn-group divided density="compact">
+      <v-btn-group density="compact">
+        <fav-btn :rom="item" />
         <v-btn
           :disabled="downloadStore.value.includes(item.id)"
           download
@@ -291,3 +331,11 @@ onMounted(() => {
     </template>
   </v-data-table>
 </template>
+
+<style scoped>
+.reglang-super {
+  vertical-align: super;
+  font-size: 75%;
+  opacity: 75%;
+}
+</style>

From b5d2caddf4ac740ab530f164b6d4479925867533 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Thu, 9 Jan 2025 22:38:28 -0500
Subject: [PATCH 2/2] add average rating as a column

---
 backend/endpoints/responses/rom.py            |  1 +
 backend/models/rom.py                         | 16 ++++++
 .../__generated__/models/DetailedRomSchema.ts |  1 +
 .../src/__generated__/models/RomSchema.ts     |  1 +
 .../__generated__/models/SimpleRomSchema.ts   |  1 +
 frontend/src/components/common/Game/Table.vue | 49 ++++++++++++++-----
 6 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index d4108afd4..e8e219b7c 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -121,6 +121,7 @@ class RomSchema(BaseModel):
     # Metadata fields
     first_release_date: int | None
     youtube_video_id: str | None
+    average_rating: float
     alternative_names: list[str]
     genres: list[str]
     franchises: list[str]
diff --git a/backend/models/rom.py b/backend/models/rom.py
index 230f9ded8..00903300a 100644
--- a/backend/models/rom.py
+++ b/backend/models/rom.py
@@ -170,6 +170,22 @@ def first_release_date(self) -> int:
             return self.igdb_metadata.get("first_release_date", 0) * 1000
         return 0
 
+    @property
+    def average_rating(self) -> float:
+        igdb_rating = (
+            float(self.igdb_metadata.get("total_rating", 0))
+            if self.igdb_metadata
+            else 0.0
+        )
+        moby_rating = (
+            float(self.moby_metadata.get("moby_score", 0))
+            if self.moby_metadata
+            else 0.0
+        )
+        ratings = [igdb_rating, moby_rating * 10]  # Moby rating is out of 10
+
+        return sum(ratings) / len([r for r in ratings if r]) if any(ratings) else 0.0
+
     @property
     def genres(self) -> list[str]:
         return (
diff --git a/frontend/src/__generated__/models/DetailedRomSchema.ts b/frontend/src/__generated__/models/DetailedRomSchema.ts
index 82a6948c1..4aca7be30 100644
--- a/frontend/src/__generated__/models/DetailedRomSchema.ts
+++ b/frontend/src/__generated__/models/DetailedRomSchema.ts
@@ -36,6 +36,7 @@ export type DetailedRomSchema = {
     summary: (string | null);
     first_release_date: (number | null);
     youtube_video_id: (string | null);
+    average_rating: number;
     alternative_names: Array<string>;
     genres: Array<string>;
     franchises: Array<string>;
diff --git a/frontend/src/__generated__/models/RomSchema.ts b/frontend/src/__generated__/models/RomSchema.ts
index c6f09f7e7..4fa52db13 100644
--- a/frontend/src/__generated__/models/RomSchema.ts
+++ b/frontend/src/__generated__/models/RomSchema.ts
@@ -29,6 +29,7 @@ export type RomSchema = {
     summary: (string | null);
     first_release_date: (number | null);
     youtube_video_id: (string | null);
+    average_rating: number;
     alternative_names: Array<string>;
     genres: Array<string>;
     franchises: Array<string>;
diff --git a/frontend/src/__generated__/models/SimpleRomSchema.ts b/frontend/src/__generated__/models/SimpleRomSchema.ts
index 1fd9787df..9c7ad31e2 100644
--- a/frontend/src/__generated__/models/SimpleRomSchema.ts
+++ b/frontend/src/__generated__/models/SimpleRomSchema.ts
@@ -31,6 +31,7 @@ export type SimpleRomSchema = {
     summary: (string | null);
     first_release_date: (number | null);
     youtube_video_id: (string | null);
+    average_rating: number;
     alternative_names: Array<string>;
     genres: Array<string>;
     franchises: Array<string>;
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index a924b0c0e..a7659d247 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -64,6 +64,12 @@ const HEADERS = [
     sortable: true,
     key: "first_release_date",
   },
+  {
+    title: "Rating",
+    align: "start",
+    sortable: true,
+    key: "average_rating",
+  },
   {
     title: "Languages",
     align: "start",
@@ -76,7 +82,12 @@ const HEADERS = [
     sortable: false,
     key: "regions",
   },
-  { title: "", align: "center", key: "actions", sortable: false },
+  {
+    title: "",
+    align: "center",
+    key: "actions",
+    sortable: false,
+  },
 ] as const;
 
 const selectedRomIDs = computed(() => selectedRoms.value.map((rom) => rom.id));
@@ -199,30 +210,38 @@ onMounted(() => {
       </td>
     </template>
     <template #item.file_size_bytes="{ item }">
-      <v-chip size="x-small" label>{{
-        formatBytes(item.file_size_bytes)
-      }}</v-chip>
+      <span class="text-no-wrap">{{ formatBytes(item.file_size_bytes) }}</span>
     </template>
     <template #item.created_at="{ item }">
-      <v-chip v-if="item.created_at" size="x-small" label>{{
+      <span v-if="item.created_at" class="text-no-wrap">{{
         new Date(item.created_at).toLocaleDateString("en-US", {
           day: "2-digit",
           month: "short",
           year: "numeric",
         })
-      }}</v-chip>
+      }}</span>
+      <span v-else>-</span>
     </template>
     <template #item.first_release_date="{ item }">
-      <v-chip v-if="item.first_release_date" size="x-small" label>{{
+      <span v-if="item.first_release_date" class="text-no-wrap">{{
         new Date(item.first_release_date).toLocaleDateString("en-US", {
           day: "2-digit",
           month: "short",
           year: "numeric",
         })
-      }}</v-chip>
+      }}</span>
+      <span v-else>-</span>
+    </template>
+    <template #item.average_rating="{ item }">
+      <span v-if="item.average_rating" class="text-no-wrap">{{
+        Intl.NumberFormat("en-US", {
+          maximumSignificantDigits: 3,
+        }).format(item.average_rating)
+      }}</span>
+      <span v-else>-</span>
     </template>
     <template #item.languages="{ item }">
-      <div class="d-flex">
+      <div class="text-no-wrap" v-if="item.languages.length > 0">
         <span
           class="emoji"
           v-for="language in item.languages.slice(0, 3)"
@@ -239,9 +258,10 @@ onMounted(() => {
           }}
         </spa>
       </div>
+      <span v-else>-</span>
     </template>
     <template #item.regions="{ item }">
-      <div class="d-flex">
+      <div class="text-no-wrap" v-if="item.regions.length > 0">
         <span
           class="emoji"
           v-for="region in item.regions.slice(0, 3)"
@@ -250,10 +270,13 @@ onMounted(() => {
         >
           {{ regionToEmoji(region) }}
         </span>
+        <spa class="reglang-super">
+          {{
+            item.regions.length > 3 ? `&nbsp;+${item.regions.length - 3}` : ""
+          }}
+        </spa>
       </div>
-      <spa class="reglang-super">
-        {{ item.regions.length > 3 ? `&nbsp;+${item.regions.length - 3}` : "" }}
-      </spa>
+      <span v-else>-</span>
     </template>
     <template #item.actions="{ item }">
       <v-btn-group density="compact">