From 1b081290d70244de6df55897063496bf3ac728ba Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sun, 26 May 2024 22:29:55 -0400
Subject: [PATCH 1/9] fetch all roms on load lol

---
 frontend/src/services/api/rom.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 9a17e9873..1663a8b0d 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -32,7 +32,7 @@ async function uploadRoms({
 
 async function getRoms({
   platformId = null,
-  size = 60,
+  size = 5000,
   cursor = "",
   searchTerm = "",
   orderBy = "name",

From 9fb3bb869e11f7864aae5bfe609e2a46a921360d Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Sun, 26 May 2024 22:41:29 -0400
Subject: [PATCH 2/9] use the lazy img component

---
 frontend/src/components/Game/Card/Cover.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Game/Card/Cover.vue b/frontend/src/components/Game/Card/Cover.vue
index 09cbc0458..21dbee764 100644
--- a/frontend/src/components/Game/Card/Cover.vue
+++ b/frontend/src/components/Game/Card/Cover.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import LazyImage from "@/components/LazyImage.vue";
 import storeDownload from "@/stores/download";
 import storeGalleryView from "@/stores/galleryView";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -82,9 +83,10 @@ function onTouchEnd() {
       absolute
     />
     <v-hover v-slot="{ isHovering, props }" open-delay="800">
-      <img
+      <lazy-image
         :key="rom.id"
         v-bind="props"
+        :placeholder="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
         :src="
           !rom.igdb_id && !rom.moby_id && !rom.has_cover
             ? `/assets/default/cover/big_${theme.global.name.value}_unmatched.png`
@@ -101,7 +103,7 @@ function onTouchEnd() {
             :class="{
               'text-truncate': galleryViewStore.current == 0 && !isHovering,
             }"
-            style="position: absolute; top: 0; width: 100%;"
+            style="position: absolute; top: 0; width: 100%"
           >
             <v-list-item>{{ rom.name }}</v-list-item>
           </div>
@@ -138,7 +140,7 @@ function onTouchEnd() {
             +{{ rom.siblings.length }}
           </v-chip>
         </v-row>
-      </img>
+      </lazy-image>
     </v-hover>
   </router-link>
 </template>

From d40d92c3459c8289bb1d90dcd338220214a72d75 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 28 May 2024 14:41:23 +0200
Subject: [PATCH 3/9] gallery render refactor | added 404 pages

---
 .../src/components/Game/DataTable/Base.vue    |  15 +-
 frontend/src/stores/roms.ts                   |   1 +
 frontend/src/utils/index.ts                   |   8 --
 frontend/src/views/Details/Base.vue           |  12 ++
 frontend/src/views/Gallery/Base.vue           | 133 +++++++++++-------
 5 files changed, 102 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/Game/DataTable/Base.vue b/frontend/src/components/Game/DataTable/Base.vue
index 1d14e0dc3..309cd89fd 100644
--- a/frontend/src/components/Game/DataTable/Base.vue
+++ b/frontend/src/components/Game/DataTable/Base.vue
@@ -63,7 +63,9 @@ const HEADERS = [
 ] as const;
 
 const PER_PAGE_OPTIONS = [
-  { value: -1, title: "$vuetify.dataFooter.itemsPerPageAll" },
+  { value: 25, title: "25" },
+  { value: 50, title: "50" },
+  { value: 100, title: "100" },
 ] as const;
 
 // Props
@@ -71,7 +73,7 @@ const router = useRouter();
 const downloadStore = storeDownload();
 const romsStore = storeRoms();
 const auth = storeAuth();
-const romsPerPage = ref(-1);
+const romsPerPage = ref(25);
 
 // Functions
 function rowClick(_: Event, row: any) {
@@ -100,7 +102,7 @@ function rowClick(_: Event, row: any) {
           :indeterminate="true"
           absolute
         />
-        <v-img
+        <img
           :src="
             !item.igdb_id && !item.has_cover
               ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
@@ -108,13 +110,6 @@ function rowClick(_: Event, row: any) {
               ? `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
               : `/assets/romm/resources/${item.path_cover_s}`
           "
-          :lazy-src="
-            !item.igdb_id && !item.has_cover
-              ? `/assets/default/cover/small_${theme.global.name.value}_unmatched.png`
-              : !item.has_cover
-              ? `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
-              : `/assets/romm/resources/${item.path_cover_s}`
-          "
           min-height="150"
         />
       </v-avatar>
diff --git a/frontend/src/stores/roms.ts b/frontend/src/stores/roms.ts
index faeaa1288..fe7992dd9 100644
--- a/frontend/src/stores/roms.ts
+++ b/frontend/src/stores/roms.ts
@@ -26,6 +26,7 @@ export default defineStore("roms", {
     cursor: "" as string | null,
     searchCursor: "" as string | null,
     selecting: false,
+    itemsPerBatch: 72,
   }),
 
   getters: {
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 0903479be..59028be93 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -48,14 +48,6 @@ export const views: Record<
 
 export const defaultAvatarPath = "/assets/default/user.png";
 
-export function toTop() {
-  window.scrollTo({
-    top: 0,
-    left: 0,
-    behavior: "smooth",
-  });
-}
-
 export function normalizeString(s: string) {
   return s
     .toLowerCase()
diff --git a/frontend/src/views/Details/Base.vue b/frontend/src/views/Details/Base.vue
index 7b7617c65..61032a610 100644
--- a/frontend/src/views/Details/Base.vue
+++ b/frontend/src/views/Details/Base.vue
@@ -42,6 +42,7 @@ emitter?.on("showEmulation", () => {
   showEmulation.value = !showEmulation.value;
   tab.value = showEmulation.value ? "emulation" : "details";
 });
+const noRomError = ref(false);
 
 async function fetchDetails() {
   if (!route.params.rom) return;
@@ -52,6 +53,7 @@ async function fetchDetails() {
       rom.value = response.data;
     })
     .catch((error) => {
+
       console.log(error);
       emitter?.emit("snackbarShow", {
         msg: error.response.data.detail,
@@ -69,6 +71,7 @@ async function fetchDetails() {
       platform.value = response.data;
     })
     .catch((error) => {
+      noRomError.value = true;
       console.log(error);
       emitter?.emit("snackbarShow", {
         msg: error.response.data.detail,
@@ -269,6 +272,15 @@ watch(
       </template>
     </v-row>
   </template>
+
+  <template v-if="noRomError">
+    <v-empty-state
+      headline="Whoops, 404"
+      title="Game not found"
+      text="The game you were looking for does not exist"
+      icon="mdi-disc-alert"
+    ></v-empty-state>
+  </template>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/Gallery/Base.vue b/frontend/src/views/Gallery/Base.vue
index b2c76491b..316bc4ac0 100644
--- a/frontend/src/views/Gallery/Base.vue
+++ b/frontend/src/views/Gallery/Base.vue
@@ -11,7 +11,7 @@ import storeRoms from "@/stores/roms";
 import storePlatforms from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
 import type { RomSelectEvent } from "@/types/rom";
-import { normalizeString, toTop, views } from "@/utils";
+import { normalizeString, views } from "@/utils";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeUnmount, onMounted, ref } from "vue";
@@ -34,7 +34,10 @@ const {
   cursor,
   searchCursor,
   platformID,
+  itemsPerBatch,
 } = storeToRefs(romsStore);
+const itemsShown = ref(itemsPerBatch.value);
+const noPlatformError = ref(false);
 
 // Event listeners bus
 const emitter = inject<Emitter<Events>>("emitter");
@@ -89,7 +92,9 @@ async function fetchRoms() {
         color: "red",
         timeout: 4000,
       });
-      console.error(`Couldn't fetch roms for platform ID ${platformID.value}: ${error}`);
+      console.error(
+        `Couldn't fetch roms for platform ID ${platformID.value}: ${error}`
+      );
     })
     .finally(() => {
       gettingRoms.value = false;
@@ -170,16 +175,26 @@ function resetGallery() {
   galleryFilterStore.reset();
 }
 
+function scrollToTop() {
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: "smooth",
+  });
+  scrolledToTop.value = true;
+}
+
 function onScroll() {
   window.setTimeout(async () => {
     const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
     scrolledToTop.value = scrollTop === 0;
 
-    if (!cursor.value && !searchCursor.value) return;
+    // if (!cursor.value && !searchCursor.value) return;
 
-    const scrollOffset = 60;
+    const scrollOffset = 1000;
     if (scrollTop + clientHeight + scrollOffset >= scrollHeight) {
-      await fetchRoms();
+      // await fetchRoms();
+      itemsShown.value = itemsShown.value + itemsPerBatch.value;
       setFilters();
     }
   }, 100);
@@ -188,13 +203,20 @@ function onScroll() {
 onMounted(async () => {
   const storedPlatformID = romsStore.platformID;
   const platformID = Number(route.params.platform);
-  
+
   romsStore.setPlatformID(platformID);
 
   const platform = platforms.get(platformID);
   if (!platform) {
-    const { data } = await platformApi.getPlatform(platformID)
-    platforms.add(data);
+    // const { data } =
+    await platformApi
+      .getPlatform(platformID)
+      .then((data) => {
+        platforms.add(data.data);
+      })
+      .catch((error) => {
+        noPlatformError.value = true;
+      });
   }
 
   // If platform is different, reset store and fetch roms
@@ -227,13 +249,13 @@ onBeforeRouteUpdate(async (to, _) => {
   // Triggers when change query param of the same route
   // Reset store if switching to another platform
   resetGallery();
-  
+
   const platformID = Number(to.params.platform);
   romsStore.setPlatformID(platformID);
 
   const platform = platforms.get(platformID);
   if (!platform) {
-    const { data } = await platformApi.getPlatform(platformID)
+    const { data } = await platformApi.getPlatform(platformID);
     platforms.add(data);
   }
 
@@ -248,6 +270,7 @@ onBeforeRouteUpdate(async (to, _) => {
   <template v-if="filteredRoms.length > 0">
     <v-row class="pa-1" no-gutters>
       <!-- Gallery cards view -->
+      <!-- v-show instead of v-if to avoid recalculate -->
       <v-col
         class="pa-1"
         v-if="galleryViewStore.current != 2"
@@ -257,7 +280,7 @@ onBeforeRouteUpdate(async (to, _) => {
         :md="views[galleryViewStore.current]['size-md']"
         :lg="views[galleryViewStore.current]['size-lg']"
         :xl="views[galleryViewStore.current]['size-xl']"
-        v-for="rom in filteredRoms"
+        v-for="rom in filteredRoms.slice(0, itemsShown)"
         :key="rom.id"
       >
         <game-card
@@ -276,50 +299,62 @@ onBeforeRouteUpdate(async (to, _) => {
     </v-row>
   </template>
 
+  <template v-if="noPlatformError">
+    <v-empty-state
+      headline="Whoops, 404"
+      title="Platform not found"
+      text="The platform you were looking for does not exist"
+      icon="mdi-controller-off"
+    ></v-empty-state>
+  </template>
+
   <v-layout-item
-    class="text-end"
+    class="text-end pr-2"
     :model-value="true"
     position="bottom"
-    size="88"
+    size="65"
   >
-    <div class="ma-4">
-      <v-scroll-y-reverse-transition>
-        <v-btn
-          id="scrollToTop"
-          v-show="!scrolledToTop"
-          color="primary"
-          elevation="8"
-          icon
-          class="mr-2"
-          size="large"
-          @click="toTop()"
-          ><v-icon color="romm-accent-1">mdi-chevron-up</v-icon></v-btn
+    <v-row no-gutters>
+      <v-col>
+        <v-scroll-y-reverse-transition>
+          <v-btn
+            id="scrollToTop"
+            v-show="!scrolledToTop"
+            color="primary"
+            elevation="8"
+            icon
+            class="ml-2"
+            size="large"
+            @click="scrollToTop()"
+            ><v-icon color="romm-accent-1">mdi-chevron-up</v-icon></v-btn
+          >
+        </v-scroll-y-reverse-transition>
+        <v-menu
+          location="top"
+          v-model="fabMenu"
+          :transition="
+            fabMenu ? 'scroll-y-reverse-transition' : 'scroll-y-transition'
+          "
         >
-      </v-scroll-y-reverse-transition>
-      <v-menu
-        location="top"
-        v-model="fabMenu"
-        :transition="
-          fabMenu ? 'scroll-y-reverse-transition' : 'scroll-y-transition'
-        "
-      >
-        <template v-slot:activator="{ props }">
-          <v-fab-transition>
-            <v-btn
-              v-show="romsStore._selectedIDs.length > 0"
-              color="romm-accent-1"
-              v-bind="props"
-              elevation="8"
-              icon
-              size="large"
-              >{{ romsStore._selectedIDs.length }}</v-btn
-            >
-          </v-fab-transition>
-        </template>
+          <template v-slot:activator="{ props }">
+            <v-fab-transition>
+              <v-btn
+                v-show="romsStore._selectedIDs.length > 0"
+                color="romm-accent-1"
+                v-bind="props"
+                elevation="8"
+                class="ml-2"
+                icon
+                size="large"
+                >{{ romsStore._selectedIDs.length }}</v-btn
+              >
+            </v-fab-transition>
+          </template>
 
-        <fab-menu />
-      </v-menu>
-    </div>
+          <fab-menu />
+        </v-menu>
+      </v-col>
+    </v-row>
   </v-layout-item>
 </template>
 

From 08d49083e426150d6325c46772ba36f9e0bd7697 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 28 May 2024 16:56:24 +0200
Subject: [PATCH 4/9] changed filter selectors as autocomplete selectors

---
 .../src/components/Gallery/AppBar/FilterBar.vue  | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Gallery/AppBar/FilterBar.vue b/frontend/src/components/Gallery/AppBar/FilterBar.vue
index 9c7edd8bb..b6a1c7711 100644
--- a/frontend/src/components/Gallery/AppBar/FilterBar.vue
+++ b/frontend/src/components/Gallery/AppBar/FilterBar.vue
@@ -27,7 +27,7 @@ const {
   <div v-if="showFilterBar">
     <v-row no-gutters class="pa-1">
       <filter-unmatched-btn />
-      <v-select
+      <v-autocomplete
         hide-details
         clearable
         label="Genre"
@@ -37,8 +37,8 @@ const {
         @update:model-value="emitter?.emit('filter', null);"
         v-model="selectedGenre"
         :items="galleryFilterStore.filterGenres"
-      ></v-select>
-      <v-select
+      ></v-autocomplete>
+      <v-autocomplete
         hide-details
         clearable
         label="Franchise"
@@ -48,8 +48,8 @@ const {
         @update:model-value="emitter?.emit('filter', null)"
         v-model="selectedFranchise"
         :items="galleryFilterStore.filterFranchises"
-      ></v-select>
-      <v-select
+      ></v-autocomplete>
+      <v-autocomplete
         hide-details
         clearable
         label="Collection"
@@ -59,8 +59,8 @@ const {
         @update:model-value="emitter?.emit('filter', null)"
         v-model="selectedCollection"
         :items="galleryFilterStore.filterCollections"
-      ></v-select>
-      <v-select
+      ></v-autocomplete>
+      <v-autocomplete
         hide-details
         clearable
         label="Company"
@@ -70,7 +70,7 @@ const {
         @update:model-value="emitter?.emit('filter', null)"
         v-model="selectedCompany"
         :items="galleryFilterStore.filterCompanies"
-      ></v-select>
+      ></v-autocomplete>
     </v-row>
     <v-divider
       :thickness="2"

From 8f361e32f690c6529d183f19e359a933ad1ba1f4 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 28 May 2024 18:38:22 +0200
Subject: [PATCH 5/9] added pagination to table view

---
 .../src/components/Game/DataTable/Base.vue    | 61 ++++++++++++++++++-
 frontend/src/types/emitter.d.ts               |  1 +
 frontend/src/views/Gallery/Base.vue           |  3 +-
 3 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Game/DataTable/Base.vue b/frontend/src/components/Game/DataTable/Base.vue
index 309cd89fd..8fe76ebaf 100644
--- a/frontend/src/components/Game/DataTable/Base.vue
+++ b/frontend/src/components/Game/DataTable/Base.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, inject, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 
 import AdminMenu from "@/components/Game/AdminMenu/Base.vue";
@@ -7,6 +7,8 @@ import romApi from "@/services/api/rom";
 import storeAuth from "@/stores/auth";
 import storeDownload from "@/stores/download";
 import storeRoms from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
 import {
   formatBytes,
   languageToEmoji,
@@ -67,18 +69,36 @@ const PER_PAGE_OPTIONS = [
   { value: 50, title: "50" },
   { value: 100, title: "100" },
 ] as const;
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("updateDataTablePages", updateDataTablePages);
 
 // Props
 const router = useRouter();
 const downloadStore = storeDownload();
 const romsStore = storeRoms();
 const auth = storeAuth();
-const romsPerPage = ref(25);
+const page = ref(1);
+const romsPerPage = ref(10);
+const pageCount = ref(0);
 
 // Functions
 function rowClick(_: Event, row: any) {
   router.push({ name: "rom", params: { rom: row.item.id } });
 }
+
+function updateDataTablePages() {
+  pageCount.value = Math.ceil(
+    romsStore.filteredRoms.length / romsPerPage.value
+  );
+}
+
+watch(romsPerPage, async () => {
+  updateDataTablePages();
+});
+
+onMounted(() => {
+  updateDataTablePages();
+});
 </script>
 
 <template>
@@ -93,6 +113,7 @@ function rowClick(_: Event, row: any) {
     @click:row="rowClick"
     show-select
     v-model="romsStore._selectedIDs"
+    v-model:page="page"
   >
     <template v-slot:item.path_cover_s="{ item }">
       <v-avatar :rounded="0">
@@ -114,6 +135,16 @@ function rowClick(_: Event, row: any) {
         />
       </v-avatar>
     </template>
+    <template v-slot:item.name="{ item }">
+      <span>
+        {{ item.name }}
+      </span>
+    </template>
+    <template v-slot:item.file_name="{ item }">
+      <span>
+        {{ item.file_name }}
+      </span>
+    </template>
     <template v-slot:item.file_size_bytes="{ item }">
       <span>
         {{ formatBytes(item.file_size_bytes) }}
@@ -166,5 +197,31 @@ function rowClick(_: Event, row: any) {
         <admin-menu :rom="item" />
       </v-menu>
     </template>
+
+    <template v-slot:bottom>
+      <v-divider class="border-opacity-25" />
+      <v-row no-gutters class="pt-2 px-6 align-center">
+        <v-col cols="11" class="px-6">
+          <v-pagination
+            class="mr-6"
+            rounded="0"
+            :show-first-last-page="true"
+            active-color="romm-accent-1"
+            v-model="page"
+            :length="pageCount"
+          ></v-pagination>
+        </v-col>
+        <v-col>
+          <v-select
+            label="Roms per page"
+            density="compact"
+            variant="outlined"
+            :items="[10, 25, 50]"
+            v-model="romsPerPage"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+    </template>
   </v-data-table>
 </template>
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index d0b36199e..0c049aca2 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -68,6 +68,7 @@ export type Events = {
   filter: null;
   filterBarShow: null;
   filterBarReset: null;
+  updateDataTablePages: null;
   sortBarShow: null;
   romUpdated: DetailedRom;
 };
diff --git a/frontend/src/views/Gallery/Base.vue b/frontend/src/views/Gallery/Base.vue
index 316bc4ac0..89fb700ac 100644
--- a/frontend/src/views/Gallery/Base.vue
+++ b/frontend/src/views/Gallery/Base.vue
@@ -113,6 +113,7 @@ async function onFilterChange() {
     return;
   }
   await fetchRoms();
+  emitter?.emit("updateDataTablePages", null);
 }
 
 function selectRom({ event, index, selected }: RomSelectEvent) {
@@ -309,6 +310,7 @@ onBeforeRouteUpdate(async (to, _) => {
   </template>
 
   <v-layout-item
+    v-show="!scrolledToTop"
     class="text-end pr-2"
     :model-value="true"
     position="bottom"
@@ -319,7 +321,6 @@ onBeforeRouteUpdate(async (to, _) => {
         <v-scroll-y-reverse-transition>
           <v-btn
             id="scrollToTop"
-            v-show="!scrolledToTop"
             color="primary"
             elevation="8"
             icon

From ddcdc9d1d21237a59ebe099ec9b24cfc9e4eeb4e Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 28 May 2024 18:45:46 +0200
Subject: [PATCH 6/9] store romsPerPage in localStorage

---
 frontend/src/components/Game/DataTable/Base.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Game/DataTable/Base.vue b/frontend/src/components/Game/DataTable/Base.vue
index 8fe76ebaf..7ad10bc6c 100644
--- a/frontend/src/components/Game/DataTable/Base.vue
+++ b/frontend/src/components/Game/DataTable/Base.vue
@@ -78,7 +78,8 @@ const downloadStore = storeDownload();
 const romsStore = storeRoms();
 const auth = storeAuth();
 const page = ref(1);
-const romsPerPage = ref(10);
+const storedRomsPerPage = parseInt(localStorage.getItem("romsPerPage") ?? "");
+const romsPerPage = ref(isNaN(storedRomsPerPage) ? 25 : storedRomsPerPage);
 const pageCount = ref(0);
 
 // Functions
@@ -93,6 +94,7 @@ function updateDataTablePages() {
 }
 
 watch(romsPerPage, async () => {
+  localStorage.setItem("romsPerPage", romsPerPage.value.toString());
   updateDataTablePages();
 });
 

From dbe0769757d056b3bf189d6e3d6cbf624af912d5 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 28 May 2024 18:52:43 +0200
Subject: [PATCH 7/9] fixed per page options

---
 frontend/src/components/Game/DataTable/Base.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Game/DataTable/Base.vue b/frontend/src/components/Game/DataTable/Base.vue
index 7ad10bc6c..2a7dade80 100644
--- a/frontend/src/components/Game/DataTable/Base.vue
+++ b/frontend/src/components/Game/DataTable/Base.vue
@@ -64,11 +64,7 @@ const HEADERS = [
   { title: "", align: "end", key: "actions", sortable: false },
 ] as const;
 
-const PER_PAGE_OPTIONS = [
-  { value: 25, title: "25" },
-  { value: 50, title: "50" },
-  { value: 100, title: "100" },
-] as const;
+const PER_PAGE_OPTIONS = [10, 25, 50, 100];
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("updateDataTablePages", updateDataTablePages);
 
@@ -218,7 +214,7 @@ onMounted(() => {
             label="Roms per page"
             density="compact"
             variant="outlined"
-            :items="[10, 25, 50]"
+            :items="PER_PAGE_OPTIONS"
             v-model="romsPerPage"
             hide-details
           />

From 7b8e3ba9558e53a58687431eaea93b72d7d39ef5 Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 28 May 2024 19:19:40 +0200
Subject: [PATCH 8/9] fixed what's new link

---
 frontend/src/components/Drawer/Footer.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Drawer/Footer.vue b/frontend/src/components/Drawer/Footer.vue
index ea869c672..0c0b4ad1e 100644
--- a/frontend/src/components/Drawer/Footer.vue
+++ b/frontend/src/components/Drawer/Footer.vue
@@ -29,10 +29,10 @@ onBeforeMount(async () => {
     "https://api.github.com/repos/rommapp/romm/releases/latest"
   );
   const json = await response.json();
-  GITHUB_VERSION.value = json.name;
+  GITHUB_VERSION.value = json.tag_name;
   latestVersionDismissed.value =
     VERSION === "development" ||
-    json.name === localStorage.getItem("dismissedVersion");
+    json.tag_name === localStorage.getItem("dismissedVersion");
 });
 
 async function logout() {
@@ -108,7 +108,7 @@ async function logout() {
           <v-col class="py-1">
             <span
               >New version available
-              <span class="text-romm-accent-1">{{ GITHUB_VERSION }}</span></span
+              <span class="text-romm-accent-1">v{{ GITHUB_VERSION }}</span></span
             >
           </v-col>
         </v-row>

From 780dd371f7df6fbd15e42050cc731645bc73807a Mon Sep 17 00:00:00 2001
From: zurdi <zurdizurdo25@gmail.com>
Date: Tue, 28 May 2024 19:27:06 +0200
Subject: [PATCH 9/9] reset itemsPerBatch on gallery change

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

diff --git a/frontend/src/views/Gallery/Base.vue b/frontend/src/views/Gallery/Base.vue
index 89fb700ac..dc436b398 100644
--- a/frontend/src/views/Gallery/Base.vue
+++ b/frontend/src/views/Gallery/Base.vue
@@ -174,6 +174,7 @@ function resetGallery() {
   romsStore.reset();
   scrolledToTop.value = true;
   galleryFilterStore.reset();
+  itemsShown.value = itemsPerBatch.value;
 }
 
 function scrollToTop() {