chore: show game and platform tags in modman header

src/ModManUi/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ModManHeader from "./components/ModManHeader.vue";
+import ModManHeader from "./components/header/ModManHeader.vue";
 </script>
 
 <template>

src/ModManUi/src/components/header/ModManHeader.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import Button from "primevue/button";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
-import IconArrowLeft from "./icons/IconArrowLeft.vue";
+import IconArrowLeft from "../icons/IconArrowLeft.vue";
-import IconGear from "./icons/IconGear.vue";
+import IconGear from "../icons/IconGear.vue";
-import { useRouteMeta } from "@/router/RouteMeta";
+import { useRouteMeta } from "@/router/RouteMeta.ts";
 
-const { routeDisplayName, routeNavigateBackTo } = useRouteMeta();
+const route = useRoute();
+const { headerTitle, routeNavigateBackTo } = useRouteMeta();
 const router = useRouter();
 
 function onClickBack() {
@@ -30,7 +31,10 @@ function onClickBack() {
         </template>
       </Button>
     </div>
-    <h1 class="title">{{ routeDisplayName }}</h1>
+    <h1 class="title">
+      <span v-if="typeof headerTitle === 'string'">{{ headerTitle }}</span>
+      <component v-else :is="headerTitle" v-bind="route.params" />
+    </h1>
     <div class="header-section right">
       <Button variant="text" severity="secondary" aria-label="Settings">
         <template #icon>

src/ModManUi/src/router/RouteMeta.ts

@@ -1,9 +1,11 @@
-import { computed } from "vue";
+import { type Component, computed } from "vue";
 import { useRoute, type RouteLocationNormalizedGeneric } from "vue-router";
 
+type HeaderTitleFunc = (route: RouteLocationNormalizedGeneric) => string;
 export interface TypedRouteMeta {
   backTo?: string;
-  nameFunc?(route: RouteLocationNormalizedGeneric): string;
+  headerTitleFunc?: HeaderTitleFunc;
+  headerTitleComponent?: Component;
 }
 
 export type RouteMeta = TypedRouteMeta & Record<string, unknown>;
@@ -12,13 +14,17 @@ export function useRouteMeta() {
   const route = useRoute();
   const meta = computed<RouteMeta>(() => route.meta as RouteMeta);
 
-  const routeDisplayName = computed<string>(() => {
+  const headerTitle = computed<string | Component>(() => {
-    if (meta.value.nameFunc) return meta.value.nameFunc(route);
+    if (meta.value.headerTitleFunc) {
+      return meta.value.headerTitleFunc(route);
+    } else if (meta.value.headerTitleComponent) {
+      return meta.value.headerTitleComponent;
+    }
 
     return String(route.name);
   });
 
   const routeNavigateBackTo = computed<string | null>(() => meta.value.backTo ?? null);
 
-  return { routeDisplayName, routeNavigateBackTo };
+  return { headerTitle, routeNavigateBackTo };
 }

src/ModManUi/src/router/Router.ts

@@ -3,6 +3,7 @@ import { PAGE } from "./Page";
 import ZoneInspector from "@/view/inspect/ZoneInspector.vue";
 import InspectDetails from "@/view/inspect_details/InspectDetails.vue";
 import type { RouteMeta } from "./RouteMeta";
+import InspectDetailsHeader from "@/view/inspect_details/InspectDetailsHeader.vue";
 
 const ROUTES: RouteRecordRaw[] = [
   {
@@ -19,7 +20,7 @@ const ROUTES: RouteRecordRaw[] = [
         component: InspectDetails,
         meta: {
           backTo: PAGE.INSPECT.SELECT_ZONE,
-          nameFunc: (route) => `Zone details: ${route.params["zoneName"]}`,
+          headerTitleComponent: InspectDetailsHeader,
         } satisfies RouteMeta,
         props: true,
       },

src/ModManUi/src/stores/ZoneStore.ts

@@ -39,6 +39,10 @@ export const useZoneStore = defineStore("zone", () => {
     return lastPercentageByZoneName.value[zoneName] ?? 100;
   }
 
+  function getLoadedZoneByName(zoneName: string) {
+    return loadedZones.value.find((zone) => zone.name === zoneName) ?? null;
+  }
+
   // Initially get all loaded zones
   webviewBinds.getZones().then((allZones) => {
     loadedZones.value = allZones;
@@ -68,5 +72,6 @@ export const useZoneStore = defineStore("zone", () => {
     lastPercentageByZoneName,
     loadFastFile,
     getPercentageForZoneBeingLoaded,
+    getLoadedZoneByName,
   };
 });

src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue

@@ -75,8 +75,8 @@ const meterItems = computed<MeterItem[]>(() => {
   );
 });
 
-const selectedZoneDetails = computed<ZoneDto | null>(
+const selectedZoneDetails = computed<ZoneDto | null>(() =>
-  () => zoneStore.loadedZones.find((zone) => zone.name === props.selectedZone) ?? null,
+  props.selectedZone ? zoneStore.getLoadedZoneByName(props.selectedZone) : null,
 );
 
 const router = useRouter();

src/ModManUi/src/view/inspect_details/InspectDetailsHeader.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { ZoneDto } from "@/native/ZoneBinds.ts";
+import { useZoneStore } from "@/stores/ZoneStore.ts";
+import Tag from "primevue/tag";
+
+const zoneStore = useZoneStore();
+const props = defineProps<{
+  zoneName: string;
+}>();
+
+const zoneDetails = computed<ZoneDto | null>(() =>
+  props.zoneName ? zoneStore.getLoadedZoneByName(props.zoneName) : null,
+);
+</script>
+
+<template>
+  <span>
+    <span>Inspect zone: {{ zoneName }}</span>
+    <template v-if="zoneDetails">
+      <Tag class="zone-header-tag" :value="zoneDetails.game" severity="secondary" />
+      <Tag class="zone-header-tag" :value="zoneDetails.platform" severity="secondary" />
+    </template>
+  </span>
+</template>
+
+<style scoped lang="scss">
+.zone-header-tag {
+  margin-left: 0.5em;
+}
+</style>