Merge pull request #2394 from rommapp/4-2-alpha-hotfixes

gantoine · web-flow · commit 4b54f1f3c36a · 2025-09-05T23:03:42.000-05:00
4.2 alpha hotfixes
diff --git a/backend/models/collection.py b/backend/models/collection.py
@@ -153,13 +153,15 @@ def path_covers_small(self) -> list[str]:
         return [
             f"{FRONTEND_RESOURCES_PATH}/{cover}?ts={self.updated_at}"
             for cover in self.path_covers_s
+            if cover
         ]
 
     @property
     def path_covers_large(self) -> list[str]:
         return [
             f"{FRONTEND_RESOURCES_PATH}/{cover}?ts={self.updated_at}"
             for cover in self.path_covers_l
+            if cover
         ]
 
     __table_args__ = (
diff --git a/frontend/assets/console/default/theme.css b/frontend/assets/console/default/theme.css
@@ -168,7 +168,3 @@
   --console-play-save-status-text: var(--console-accent-secondary);
   --console-play-save-separator-border: rgba(255, 255, 255, 0.1);
 }
-
-.console-root::before {
-  background: rgba(0, 0, 0, 0.15);
-}
diff --git a/frontend/assets/console/neon/theme.css b/frontend/assets/console/neon/theme.css
@@ -168,7 +168,3 @@
   --console-play-save-status-text: var(--console-accent-secondary);
   --console-play-save-separator-border: rgba(0, 0, 0, 0.1);
 }
-
-.console-root::before {
-  background: rgba(0, 0, 0, 0.15);
-}
diff --git a/frontend/src/components/Gallery/AppBar/common/CharIndexBar.vue b/frontend/src/components/Gallery/AppBar/common/CharIndexBar.vue
@@ -47,6 +47,10 @@ async function fetchRoms() {
         loading: false,
         scrim: false,
       });
+    })
+    .finally(() => {
+      // Scroll to the top of the gallery
+      document.body.scrollTo({ top: 0, behavior: "smooth" });
     });
 }
 
diff --git a/frontend/src/components/Settings/UserProfile/RetroAchievements.vue b/frontend/src/components/Settings/UserProfile/RetroAchievements.vue
@@ -39,7 +39,8 @@ async function refreshRetroAchievements(incremental = false) {
         timeout: 5000,
       });
     })
