chore: navigate to inspect details page when pressing button

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>

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",
 };

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,
+      },
+    ],
   },
 ];
 

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" />

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>