From df0b1a09a4492af8a44af7f22239a4c0441a75ee Mon Sep 17 00:00:00 2001
From: Jan Laupetin <jan@laupetin.net>
Date: Mon, 27 Oct 2025 21:30:32 +0100
Subject: [PATCH] chore: show name of zone in zone details

---
 src/ModManUi/src/components/ModManHeader.vue |  6 +++++-
 src/ModManUi/src/router/RouteMeta.ts         | 15 +++++++++++++++
 src/ModManUi/src/router/Router.ts            |  4 ++++
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/ModManUi/src/router/RouteMeta.ts

diff --git a/src/ModManUi/src/components/ModManHeader.vue b/src/ModManUi/src/components/ModManHeader.vue
index bb4970c9..aaca28cd 100644
--- a/src/ModManUi/src/components/ModManHeader.vue
+++ b/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>
diff --git a/src/ModManUi/src/router/RouteMeta.ts b/src/ModManUi/src/router/RouteMeta.ts
new file mode 100644
index 00000000..c533b2d5
--- /dev/null
+++ b/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);
+}
diff --git a/src/ModManUi/src/router/Router.ts b/src/ModManUi/src/router/Router.ts
index 7f21a757..a9250fef 100644
--- a/src/ModManUi/src/router/Router.ts
+++ b/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,
       },
     ],