From 6bde10fe97bf6962e33b0cdd8e54ba0276c3ee96 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 21 Oct 2025 10:42:59 -0400
Subject: [PATCH 1/6] massive refactor of data loading in console mode

---
 backend/endpoints/responses/rom.py            |   1 -
 backend/models/rom.py                         |   4 -
 .../__generated__/models/DetailedRomSchema.ts |   1 -
 .../__generated__/models/SimpleRomSchema.ts   |   1 -
 frontend/src/components/Details/Title.vue     |   6 +-
 .../AppBar/common/FilterDrawer/Base.vue       |   4 +-
 .../Config/PlatformVersions.vue               |   6 +-
 .../Settings/ServerStats/PlatformsStats.vue   |   4 +-
 .../src/components/common/Game/Card/Base.vue  |   2 +-
 .../components/common/Navigation/ScanBtn.vue  |   2 +-
 frontend/src/console/Layout.vue               |  31 +-
 .../src/console/components/BackButton.vue     |  21 +-
 frontend/src/console/views/Game.vue           |   2 +-
 frontend/src/console/views/GamesList.vue      | 371 ++++++++++++------
 frontend/src/console/views/Home.vue           |  92 ++---
 frontend/src/stores/console.ts                |  28 ++
 16 files changed, 352 insertions(+), 224 deletions(-)

diff --git a/backend/endpoints/responses/rom.py b/backend/endpoints/responses/rom.py
index a744c6bd5..e8127c784 100644
--- a/backend/endpoints/responses/rom.py
+++ b/backend/endpoints/responses/rom.py
@@ -207,7 +207,6 @@ class RomSchema(BaseModel):
     platform_id: int
     platform_slug: str
     platform_fs_slug: str
-    platform_name: str
     platform_custom_name: str | None
     platform_display_name: str
 
diff --git a/backend/models/rom.py b/backend/models/rom.py
index 7d82de394..f1aff5d44 100644
--- a/backend/models/rom.py
+++ b/backend/models/rom.py
@@ -263,10 +263,6 @@ class Rom(BaseModel):
     def platform_fs_slug(self) -> str:
         return self.platform.fs_slug
 
-    @property
-    def platform_name(self) -> str:
-        return self.platform.name
-
     @property
     def platform_custom_name(self) -> str | None:
         return self.platform.custom_name
