use ROUTES export for all routes

frontend/src/components/Details/Info/GameInfo.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { type FilterType } from "@/stores/galleryFilter";
-import storeGalleryView from "@/stores/galleryView";
 import RAvatar from "@/components/common/Collection/RAvatar.vue";
 import type { DetailedRom } from "@/stores/roms";
-import { storeToRefs } from "pinia";
+import { ROUTES } from "@/plugins/router";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { useDisplay, useTheme } from "vuetify";
@@ -24,8 +23,6 @@ const filters = [
   { value: "collections", name: t("rom.collections") },
   { value: "companies", name: t("rom.companies") },
 ] as const;
-const galleryViewStore = storeGalleryView();
-const { defaultAspectRatioScreenshot } = storeToRefs(galleryViewStore);
 
 // Functions
 function onFilterClick(filter: FilterType, value: string) {
@@ -53,7 +50,7 @@ function onFilterClick(filter: FilterType, value: string) {
             <v-col cols="12" v-for="collection in rom.user_collections">
               <v-chip
                 :to="{
-                  name: 'collection',
+                  name: ROUTES.COLLECTION,
                   params: { collection: collection.id },
                 }"
                 size="large"

frontend/src/components/Details/Title.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import FavBtn from "@/components/common/Game/FavBtn.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
-import type { Platform } from "@/stores/platforms";
+import { ROUTES } from "@/plugins/router";
 import type { DetailedRom } from "@/stores/roms";
 import { languageToEmoji, regionToEmoji } from "@/utils";
 import { identity } from "lodash";
@@ -41,7 +41,7 @@ const hasReleaseDate = Number(props.rom.first_release_date) > 0;
     >
       <v-col>
         <v-chip
-          :to="{ name: 'platform', params: { platform: rom.platform_id } }"
+          :to="{ name: ROUTES.PLATFORM, params: { platform: rom.platform_id } }"
         >
           {{ rom.platform_display_name }}
           <platform-icon

frontend/src/components/common/Collection/Dialog/DeleteCollection.vue

@@ -4,6 +4,7 @@ import RDialog from "@/components/common/RDialog.vue";
 import collectionApi from "@/services/api/collection";
 import storeCollections, { type Collection } from "@/stores/collections";
 import type { Events } from "@/types/emitter";
+import { ROUTES } from "@/plugins/router";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -51,7 +52,7 @@ async function deleteCollection() {
       return;
     });
 
-  await router.push({ name: "home" });
+  await router.push({ name: ROUTES.HOME });
 
   collectionsStore.remove(collection.value);
   emitter?.emit("refreshDrawer", null);

frontend/src/components/common/Game/Card/ActionBar.vue

@@ -12,6 +12,7 @@ import {
   isRuffleEmulationSupported,
   is3DSCIARom,
 } from "@/utils";
+import { ROUTES } from "@/plugins/router";
 import type { Emitter } from "mitt";
 import { computed, inject } from "vue";
 import { storeToRefs } from "pinia";
