From 953f3490278e43855a649b3bde967aeda36723fb Mon Sep 17 00:00:00 2001
From: Jan Laupetin <jan@laupetin.net>
Date: Tue, 28 Oct 2025 23:05:50 +0100
Subject: [PATCH] chore: show game and platform tags in modman header

---
 src/ModManUi/src/App.vue                      |  2 +-
 .../components/{ => header}/ModManHeader.vue  | 16 ++++++----
 src/ModManUi/src/router/RouteMeta.ts          | 16 +++++++---
 src/ModManUi/src/router/Router.ts             |  3 +-
 src/ModManUi/src/stores/ZoneStore.ts          |  5 +++
 .../src/view/inspect/ZoneInspectorDetails.vue |  4 +--
 .../inspect_details/InspectDetailsHeader.vue  | 31 +++++++++++++++++++
 7 files changed, 62 insertions(+), 15 deletions(-)
 rename src/ModManUi/src/components/{ => header}/ModManHeader.vue (73%)
 create mode 100644 src/ModManUi/src/view/inspect_details/InspectDetailsHeader.vue

diff --git a/src/ModManUi/src/App.vue b/src/ModManUi/src/App.vue
index 5763d1d4..cd4ba26e 100644
--- a/src/ModManUi/src/App.vue
+++ b/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>
diff --git a/src/ModManUi/src/components/ModManHeader.vue b/src/ModManUi/src/components/header/ModManHeader.vue
similarity index 73%
rename from src/ModManUi/src/components/ModManHeader.vue
rename to src/ModManUi/src/components/header/ModManHeader.vue
index 95966c4b..6aee9f00 100644
--- a/src/ModManUi/src/components/ModManHeader.vue
+++ b/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 IconArrowLeft from "./icons/IconArrowLeft.vue";
-import IconGear from "./icons/IconGear.vue";
-import { useRouteMeta } from "@/router/RouteMeta";
+import { useRoute, useRouter } from "vue-router";
+import IconArrowLeft from "../icons/IconArrowLeft.vue";
+import IconGear from "../icons/IconGear.vue";
+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>
diff --git a/src/ModManUi/src/router/RouteMeta.ts b/src/ModManUi/src/router/RouteMeta.ts
index 85846ff3..cf0e924d 100644
--- a/src/ModManUi/src/router/RouteMeta.ts
+++ b/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>(() => {
-    if (meta.value.nameFunc) return meta.value.nameFunc(route);
+  const headerTitle = computed<string | Component>(() => {
+    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 };
 }
diff --git a/src/ModManUi/src/router/Router.ts b/src/ModManUi/src/router/Router.ts
index d1140724..2c8f2121 100644
--- a/src/ModManUi/src/router/Router.ts
+++ b/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,
       },
diff --git a/src/ModManUi/src/stores/ZoneStore.ts b/src/ModManUi/src/stores/ZoneStore.ts
index 23cc7d24..b8a5f4b5 100644
--- a/src/ModManUi/src/stores/ZoneStore.ts
+++ b/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,
   };
 });
diff --git a/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue b/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue
index 89f0c61e..f5fac169 100644
--- a/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue
+++ b/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue
@@ -75,8 +75,8 @@ const meterItems = computed<MeterItem[]>(() => {
   );
 });
 
-const selectedZoneDetails = computed<ZoneDto | null>(
-  () => zoneStore.loadedZones.find((zone) => zone.name === props.selectedZone) ?? null,
+const selectedZoneDetails = computed<ZoneDto | null>(() =>
+  props.selectedZone ? zoneStore.getLoadedZoneByName(props.selectedZone) : null,
 );
 
 const router = useRouter();
diff --git a/src/ModManUi/src/view/inspect_details/InspectDetailsHeader.vue b/src/ModManUi/src/view/inspect_details/InspectDetailsHeader.vue
new file mode 100644
index 00000000..5bd5daf9
--- /dev/null
+++ b/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>