feat: switch to spa

polylan_submitter/src/router/index.ts

@@ -1,29 +1,27 @@
-import { createRouter, createWebHistory, type RouteLocationNormalizedLoaded } from "vue-router";
+import { createRouter, createWebHistory, type RouteLocationNormalizedLoaded, type RouteLocationRaw } from "vue-router";
 import Home from "@/Home.vue";
 import Market from "@/Market.vue";
 import Noita from "@/Noita.vue";
 import OpusMagnum from "@/OpusMagnum.vue";
 import Submissions from "@/Submissions.vue";
 import SubmissionsSelect from "@/SubmissionsSelect.vue";
-import { bootstrap } from "@/bootstrap";
+import { usePageHeaderStore } from "@/stores/pageHeader";
 
 declare module "vue-router" {
   interface RouteMeta {
+    // Static label for AppHeader's title bar. Pages whose title depends on
+    // fetched data (e.g. submissions) set one at runtime via
+    // usePageHeaderStore() instead and leave this out.
     titleKey?: string;
-    getBackPath?: (route: RouteLocationNormalizedLoaded) => string;
+    getBackRoute?: (route: RouteLocationNormalizedLoaded) => RouteLocationRaw;
   }
 }
 
-// Route params (eventPath, gamePath, scopeId, ...) come from the URL;
-// page-specific extras Django can't express as URL segments (collection
-// title, scope name, ...) come from the bootstrap JSON island instead.
-const withBootstrap = (route: RouteLocationNormalizedLoaded) => ({
-  ...route.params,
-  ...bootstrap,
+const eventHome = (route: RouteLocationNormalizedLoaded): RouteLocationRaw => ({
+  name: "home",
+  params: { eventPath: route.params.eventPath },
 });
 
-const eventHome = (route: RouteLocationNormalizedLoaded) => `/${route.params.eventPath}/`;
-
 export const router = createRouter({
   history: createWebHistory("/"),
   routes: [
@@ -31,45 +29,55 @@ export const router = createRouter({
       path: "/:eventPath/",
       name: "home",
       component: Home,
-      props: withBootstrap,
+      props: true,
     },
     {
       path: "/:eventPath/market",
       name: "market",
       component: Market,
-      props: withBootstrap,
-      meta: { titleKey: "market.header", getBackPath: eventHome },
+      props: true,
+      meta: { titleKey: "market.header", getBackRoute: eventHome },
     },
     {
       path: "/:eventPath/opus-magnum",
       name: "opus-magnum",
       component: OpusMagnum,
-      props: withBootstrap,
-      meta: { titleKey: "opusMagnum.header", getBackPath: eventHome },
+      props: true,
+      meta: { titleKey: "opusMagnum.header", getBackRoute: eventHome },
     },
     {
       path: "/:eventPath/noita",
       name: "noita",
       component: Noita,
-      props: withBootstrap,
-      meta: { titleKey: "noita.header", getBackPath: eventHome },
+      props: true,
+      meta: { titleKey: "noita.header", getBackRoute: eventHome },
     },
     {
       path: "/:eventPath/submissions/:gamePath",
       name: "submissions-select",
       component: SubmissionsSelect,
-      props: withBootstrap,
-      meta: { titleKey: "submissionsSelect.title", getBackPath: eventHome },
+      props: true,
+      meta: { titleKey: "submissionsSelect.title", getBackRoute: eventHome },
     },
     {
       path: "/:eventPath/submissions/:gamePath/:scopeId",
       name: "submissions",
       component: Submissions,
-      props: withBootstrap,
+      props: true,
       meta: {
-        titleKey: "submissions.pageTitle",
-        getBackPath: (route) => `/${route.params.eventPath}/submissions/${route.params.gamePath}`,
+        // No static titleKey: Submissions.vue sets a dynamic
+        // "{game} Submissions — {scope}" title once it has fetched both.
+        getBackRoute: (route) => ({
+          name: "submissions-select",
+          params: { eventPath: route.params.eventPath, gamePath: route.params.gamePath },
+        }),
       },
     },
   ],
 });
+
+// Every route change starts from a clean header title; pages that need a
+// dynamic one (see submissions above) set it again once their data lands.
+router.beforeEach(() => {
+  usePageHeaderStore().clear();
+});