@@ -68,7 +69,7 @@ const is3DSRom = computed(() => {
         size="x-small"
         @click="
           $router.push({
-            name: 'emulatorjs',
+            name: ROUTES.EMULATORJS,
             params: { rom: rom?.id },
           })
         "
@@ -83,7 +84,7 @@ const is3DSRom = computed(() => {
         size="x-small"
         @click="
           $router.push({
-            name: 'ruffle',
+            name: ROUTES.RUFFLE,
             params: { rom: rom?.id },
           })
         "

frontend/src/components/common/Game/Dialog/DeleteRom.vue

@@ -4,6 +4,7 @@ import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
+import { ROUTES } from "@/plugins/router";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
@@ -48,7 +49,7 @@ async function deleteRoms() {
       closeDialog();
       if (route.name == "rom") {
         router.push({
-          name: "platform",
+          name: ROUTES.PLATFORM,
           params: { platform: platformId.value },
         });
       }

frontend/src/components/common/Game/Table.vue

@@ -15,6 +15,7 @@ import {
   languageToEmoji,
   regionToEmoji,
 } from "@/utils";
+import { ROUTES } from "@/plugins/router";
 import { isNull } from "lodash";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
@@ -88,7 +89,7 @@ const selectedRomIDs = computed(() => selectedRoms.value.map((rom) => rom.id));
 
 // Functions
 function rowClick(_: Event, row: { item: SimpleRom }) {
-  router.push({ name: "rom", params: { rom: row.item.id } });
+  router.push({ name: ROUTES.ROM, params: { rom: row.item.id } });
   romsStore.resetSelection();
 }
 
@@ -272,7 +273,7 @@ function updateSelectedRom(rom: SimpleRom) {
           size="small"
           @click.stop="
             $router.push({
-              name: 'emulatorjs',
+              name: ROUTES.EMULATORJS,
               params: { rom: item?.id },
             })
           "
@@ -284,7 +285,7 @@ function updateSelectedRom(rom: SimpleRom) {
           size="small"
           @click.stop="
             $router.push({
-              name: 'ruffle',
+              name: ROUTES.RUFFLE,
               params: { rom: item?.id },
             })
           "

frontend/src/components/common/Navigation/HomeBtn.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import RIsotipo from "@/components/common/RIsotipo.vue";
 import storeNavigation from "@/stores/navigation";
+import { ROUTES } from "@/plugins/router";
 
-const homeUrl = ref(`${location.protocol}//${location.host}`);
 const navigationStore = storeNavigation();
 </script>
 <template>
   <r-isotipo
-    :to="homeUrl"
+    :to="{ name: ROUTES.HOME }"
     @click="navigationStore.goHome"
     class="cursor-pointer"
     :size="40"

frontend/src/components/common/Navigation/SettingsDrawer.vue

@@ -6,6 +6,7 @@ import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import type { Events } from "@/types/emitter";
 import { defaultAvatarPath } from "@/utils";
+import { ROUTES } from "@/plugins/router";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { inject } from "vue";
@@ -36,7 +37,7 @@ async function logout() {
     });
     navigationStore.switchActiveSettingsDrawer();
     auth.setUser(null);
-    await router.push({ name: "login" });
+    await router.push({ name: ROUTES.LOGIN });
   });
 }
 </script>
@@ -88,7 +89,7 @@ async function logout() {
       <v-list-item
         class="mt-1"
         rounded
-        :to="{ name: 'user-interface' }"
+        :to="{ name: ROUTES.USER_INTERFACE }"
         append-icon="mdi-palette"
         >{{ t("common.user-interface") }}</v-list-item
       >
@@ -97,14 +98,14 @@ async function logout() {
         class="mt-1"
         rounded
         append-icon="mdi-table-cog"
-        :to="{ name: 'library-management' }"
+        :to="{ name: ROUTES.LIBRARY_MANAGEMENT }"
         >{{ t("common.library-management") }}
       </v-list-item>
       <v-list-item
         v-if="scopes.includes('users.write')"
         class="mt-1"
         rounded
-        :to="{ name: 'administration' }"
+        :to="{ name: ROUTES.ADMINISTRATION }"
         append-icon="mdi-security"
         >{{ t("common.administration") }}
       </v-list-item>

frontend/src/components/common/Platform/Card.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Platform } from "@/stores/platforms";
+import { ROUTES } from "@/plugins/router";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 
 defineProps<{ platform: Platform }>();
@@ -12,7 +13,7 @@ defineProps<{ platform: Platform }>();
       class="bg-toplayer transform-scale"
       :class="{ 'on-hover': isHovering }"
       :elevation="isHovering ? 20 : 3"
-      :to="{ name: 'platform', params: { platform: platform.id } }"
+      :to="{ name: ROUTES.PLATFORM, params: { platform: platform.id } }"
     >
       <v-card-text>
         <v-row class="pa-1 justify-center bg-background">

frontend/src/components/common/Platform/Dialog/DeletePlatform.vue

@@ -3,11 +3,12 @@ import RDialog from "@/components/common/RDialog.vue";
 import platformApi from "@/services/api/platform";
 import storePlatforms, { type Platform } from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
+import { ROUTES } from "@/plugins/router";
+import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useDisplay } from "vuetify";
-import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import { useI18n } from "vue-i18n";
 
 // Props
@@ -47,7 +48,7 @@ async function deletePlatform() {
       return;
     });
 
-  await router.push({ name: "home" });
+  await router.push({ name: ROUTES.HOME });
 
   platformsStore.remove(platform.value);
   emitter?.emit("refreshDrawer", null);

frontend/src/components/common/Platform/ListItem.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
+import { ROUTES } from "@/plugins/router";
 import type { Platform } from "@/stores/platforms";
 
 // Props
@@ -11,7 +12,7 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
 <template>
   <v-list-item
     :key="platform.slug"
-    :to="{ name: 'platform', params: { platform: platform.id } }"
+    :to="{ name: ROUTES.PLATFORM, params: { platform: platform.id } }"
     :value="platform.slug"
     rounded
     density="compact"

frontend/src/services/api/index.ts

@@ -1,4 +1,5 @@
 import router from "@/plugins/router";
+import { ROUTES } from "@/plugins/router";
 import axios from "axios";
 import { default as Cookies } from "js-cookie";
 import { debounce } from "lodash";
@@ -47,7 +48,7 @@ api.interceptors.response.use(
       const params = new URLSearchParams(window.location.search);
 
       router.push({
-        name: "login",
+        name: ROUTES.LOGIN,
         query: {
           next: params.get("next") ?? (pathname !== "/login" ? pathname : "/"),
         },

frontend/src/stores/navigation.ts

@@ -1,4 +1,5 @@
 import { defineStore } from "pinia";
+import { ROUTES } from "@/plugins/router";
 
 export default defineStore("navigation", {
   state: () => ({
@@ -32,15 +33,15 @@ export default defineStore("navigation", {
     },
     goHome() {
       this.resetDrawers();
-      this.$router.push({ name: "home" });
+      this.$router.push({ name: ROUTES.HOME });
     },
     goScan() {
       this.resetDrawers();
-      this.$router.push({ name: "scan" });
+      this.$router.push({ name: ROUTES.SCAN });
     },
     goSearch() {
       this.resetDrawers();
-      this.$router.push({ name: "search" });
+      this.$router.push({ name: ROUTES.SEARCH });
     },
     resetDrawers() {
       this.activePlatformsDrawer = false;

frontend/src/views/Auth/Setup.vue

@@ -5,6 +5,7 @@ import userApi from "@/services/api/user";
 import api from "@/services/api/index";
 import storeHeartbeat from "@/stores/heartbeat";
 import type { Events } from "@/types/emitter";
+import { ROUTES } from "@/plugins/router";
 import type { Emitter } from "mitt";
 import { computed, inject, ref } from "vue";
 import { useDisplay } from "vuetify";
@@ -58,7 +59,7 @@ async function finishWizard() {
       await refetchCSRFToken();
       await api.get("/heartbeat").then(({ data: heartbeatData }) => {
         heartbeat.set(heartbeatData);
-        router.push({ name: "login" });
+        router.push({ name: ROUTES.LOGIN });
       });
     })
     .catch(({ response, message }) => {

frontend/src/views/Gallery/Collection.vue

@@ -12,7 +12,8 @@ import storeGalleryFilter from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
-import { normalizeString, views } from "@/utils";
+import { views } from "@/utils";
+import { ROUTES } from "@/plugins/router";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
@@ -164,12 +165,12 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
     }
   } else if (emitData.event.metaKey || emitData.event.ctrlKey) {
     const link = router.resolve({
-      name: "rom",
+      name: ROUTES.ROM,
       params: { rom: emitData.rom.id },
     });
     window.open(link.href, "_blank");
   } else {
-    router.push({ name: "rom", params: { rom: emitData.rom.id } });
+    router.push({ name: ROUTES.ROM, params: { rom: emitData.rom.id } });
   }
 }
 

frontend/src/views/Gallery/Platform.vue

@@ -13,6 +13,7 @@ import storePlatforms from "@/stores/platforms";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import { views } from "@/utils";
+import { ROUTES } from "@/plugins/router";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
@@ -157,12 +158,12 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
     }
   } else if (emitData.event.metaKey || emitData.event.ctrlKey) {
     const link = router.resolve({
-      name: "rom",
+      name: ROUTES.ROM,
       params: { rom: emitData.rom.id },
     });
     window.open(link.href, "_blank");
   } else {
-    router.push({ name: "rom", params: { rom: emitData.rom.id } });
+    router.push({ name: ROUTES.ROM, params: { rom: emitData.rom.id } });
   }
 }
 

frontend/src/views/Gallery/Search.vue

@@ -12,6 +12,7 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { views } from "@/utils";
+import { ROUTES } from "@/plugins/router";
 import { storeToRefs } from "pinia";
 import { inject, onBeforeUnmount, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
@@ -119,12 +120,12 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
     }
   } else if (emitData.event.metaKey || emitData.event.ctrlKey) {
     const link = router.resolve({
-      name: "rom",
+      name: ROUTES.ROM,
       params: { rom: emitData.rom.id },
     });
     window.open(link.href, "_blank");
   } else {
-    router.push({ name: "rom", params: { rom: emitData.rom.id } });
+    router.push({ name: ROUTES.ROM, params: { rom: emitData.rom.id } });
   }
 }