chore: only show specific back buttons in modman

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>

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);
+  });
+
+  const routeNavigateBackTo = computed<string | null>(() => meta.value.backTo ?? null);
+
+  return { routeDisplayName, routeNavigateBackTo };
 }

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,