From 27ecb4cc57f1e268325bed9e319e047254726f37 Mon Sep 17 00:00:00 2001
From: Jan Laupetin <jan@laupetin.net>
Date: Mon, 27 Oct 2025 22:02:20 +0100
Subject: [PATCH] chore: only show specific back buttons in modman

---
 src/ModManUi/src/components/ModManHeader.vue | 23 ++++++++++++--------
 src/ModManUi/src/router/RouteMeta.ts         | 19 +++++++++++-----
 src/ModManUi/src/router/Router.ts            |  1 +
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/ModManUi/src/components/ModManHeader.vue b/src/ModManUi/src/components/ModManHeader.vue
index aaca28cd..e5419f5d 100644
--- a/src/ModManUi/src/components/ModManHeader.vue
+++ b/src/ModManUi/src/components/ModManHeader.vue
@@ -1,31 +1,36 @@
 <script setup lang="ts">
 import Button from "primevue/button";
-import { useRoute, useRouter } from "vue-router";
+import { 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";
+import { useRouteMeta } from "@/router/RouteMeta";
 
-const route = useRoute();
+const { routeDisplayName, routeNavigateBackTo } = useRouteMeta();
 const router = useRouter();
 
-const routeName = computed<string>(() => getNameForRoute(route));
-
 function onClickBack() {
-  router.back();
+  if (!routeNavigateBackTo.value) return;
+
+  router.push({ name: routeNavigateBackTo.value });
 }
 </script>
 
 <template>
   <header class="header">
     <div class="header-section left">
-      <Button variant="text" severity="secondary" aria-label="Back" @click="onClickBack">
+      <Button
+        v-if="routeNavigateBackTo"
+        variant="text"
+        severity="secondary"
+        aria-label="Back"
+        @click="onClickBack"
+      >
         <template #icon>
           <IconArrowLeft class="icon" />
         </template>
       </Button>
     </div>
-    <h1 class="title">{{ routeName }}</h1>
+    <h1 class="title">{{ routeDisplayName }}</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
index c533b2d5..85846ff3 100644
--- a/src/ModManUi/src/router/RouteMeta.ts
+++ b/src/ModManUi/src/router/RouteMeta.ts
@@ -1,15 +1,24 @@
-import type { RouteLocationNormalizedGeneric } from "vue-router";
+import { computed } from "vue";
+import { useRoute, type RouteLocationNormalizedGeneric } from "vue-router";
 
 export interface TypedRouteMeta {
+  backTo?: string;
   nameFunc?(route: RouteLocationNormalizedGeneric): string;
 }
 
 export type RouteMeta = TypedRouteMeta & Record<string, unknown>;
 
-export function getNameForRoute(route: RouteLocationNormalizedGeneric): string {
-  const meta = route.meta as RouteMeta;
+export function useRouteMeta() {
+  const route = useRoute();
+  const meta = computed<RouteMeta>(() => route.meta as RouteMeta);
 
-  if (meta.nameFunc) return meta.nameFunc(route);
+  const routeDisplayName = computed<string>(() => {
+    if (meta.value.nameFunc) return meta.value.nameFunc(route);
 
-  return String(route.name);
+    return String(route.name);
+  });
+
+  const routeNavigateBackTo = computed<string | null>(() => meta.value.backTo ?? null);
+
+  return { routeDisplayName, routeNavigateBackTo };
 }
diff --git a/src/ModManUi/src/router/Router.ts b/src/ModManUi/src/router/Router.ts
index a9250fef..d1140724 100644
--- a/src/ModManUi/src/router/Router.ts
+++ b/src/ModManUi/src/router/Router.ts
@@ -18,6 +18,7 @@ const ROUTES: RouteRecordRaw[] = [
         name: PAGE.INSPECT.ZONE_DETAILS,
         component: InspectDetails,
         meta: {
+          backTo: PAGE.INSPECT.SELECT_ZONE,
           nameFunc: (route) => `Zone details: ${route.params["zoneName"]}`,
         } satisfies RouteMeta,
         props: true,