From afbdfdf2e510225b1f1caf1d49899bcba82eba15 Mon Sep 17 00:00:00 2001
From: Jan Laupetin <jan@laupetin.net>
Date: Sun, 26 Oct 2025 23:46:19 +0100
Subject: [PATCH] chore: navigate to inspect details page when pressing button

---
 src/ModManUi/src/components/ModManHeader.vue     |  9 +++++++--
 src/ModManUi/src/router/Page.ts                  |  5 ++++-
 src/ModManUi/src/router/Router.ts                | 16 ++++++++++++++--
 .../src/view/inspect/ZoneInspectorDetails.vue    | 16 +++++++++++++++-
 .../src/view/inspect_details/InspectDetails.vue  |  9 +++++++++
 5 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 src/ModManUi/src/view/inspect_details/InspectDetails.vue

diff --git a/src/ModManUi/src/components/ModManHeader.vue b/src/ModManUi/src/components/ModManHeader.vue
index eb0d48d2..bb4970c9 100644
--- a/src/ModManUi/src/components/ModManHeader.vue
+++ b/src/ModManUi/src/components/ModManHeader.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import Button from "primevue/button";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import IconArrowLeft from "./icons/IconArrowLeft.vue";
 import IconGear from "./icons/IconGear.vue";
 
 const route = useRoute();
+const router = useRouter();
+
+function onClickBack() {
+  router.back();
+}
 </script>
 
 <template>
   <header class="header">
     <div class="header-section left">
-      <Button variant="text" severity="secondary" aria-label="Back">
+      <Button variant="text" severity="secondary" aria-label="Back" @click="onClickBack">
         <template #icon>
           <IconArrowLeft class="icon" />
         </template>
diff --git a/src/ModManUi/src/router/Page.ts b/src/ModManUi/src/router/Page.ts
index 1a8c8744..0acc9db6 100644
--- a/src/ModManUi/src/router/Page.ts
+++ b/src/ModManUi/src/router/Page.ts
@@ -1,5 +1,8 @@
 export const PAGE = {
   HOME: "Home",
-  INSPECT_ZONE: "Inspect zone",
+  INSPECT: {
+    SELECT_ZONE: "Inspect zone",
+    ZONE_DETAILS: "Zone details",
+  },
   OPTIONS: "Options",
 };
diff --git a/src/ModManUi/src/router/Router.ts b/src/ModManUi/src/router/Router.ts
index 48a3e294..7f21a757 100644
--- a/src/ModManUi/src/router/Router.ts
+++ b/src/ModManUi/src/router/Router.ts
@@ -1,12 +1,24 @@
 import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
 import { PAGE } from "./Page";
 import ZoneInspector from "@/view/inspect/ZoneInspector.vue";
+import InspectDetails from "@/view/inspect_details/InspectDetails.vue";
 
 const ROUTES: RouteRecordRaw[] = [
   {
     path: "/",
-    name: PAGE.INSPECT_ZONE,
-    component: ZoneInspector,
+    children: [
+      {
+        path: "",
+        name: PAGE.INSPECT.SELECT_ZONE,
+        component: ZoneInspector,
+      },
+      {
+        path: ":zoneName",
+        name: PAGE.INSPECT.ZONE_DETAILS,
+        component: InspectDetails,
+        props: true,
+      },
+    ],
   },
 ];
 
diff --git a/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue b/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue
index c1cf6a9b..7652fa01 100644
--- a/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue
+++ b/src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue
@@ -10,6 +10,8 @@ import { computed, ref, watch } from "vue";
 import type { CommonAssetType, ZoneAssetsDto } from "@/native/AssetBinds";
 import { webviewBinds } from "@/native";
 import { getAssetTypeNameCapitalized } from "@/utils/AssetTypeName";
+import { useRouter } from "vue-router";
+import { PAGE } from "@/router/Page";
 
 const zoneStore = useZoneStore();
 
@@ -77,6 +79,18 @@ const selectedZoneDetails = computed<ZoneDto | null>(
   () => zoneStore.loadedZones.find((zone) => zone.name === props.selectedZone) ?? null,
 );
 
+const router = useRouter();
+function onClickShowAssets() {
+  if (!props.selectedZone) return;
+
+  router.push({
+    name: PAGE.INSPECT.ZONE_DETAILS,
+    params: {
+      zoneName: props.selectedZone,
+    },
+  });
+}
+
 watch(
   () => props.selectedZone,
   (newValue) => {
@@ -95,7 +109,7 @@ watch(
 <template>
   <div class="zone-details">
     <h2>{{ selectedZone ?? "No zone selected" }}</h2>
-    <Button label="Show assets" :disabled="!selectedZone" />
+    <Button label="Show assets" :disabled="!selectedZone" @click="onClickShowAssets" />
     <div v-if="selectedZoneDetails" class="zone-tags">
       <Tag :value="selectedZoneDetails.game" />
       <Tag :value="selectedZoneDetails.platform" />
diff --git a/src/ModManUi/src/view/inspect_details/InspectDetails.vue b/src/ModManUi/src/view/inspect_details/InspectDetails.vue
new file mode 100644
index 00000000..b4b6a719
--- /dev/null
+++ b/src/ModManUi/src/view/inspect_details/InspectDetails.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+  zoneName: string;
+}>();
+</script>
+
+<template>
+  <div class="inspect-details"></div>
+</template>