diff --git a/frontend/src/__generated__/models/DetailedRomSchema.ts b/frontend/src/__generated__/models/DetailedRomSchema.ts
index f81d1278f..c99588ba8 100644
--- a/frontend/src/__generated__/models/DetailedRomSchema.ts
+++ b/frontend/src/__generated__/models/DetailedRomSchema.ts
@@ -34,7 +34,6 @@ export type DetailedRomSchema = {
     platform_id: number;
     platform_slug: string;
     platform_fs_slug: string;
-    platform_name: string;
     platform_custom_name: (string | null);
     platform_display_name: string;
     fs_name: string;
diff --git a/frontend/src/__generated__/models/SimpleRomSchema.ts b/frontend/src/__generated__/models/SimpleRomSchema.ts
index a3f976587..671f622ff 100644
--- a/frontend/src/__generated__/models/SimpleRomSchema.ts
+++ b/frontend/src/__generated__/models/SimpleRomSchema.ts
@@ -28,7 +28,6 @@ export type SimpleRomSchema = {
     platform_id: number;
     platform_slug: string;
     platform_fs_slug: string;
-    platform_name: string;
     platform_custom_name: (string | null);
     platform_display_name: string;
     fs_name: string;
diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index ed2df4349..ad8be3962 100644
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -20,7 +20,7 @@ const releaseDate = new Date(
 });
 
 const platformsStore = storePlatforms();
-const { filteredPlatforms } = storeToRefs(platformsStore);
+const { allPlatforms } = storeToRefs(platformsStore);
 
 const hashMatches = computed(() => {
   return [
@@ -81,7 +81,7 @@ const hashMatches = computed(() => {
         >
           <MissingFromFSIcon
             v-if="
-              filteredPlatforms.find((p) => p.id === rom.platform_id)
+              allPlatforms.find((p) => p.id === rom.platform_id)
                 ?.missing_from_fs
             "
             class="mr-2"
@@ -90,7 +90,7 @@ const hashMatches = computed(() => {
           <PlatformIcon
             :key="rom.platform_slug"
             :slug="rom.platform_slug"
-            :name="rom.platform_name"
+            :name="rom.platform_display_name"
             :fs-slug="rom.platform_fs_slug"
             :size="30"
             class="mr-2"
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
index 983f9302f..f727b7d0c 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
@@ -72,7 +72,7 @@ const {
   filterLanguages,
 } = storeToRefs(galleryFilterStore);
 const { filteredRoms } = storeToRefs(romsStore);
-const { filteredPlatforms } = storeToRefs(platformsStore);
+const { allPlatforms } = storeToRefs(platformsStore);
 const emitter = inject<Emitter<Events>>("emitter");
 
 const onFilterChange = debounce(
@@ -305,7 +305,7 @@ onMounted(async () => {
   );
 
   watch(
-    () => filteredPlatforms.value,
+    () => allPlatforms.value,
     async () => setFilters(),
     { immediate: true }, // Ensure watcher is triggered immediately
   );
diff --git a/frontend/src/components/Settings/LibraryManagement/Config/PlatformVersions.vue b/frontend/src/components/Settings/LibraryManagement/Config/PlatformVersions.vue
index ab32d99d8..68d96a772 100644
--- a/frontend/src/components/Settings/LibraryManagement/Config/PlatformVersions.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Config/PlatformVersions.vue
@@ -36,10 +36,8 @@ const editable = ref(false);
           />
         </template>
         <p>
-          Versions of the same platform. A common example is Capcom Play System
-          1 is an arcade system. Platform versions will let you setup a custom
-          platform for RomM to import and tell RomM which platform it needs to
-          scrape against.
+          Platform versions allow you to create custom platform entries for
+          games that belong to the same system but have different versions.
         </p>
       </v-tooltip>
     </template>
diff --git a/frontend/src/components/Settings/ServerStats/PlatformsStats.vue b/frontend/src/components/Settings/ServerStats/PlatformsStats.vue
index 1d54e18a8..b71f2fafc 100644
--- a/frontend/src/components/Settings/ServerStats/PlatformsStats.vue
+++ b/frontend/src/components/Settings/ServerStats/PlatformsStats.vue
@@ -12,11 +12,11 @@ const props = defineProps<{
 }>();
 const { t } = useI18n();
 const platformsStore = storePlatforms();
-const { filteredPlatforms } = storeToRefs(platformsStore);
+const { allPlatforms } = storeToRefs(platformsStore);
 const orderBy = ref<"name" | "size" | "count">("name");
 
 const sortedPlatforms = computed(() => {
-  const platforms = [...filteredPlatforms.value];
+  const platforms = [...allPlatforms.value];
   if (orderBy.value === "size") {
     return platforms.sort(
       (a, b) => Number(b.fs_size_bytes) - Number(a.fs_size_bytes),
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index a9d9a1c77..4a680a50c 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -311,7 +311,7 @@ onBeforeUnmount(() => {
                       :key="rom.platform_slug"
                       :size="25"
                       :slug="rom.platform_slug"
-                      :name="rom.platform_name"
+                      :name="rom.platform_display_name"
                       :fs-slug="rom.platform_fs_slug"
                       class="ml-1"
                     />
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index 4b27e304f..b91181c20 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -87,7 +87,7 @@ socket.on("scan:scanning_rom", (rom: SimpleRom) => {
   // Add the platform if the socket dropped and it's missing
   if (!scannedPlatform) {
     scanningPlatforms.value.push({
-      name: rom.platform_name,
+      name: rom.platform_display_name,
       slug: rom.platform_slug,
       id: rom.platform_id,
       fs_slug: rom.platform_fs_slug,
diff --git a/frontend/src/console/Layout.vue b/frontend/src/console/Layout.vue
index e97c32714..bb4754435 100644
--- a/frontend/src/console/Layout.vue
+++ b/frontend/src/console/Layout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useIdle } from "@vueuse/core";
-import { onMounted, onUnmounted, provide } from "vue";
+import { useIdle, useLocalStorage } from "@vueuse/core";
+import { onBeforeMount, onMounted, onUnmounted, provide } from "vue";
 import { type RouteLocationNormalized } from "vue-router";
 import { useRouter } from "vue-router";
 import { useConsoleTheme } from "@/console/composables/useConsoleTheme";
@@ -8,12 +8,28 @@ import { InputBus, InputBusSymbol } from "@/console/input/bus";
 import { attachGamepad } from "@/console/input/gamepad";
 import { attachKeyboard } from "@/console/input/keyboard";
 import { ROUTES } from "@/plugins/router";
+import storeCollections from "@/stores/collections";
+import storeNavigation from "@/stores/navigation";
+import storePlatforms from "@/stores/platforms";
 
 const router = useRouter();
 const bus = new InputBus();
 const themeStore = useConsoleTheme();
 provide(InputBusSymbol, bus);
 
+const navigationStore = storeNavigation();
+const platformsStore = storePlatforms();
+const collectionsStore = storeCollections();
+
+const showVirtualCollections = useLocalStorage(
+  "settings.showVirtualCollections",
+  true,
+);
+const virtualCollectionTypeRef = useLocalStorage(
+  "settings.virtualCollectionType",
+  "collection",
+);
+
 // Define route hierarchy for transition direction logic
 const routeHierarchy = {
   [ROUTES.CONSOLE_HOME]: 0,
@@ -53,6 +69,17 @@ const { idle: mouseIdle } = useIdle(100, {
 let detachKeyboard: (() => void) | null = null;
 let detachGamepad: (() => void) | null = null;
 
+onBeforeMount(() => {
+  platformsStore.fetchPlatforms();
+  collectionsStore.fetchCollections();
+  collectionsStore.fetchSmartCollections();
+  if (showVirtualCollections) {
+    collectionsStore.fetchVirtualCollections(virtualCollectionTypeRef.value);
+  }
+
+  navigationStore.reset();
+});
+
 onMounted(() => {
   themeStore.initializeTheme();
 
diff --git a/frontend/src/console/components/BackButton.vue b/frontend/src/console/components/BackButton.vue
index 884cba23b..3d316e28d 100644
--- a/frontend/src/console/components/BackButton.vue
+++ b/frontend/src/console/components/BackButton.vue
@@ -3,6 +3,7 @@ import { useRouter } from "vue-router";
 
 const props = defineProps<{
   text?: string;
+  subtext?: string;
   onBack?: () => void;
 }>();
 
@@ -25,11 +26,19 @@ function goBack() {
     >
       <span aria-hidden="true" class="text-lg leading-none">←</span>
     </button>
-    <span
-      v-if="text"
-      class="ml-3 text-white/90 text-3xl font-bold drop-shadow select-none"
-    >
-      {{ text }}
-    </span>
+    <div class="ml-3">
+      <span
+        v-if="text"
+        class="text-white/90 text-3xl font-bold drop-shadow select-none"
+      >
+        {{ text }}
+      </span>
+      <span
+        v-if="subtext"
+        class="text-white/50 text-sm font-normal drop-shadow select-none"
+      >
+        {{ subtext }}
+      </span>
+    </div>
   </div>
 </template>
diff --git a/frontend/src/console/views/Game.vue b/frontend/src/console/views/Game.vue
index 501930800..0d9adfede 100644
--- a/frontend/src/console/views/Game.vue
+++ b/frontend/src/console/views/Game.vue
@@ -574,7 +574,7 @@ onUnmounted(() => {
                     }"
                   >
                     {{
-                      rom.platform_name ||
+                      rom.platform_display_name ||
                       (rom.platform_slug || "RETRO")?.toString().toUpperCase()
                     }}
                   </span>
diff --git a/frontend/src/console/views/GamesList.vue b/frontend/src/console/views/GamesList.vue
index 7c77c3e9f..5dd46a805 100644
--- a/frontend/src/console/views/GamesList.vue
+++ b/frontend/src/console/views/GamesList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { storeToRefs } from "pinia";
 import {
   computed,
   onMounted,
@@ -6,11 +7,9 @@ import {
   ref,
   nextTick,
   useTemplateRef,
+  watch,
 } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import type { CollectionSchema } from "@/__generated__/models/CollectionSchema";
-import type { SmartCollectionSchema } from "@/__generated__/models/SmartCollectionSchema";
-import type { VirtualCollectionSchema } from "@/__generated__/models/VirtualCollectionSchema";
 import useFavoriteToggle from "@/composables/useFavoriteToggle";
 import BackButton from "@/console/components/BackButton.vue";
 import GameCard from "@/console/components/GameCard.vue";
@@ -22,8 +21,8 @@ import { useRovingDom } from "@/console/composables/useRovingDom";
 import { useSpatialNav } from "@/console/composables/useSpatialNav";
 import type { InputAction } from "@/console/input/actions";
 import { ROUTES } from "@/plugins/router";
-import collectionApi from "@/services/api/collection";
 import storeCollections from "@/stores/collections";
+import storeConfig from "@/stores/config";
 import storeConsole from "@/stores/console";
 import storeGalleryFilter from "@/stores/galleryFilter";
 import storePlatforms from "@/stores/platforms";
@@ -32,61 +31,45 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 const route = useRoute();
 const router = useRouter();
 const consoleStore = storeConsole();
-const platformsStore = storePlatforms();
-const collectionsStore = storeCollections();
 const galleryFilterStore = storeGalleryFilter();
+const platformsStore = storePlatforms();
+const { allPlatforms } = storeToRefs(platformsStore);
+const collectionsStore = storeCollections();
+const { allCollections, smartCollections, virtualCollections } =
+  storeToRefs(collectionsStore);
 const romsStore = storeRoms();
+const {
+  filteredRoms,
+  allRoms,
+  fetchingRoms,
+  currentPlatform,
+  currentCollection,
+  currentSmartCollection,
+  currentVirtualCollection,
+} = storeToRefs(romsStore);
+const configStore = storeConfig();
+const { config } = storeToRefs(configStore);
 const { toggleFavorite: toggleFavoriteComposable } = useFavoriteToggle();
 const { setSelectedBackgroundArt, clearSelectedBackgroundArt } =
   useBackgroundArt();
 
+const isPlatformRoute = route.name === ROUTES.CONSOLE_PLATFORM;
 const isCollectionRoute = route.name === ROUTES.CONSOLE_COLLECTION;
 const isSmartCollectionRoute = route.name === ROUTES.CONSOLE_SMART_COLLECTION;
 const isVirtualCollectionRoute =
   route.name === ROUTES.CONSOLE_VIRTUAL_COLLECTION;
 
-const platformId =
-  isCollectionRoute || isSmartCollectionRoute || isVirtualCollectionRoute
-    ? null
-    : Number(route.params.id);
-const collectionId = isCollectionRoute ? Number(route.params.id) : null;
-const smartCollectionId = isSmartCollectionRoute
-  ? Number(route.params.id)
-  : null;
-const virtualCollectionId = isVirtualCollectionRoute
-  ? String(route.params.id)
-  : null;
-
-const roms = ref<SimpleRom[]>([]);
-const collection = ref<CollectionSchema | null>(null);
-const smartCollection = ref<SmartCollectionSchema | null>(null);
-const virtualCollection = ref<VirtualCollectionSchema | null>(null);
-const loading = ref(true);
-const error = ref("");
 const selectedIndex = ref(0);
 const loadedMap = ref<Record<number, boolean>>({});
 const inAlphabet = ref(false);
 const alphaIndex = ref(0);
 const gridRef = useTemplateRef<HTMLDivElement>("game-grid-ref");
 
-// Initialize selection from store
-if (platformId != null) {
-  selectedIndex.value = consoleStore.getPlatformGameIndex(platformId);
-} else if (collectionId != null) {
-  selectedIndex.value = consoleStore.getCollectionGameIndex(collectionId);
-} else if (smartCollectionId != null) {
-  selectedIndex.value = consoleStore.getCollectionGameIndex(smartCollectionId);
-} else if (virtualCollectionId != null) {
-  selectedIndex.value = consoleStore.getCollectionGameIndex(
-    Number(virtualCollectionId),
-  );
-}
-
 // Generate alphabet letters dynamically based on available games
 const letters = computed(() => {
   const letterSet = new Set<string>();
 
-  roms.value.forEach(({ name }) => {
+  filteredRoms.value.forEach(({ name }) => {
     if (!name) return;
 
     const normalized = normalizeTitle(name);
@@ -111,15 +94,24 @@ const letters = computed(() => {
 });
 
 function persistIndex() {
-  if (platformId != null) {
-    consoleStore.setPlatformGameIndex(platformId, selectedIndex.value);
-  } else if (collectionId != null) {
-    consoleStore.setCollectionGameIndex(collectionId, selectedIndex.value);
-  } else if (smartCollectionId != null) {
-    consoleStore.setCollectionGameIndex(smartCollectionId, selectedIndex.value);
-  } else if (virtualCollectionId != null) {
+  if (currentPlatform.value != null) {
+    consoleStore.setPlatformGameIndex(
+      currentPlatform.value.id,
+      selectedIndex.value,
+    );
+  } else if (currentCollection.value != null) {
     consoleStore.setCollectionGameIndex(
-      Number(virtualCollectionId),
+      currentCollection.value.id,
+      selectedIndex.value,
+    );
+  } else if (currentSmartCollection.value != null) {
+    consoleStore.setSmartCollectionGameIndex(
+      currentSmartCollection.value.id,
+      selectedIndex.value,
+    );
+  } else if (currentVirtualCollection.value != null) {
+    consoleStore.setVirtualCollectionGameIndex(
+      currentVirtualCollection.value.id,
       selectedIndex.value,
     );
   }
@@ -132,25 +124,34 @@ function navigateBack() {
 
 const headerTitle = computed(() => {
   if (isCollectionRoute) {
-    return collection.value?.name || "Collection";
+    return currentCollection.value?.name || "Collection";
   }
   if (isSmartCollectionRoute) {
-    return smartCollection.value?.name || "Smart Collection";
+    return currentSmartCollection.value?.name || "Smart Collection";
   }
   if (isVirtualCollectionRoute) {
-    return virtualCollection.value?.name || "Virtual Collection";
+    return currentVirtualCollection.value?.name || "Virtual Collection";
   }
 
   return (
-    current.value?.platform_name ||
-    current.value?.platform_slug?.toUpperCase() ||
-    "Platform"
+    currentPlatform.value?.display_name ||
+    currentPlatform.value?.slug.toUpperCase()
   );
 });
 
-const current = computed(
-  () => roms.value[selectedIndex.value] || roms.value[0],
-);
+const headerSubtext = computed(() => {
+  if (isCollectionRoute) {
+    return currentCollection.value?.description || "";
+  }
+  if (isSmartCollectionRoute) {
+    return currentSmartCollection.value?.description || "";
+  }
+  if (isVirtualCollectionRoute) {
+    return currentVirtualCollection.value?.description || "";
+  }
+  if (!currentPlatform.value?.fs_slug) return "";
+  return config.value.PLATFORMS_VERSIONS[currentPlatform.value.fs_slug];
+});
 
 function getCols(): number {
   if (!gridRef.value) return 4;
@@ -176,10 +177,10 @@ const {
   moveRight,
   moveUp,
   moveDown: moveDownBasic,
-} = useSpatialNav(selectedIndex, getCols, () => roms.value.length);
+} = useSpatialNav(selectedIndex, getCols, () => filteredRoms.value.length);
 
 function handleAction(action: InputAction): boolean {
-  if (!roms.value.length) return false;
+  if (!filteredRoms.value.length) return false;
   if (inAlphabet.value) {
     if (action === "moveLeft") {
       inAlphabet.value = false;
@@ -198,7 +199,7 @@ function handleAction(action: InputAction): boolean {
     }
     if (action === "confirm") {
       const L = Array.from(letters.value)[alphaIndex.value];
-      const idx = roms.value.findIndex((r) => {
+      const idx = filteredRoms.value.findIndex((r) => {
         const normalized = normalizeTitle(r.name || "");
         if (L === "#") {
           return /^[0-9]/.test(normalized);
@@ -245,7 +246,7 @@ function handleAction(action: InputAction): boolean {
       moveDownBasic();
       if (selectedIndex.value === before) {
         const cols = getCols();
-        const count = roms.value.length;
+        const count = filteredRoms.value.length;
         const totalRows = Math.ceil(count / cols);
         const currentRow = Math.floor(before / cols);
         if (totalRows > currentRow + 1) {
@@ -258,11 +259,14 @@ function handleAction(action: InputAction): boolean {
       navigateBack();
       return true;
     case "confirm": {
-      selectAndOpen(selectedIndex.value, roms.value[selectedIndex.value]);
+      selectAndOpen(
+        selectedIndex.value,
+        filteredRoms.value[selectedIndex.value],
+      );
       return true;
     }
     case "toggleFavorite": {
-      const rom = roms.value[selectedIndex.value];
+      const rom = filteredRoms.value[selectedIndex.value];
       if (rom) toggleFavoriteComposable(rom);
       return true;
     }
@@ -283,10 +287,14 @@ function selectAndOpen(i: number, rom: SimpleRom) {
   persistIndex();
 
   const query: Record<string, number | string> = {};
-  if (platformId != null) query.id = platformId;
-  if (isCollectionRoute) query.collection = collectionId!;
-  if (isSmartCollectionRoute) query.smartCollection = smartCollectionId!;
-  if (isVirtualCollectionRoute) query.virtualCollection = virtualCollectionId!;
+  if (isPlatformRoute && currentPlatform.value != null)
+    query.id = currentPlatform.value.id;
+  if (isCollectionRoute && currentCollection.value != null)
+    query.collection = currentCollection.value.id;
+  if (isSmartCollectionRoute && currentSmartCollection.value != null)
+    query.smartCollection = currentSmartCollection.value.id;
+  if (isVirtualCollectionRoute && currentVirtualCollection.value != null)
+    query.virtualCollection = currentVirtualCollection.value.id;
 
   router.push({
     name: ROUTES.CONSOLE_ROM,
@@ -296,7 +304,7 @@ function selectAndOpen(i: number, rom: SimpleRom) {
 }
 
 function jumpToLetter(L: string) {
-  const idx = roms.value.findIndex((r) => {
+  const idx = filteredRoms.value.findIndex((r) => {
     const normalized = normalizeTitle(r.name || "");
     if (L === "#") {
       return /^[0-9]/.test(normalized);
@@ -316,68 +324,171 @@ function normalizeTitle(name: string) {
 
 let off: (() => void) | null = null;
 
-onMounted(async () => {
-  try {
-    if (platformId != null) {
-      const currentPlatform = platformsStore.get(platformId);
-      if (currentPlatform) romsStore.setCurrentPlatform(currentPlatform);
-    } else if (collectionId != null) {
-      const currentCollection = collectionsStore.getCollection(collectionId);
-      if (currentCollection) romsStore.setCurrentCollection(currentCollection);
-    } else if (smartCollectionId != null) {
-      const currentSmartCollection =
-        collectionsStore.getSmartCollection(smartCollectionId);
-      if (currentSmartCollection)
-        romsStore.setCurrentSmartCollection(currentSmartCollection);
-    } else if (virtualCollectionId != null) {
-      const currentVirtualCollection =
-        collectionsStore.getVirtualCollection(virtualCollectionId);
-      if (currentVirtualCollection)
-        romsStore.setCurrentVirtualCollection(currentVirtualCollection);
-    }
+function resetGallery() {
+  romsStore.reset();
+  galleryFilterStore.resetFilters();
+  galleryFilterStore.activeFilterDrawer = false;
+}
 
-    romsStore.setLimit(500);
-    romsStore.setOrderBy("name");
-    romsStore.setOrderDir("asc");
-    romsStore.resetPagination();
+async function fetchRoms() {
+  romsStore.setLimit(500);
+  romsStore.setOrderBy("name");
+  romsStore.setOrderDir("asc");
+  romsStore.resetPagination();
 
-    const fetchedRoms = await romsStore.fetchRoms({
-      galleryFilter: galleryFilterStore,
-      concat: false,
-    });
-    roms.value = fetchedRoms;
+  const fetchedRoms = await romsStore.fetchRoms({
+    galleryFilter: galleryFilterStore,
+    concat: false,
+  });
 
-    if (collectionId != null) {
-      const { data: col } = await collectionApi.getCollection(collectionId);
-      collection.value = col ?? null;
-    } else if (smartCollectionId != null) {
-      const { data: smartCol } =
-        await collectionApi.getSmartCollection(smartCollectionId);
-      smartCollection.value = smartCol ?? null;
-    } else if (virtualCollectionId != null) {
-      const { data: virtualCol } =
-        await collectionApi.getVirtualCollection(virtualCollectionId);
-      virtualCollection.value = virtualCol ?? null;
-    }
-
-    for (const r of roms.value) {
-      if (!r.url_cover && !r.path_cover_large && !r.path_cover_small) {
-        loadedMap.value[r.id] = true;
-      }
-    }
-  } catch (err: unknown) {
-    error.value = err instanceof Error ? err.message : "Failed to load roms";
-  } finally {
-    loading.value = false;
-  }
-
-  if (selectedIndex.value >= roms.value.length) selectedIndex.value = 0;
+  if (selectedIndex.value >= fetchedRoms.length) selectedIndex.value = 0;
   await nextTick();
+
   cardElementAt(selectedIndex.value)?.scrollIntoView({
     block: "center",
     inline: "nearest",
     behavior: "instant" as ScrollBehavior,
   });
+}
+
+onMounted(async () => {
+  const routePlatformId = isPlatformRoute ? Number(route.params.id) : null;
+  const routeCollectionId = isCollectionRoute ? Number(route.params.id) : null;
+  const routeSmartCollectionId = isSmartCollectionRoute
+    ? Number(route.params.id)
+    : null;
+  const routeVirtualCollectionId = isVirtualCollectionRoute
+    ? String(route.params.id)
+    : null;
+
+  watch(
+    () => allPlatforms.value,
+    async (platforms) => {
+      if (platforms.length > 0) {
+        if (platforms.some((platform) => platform.id === routePlatformId)) {
+          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) &&
+            platform
+          ) {
+            if (currentPlatform.value) resetGallery();
+            selectedIndex.value = consoleStore.getPlatformGameIndex(
+              platform.id,
+            );
+            romsStore.setCurrentPlatform(platform);
+            document.title = `${platform.display_name}`;
+            await fetchRoms();
+          }
+        }
+      }
+    },
+    { immediate: true }, // Ensure watcher is triggered immediately
+  );
+
+  watch(
+    () => allCollections.value,
+    async (collections) => {
+      if (collections.length > 0) {
+        if (
+          collections.some((collection) => collection.id === routeCollectionId)
+        ) {
+          const collection = collections.find(
+            (collection) => collection.id === routeCollectionId,
+          );
+
+          // Check if the current collection is different or no ROMs have been loaded
+          if (
+            (currentCollection.value?.id !== routeCollectionId ||
+              allRoms.value.length === 0) &&
+            collection
+          ) {
+            if (currentCollection.value) resetGallery();
+            selectedIndex.value = consoleStore.getCollectionGameIndex(
+              collection.id,
+            );
+            romsStore.setCurrentCollection(collection);
+            document.title = `${collection.name}`;
+            await fetchRoms();
+          }
+        }
+      }
+    },
+    { immediate: true }, // Ensure watcher is triggered immediately
+  );
+
+  watch(
+    () => smartCollections.value,
+    async (smartCollections) => {
+      if (smartCollections.length > 0) {
+        if (
+          smartCollections.some(
+            (smartCollection) => smartCollection.id === routeSmartCollectionId,
+          )
+        ) {
+          const smartCollection = smartCollections.find(
+            (smartCollection) => smartCollection.id === routeSmartCollectionId,
+          );
+
+          // Check if the current smartCollection is different or no ROMs have been loaded
+          if (
+            (currentSmartCollection.value?.id !== routeSmartCollectionId ||
+              allRoms.value.length === 0) &&
+            smartCollection
+          ) {
+            if (currentSmartCollection.value) resetGallery();
+            selectedIndex.value = consoleStore.getSmartCollectionGameIndex(
+              smartCollection.id,
+            );
+            romsStore.setCurrentSmartCollection(smartCollection);
+            document.title = `${smartCollection.name}`;
+            await fetchRoms();
+          }
+        }
+      }
+    },
+    { immediate: true }, // Ensure watcher is triggered immediately
+  );
+
+  watch(
+    () => virtualCollections.value,
+    async (virtualCollections) => {
+      if (virtualCollections.length > 0) {
+        if (
+          virtualCollections.some(
+            (virtualCollection) =>
+              virtualCollection.id === routeVirtualCollectionId,
+          )
+        ) {
+          const virtualCollection = virtualCollections.find(
+            (virtualCollection) =>
+              virtualCollection.id === routeVirtualCollectionId,
+          );
+
+          // Check if the current virtualCollection is different or no ROMs have been loaded
+          if (
+            (currentVirtualCollection.value?.id !== routeVirtualCollectionId ||
+              allRoms.value.length === 0) &&
+            virtualCollection
+          ) {
+            if (currentVirtualCollection.value) resetGallery();
+            selectedIndex.value = consoleStore.getVirtualCollectionGameIndex(
+              virtualCollection.id,
+            );
+            romsStore.setCurrentVirtualCollection(virtualCollection);
+            document.title = `${virtualCollection.name}`;
+            await fetchRoms();
+          }
+        }
+      }
+    },
+    { immediate: true }, // Ensure watcher is triggered immediately
+  );
+
   off = subscribe(handleAction);
 });
 
@@ -405,27 +516,27 @@ function handleItemDeselected() {
     class="relative min-h-screen overflow-y-auto overflow-x-hidden max-w-[100vw] flex"
     @wheel.prevent
   >
-    <BackButton :text="headerTitle" :on-back="navigateBack" />
+    <BackButton
+      :text="headerTitle"
+      :subtext="headerSubtext"
+      :on-back="navigateBack"
+    />
     <div
       class="relative flex-1 min-w-0 pr-[40px]"
       :style="{ width: 'calc(100vw - 40px)' }"
     >
       <div
-        v-if="loading"
+        v-if="fetchingRoms"
         class="text-center mt-8"
         :style="{ color: 'var(--console-loading-text)' }"
       >
         Loading games…
       </div>
-      <div
-        v-else-if="error"
-        class="text-center mt-8"
-        :style="{ color: 'var(--console-error-text)' }"
-      >
-        {{ error }}
-      </div>
       <div v-else>
-        <div v-if="roms.length === 0" class="text-center text-fgDim p-4">
+        <div
+          v-if="filteredRoms.length === 0"
+          class="text-center text-fgDim p-4"
+        >
           No games found.
         </div>
         <div
@@ -434,7 +545,7 @@ function handleItemDeselected() {
           @wheel.prevent
         >
           <GameCard
-            v-for="(rom, i) in roms"
+            v-for="(rom, i) in filteredRoms"
             :key="rom.id"
             :rom="rom"
             :index="i"
diff --git a/frontend/src/console/views/Home.vue b/frontend/src/console/views/Home.vue
index ee5ed2f97..8c9bfd920 100644
--- a/frontend/src/console/views/Home.vue
+++ b/frontend/src/console/views/Home.vue
@@ -9,10 +9,6 @@ import {
   useTemplateRef,
 } from "vue";
 import { useRouter } from "vue-router";
-import type { CollectionSchema } from "@/__generated__/models/CollectionSchema";
-import type { PlatformSchema } from "@/__generated__/models/PlatformSchema";
-import type { SmartCollectionSchema } from "@/__generated__/models/SmartCollectionSchema";
-import type { VirtualCollectionSchema } from "@/__generated__/models/VirtualCollectionSchema";
 import RIsotipo from "@/components/common/RIsotipo.vue";
 import useFavoriteToggle from "@/composables/useFavoriteToggle";
 import CollectionCard from "@/console/components/CollectionCard.vue";
@@ -31,20 +27,23 @@ import {
 import { useInputScope } from "@/console/composables/useInputScope";
 import { useRovingDom } from "@/console/composables/useRovingDom";
 import { useSpatialNav } from "@/console/composables/useSpatialNav";
-import { isSupportedPlatform } from "@/console/constants/platforms";
 import type { InputAction } from "@/console/input/actions";
 import { ROUTES } from "@/plugins/router";
-import collectionApi from "@/services/api/collection";
-import platformApi from "@/services/api/platform";
 import storeCollections from "@/stores/collections";
 import storeConsole from "@/stores/console";
+import storePlatforms from "@/stores/platforms";
 import storeRoms from "@/stores/roms";
 import type { SimpleRom } from "@/stores/roms";
 
 const router = useRouter();
+const platformsStore = storePlatforms();
+const { allPlatforms, fetchingPlatforms } = storeToRefs(platformsStore);
 const collectionsStore = storeCollections();
-const consoleStore = storeConsole();
+const { allCollections, smartCollections, virtualCollections } =
+  storeToRefs(collectionsStore);
 const romsStore = storeRoms();
+const { recentRoms } = storeToRefs(romsStore);
+const consoleStore = storeConsole();
 const {
   navigationMode,
   platformIndex,
@@ -59,12 +58,6 @@ const { setSelectedBackgroundArt, clearSelectedBackgroundArt } =
   useBackgroundArt();
 const { subscribe } = useInputScope();
 
-const platforms = ref<PlatformSchema[]>([]);
-const recentRoms = ref<SimpleRom[]>([]);
-const collections = ref<CollectionSchema[]>([]);
-const smartCollections = ref<SmartCollectionSchema[]>([]);
-const virtualCollections = ref<VirtualCollectionSchema[]>([]);
-const loadingPlatforms = ref(true);
 const errorMessage = ref("");
 const showSettings = ref(false);
 
@@ -104,8 +97,8 @@ const virtualCollectionElementAt = (i: number) =>
 // Spatial navigation
 const { moveLeft: moveSystemLeft, moveRight: moveSystemRight } = useSpatialNav(
   platformIndex,
-  () => platforms.value.length || 1,
-  () => platforms.value.length,
+  () => allPlatforms.value.length || 1,
+  () => allPlatforms.value.length,
 );
 const { moveLeft: moveRecentLeft, moveRight: moveRecentRight } = useSpatialNav(
   recentIndex,
@@ -115,8 +108,8 @@ const { moveLeft: moveRecentLeft, moveRight: moveRecentRight } = useSpatialNav(
 const { moveLeft: moveCollectionLeft, moveRight: moveCollectionRight } =
   useSpatialNav(
     collectionsIndex,
-    () => collections.value.length || 1,
-    () => collections.value.length,
+    () => allCollections.value.length || 1,
+    () => allCollections.value.length,
   );
 const {
   moveLeft: moveSmartCollectionLeft,
@@ -219,7 +212,7 @@ const navigationFunctions = {
       const before = platformIndex.value;
       moveSystemLeft();
       if (platformIndex.value === before) {
-        platformIndex.value = Math.max(0, platforms.value.length - 1);
+        platformIndex.value = Math.max(0, allPlatforms.value.length - 1);
       }
     },
     next: () => {
@@ -230,10 +223,10 @@ const navigationFunctions = {
       }
     },
     confirm: () => {
-      if (!platforms.value[platformIndex.value]) return false;
+      if (!allPlatforms.value[platformIndex.value]) return false;
       router.push({
         name: ROUTES.CONSOLE_PLATFORM,
-        params: { id: platforms.value[platformIndex.value].id },
+        params: { id: allPlatforms.value[platformIndex.value].id },
       });
       return true;
     },
@@ -268,7 +261,7 @@ const navigationFunctions = {
       const before = collectionsIndex.value;
       moveCollectionLeft();
       if (collectionsIndex.value === before) {
-        collectionsIndex.value = Math.max(0, collections.value.length - 1);
+        collectionsIndex.value = Math.max(0, allCollections.value.length - 1);
       }
     },
     next: () => {
@@ -279,10 +272,10 @@ const navigationFunctions = {
       }
     },
     confirm: () => {
-      if (!collections.value[collectionsIndex.value]) return false;
+      if (!allCollections.value[collectionsIndex.value]) return false;
       router.push({
         name: ROUTES.CONSOLE_COLLECTION,
-        params: { id: collections.value[collectionsIndex.value].id },
+        params: { id: allCollections.value[collectionsIndex.value].id },
       });
       return true;
     },
@@ -526,7 +519,7 @@ function handleAction(action: InputAction): boolean {
       }
       if (currentMode === "smartCollections") {
         navigationMode.value =
-          collections.value.length > 0
+          allCollections.value.length > 0
             ? "collections"
             : recentRoms.value.length > 0
               ? "recent"
@@ -538,7 +531,7 @@ function handleAction(action: InputAction): boolean {
         navigationMode.value =
           smartCollections.value.length > 0
             ? "smartCollections"
-            : collections.value.length > 0
+            : allCollections.value.length > 0
               ? "collections"
               : recentRoms.value.length > 0
                 ? "recent"
@@ -553,7 +546,7 @@ function handleAction(action: InputAction): boolean {
         navigationMode.value =
           recentRoms.value.length > 0
             ? "recent"
-            : collections.value.length > 0
+            : allCollections.value.length > 0
               ? "collections"
               : smartCollections.value.length > 0
                 ? "smartCollections"
@@ -565,7 +558,7 @@ function handleAction(action: InputAction): boolean {
       }
       if (currentMode === "recent") {
         navigationMode.value =
-          collections.value.length > 0
+          allCollections.value.length > 0
             ? "collections"
             : smartCollections.value.length > 0
               ? "smartCollections"
@@ -625,41 +618,10 @@ function handleAction(action: InputAction): boolean {
 }
 
 onMounted(async () => {
-  try {
-    const [
-      { data: plats },
-      recents,
-      { data: cols },
-      { data: smartCols },
-      { data: virtualCols },
-    ] = await Promise.all([
-      platformApi.getPlatforms(),
-      romsStore.fetchRecentRoms(),
-      collectionApi.getCollections(),
-      collectionApi.getSmartCollections(),
-      collectionApi.getVirtualCollections({ type: "collection" }),
-    ]);
-
-    platforms.value = plats.filter(
-      (p) => p.rom_count > 0 && isSupportedPlatform(p.slug),
-    );
-    recentRoms.value = recents ?? [];
-    collections.value = cols ?? [];
-    smartCollections.value = smartCols ?? [];
-    virtualCollections.value = virtualCols ?? [];
-
-    collectionsStore.setCollections(cols ?? []);
-    collectionsStore.setFavoriteCollection(cols?.find((c) => c.is_favorite));
-  } catch (err: unknown) {
-    errorMessage.value = err instanceof Error ? err.message : "Failed to load";
-  } finally {
-    loadingPlatforms.value = false;
-  }
-
   // Restore indices within bounds
-  if (platformIndex.value >= platforms.value.length) platformIndex.value = 0;
+  if (platformIndex.value >= allPlatforms.value.length) platformIndex.value = 0;
   if (recentIndex.value >= recentRoms.value.length) recentIndex.value = 0;
-  if (collectionsIndex.value >= collections.value.length)
+  if (collectionsIndex.value >= allCollections.value.length)
     collectionsIndex.value = 0;
   if (smartCollectionsIndex.value >= smartCollections.value.length)
     smartCollectionsIndex.value = 0;
@@ -723,7 +685,7 @@ onUnmounted(() => {
       </div>
 
       <div
-        v-if="loadingPlatforms"
+        v-if="fetchingPlatforms"
         class="text-center mt-16"
         :style="{ color: 'var(--console-loading-text)' }"
       >
@@ -774,7 +736,7 @@ onUnmounted(() => {
             >
               <div class="flex items-center gap-6 h-full px-12 min-w-max">
                 <SystemCard
-                  v-for="(p, i) in platforms"
+                  v-for="(p, i) in allPlatforms"
                   :key="p.id"
                   :platform="p"
                   :index="i"
@@ -848,7 +810,7 @@ onUnmounted(() => {
         </section>
 
         <section
-          v-if="collections.length > 0"
+          v-if="allCollections.length > 0"
           ref="collections-section-ref"
           class="pb-8"
         >
@@ -888,7 +850,7 @@ onUnmounted(() => {
             >
               <div class="flex items-center gap-4 h-full px-12 min-w-max">
                 <CollectionCard
-                  v-for="(c, i) in collections"
+                  v-for="(c, i) in allCollections"
                   :key="`collection-${c.id}`"
                   :collection="c"
                   :index="i"
diff --git a/frontend/src/stores/console.ts b/frontend/src/stores/console.ts
index 381bb1512..28016d1bb 100644
--- a/frontend/src/stores/console.ts
+++ b/frontend/src/stores/console.ts
@@ -20,8 +20,12 @@ export default defineStore("console", {
     navigationMode: "systems" as NavigationMode,
     perPlatformGameIndex: {} as Record<number, number>,
     perCollectionGameIndex: {} as Record<number, number>,
+    perSmartCollectionGameIndex: {} as Record<number, number>,
+    perVirtualCollectionGameIndex: {} as Record<string, number>,
     perPlatformScrollTop: {} as Record<number, number>,
     perCollectionScrollTop: {} as Record<number, number>,
+    perSmartCollectionScrollTop: {} as Record<number, number>,
+    perVirtualCollectionScrollTop: {} as Record<string, number>,
   }),
   getters: {
     consoleMode: (state) => {
@@ -75,6 +79,18 @@ export default defineStore("console", {
     getCollectionGameIndex(collectionId: number) {
       return this.perCollectionGameIndex[collectionId] ?? 0;
     },
+    setSmartCollectionGameIndex(smartCollectionId: number, idx: number) {
+      this.perSmartCollectionGameIndex[smartCollectionId] = idx;
+    },
+    getSmartCollectionGameIndex(smartCollectionId: number) {
+      return this.perSmartCollectionGameIndex[smartCollectionId] ?? 0;
+    },
+    setVirtualCollectionGameIndex(virtualCollectionId: string, idx: number) {
+      this.perVirtualCollectionGameIndex[virtualCollectionId] = idx;
+    },
+    getVirtualCollectionGameIndex(virtualCollectionId: string) {
+      return this.perVirtualCollectionGameIndex[virtualCollectionId] ?? 0;
+    },
     setPlatformScroll(platformId: number, top: number) {
       this.perPlatformScrollTop[platformId] = top;
     },
@@ -87,5 +103,17 @@ export default defineStore("console", {
     getCollectionScroll(collectionId: number) {
       return this.perCollectionScrollTop[collectionId] ?? 0;
     },
+    setSmartCollectionScroll(smartCollectionId: number, top: number) {
+      this.perSmartCollectionScrollTop[smartCollectionId] = top;
+    },
+    getSmartCollectionScroll(smartCollectionId: number) {
+      return this.perSmartCollectionScrollTop[smartCollectionId] ?? 0;
+    },
+    setVirtualCollectionScroll(virtualCollectionId: string, top: number) {
+      this.perVirtualCollectionScrollTop[virtualCollectionId] = top;
+    },
+    getVirtualCollectionScroll(virtualCollectionId: string) {
+      return this.perVirtualCollectionScrollTop[virtualCollectionId] ?? 0;
+    },
   },
 });

From 109f781e94ea51cc90d7362d3f13427232b8fd52 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 21 Oct 2025 10:56:12 -0400
Subject: [PATCH 2/6] use display name on platform

---
 .../src/console/components/BackButton.vue     | 21 ++++++-------------
 frontend/src/console/views/GamesList.vue      | 20 +-----------------
 2 files changed, 7 insertions(+), 34 deletions(-)

diff --git a/frontend/src/console/components/BackButton.vue b/frontend/src/console/components/BackButton.vue
index 3d316e28d..884cba23b 100644
--- a/frontend/src/console/components/BackButton.vue
+++ b/frontend/src/console/components/BackButton.vue
@@ -3,7 +3,6 @@ import { useRouter } from "vue-router";
 
 const props = defineProps<{
   text?: string;
-  subtext?: string;
   onBack?: () => void;
 }>();
 
@@ -26,19 +25,11 @@ function goBack() {
     >
       <span aria-hidden="true" class="text-lg leading-none">←</span>
     </button>
-    <div class="ml-3">
-      <span
-        v-if="text"
-        class="text-white/90 text-3xl font-bold drop-shadow select-none"
-      >
-        {{ text }}
-      </span>
-      <span
-        v-if="subtext"
-        class="text-white/50 text-sm font-normal drop-shadow select-none"
-      >
-        {{ subtext }}
-      </span>
-    </div>
+    <span
+      v-if="text"
+      class="ml-3 text-white/90 text-3xl font-bold drop-shadow select-none"
+    >
+      {{ text }}
+    </span>
   </div>
 </template>
diff --git a/frontend/src/console/views/GamesList.vue b/frontend/src/console/views/GamesList.vue
index 5dd46a805..38673b409 100644
--- a/frontend/src/console/views/GamesList.vue
+++ b/frontend/src/console/views/GamesList.vue
@@ -139,20 +139,6 @@ const headerTitle = computed(() => {
   );
 });
 
-const headerSubtext = computed(() => {
-  if (isCollectionRoute) {
-    return currentCollection.value?.description || "";
-  }
-  if (isSmartCollectionRoute) {
-    return currentSmartCollection.value?.description || "";
-  }
-  if (isVirtualCollectionRoute) {
-    return currentVirtualCollection.value?.description || "";
-  }
-  if (!currentPlatform.value?.fs_slug) return "";
-  return config.value.PLATFORMS_VERSIONS[currentPlatform.value.fs_slug];
-});
-
 function getCols(): number {
   if (!gridRef.value) return 4;
 
@@ -516,11 +502,7 @@ function handleItemDeselected() {
     class="relative min-h-screen overflow-y-auto overflow-x-hidden max-w-[100vw] flex"
     @wheel.prevent
   >
-    <BackButton
-      :text="headerTitle"
-      :subtext="headerSubtext"
-      :on-back="navigateBack"
-    />
+    <BackButton :text="headerTitle" :on-back="navigateBack" />
     <div
       class="relative flex-1 min-w-0 pr-[40px]"
       :style="{ width: 'calc(100vw - 40px)' }"

From beae5c682d643662183b2f0bfddfcddf708d3638 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 21 Oct 2025 11:03:19 -0400
Subject: [PATCH 3/6] display recent played on homepage

---
 frontend/src/console/components/GameCard.vue  |  13 +-
 .../console/composables/useElementRegistry.ts |   2 +-
 frontend/src/console/views/Home.vue           | 141 +++++++++++-------
 frontend/src/stores/console.ts                |  10 +-
 4 files changed, 102 insertions(+), 64 deletions(-)

diff --git a/frontend/src/console/components/GameCard.vue b/frontend/src/console/components/GameCard.vue
index f25f09ecb..bad0db50c 100644
--- a/frontend/src/console/components/GameCard.vue
+++ b/frontend/src/console/components/GameCard.vue
@@ -2,7 +2,7 @@
 import { computed, onMounted, useTemplateRef, watch } from "vue";
 import Skeleton from "@/components/common/Game/Card/Skeleton.vue";
 import {
-  recentElementRegistry,
+  continuePlayingElementRegistry,
   gamesListElementRegistry,
 } from "@/console/composables/useElementRegistry";
 import storeCollections from "@/stores/collections";
@@ -19,8 +19,8 @@ const props = defineProps<{
   index: number;
   selected?: boolean;
   loaded?: boolean;
-  isRecent?: boolean;
-  registry?: "recent" | "gamesList";
+  continuePlaying?: boolean;
+  registry?: "continuePlaying" | "gamesList";
 }>();
 
 const heartbeatStore = storeHeartbeat();
@@ -84,7 +84,10 @@ onMounted(() => {
   if (props.registry === "gamesList") {
     gamesListElementRegistry.registerElement(props.index, gameCardRef.value);
   } else {
-    recentElementRegistry.registerElement(props.index, gameCardRef.value);
+    continuePlayingElementRegistry.registerElement(
+      props.index,
+      gameCardRef.value,
+    );
   }
 });
 </script>
@@ -96,7 +99,7 @@ onMounted(() => {
     :class="{
       '-translate-y-[2px] scale-[1.03] shadow-[0_8px_28px_rgba(0,0,0,0.35),_0_0_0_2px_var(--console-game-card-focus-border),_0_0_16px_var(--console-game-card-focus-border)]':
         selected,
-      'w-[250px] shrink-0': isRecent,
+      'w-[250px] shrink-0': continuePlaying,
     }"
     @click="emit('click')"
     @focus="emit('focus')"
diff --git a/frontend/src/console/composables/useElementRegistry.ts b/frontend/src/console/composables/useElementRegistry.ts
index 7d7464ee6..3420b906d 100644
--- a/frontend/src/console/composables/useElementRegistry.ts
+++ b/frontend/src/console/composables/useElementRegistry.ts
@@ -25,7 +25,7 @@ export function useElementRegistry() {
 
 // Create a shared registry instance for each section
 export const systemElementRegistry = useElementRegistry();
-export const recentElementRegistry = useElementRegistry();
+export const continuePlayingElementRegistry = useElementRegistry();
 export const collectionElementRegistry = useElementRegistry();
 export const smartCollectionElementRegistry = useElementRegistry();
 export const virtualCollectionElementRegistry = useElementRegistry();
diff --git a/frontend/src/console/views/Home.vue b/frontend/src/console/views/Home.vue
index 8c9bfd920..35d132788 100644
--- a/frontend/src/console/views/Home.vue
+++ b/frontend/src/console/views/Home.vue
@@ -7,6 +7,7 @@ import {
   nextTick,
   watch,
   useTemplateRef,
+  onBeforeMount,
 } from "vue";
 import { useRouter } from "vue-router";
 import RIsotipo from "@/components/common/RIsotipo.vue";
@@ -19,7 +20,7 @@ import SystemCard from "@/console/components/SystemCard.vue";
 import useBackgroundArt from "@/console/composables/useBackgroundArt";
 import {
   systemElementRegistry,
-  recentElementRegistry,
+  continuePlayingElementRegistry,
   collectionElementRegistry,
   smartCollectionElementRegistry,
   virtualCollectionElementRegistry,
@@ -42,12 +43,12 @@ const collectionsStore = storeCollections();
 const { allCollections, smartCollections, virtualCollections } =
   storeToRefs(collectionsStore);
 const romsStore = storeRoms();
-const { recentRoms } = storeToRefs(romsStore);
+const { continuePlayingRoms } = storeToRefs(romsStore);
 const consoleStore = storeConsole();
 const {
   navigationMode,
   platformIndex,
-  recentIndex,
+  continuePlayingIndex,
   collectionsIndex,
   smartCollectionsIndex,
   virtualCollectionsIndex,
@@ -66,7 +67,9 @@ const scrollContainerRef = useTemplateRef<HTMLDivElement>(
   "scroll-container-ref",
 );
 const platformsRef = useTemplateRef<HTMLDivElement>("platforms-ref");
-const recentRef = useTemplateRef<HTMLDivElement>("recent-ref");
+const continuePlayingRef = useTemplateRef<HTMLDivElement>(
+  "continue-playing-ref",
+);
 const collectionsRef = useTemplateRef<HTMLDivElement>("collections-ref");
 const smartCollectionsRef = useTemplateRef<HTMLDivElement>(
   "smart-collections-ref",
@@ -74,7 +77,9 @@ const smartCollectionsRef = useTemplateRef<HTMLDivElement>(
 const virtualCollectionsRef = useTemplateRef<HTMLDivElement>(
   "virtual-collections-ref",
 );
-const recentSectionRef = useTemplateRef<HTMLElement>("recent-section-ref");
+const continuePlayingSectionRef = useTemplateRef<HTMLElement>(
+  "continue-playing-section-ref",
+);
 const collectionsSectionRef = useTemplateRef<HTMLElement>(
   "collections-section-ref",
 );
@@ -86,7 +91,8 @@ const virtualCollectionsSectionRef = useTemplateRef<HTMLElement>(
 );
 
 const systemElementAt = (i: number) => systemElementRegistry.getElement(i);
-const recentElementAt = (i: number) => recentElementRegistry.getElement(i);
+const continuePlayingElementAt = (i: number) =>
+  continuePlayingElementRegistry.getElement(i);
 const collectionElementAt = (i: number) =>
   collectionElementRegistry.getElement(i);
 const smartCollectionElementAt = (i: number) =>
@@ -100,10 +106,13 @@ const { moveLeft: moveSystemLeft, moveRight: moveSystemRight } = useSpatialNav(
   () => allPlatforms.value.length || 1,
   () => allPlatforms.value.length,
 );
-const { moveLeft: moveRecentLeft, moveRight: moveRecentRight } = useSpatialNav(
-  recentIndex,
-  () => recentRoms.value.length || 1,
-  () => recentRoms.value.length,
+const {
+  moveLeft: moveContinuePlayingLeft,
+  moveRight: moveContinuePlayingRight,
+} = useSpatialNav(
+  continuePlayingIndex,
+  () => continuePlayingRoms.value.length || 1,
+  () => continuePlayingRoms.value.length,
 );
 const { moveLeft: moveCollectionLeft, moveRight: moveCollectionRight } =
   useSpatialNav(
@@ -134,7 +143,7 @@ useRovingDom(platformIndex, systemElementAt, {
   behavior: "smooth",
   scroll: false, // handle scrolling manually
 });
-useRovingDom(recentIndex, recentElementAt, {
+useRovingDom(continuePlayingIndex, continuePlayingElementAt, {
   inline: "center",
   block: "nearest",
   behavior: "smooth",
@@ -169,11 +178,11 @@ watch(platformIndex, (newIdx) => {
   }
 });
 
-watch(recentIndex, (newIdx) => {
+watch(continuePlayingIndex, (newIdx) => {
   if (!isVerticalScrolling) {
-    const el = recentElementAt(newIdx);
-    if (el && recentRef.value) {
-      centerInCarousel(recentRef.value, el, "smooth");
+    const el = continuePlayingElementAt(newIdx);
+    if (el && continuePlayingRef.value) {
+      centerInCarousel(continuePlayingRef.value, el, "smooth");
     }
   }
 });
@@ -231,27 +240,34 @@ const navigationFunctions = {
       return true;
     },
   },
-  recent: {
+  continuePlaying: {
     prev: () => {
-      const before = recentIndex.value;
-      moveRecentLeft();
-      if (recentIndex.value === before) {
-        recentIndex.value = Math.max(0, recentRoms.value.length - 1);
+      const before = continuePlayingIndex.value;
+      moveContinuePlayingLeft();
+      if (continuePlayingIndex.value === before) {
+        continuePlayingIndex.value = Math.max(
+          0,
+          continuePlayingRoms.value.length - 1,
+        );
       }
     },
     next: () => {
-      const before = recentIndex.value;
-      moveRecentRight();
-      if (recentIndex.value === before) {
-        recentIndex.value = 0;
+      const before = continuePlayingIndex.value;
+      moveContinuePlayingRight();
+      if (continuePlayingIndex.value === before) {
+        continuePlayingIndex.value = 0;
       }
     },
     confirm: () => {
-      if (!recentRoms.value[recentIndex.value]) return false;
+      if (!continuePlayingRoms.value[continuePlayingIndex.value]) return false;
       router.push({
         name: ROUTES.CONSOLE_ROM,
-        params: { rom: recentRoms.value[recentIndex.value].id },
-        query: { id: recentRoms.value[recentIndex.value].platform_id },
+        params: {
+          rom: continuePlayingRoms.value[continuePlayingIndex.value].id,
+        },
+        query: {
+          id: continuePlayingRoms.value[continuePlayingIndex.value].platform_id,
+        },
       });
       return true;
     },
@@ -367,8 +383,11 @@ function scrollToCurrentRow() {
     case "systems":
       scrollContainerRef.value?.scrollTo({ top: 0, behavior });
       break;
-    case "recent":
-      recentSectionRef.value?.scrollIntoView({ behavior, block: "start" });
+    case "continuePlaying":
+      continuePlayingSectionRef.value?.scrollIntoView({
+        behavior,
+        block: "start",
+      });
       break;
     case "collections":
       collectionsSectionRef.value?.scrollIntoView({
@@ -506,14 +525,14 @@ function handleAction(action: InputAction): boolean {
         navigationMode.value = "controls";
         return true;
       }
-      if (currentMode === "recent") {
+      if (currentMode === "continuePlaying") {
         navigationMode.value = "systems";
         scrollToCurrentRow();
         return true;
       }
       if (currentMode === "collections") {
         navigationMode.value =
-          recentRoms.value.length > 0 ? "recent" : "systems";
+          continuePlayingRoms.value.length > 0 ? "continuePlaying" : "systems";
         scrollToCurrentRow();
         return true;
       }
@@ -521,8 +540,8 @@ function handleAction(action: InputAction): boolean {
         navigationMode.value =
           allCollections.value.length > 0
             ? "collections"
-            : recentRoms.value.length > 0
-              ? "recent"
+            : continuePlayingRoms.value.length > 0
+              ? "continuePlaying"
               : "systems";
         scrollToCurrentRow();
         return true;
@@ -533,8 +552,8 @@ function handleAction(action: InputAction): boolean {
             ? "smartCollections"
             : allCollections.value.length > 0
               ? "collections"
-              : recentRoms.value.length > 0
-                ? "recent"
+              : continuePlayingRoms.value.length > 0
+                ? "continuePlaying"
                 : "systems";
         scrollToCurrentRow();
         return true;
@@ -544,8 +563,8 @@ function handleAction(action: InputAction): boolean {
     case "moveDown":
       if (currentMode === "systems") {
         navigationMode.value =
-          recentRoms.value.length > 0
-            ? "recent"
+          continuePlayingRoms.value.length > 0
+            ? "continuePlaying"
             : allCollections.value.length > 0
               ? "collections"
               : smartCollections.value.length > 0
@@ -556,7 +575,7 @@ function handleAction(action: InputAction): boolean {
         scrollToCurrentRow();
         return true;
       }
-      if (currentMode === "recent") {
+      if (currentMode === "continuePlaying") {
         navigationMode.value =
           allCollections.value.length > 0
             ? "collections"
@@ -606,8 +625,13 @@ function handleAction(action: InputAction): boolean {
       return true;
 
     case "toggleFavorite":
-      if (currentMode === "recent" && recentRoms.value[recentIndex.value]) {
-        toggleFavoriteComposable(recentRoms.value[recentIndex.value]);
+      if (
+        currentMode === "continuePlaying" &&
+        continuePlayingRoms.value[continuePlayingIndex.value]
+      ) {
+        toggleFavoriteComposable(
+          continuePlayingRoms.value[continuePlayingIndex.value],
+        );
         return true;
       }
       return false;
@@ -617,10 +641,15 @@ function handleAction(action: InputAction): boolean {
   }
 }
 
+onBeforeMount(async () => {
+  await romsStore.fetchContinuePlayingRoms();
+});
+
 onMounted(async () => {
   // Restore indices within bounds
   if (platformIndex.value >= allPlatforms.value.length) platformIndex.value = 0;
-  if (recentIndex.value >= recentRoms.value.length) recentIndex.value = 0;
+  if (continuePlayingIndex.value >= continuePlayingRoms.value.length)
+    continuePlayingIndex.value = 0;
   if (collectionsIndex.value >= allCollections.value.length)
     collectionsIndex.value = 0;
   if (smartCollectionsIndex.value >= smartCollections.value.length)
@@ -633,7 +662,10 @@ onMounted(async () => {
 
   // Center carousels
   centerInCarousel(platformsRef.value, systemElementAt(platformIndex.value));
-  centerInCarousel(recentRef.value, recentElementAt(recentIndex.value));
+  centerInCarousel(
+    continuePlayingRef.value,
+    continuePlayingElementAt(continuePlayingIndex.value),
+  );
   centerInCarousel(
     collectionsRef.value,
     collectionElementAt(collectionsIndex.value),
@@ -655,7 +687,7 @@ let off: (() => void) | null = null;
 onUnmounted(() => {
   consoleStore.setHomeState({
     platformIndex: platformIndex.value,
-    recentIndex: recentIndex.value,
+    continuePlayingIndex: continuePlayingIndex.value,
     collectionsIndex: collectionsIndex.value,
     smartCollectionsIndex: smartCollectionsIndex.value,
     virtualCollectionsIndex: virtualCollectionsIndex.value,
@@ -752,8 +784,8 @@ onUnmounted(() => {
         </section>
 
         <section
-          v-if="recentRoms.length > 0"
-          ref="recent-section-ref"
+          v-if="continuePlayingRoms.length > 0"
+          ref="continue-playing-section-ref"
           class="pb-8"
         >
           <h2
@@ -770,7 +802,7 @@ onUnmounted(() => {
                 border: `1px solid var(--console-home-carousel-button-border)`,
                 color: 'var(--console-home-carousel-button-text)',
               }"
-              @click="navigationFunctions.recent.prev"
+              @click="navigationFunctions.continuePlaying.prev"
             >
               ◀
             </button>
@@ -781,26 +813,29 @@ onUnmounted(() => {
                 border: `1px solid var(--console-home-carousel-button-border)`,
                 color: 'var(--console-home-carousel-button-text)',
               }"
-              @click="navigationFunctions.recent.next"
+              @click="navigationFunctions.continuePlaying.next"
             >
               ▶
             </button>
             <div
-              ref="recent-ref"
+              ref="continue-playing-ref"
               class="w-full h-full overflow-x-auto overflow-y-hidden no-scrollbar [scrollbar-width:none] [-ms-overflow-style:none]"
               @wheel.prevent
             >
               <div class="flex items-center gap-4 h-full px-12 min-w-max">
                 <GameCard
-                  v-for="(g, i) in recentRoms"
+                  v-for="(g, i) in continuePlayingRoms"
                   :key="`${g.platform_id}-${g.id}`"
                   :rom="g"
                   :index="i"
-                  :is-recent="true"
-                  :selected="navigationMode === 'recent' && i === recentIndex"
+                  :continue-playing="true"
+                  :selected="
+                    navigationMode === 'continuePlaying' &&
+                    i === continuePlayingIndex
+                  "
                   :loaded="true"
                   @click="goGame(g)"
-                  @focus="recentIndex = i"
+                  @focus="continuePlayingIndex = i"
                   @select="handleItemSelected"
                   @deselect="handleItemDeselected"
                 />
@@ -1042,7 +1077,7 @@ onUnmounted(() => {
 
       <NavigationHint
         :show-back="false"
-        :show-toggle-favorite="navigationMode === 'recent'"
+        :show-toggle-favorite="navigationMode === 'continuePlaying'"
       />
     </div>
     <SettingsModal v-model="showSettings" />
diff --git a/frontend/src/stores/console.ts b/frontend/src/stores/console.ts
index 28016d1bb..8bf0c9edd 100644
--- a/frontend/src/stores/console.ts
+++ b/frontend/src/stores/console.ts
@@ -3,7 +3,7 @@ import { ROUTES } from "@/plugins/router";
 
 export type NavigationMode =
   | "systems"
-  | "recent"
+  | "continuePlaying"
   | "collections"
   | "smartCollections"
   | "virtualCollections"
@@ -12,7 +12,7 @@ export type NavigationMode =
 export default defineStore("console", {
   state: () => ({
     platformIndex: 0,
-    recentIndex: 0,
+    continuePlayingIndex: 0,
     collectionsIndex: 0,
     smartCollectionsIndex: 0,
     virtualCollectionsIndex: 0,
@@ -45,7 +45,7 @@ export default defineStore("console", {
   actions: {
     setHomeState(payload: {
       platformIndex?: number;
-      recentIndex?: number;
+      continuePlayingIndex?: number;
       collectionsIndex?: number;
       smartCollectionsIndex?: number;
       virtualCollectionsIndex?: number;
@@ -54,8 +54,8 @@ export default defineStore("console", {
     }) {
       if (payload.platformIndex !== undefined)
         this.platformIndex = payload.platformIndex;
-      if (payload.recentIndex !== undefined)
-        this.recentIndex = payload.recentIndex;
+      if (payload.continuePlayingIndex !== undefined)
+        this.continuePlayingIndex = payload.continuePlayingIndex;
       if (payload.collectionsIndex !== undefined)
         this.collectionsIndex = payload.collectionsIndex;
       if (payload.smartCollectionsIndex !== undefined)

From e26f1d2bcf4da4b5cb1bd7af3f85e7acad56298a Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 21 Oct 2025 11:13:15 -0400
Subject: [PATCH 4/6] fix scan page

---
 backend/endpoints/sockets/scan.py                    |  2 +-
 .../Settings/ServerStats/PlatformsStats.vue          | 12 ++++++------
 .../src/components/common/Navigation/ScanBtn.vue     | 10 +++++-----
 frontend/src/stores/scanning.ts                      | 12 ++++--------
 frontend/src/views/Scan.vue                          |  5 +++--
 5 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/backend/endpoints/sockets/scan.py b/backend/endpoints/sockets/scan.py
index 9610a85ae..8a15e5aac 100644
--- a/backend/endpoints/sockets/scan.py
+++ b/backend/endpoints/sockets/scan.py
@@ -379,7 +379,7 @@ async def _identify_platform(
     await socket_manager.emit(
         "scan:scanning_platform",
         PlatformSchema.model_validate(platform).model_dump(
-            include={"id", "name", "slug", "fs_slug", "is_identified"}
+            include={"id", "name", "display_name", "slug", "fs_slug", "is_identified"}
         ),
     )
     await socket_manager.emit("", None)
diff --git a/frontend/src/components/Settings/ServerStats/PlatformsStats.vue b/frontend/src/components/Settings/ServerStats/PlatformsStats.vue
index b71f2fafc..42a3657bd 100644
--- a/frontend/src/components/Settings/ServerStats/PlatformsStats.vue
+++ b/frontend/src/components/Settings/ServerStats/PlatformsStats.vue
@@ -16,18 +16,18 @@ const { allPlatforms } = storeToRefs(platformsStore);
 const orderBy = ref<"name" | "size" | "count">("name");
 
 const sortedPlatforms = computed(() => {
-  const platforms = [...allPlatforms.value];
   if (orderBy.value === "size") {
-    return platforms.sort(
+    return allPlatforms.value.sort(
       (a, b) => Number(b.fs_size_bytes) - Number(a.fs_size_bytes),
     );
   }
   if (orderBy.value === "count") {
-    return platforms.sort((a, b) => b.rom_count - a.rom_count);
+    return allPlatforms.value.sort((a, b) => b.rom_count - a.rom_count);
   }
-  // Default to name
-  return platforms.sort((a, b) =>
-    a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+  return allPlatforms.value.sort((a, b) =>
+    a.display_name.localeCompare(b.display_name, undefined, {
+      sensitivity: "base",
+    }),
   );
 });
 
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index b91181c20..864d2c991 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -37,13 +37,13 @@ if (!socket.connected) socket.connect();
 socket.on(
   "scan:scanning_platform",
   ({
-    name,
+    display_name,
     slug,
     id,
     fs_slug,
     is_identified,
   }: {
-    name: string;
+    display_name: string;
     slug: string;
     id: number;
     fs_slug: string;
@@ -51,10 +51,10 @@ socket.on(
   }) => {
     scanningStore.set(true);
     scanningPlatforms.value = scanningPlatforms.value.filter(
-      (platform) => platform.name !== name,
+      (platform) => platform.display_name !== display_name,
     );
     scanningPlatforms.value.push({
-      name,
+      display_name,
       slug,
       id,
       fs_slug,
@@ -87,7 +87,7 @@ socket.on("scan:scanning_rom", (rom: SimpleRom) => {
   // Add the platform if the socket dropped and it's missing
   if (!scannedPlatform) {
     scanningPlatforms.value.push({
-      name: rom.platform_display_name,
+      display_name: rom.platform_display_name,
       slug: rom.platform_slug,
       id: rom.platform_id,
       fs_slug: rom.platform_fs_slug,
diff --git a/frontend/src/stores/scanning.ts b/frontend/src/stores/scanning.ts
index ee0ba694c..2836684d2 100644
--- a/frontend/src/stores/scanning.ts
+++ b/frontend/src/stores/scanning.ts
@@ -1,19 +1,15 @@
 import { defineStore } from "pinia";
 import type { SimpleRom } from "@/stores/roms";
+import type { Platform } from "./platforms";
 
-interface ScanningPlatforms {
-  name: string;
-  slug: string;
-  fs_slug: string;
-  id: number;
-  is_identified: boolean;
+interface ScanningPlatform extends Partial<Platform> {
   roms: SimpleRom[];
 }
 
 export default defineStore("scanning", {
   state: () => ({
     scanning: false,
-    scanningPlatforms: [] as ScanningPlatforms[],
+    scanningPlatforms: [] as ScanningPlatform[],
     scanStats: {
       scanned_platforms: 0,
       new_platforms: 0,
@@ -30,7 +26,7 @@ export default defineStore("scanning", {
     },
     reset() {
       this.scanning = false;
-      this.scanningPlatforms = [] as ScanningPlatforms[];
+      this.scanningPlatforms = [] as ScanningPlatform[];
       this.scanStats = {
         scanned_platforms: 0,
         new_platforms: 0,
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index da1786319..62e6e9226 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -341,13 +341,14 @@ async function stopScan() {
                     <template #prepend>
                       <v-avatar rounded="0" size="40">
                         <PlatformIcon
+                          v-if="platform.slug"
                           :key="platform.slug"
                           :slug="platform.slug"
-                          :name="platform.name"
+                          :name="platform.display_name"
                         />
                       </v-avatar>
                     </template>
-                    {{ platform.name }}
+                    {{ platform.display_name }}
                     <template #append>
                       <v-chip class="ml-3" color="primary" size="x-small" label>
                         {{ platform.roms.length }}

From 2ce1424b62bc365f3e71ab2d667842e0d701199c Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 21 Oct 2025 11:18:14 -0400
Subject: [PATCH 5/6] reset gallery

---
 frontend/src/console/views/GamesList.vue      | 24 +++++++++----------
 .../Gallery/Collection/BaseCollection.vue     |  4 ++--
 frontend/src/views/Gallery/Platform.vue       |  4 ++--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/console/views/GamesList.vue b/frontend/src/console/views/GamesList.vue
index 38673b409..a8511b0eb 100644
--- a/frontend/src/console/views/GamesList.vue
+++ b/frontend/src/console/views/GamesList.vue
@@ -362,12 +362,12 @@ onMounted(async () => {
               allRoms.value.length === 0) &&
             platform
           ) {
-            if (currentPlatform.value) resetGallery();
+            resetGallery();
+            romsStore.setCurrentPlatform(platform);
             selectedIndex.value = consoleStore.getPlatformGameIndex(
               platform.id,
             );
-            romsStore.setCurrentPlatform(platform);
-            document.title = `${platform.display_name}`;
+            document.title = platform.display_name;
             await fetchRoms();
           }
         }
@@ -393,12 +393,12 @@ onMounted(async () => {
               allRoms.value.length === 0) &&
             collection
           ) {
-            if (currentCollection.value) resetGallery();
+            resetGallery();
+            romsStore.setCurrentCollection(collection);
             selectedIndex.value = consoleStore.getCollectionGameIndex(
               collection.id,
             );
-            romsStore.setCurrentCollection(collection);
-            document.title = `${collection.name}`;
+            document.title = collection.name;
             await fetchRoms();
           }
         }
@@ -426,12 +426,12 @@ onMounted(async () => {
               allRoms.value.length === 0) &&
             smartCollection
           ) {
-            if (currentSmartCollection.value) resetGallery();
+            resetGallery();
+            romsStore.setCurrentSmartCollection(smartCollection);
             selectedIndex.value = consoleStore.getSmartCollectionGameIndex(
               smartCollection.id,
             );
-            romsStore.setCurrentSmartCollection(smartCollection);
-            document.title = `${smartCollection.name}`;
+            document.title = smartCollection.name;
             await fetchRoms();
           }
         }
@@ -461,12 +461,12 @@ onMounted(async () => {
               allRoms.value.length === 0) &&
             virtualCollection
           ) {
-            if (currentVirtualCollection.value) resetGallery();
+            resetGallery();
+            romsStore.setCurrentVirtualCollection(virtualCollection);
             selectedIndex.value = consoleStore.getVirtualCollectionGameIndex(
               virtualCollection.id,
             );
-            romsStore.setCurrentVirtualCollection(virtualCollection);
-            document.title = `${virtualCollection.name}`;
+            document.title = virtualCollection.name;
             await fetchRoms();
           }
         }
diff --git a/frontend/src/views/Gallery/Collection/BaseCollection.vue b/frontend/src/views/Gallery/Collection/BaseCollection.vue
index ab8e71490..65836ded9 100644
--- a/frontend/src/views/Gallery/Collection/BaseCollection.vue
+++ b/frontend/src/views/Gallery/Collection/BaseCollection.vue
@@ -183,7 +183,7 @@ onMounted(async () => {
         ) {
           resetGallery();
           props.setCurrentCollection(collection);
-          document.title = `${collection.name}`;
+          document.title = collection.name;
           await fetchRoms();
         }
       }
@@ -213,7 +213,7 @@ onBeforeRouteUpdate(async (to, from) => {
         ) {
           resetGallery();
           props.setCurrentCollection(collection);
-          document.title = `${collection.name}`;
+          document.title = collection.name;
           await fetchRoms();
         }
       }
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index abc21134f..e25022b1c 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -181,7 +181,7 @@ onMounted(async () => {
           ) {
             if (currentPlatform.value) resetGallery();
             romsStore.setCurrentPlatform(platform);
-            document.title = `${platform.display_name}`;
+            document.title = platform.display_name;
             await fetchRoms();
           }
         } else {
@@ -215,7 +215,7 @@ onBeforeRouteUpdate(async (to, from) => {
         ) {
           if (currentPlatform.value) resetGallery();
           romsStore.setCurrentPlatform(platform);
-          document.title = `${platform.display_name}`;
+          document.title = platform.display_name;
           await fetchRoms();
         } else {
           noPlatformError.value = true;

From 8d24c959b717b5f0c28e8e71c561b758690bc5d6 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Tue, 21 Oct 2025 11:52:21 -0400
Subject: [PATCH 6/6] changes from bot review

---
 frontend/src/console/views/GamesList.vue | 147 ++++++++++-------------
 frontend/src/views/Gallery/Platform.vue  |  34 +++---
 2 files changed, 79 insertions(+), 102 deletions(-)

diff --git a/frontend/src/console/views/GamesList.vue b/frontend/src/console/views/GamesList.vue
index a8511b0eb..cbd0c5039 100644
--- a/frontend/src/console/views/GamesList.vue
+++ b/frontend/src/console/views/GamesList.vue
@@ -351,25 +351,21 @@ onMounted(async () => {
     () => allPlatforms.value,
     async (platforms) => {
       if (platforms.length > 0) {
-        if (platforms.some((platform) => platform.id === routePlatformId)) {
-          const platform = platforms.find(
-            (platform) => platform.id === routePlatformId,
-          );
+        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) &&
-            platform
-          ) {
-            resetGallery();
-            romsStore.setCurrentPlatform(platform);
-            selectedIndex.value = consoleStore.getPlatformGameIndex(
-              platform.id,
-            );
-            document.title = platform.display_name;
-            await fetchRoms();
-          }
+        // Check if the current platform is different or no ROMs have been loaded
+        if (
+          platform &&
+          (currentPlatform.value?.id !== routePlatformId ||
+            allRoms.value.length === 0)
+        ) {
+          resetGallery();
+          romsStore.setCurrentPlatform(platform);
+          selectedIndex.value = consoleStore.getPlatformGameIndex(platform.id);
+          document.title = platform.display_name;
+          await fetchRoms();
         }
       }
     },
@@ -380,27 +376,23 @@ onMounted(async () => {
     () => allCollections.value,
     async (collections) => {
       if (collections.length > 0) {
-        if (
-          collections.some((collection) => collection.id === routeCollectionId)
-        ) {
-          const collection = collections.find(
-            (collection) => collection.id === routeCollectionId,
-          );
+        const collection = collections.find(
+          (collection) => collection.id === routeCollectionId,
+        );
 
-          // Check if the current collection is different or no ROMs have been loaded
-          if (
-            (currentCollection.value?.id !== routeCollectionId ||
-              allRoms.value.length === 0) &&
-            collection
-          ) {
-            resetGallery();
-            romsStore.setCurrentCollection(collection);
-            selectedIndex.value = consoleStore.getCollectionGameIndex(
-              collection.id,
-            );
-            document.title = collection.name;
-            await fetchRoms();
-          }
+        // Check if the current collection is different or no ROMs have been loaded
+        if (
+          collection &&
+          (currentCollection.value?.id !== routeCollectionId ||
+            allRoms.value.length === 0)
+        ) {
+          resetGallery();
+          romsStore.setCurrentCollection(collection);
+          selectedIndex.value = consoleStore.getCollectionGameIndex(
+            collection.id,
+          );
+          document.title = collection.name;
+          await fetchRoms();
         }
       }
     },
@@ -411,29 +403,23 @@ onMounted(async () => {
     () => smartCollections.value,
     async (smartCollections) => {
       if (smartCollections.length > 0) {
-        if (
-          smartCollections.some(
-            (smartCollection) => smartCollection.id === routeSmartCollectionId,
-          )
-        ) {
-          const smartCollection = smartCollections.find(
-            (smartCollection) => smartCollection.id === routeSmartCollectionId,
-          );
+        const smartCollection = smartCollections.find(
+          (smartCollection) => smartCollection.id === routeSmartCollectionId,
+        );
 
-          // Check if the current smartCollection is different or no ROMs have been loaded
-          if (
-            (currentSmartCollection.value?.id !== routeSmartCollectionId ||
-              allRoms.value.length === 0) &&
-            smartCollection
-          ) {
-            resetGallery();
-            romsStore.setCurrentSmartCollection(smartCollection);
-            selectedIndex.value = consoleStore.getSmartCollectionGameIndex(
-              smartCollection.id,
-            );
-            document.title = smartCollection.name;
-            await fetchRoms();
-          }
+        // Check if the current smartCollection is different or no ROMs have been loaded
+        if (
+          smartCollection &&
+          (currentSmartCollection.value?.id !== routeSmartCollectionId ||
+            allRoms.value.length === 0)
+        ) {
+          resetGallery();
+          romsStore.setCurrentSmartCollection(smartCollection);
+          selectedIndex.value = consoleStore.getSmartCollectionGameIndex(
+            smartCollection.id,
+          );
+          document.title = smartCollection.name;
+          await fetchRoms();
         }
       }
     },
@@ -444,31 +430,24 @@ onMounted(async () => {
     () => virtualCollections.value,
     async (virtualCollections) => {
       if (virtualCollections.length > 0) {
-        if (
-          virtualCollections.some(
-            (virtualCollection) =>
-              virtualCollection.id === routeVirtualCollectionId,
-          )
-        ) {
-          const virtualCollection = virtualCollections.find(
-            (virtualCollection) =>
-              virtualCollection.id === routeVirtualCollectionId,
-          );
+        const virtualCollection = virtualCollections.find(
+          (virtualCollection) =>
+            virtualCollection.id === routeVirtualCollectionId,
+        );
 
-          // Check if the current virtualCollection is different or no ROMs have been loaded
-          if (
-            (currentVirtualCollection.value?.id !== routeVirtualCollectionId ||
-              allRoms.value.length === 0) &&
-            virtualCollection
-          ) {
-            resetGallery();
-            romsStore.setCurrentVirtualCollection(virtualCollection);
-            selectedIndex.value = consoleStore.getVirtualCollectionGameIndex(
-              virtualCollection.id,
-            );
-            document.title = virtualCollection.name;
-            await fetchRoms();
-          }
+        // Check if the current virtualCollection is different or no ROMs have been loaded
+        if (
+          virtualCollection &&
+          (currentVirtualCollection.value?.id !== routeVirtualCollectionId ||
+            allRoms.value.length === 0)
+        ) {
+          resetGallery();
+          romsStore.setCurrentVirtualCollection(virtualCollection);
+          selectedIndex.value = consoleStore.getVirtualCollectionGameIndex(
+            virtualCollection.id,
+          );
+          document.title = virtualCollection.name;
+          await fetchRoms();
         }
       }
     },
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index e25022b1c..af8206c34 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -168,28 +168,26 @@ onMounted(async () => {
     () => filteredPlatforms.value,
     async (platforms) => {
       if (platforms.length > 0) {
-        if (platforms.some((platform) => platform.id === routePlatformId)) {
-          const platform = platforms.find(
-            (platform) => platform.id === routePlatformId,
-          );
+        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) &&
-            platform
-          ) {
-            if (currentPlatform.value) resetGallery();
-            romsStore.setCurrentPlatform(platform);
-            document.title = platform.display_name;
-            await fetchRoms();
-          }
-        } else {
-          noPlatformError.value = true;
+        // Check if the current platform is different or no ROMs have been loaded
+        if (
+          platform &&
+          (currentPlatform.value?.id !== routePlatformId ||
+            allRoms.value.length === 0)
+        ) {
+          if (currentPlatform.value) resetGallery();
+          romsStore.setCurrentPlatform(platform);
+          document.title = platform.display_name;
+          await fetchRoms();
         }
+      } else {
+        noPlatformError.value = true;
       }
     },
-    { immediate: true }, // Ensure watcher is triggered immediately
+    { immediate: true },
   );
 });