-    .catch(() => {
+    .catch((error) => {
+      console.error(error);
       emitter?.emit("snackbarShow", {
         msg: `Unable to sync your RetroAchievements profile.`,
         icon: "mdi-close-circle",
@@ -69,7 +70,8 @@ async function submitRACredentials() {
       // Refresh the RetroAchievements data
       refreshRetroAchievements();
     })
-    .catch(() => {
+    .catch((error) => {
+      console.error(error);
       emitter?.emit("snackbarShow", {
         msg: `Unable to update your RetroAchievements settings.`,
         icon: "mdi-close-circle",
diff --git a/frontend/src/components/common/Navigation/ConsoleModeBtn.vue b/frontend/src/components/common/Navigation/ConsoleModeBtn.vue
@@ -26,7 +26,9 @@ function enterConsoleMode() {
   if (!document.fullscreenElement) {
     // Attempt fullscreen after a small delay to allow navigation transition
     setTimeout(() => {
-      document.documentElement.requestFullscreen?.().catch(() => {});
+      document.documentElement.requestFullscreen?.().catch((error) => {
+        console.error("Error requesting fullscreen", error);
+      });
     }, 50);
   }
 }
diff --git a/frontend/src/components/common/NewVersionDialog.vue b/frontend/src/components/common/NewVersionDialog.vue
@@ -8,7 +8,7 @@ const heartbeat = storeHeartbeat();
 const { VERSION } = heartbeat.value.SYSTEM;
 const GITHUB_VERSION = ref(VERSION);
 const latestVersionDismissed = ref(VERSION === "development");
-const dismissedVersion = useLocalStorage("dismissedVersion", "");
+const dismissedVersion = useLocalStorage("ui.dismissedVersion", "");
 
 function dismissVersionBanner() {
   dismissedVersion.value = GITHUB_VERSION.value;
diff --git a/frontend/src/console/Layout.vue b/frontend/src/console/Layout.vue
@@ -1,24 +1,31 @@
 <script setup lang="ts">
-import { useIdle } from "@vueuse/core";
+import { useIdle, useSessionStorage } from "@vueuse/core";
 import { onMounted, onUnmounted, provide } from "vue";
 import { type RouteLocationNormalized } from "vue-router";
 import { useRouter } from "vue-router";
+import { useConsoleTheme } from "@/console/composables/useConsoleTheme";
 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 { useConsoleTheme } from "@/stores/consoleTheme";
 
 const router = useRouter();
 const bus = new InputBus();
 const themeStore = useConsoleTheme();
 provide(InputBusSymbol, bus);
 
+const fullScreenPostPlay = useSessionStorage(
+  "emulation.fullScreenPostPlay",
+  false,
+);
+
 // Define route hierarchy for transition direction logic
 const routeHierarchy = {
   [ROUTES.CONSOLE_HOME]: 0,
   [ROUTES.CONSOLE_PLATFORM]: 1,
   [ROUTES.CONSOLE_COLLECTION]: 1,
+  [ROUTES.CONSOLE_SMART_COLLECTION]: 1,
+  [ROUTES.CONSOLE_VIRTUAL_COLLECTION]: 1,
   [ROUTES.CONSOLE_ROM]: 2,
   [ROUTES.CONSOLE_PLAY]: 3,
 };
@@ -58,6 +65,14 @@ onMounted(() => {
   bus.pushScope();
   detachKeyboard = attachKeyboard(bus);
   detachGamepad = attachGamepad(bus);
+
+  // Re-enable fullscreen if it was enabled after exiting the game
+  if (fullScreenPostPlay.value) {
+    document.documentElement.requestFullscreen?.().catch((error) => {
+      console.error("Error requesting fullscreen", error);
+    });
+    fullScreenPostPlay.value = false;
+  }
 });
 
 onUnmounted(() => {
diff --git a/frontend/src/console/components/BackButton.vue b/frontend/src/console/components/BackButton.vue
@@ -9,7 +9,8 @@ const props = defineProps<{
 const router = useRouter();
 
 function goBack() {
-  props.onBack?.() ?? router.back();
+  if (props.onBack) props.onBack();
+  else router.back();
 }
 </script>
 
diff --git a/frontend/src/console/components/FallbackSystemCard.vue b/frontend/src/console/components/FallbackSystemCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useConsoleTheme } from "@/console/composables/useConsoleTheme";
 import { useThemeAssets } from "@/console/composables/useThemeAssets";
-import { useConsoleTheme } from "@/stores/consoleTheme";
 
 defineProps<{ platformName: string }>();
 
diff --git a/frontend/src/console/components/SettingsModal.vue b/frontend/src/console/components/SettingsModal.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import NavigationText from "@/console/components/NavigationText.vue";
+import { useConsoleTheme } from "@/console/composables/useConsoleTheme";
 import { useInputScope } from "@/console/composables/useInputScope";
 import type { InputAction } from "@/console/input/actions";
 import { getSfxEnabled, setSfxEnabled } from "@/console/utils/sfx";
-import { useConsoleTheme } from "@/stores/consoleTheme";
 
 const props = defineProps<{
   modelValue: boolean;
diff --git a/frontend/src/console/composables/useBackgroundArt.ts b/frontend/src/console/composables/useBackgroundArt.ts
@@ -1,28 +1,50 @@
+import { useLocalStorage } from "@vueuse/core";
+import { debounce } from "lodash";
 import { ref } from "vue";
-import { useConsoleTheme } from "@/stores/consoleTheme";
+import { resolveAsset } from "../utils/assetResolver";
 
-const selectedBackgroundArt = ref<string | null>(null);
+const currentLayer = ref<"background" | "foreground">("background");
 
 export default function useBackgroundArt() {
-  const consoleTheme = useConsoleTheme();
-  const setSelectedBackgroundArt = (url: string) => {
-    selectedBackgroundArt.value = url;
-    if (url) {
+  const themeName = useLocalStorage("console.theme", "default");
+
+  const _updateDocumentCSS = (url: string) => {
+    if (currentLayer.value === "background") {
+      document.documentElement.style.setProperty(
+        "--console-root-foreground",
+        `url("${url}")`,
+      );
+      document.documentElement.style.setProperty("--console-root-opacity", "1");
+      currentLayer.value = "foreground";
+    } else {
       document.documentElement.style.setProperty(
-        "--theme-background",
+        "--console-root-background",
         `url("${url}")`,
       );
+      document.documentElement.style.setProperty("--console-root-opacity", "0");
+      currentLayer.value = "background";
     }
   };
 
+  const debouncedUpdateDocumentCSS = debounce(_updateDocumentCSS, 300);
+
+  const setSelectedBackgroundArt = (url: string) => {
+    if (!url) return;
+    debouncedUpdateDocumentCSS(url);
+  };
+
   const clearSelectedBackgroundArt = () => {
-    selectedBackgroundArt.value = null;
-    consoleTheme.updateBackgroundCSS();
+    const backgroundPath = resolveAsset(
+      "backgrounds",
+      "background",
+      "svg",
+      themeName.value,
+    );
+    debouncedUpdateDocumentCSS(backgroundPath);
   };
 
   return {
     setSelectedBackgroundArt,
     clearSelectedBackgroundArt,
-    selectedBackgroundArt,
   };
 }
diff --git a/frontend/src/console/composables/useConsoleTheme.ts b/frontend/src/console/composables/useConsoleTheme.ts
@@ -1,11 +1,13 @@
 import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { computed } from "vue";
+import useBackgroundArt from "@/console/composables/useBackgroundArt";
 import { resolveAsset, clearAssetCache } from "@/console/utils/assetResolver";
 
 export const useConsoleTheme = defineStore("consoleTheme", () => {
-  const themeName = useLocalStorage("console-theme", "default");
+  const themeName = useLocalStorage("console.theme", "default");
   const availableThemes = ["default", "neon"];
+  const { setSelectedBackgroundArt } = useBackgroundArt();
 
   function setTheme(newThemeName: string): void {
     clearAssetCache();
@@ -45,11 +47,7 @@ export const useConsoleTheme = defineStore("consoleTheme", () => {
       "svg",
       themeName.value,
     );
-    const backgroundUrl = `url("${backgroundPath}")`;
-    document.documentElement.style.setProperty(
-      "--theme-background",
-      backgroundUrl,
-    );
+    setSelectedBackgroundArt(backgroundPath);
   }
 
   const themeDisplayName = computed(() => {
diff --git a/frontend/src/console/composables/useThemeAssets.ts b/frontend/src/console/composables/useThemeAssets.ts
@@ -1,10 +1,10 @@
 import { computed, type ComputedRef } from "vue";
+import { useConsoleTheme } from "@/console/composables/useConsoleTheme";
 import {
   resolveAsset,
   type AssetType,
   type SupportedFormat,
 } from "@/console/utils/assetResolver";
-import { useConsoleTheme } from "@/stores/consoleTheme";
 
 // provides reactive asset paths for theme-aware components
 // this is the single source of truth for all asset path resolution
diff --git a/frontend/src/console/index.css b/frontend/src/console/index.css
@@ -165,16 +165,33 @@ body,
 .console-root {
   background:
     var(
-        --theme-background,
+        --console-root-background,
         url("/assets/console/default/backgrounds/background.svg")
       )
       center/cover fixed,
-    #38286a !important;
+    #38286a;
   min-height: 100vh;
   width: 100%;
 }
 
 .console-root::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background:
+    var(
+        --console-root-foreground,
+        url("/assets/console/default/backgrounds/background.svg")
+      )
+      center/cover fixed,
+    #38286a;
+  opacity: var(--console-root-opacity, 0);
+  transition: opacity 0.3s ease-in-out;
+}
+
+.console-root::after {
   content: "";
   position: fixed;
   inset: 0;
diff --git a/frontend/src/console/utils/assetResolver.ts b/frontend/src/console/utils/assetResolver.ts
@@ -1,4 +1,4 @@
-import { useConsoleTheme } from "@/stores/consoleTheme";
+import { useConsoleTheme } from "@/console/composables/useConsoleTheme";
 
 // supported image formats
 export type SupportedFormat = "svg" | "png" | "jpg" | "jpeg" | "webp";
diff --git a/frontend/src/console/utils/sfx.ts b/frontend/src/console/utils/sfx.ts
@@ -1,7 +1,7 @@
 import { useLocalStorage } from "@vueuse/core";
 import type { InputAction } from "../input/actions";
 
-const sfxEnabled = useLocalStorage("console-sfx-enabled", true);
+const sfxEnabled = useLocalStorage("console.sfxEnabled", true);
 
 export function setSfxEnabled(enabled: boolean): void {
   sfxEnabled.value = enabled;
@@ -128,7 +128,9 @@ export function playSfx(kind: SfxType) {
   // Lazy resume (required on some browsers until user gesture)
   ensureCtx()
     ?.resume()
-    .catch(() => {});
+    .catch((error) => {
+      console.error("Error resuming audio", error);
+    });
   switch (kind) {
     case "move":
       playClick({
diff --git a/frontend/src/console/views/Game.vue b/frontend/src/console/views/Game.vue
@@ -96,6 +96,22 @@ function goBackToPlatform() {
     return;
   }
 
+  if (qp.smartCollection) {
+    router.push({
+      name: ROUTES.CONSOLE_SMART_COLLECTION,
+      params: { id: qp.smartCollection },
+    });
+    return;
+  }
+
+  if (qp.virtualCollection) {
+    router.push({
+      name: ROUTES.CONSOLE_VIRTUAL_COLLECTION,
+      params: { id: qp.virtualCollection },
+    });
+    return;
+  }
+
   if (rom.value?.platform_id) {
     router.push({
       name: ROUTES.CONSOLE_PLATFORM,
@@ -312,7 +328,9 @@ function play() {
       data: {},
       updateLastPlayed: true,
     })
-    .catch(() => {});
+    .catch((error) => {
+      console.error(error);
+    });
 
   const query: Record<string, number> = {};
 
diff --git a/frontend/src/console/views/Home.vue b/frontend/src/console/views/Home.vue
@@ -433,7 +433,7 @@ function exitConsoleMode() {
   if (document.fullscreenElement) {
     document.exitFullscreen?.();
   }
-  router.push({ name: "home" });
+  router.push({ name: ROUTES.HOME });
 }
 
 function toggleFullscreen() {
diff --git a/frontend/src/console/views/Play.vue b/frontend/src/console/views/Play.vue
@@ -660,6 +660,10 @@ onBeforeUnmount(() => {
 });
 
 onUnmounted(() => {
+  if (document.fullscreenElement) {
+    // Remember to re-enable fullscreen after exiting the game
+    sessionStorage.setItem("emulation.fullScreenPostPlay", "true");
+  }
   // Force full reload to reset COEP/COOP, so cross-origin isolation is turned off.
   window.location.reload();
 });
diff --git a/frontend/src/stores/console.ts b/frontend/src/stores/console.ts
@@ -31,6 +31,8 @@ export default defineStore("console", {
         name === ROUTES.CONSOLE_HOME ||
         name === ROUTES.CONSOLE_PLATFORM ||
         name === ROUTES.CONSOLE_COLLECTION ||
+        name === ROUTES.CONSOLE_SMART_COLLECTION ||
+        name === ROUTES.CONSOLE_VIRTUAL_COLLECTION ||
         name === ROUTES.CONSOLE_ROM ||
         name === ROUTES.CONSOLE_PLAY
       );
diff --git a/frontend/src/stores/galleryView.ts b/frontend/src/stores/galleryView.ts
@@ -1,7 +1,7 @@
 import { useLocalStorage } from "@vueuse/core";
 import { defineStore } from "pinia";
 
-const currentViewStorage = useLocalStorage("currentView", 0);
+const currentViewStorage = useLocalStorage("ui.currentView", 0);
 
 const defaultGalleryState = {
   currentView: currentViewStorage.value,
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
diff --git a/frontend/src/views/Player/EmulatorJS/Base.vue b/frontend/src/views/Player/EmulatorJS/Base.vue
diff --git a/frontend/src/views/Player/EmulatorJS/Player.vue b/frontend/src/views/Player/EmulatorJS/Player.vue
diff --git a/frontend/src/views/Player/RuffleRS/Base.vue b/frontend/src/views/Player/RuffleRS/Base.vue

Original file line number	Diff line number	Diff line change
`@@ -153,13 +153,15 @@ def path_covers_small(self) -> list[str]:`
`153`	`153`	`return [`
`154`	`154`	`f"{FRONTEND_RESOURCES_PATH}/{cover}?ts={self.updated_at}"`
`155`	`155`	`for cover in self.path_covers_s`
	`156`	`+ if cover`
`156`	`157`	`]`
`157`	`158`
`158`	`159`	`@property`
`159`	`160`	`def path_covers_large(self) -> list[str]:`
`160`	`161`	`return [`
`161`	`162`	`f"{FRONTEND_RESOURCES_PATH}/{cover}?ts={self.updated_at}"`
`162`	`163`	`for cover in self.path_covers_l`
	`164`	`+ if cover`
`163`	`165`	`]`
`164`	`166`
`165`	`167`	`__table_args__ = (`
Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,3 @@`
`168`	`168`	`--console-play-save-status-text: var(--console-accent-secondary);`
`169`	`169`	`--console-play-save-separator-border: rgba(255, 255, 255, 0.1);`
`170`	`170`	`}`
`171`		`-`
`172`		`-.console-root::before {`
`173`		`- background: rgba(0, 0, 0, 0.15);`
`174`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,9 @@ function enterConsoleMode() {`
`26`	`26`	`if (!document.fullscreenElement) {`
`27`	`27`	`// Attempt fullscreen after a small delay to allow navigation transition`
`28`	`28`	`setTimeout(() => {`
`29`		`- document.documentElement.requestFullscreen?.().catch(() => {});`
	`29`	`+ document.documentElement.requestFullscreen?.().catch((error) => {`
	`30`	`+ console.error("Error requesting fullscreen", error);`
	`31`	`+ });`
`30`	`32`	`}, 50);`
`31`	`33`	`}`
`32`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,8 @@ const props = defineProps<{`
`9`	`9`	`const router = useRouter();`
`10`	`10`
`11`	`11`	`function goBack() {`
`12`		`- props.onBack?.() ?? router.back();`
	`12`	`+ if (props.onBack) props.onBack();`
	`13`	`+ else router.back();`
`13`	`14`	`}`
`14`	`15`	`</script>`
`15`	`16`