chore: show name of zone in zone details

src/ModManUi/src/components/ModManHeader.vue

@@ -3,10 +3,14 @@ import Button from "primevue/button";
 import { useRoute, useRouter } from "vue-router";
 import IconArrowLeft from "./icons/IconArrowLeft.vue";
 import IconGear from "./icons/IconGear.vue";
+import { computed } from "vue";
+import { getNameForRoute } from "@/router/RouteMeta";
 
 const route = useRoute();
 const router = useRouter();
 
+const routeName = computed<string>(() => getNameForRoute(route));
+
 function onClickBack() {
   router.back();
 }
@@ -21,7 +25,7 @@ function onClickBack() {
         </template>
       </Button>
     </div>
-    <h1 class="title">{{ route.name }}</h1>
+    <h1 class="title">{{ routeName }}</h1>
     <div class="header-section right">
       <Button variant="text" severity="secondary" aria-label="Settings">
         <template #icon>

src/ModManUi/src/router/RouteMeta.ts

@@ -0,0 +1,15 @@
+import type { RouteLocationNormalizedGeneric } from "vue-router";
+
+export interface TypedRouteMeta {
+  nameFunc?(route: RouteLocationNormalizedGeneric): string;
+}
+
+export type RouteMeta = TypedRouteMeta & Record<string, unknown>;
+
+export function getNameForRoute(route: RouteLocationNormalizedGeneric): string {
+  const meta = route.meta as RouteMeta;
+
+  if (meta.nameFunc) return meta.nameFunc(route);
+
+  return String(route.name);
+}

src/ModManUi/src/router/Router.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-rou
 import { PAGE } from "./Page";
 import ZoneInspector from "@/view/inspect/ZoneInspector.vue";
 import InspectDetails from "@/view/inspect_details/InspectDetails.vue";
+import type { RouteMeta } from "./RouteMeta";
 
 const ROUTES: RouteRecordRaw[] = [
   {
@@ -16,6 +17,9 @@ const ROUTES: RouteRecordRaw[] = [
         path: ":zoneName",
         name: PAGE.INSPECT.ZONE_DETAILS,
         component: InspectDetails,
+        meta: {
+          nameFunc: (route) => `Zone details: ${route.params["zoneName"]}`,
+        } satisfies RouteMeta,
         props: true,
       },
     ],