chore: add modman navigation

src/ModManUi/package-lock.json

@@ -12,7 +12,8 @@
         "@primeuix/themes": "^1.2.5",
         "pinia": "3.0.3",
         "primevue": "^4.4.1",
-        "vue": "3.5.22"
+        "vue": "3.5.22",
+        "vue-router": "4.6.3"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.2",
@@ -6649,6 +6650,27 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
+      "integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/vue-tsc": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.1.2.tgz",

src/ModManUi/package.json

@@ -17,7 +17,8 @@
     "@primeuix/themes": "^1.2.5",
     "pinia": "3.0.3",
     "primevue": "^4.4.1",
-    "vue": "3.5.22"
+    "vue": "3.5.22",
+    "vue-router": "4.6.3"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",

src/ModManUi/src/App.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import ZoneSelector from "./components/unlinking/zone_selector/ZoneSelector.vue";
+import ModManHeader from "./components/ModManHeader.vue";
 </script>
 
 <template>
   <main class="container">
-    <div class="header">
+    <ModManHeader />
-      <h1>Welcome to ModMan</h1>
-      <small>Nothing to see here yet, this is mainly for testing</small>
-    </div>
 
-    <ZoneSelector />
+    <RouterView />
   </main>
 </template>
 
 <style scoped lang="scss">
-.header {
+.container {
-  text-align: center;
+  margin: 0;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+
+  height: 100vh;
 }
 </style>

src/ModManUi/src/components/ModManHeader.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import Button from "primevue/button";
+import { useRoute } from "vue-router";
+import IconArrowLeft from "./icons/IconArrowLeft.vue";
+import IconGear from "./icons/IconGear.vue";
+
+const route = useRoute();
+</script>
+
+<template>
+  <header class="header">
+    <div class="header-section left">
+      <Button variant="text" severity="secondary" aria-label="Back">
+        <template #icon>
+          <IconArrowLeft class="icon" />
+        </template>
+      </Button>
+    </div>
+    <h1 class="title">{{ route.name }}</h1>
+    <div class="header-section right">
+      <Button variant="text" severity="secondary" aria-label="Settings">
+        <template #icon>
+          <IconGear class="icon" />
+        </template>
+      </Button>
+    </div>
+  </header>
+</template>
+
+<style scoped lang="scss">
+@use "@style/colors";
+
+.header {
+  background-color: colors.$CONTENT-BACKGROUND;
+  text-align: center;
+
+  padding: 0.25rem 0.25rem;
+
+  display: flex;
+  justify-content: space-between;
+
+  border-bottom: 1px solid colors.$CONTENT-BORDER-COLOR;
+}
+
+.header-section {
+  width: 12em;
+
+  &.left {
+    text-align: left;
+  }
+  &.right {
+    text-align: right;
+  }
+}
+
+.title {
+  font-size: 1rem;
+  line-height: 1;
+}
+</style>

src/ModManUi/src/components/icons/IconArrowLeft.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+    <!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+    <path
+      d="M73.4 297.4C60.9 309.9 60.9 330.2 73.4 342.7L233.4 502.7C245.9 515.2 266.2 515.2 278.7 502.7C291.2 490.2 291.2 469.9 278.7 457.4L173.3 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L173.3 288L278.7 182.6C291.2 170.1 291.2 149.8 278.7 137.3C266.2 124.8 245.9 124.8 233.4 137.3L73.4 297.3z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/ModManUi/src/components/icons/IconGear.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+    <!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+    <path
+      d="M259.1 73.5C262.1 58.7 275.2 48 290.4 48L350.2 48C365.4 48 378.5 58.7 381.5 73.5L396 143.5C410.1 149.5 423.3 157.2 435.3 166.3L503.1 143.8C517.5 139 533.3 145 540.9 158.2L570.8 210C578.4 223.2 575.7 239.8 564.3 249.9L511 297.3C511.9 304.7 512.3 312.3 512.3 320C512.3 327.7 511.8 335.3 511 342.7L564.4 390.2C575.8 400.3 578.4 417 570.9 430.1L541 481.9C533.4 495 517.6 501.1 503.2 496.3L435.4 473.8C423.3 482.9 410.1 490.5 396.1 496.6L381.7 566.5C378.6 581.4 365.5 592 350.4 592L290.6 592C275.4 592 262.3 581.3 259.3 566.5L244.9 496.6C230.8 490.6 217.7 482.9 205.6 473.8L137.5 496.3C123.1 501.1 107.3 495.1 99.7 481.9L69.8 430.1C62.2 416.9 64.9 400.3 76.3 390.2L129.7 342.7C128.8 335.3 128.4 327.7 128.4 320C128.4 312.3 128.9 304.7 129.7 297.3L76.3 249.8C64.9 239.7 62.3 223 69.8 209.9L99.7 158.1C107.3 144.9 123.1 138.9 137.5 143.7L205.3 166.2C217.4 157.1 230.6 149.5 244.6 143.4L259.1 73.5zM320.3 400C364.5 399.8 400.2 363.9 400 319.7C399.8 275.5 363.9 239.8 319.7 240C275.5 240.2 239.8 276.1 240 320.3C240.2 364.5 276.1 400.2 320.3 400z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

src/ModManUi/src/main.ts

@@ -1,15 +1,17 @@
 import "../public/favicon.ico";
-import "./main.scss";
+import "@style/main.scss";
 
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { configurePrimeVue } from "./PrimeVue.ts";
 
 import App from "./App.vue";
+import { createModManRouter } from "./router/Router.ts";
 
 const app = createApp(App);
 
 app.use(createPinia());
+app.use(createModManRouter());
 
 configurePrimeVue(app);
 

src/ModManUi/src/router/Page.ts

@@ -0,0 +1,5 @@
+export const PAGE = {
+  HOME: "Home",
+  INSPECT_ZONE: "Inspect zone",
+  OPTIONS: "Options",
+};

src/ModManUi/src/router/Router.ts

@@ -0,0 +1,18 @@
+import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router";
+import { PAGE } from "./Page";
+import ZoneInspector from "@/view/inspect/ZoneInspector.vue";
+
+const ROUTES: RouteRecordRaw[] = [
+  {
+    path: "/",
+    name: PAGE.INSPECT_ZONE,
+    component: ZoneInspector,
+  },
+];
+
+export function createModManRouter() {
+  return createRouter({
+    history: createWebHashHistory(),
+    routes: ROUTES,
+  });
+}

src/ModManUi/src/style/_colors.scss

@@ -0,0 +1,311 @@
+// Primitive colors
+$EMERALD-50: var(--p-emerald-50);
+$EMERALD-100: var(--p-emerald-100);
+$EMERALD-200: var(--p-emerald-200);
+$EMERALD-300: var(--p-emerald-300);
+$EMERALD-400: var(--p-emerald-400);
+$EMERALD-500: var(--p-emerald-500);
+$EMERALD-600: var(--p-emerald-600);
+$EMERALD-700: var(--p-emerald-700);
+$EMERALD-800: var(--p-emerald-800);
+$EMERALD-900: var(--p-emerald-900);
+$EMERALD-950: var(--p-emerald-950);
+
+$GREEN-50: var(--p-green-50);
+$GREEN-100: var(--p-green-100);
+$GREEN-200: var(--p-green-200);
+$GREEN-300: var(--p-green-300);
+$GREEN-400: var(--p-green-400);
+$GREEN-500: var(--p-green-500);
+$GREEN-600: var(--p-green-600);
+$GREEN-700: var(--p-green-700);
+$GREEN-800: var(--p-green-800);
+$GREEN-900: var(--p-green-900);
+$GREEN-950: var(--p-green-950);
+
+$LIME-50: var(--p-lime-50);
+$LIME-100: var(--p-lime-100);
+$LIME-200: var(--p-lime-200);
+$LIME-300: var(--p-lime-300);
+$LIME-400: var(--p-lime-400);
+$LIME-500: var(--p-lime-500);
+$LIME-600: var(--p-lime-600);
+$LIME-700: var(--p-lime-700);
+$LIME-800: var(--p-lime-800);
+$LIME-900: var(--p-lime-900);
+$LIME-950: var(--p-lime-950);
+
+$RED-50: var(--p-red-50);
+$RED-100: var(--p-red-100);
+$RED-200: var(--p-red-200);
+$RED-300: var(--p-red-300);
+$RED-400: var(--p-red-400);
+$RED-500: var(--p-red-500);
+$RED-600: var(--p-red-600);
+$RED-700: var(--p-red-700);
+$RED-800: var(--p-red-800);
+$RED-900: var(--p-red-900);
+$RED-950: var(--p-red-950);
+
+$ORANGE-50: var(--p-orange-50);
+$ORANGE-100: var(--p-orange-100);
+$ORANGE-200: var(--p-orange-200);
+$ORANGE-300: var(--p-orange-300);
+$ORANGE-400: var(--p-orange-400);
+$ORANGE-500: var(--p-orange-500);
+$ORANGE-600: var(--p-orange-600);
+$ORANGE-700: var(--p-orange-700);
+$ORANGE-800: var(--p-orange-800);
+$ORANGE-900: var(--p-orange-900);
+$ORANGE-950: var(--p-orange-950);
+
+$AMBER-50: var(--p-amber-50);
+$AMBER-100: var(--p-amber-100);
+$AMBER-200: var(--p-amber-200);
+$AMBER-300: var(--p-amber-300);
+$AMBER-400: var(--p-amber-400);
+$AMBER-500: var(--p-amber-500);
+$AMBER-600: var(--p-amber-600);
+$AMBER-700: var(--p-amber-700);
+$AMBER-800: var(--p-amber-800);
+$AMBER-900: var(--p-amber-900);
+$AMBER-950: var(--p-amber-950);
+
+$YELLOW-50: var(--p-yellow-50);
+$YELLOW-100: var(--p-yellow-100);
+$YELLOW-200: var(--p-yellow-200);
+$YELLOW-300: var(--p-yellow-300);
+$YELLOW-400: var(--p-yellow-400);
+$YELLOW-500: var(--p-yellow-500);
+$YELLOW-600: var(--p-yellow-600);
+$YELLOW-700: var(--p-yellow-700);
+$YELLOW-800: var(--p-yellow-800);
+$YELLOW-900: var(--p-yellow-900);
+$YELLOW-950: var(--p-yellow-950);
+
+$TEAL-50: var(--p-teal-50);
+$TEAL-100: var(--p-teal-100);
+$TEAL-200: var(--p-teal-200);
+$TEAL-300: var(--p-teal-300);
+$TEAL-400: var(--p-teal-400);
+$TEAL-500: var(--p-teal-500);
+$TEAL-600: var(--p-teal-600);
+$TEAL-700: var(--p-teal-700);
+$TEAL-800: var(--p-teal-800);
+$TEAL-900: var(--p-teal-900);
+$TEAL-950: var(--p-teal-950);
+
+$CYAN-50: var(--p-cyan-50);
+$CYAN-100: var(--p-cyan-100);
+$CYAN-200: var(--p-cyan-200);
+$CYAN-300: var(--p-cyan-300);
+$CYAN-400: var(--p-cyan-400);
+$CYAN-500: var(--p-cyan-500);
+$CYAN-600: var(--p-cyan-600);
+$CYAN-700: var(--p-cyan-700);
+$CYAN-800: var(--p-cyan-800);
+$CYAN-900: var(--p-cyan-900);
+$CYAN-950: var(--p-cyan-950);
+
+$SKY-50: var(--p-sky-50);
+$SKY-100: var(--p-sky-100);
+$SKY-200: var(--p-sky-200);
+$SKY-300: var(--p-sky-300);
+$SKY-400: var(--p-sky-400);
+$SKY-500: var(--p-sky-500);
+$SKY-600: var(--p-sky-600);
+$SKY-700: var(--p-sky-700);
+$SKY-800: var(--p-sky-800);
+$SKY-900: var(--p-sky-900);
+$SKY-950: var(--p-sky-950);
+
+$BLUE-50: var(--p-blue-50);
+$BLUE-100: var(--p-blue-100);
+$BLUE-200: var(--p-blue-200);
+$BLUE-300: var(--p-blue-300);
+$BLUE-400: var(--p-blue-400);
+$BLUE-500: var(--p-blue-500);
+$BLUE-600: var(--p-blue-600);
+$BLUE-700: var(--p-blue-700);
+$BLUE-800: var(--p-blue-800);
+$BLUE-900: var(--p-blue-900);
+$BLUE-950: var(--p-blue-950);
+
+$INDIGO-50: var(--p-indigo-50);
+$INDIGO-100: var(--p-indigo-100);
+$INDIGO-200: var(--p-indigo-200);
+$INDIGO-300: var(--p-indigo-300);
+$INDIGO-400: var(--p-indigo-400);
+$INDIGO-500: var(--p-indigo-500);
+$INDIGO-600: var(--p-indigo-600);
+$INDIGO-700: var(--p-indigo-700);
+$INDIGO-800: var(--p-indigo-800);
+$INDIGO-900: var(--p-indigo-900);
+$INDIGO-950: var(--p-indigo-950);
+
+$VIOLET-50: var(--p-violet-50);
+$VIOLET-100: var(--p-violet-100);
+$VIOLET-200: var(--p-violet-200);
+$VIOLET-300: var(--p-violet-300);
+$VIOLET-400: var(--p-violet-400);
+$VIOLET-500: var(--p-violet-500);
+$VIOLET-600: var(--p-violet-600);
+$VIOLET-700: var(--p-violet-700);
+$VIOLET-800: var(--p-violet-800);
+$VIOLET-900: var(--p-violet-900);
+$VIOLET-950: var(--p-violet-950);
+
+$PURPLE-50: var(--p-purple-50);
+$PURPLE-100: var(--p-purple-100);
+$PURPLE-200: var(--p-purple-200);
+$PURPLE-300: var(--p-purple-300);
+$PURPLE-400: var(--p-purple-400);
+$PURPLE-500: var(--p-purple-500);
+$PURPLE-600: var(--p-purple-600);
+$PURPLE-700: var(--p-purple-700);
+$PURPLE-800: var(--p-purple-800);
+$PURPLE-900: var(--p-purple-900);
+$PURPLE-950: var(--p-purple-950);
+
+$FUCHSIA-50: var(--p-fuchsia-50);
+$FUCHSIA-100: var(--p-fuchsia-100);
+$FUCHSIA-200: var(--p-fuchsia-200);
+$FUCHSIA-300: var(--p-fuchsia-300);
+$FUCHSIA-400: var(--p-fuchsia-400);
+$FUCHSIA-500: var(--p-fuchsia-500);
+$FUCHSIA-600: var(--p-fuchsia-600);
+$FUCHSIA-700: var(--p-fuchsia-700);
+$FUCHSIA-800: var(--p-fuchsia-800);
+$FUCHSIA-900: var(--p-fuchsia-900);
+$FUCHSIA-950: var(--p-fuchsia-950);
+
+$PINK-50: var(--p-pink-50);
+$PINK-100: var(--p-pink-100);
+$PINK-200: var(--p-pink-200);
+$PINK-300: var(--p-pink-300);
+$PINK-400: var(--p-pink-400);
+$PINK-500: var(--p-pink-500);
+$PINK-600: var(--p-pink-600);
+$PINK-700: var(--p-pink-700);
+$PINK-800: var(--p-pink-800);
+$PINK-900: var(--p-pink-900);
+$PINK-950: var(--p-pink-950);
+
+$ROSE-50: var(--p-rose-50);
+$ROSE-100: var(--p-rose-100);
+$ROSE-200: var(--p-rose-200);
+$ROSE-300: var(--p-rose-300);
+$ROSE-400: var(--p-rose-400);
+$ROSE-500: var(--p-rose-500);
+$ROSE-600: var(--p-rose-600);
+$ROSE-700: var(--p-rose-700);
+$ROSE-800: var(--p-rose-800);
+$ROSE-900: var(--p-rose-900);
+$ROSE-950: var(--p-rose-950);
+
+$SLATE-50: var(--p-slate-50);
+$SLATE-100: var(--p-slate-100);
+$SLATE-200: var(--p-slate-200);
+$SLATE-300: var(--p-slate-300);
+$SLATE-400: var(--p-slate-400);
+$SLATE-500: var(--p-slate-500);
+$SLATE-600: var(--p-slate-600);
+$SLATE-700: var(--p-slate-700);
+$SLATE-800: var(--p-slate-800);
+$SLATE-900: var(--p-slate-900);
+$SLATE-950: var(--p-slate-950);
+
+$GRAY-50: var(--p-gray-50);
+$GRAY-100: var(--p-gray-100);
+$GRAY-200: var(--p-gray-200);
+$GRAY-300: var(--p-gray-300);
+$GRAY-400: var(--p-gray-400);
+$GRAY-500: var(--p-gray-500);
+$GRAY-600: var(--p-gray-600);
+$GRAY-700: var(--p-gray-700);
+$GRAY-800: var(--p-gray-800);
+$GRAY-900: var(--p-gray-900);
+$GRAY-950: var(--p-gray-950);
+
+$ZINC-50: var(--p-zinc-50);
+$ZINC-100: var(--p-zinc-100);
+$ZINC-200: var(--p-zinc-200);
+$ZINC-300: var(--p-zinc-300);
+$ZINC-400: var(--p-zinc-400);
+$ZINC-500: var(--p-zinc-500);
+$ZINC-600: var(--p-zinc-600);
+$ZINC-700: var(--p-zinc-700);
+$ZINC-800: var(--p-zinc-800);
+$ZINC-900: var(--p-zinc-900);
+$ZINC-950: var(--p-zinc-950);
+
+$NEUTRAL-50: var(--p-neutral-50);
+$NEUTRAL-100: var(--p-neutral-100);
+$NEUTRAL-200: var(--p-neutral-200);
+$NEUTRAL-300: var(--p-neutral-300);
+$NEUTRAL-400: var(--p-neutral-400);
+$NEUTRAL-500: var(--p-neutral-500);
+$NEUTRAL-600: var(--p-neutral-600);
+$NEUTRAL-700: var(--p-neutral-700);
+$NEUTRAL-800: var(--p-neutral-800);
+$NEUTRAL-900: var(--p-neutral-900);
+$NEUTRAL-950: var(--p-neutral-950);
+
+$STONE-50: var(--p-stone-50);
+$STONE-100: var(--p-stone-100);
+$STONE-200: var(--p-stone-200);
+$STONE-300: var(--p-stone-300);
+$STONE-400: var(--p-stone-400);
+$STONE-500: var(--p-stone-500);
+$STONE-600: var(--p-stone-600);
+$STONE-700: var(--p-stone-700);
+$STONE-800: var(--p-stone-800);
+$STONE-900: var(--p-stone-900);
+$STONE-950: var(--p-stone-950);
+
+// Semantic colors
+
+$PRIMARY-50: var(--p-primary-50);
+$PRIMARY-100: var(--p-primary-100);
+$PRIMARY-200: var(--p-primary-200);
+$PRIMARY-300: var(--p-primary-300);
+$PRIMARY-400: var(--p-primary-400);
+$PRIMARY-500: var(--p-primary-500);
+$PRIMARY-600: var(--p-primary-600);
+$PRIMARY-700: var(--p-primary-700);
+$PRIMARY-800: var(--p-primary-800);
+$PRIMARY-900: var(--p-primary-900);
+$PRIMARY-950: var(--p-primary-950);
+
+$SURFACE-50: var(--p-surface-50);
+$SURFACE-100: var(--p-surface-100);
+$SURFACE-200: var(--p-surface-200);
+$SURFACE-300: var(--p-surface-300);
+$SURFACE-400: var(--p-surface-400);
+$SURFACE-500: var(--p-surface-500);
+$SURFACE-600: var(--p-surface-600);
+$SURFACE-700: var(--p-surface-700);
+$SURFACE-800: var(--p-surface-800);
+$SURFACE-900: var(--p-surface-900);
+$SURFACE-950: var(--p-surface-950);
+
+$PRIMARY-COLOR: var(--p-primary-color);
+$PRIMARY-CONTRAST-COLOR: var(--p-primary-contrast-color);
+$PRIMARY-HOVER-COLOR: var(--p-primary-hover-color);
+$PRIMARY-ACTIVE-COLOR: var(--p-primary-active-color);
+
+$CONTENT-BACKGROUND: var(--p-content-background);
+$CONTENT-HOVER-BACKGROUND: var(--p-content-hover-background);
+$CONTENT-BORDER-COLOR: var(--p-content-border-color);
+$CONTENT-COLOR: var(--p-content-color);
+$CONTENT-HOVER-COLOR: var(--p-content-hover-color);
+
+$HIGHLIGHT-BACKGROUND: var(--p-highlight-background);
+$HIGHLIGHT-FOCUS-BACKGROUND: var(--p-highlight-focus-background);
+$HIGHLIGHT-COLOR: var(--p-highlight-color);
+$HIGHLIGHT-FOCUS-COLOR: var(--p-highlight-focus-color);
+
+$TEXT-COLOR: var(--p-text-color);
+$TEXT-HOVER-COLOR: var(--p-text-hover-color);
+$TEXT-MUTED-COLOR: var(--p-text-muted-color);
+$TEXT-HOVER-MUTED-COLOR: var(--p-text-hover-muted-color);

src/ModManUi/src/style/_variables.scss

@@ -0,0 +1 @@
+$TRANSITION_DURATION: var(--p-transition-duration);

src/ModManUi/src/style/main.scss

@@ -1,4 +1,6 @@
-@import "@fontsource/inter/latin-300.css";
+@use "utils.scss";
+
+@import "@fontsource/inter/latin-300.css";
 @import "@fontsource/inter/latin-300-italic.css";
 @import "@fontsource/inter/latin-400.css";
 @import "@fontsource/inter/latin-400-italic.css";
@@ -30,14 +32,3 @@
 body {
   margin: 0;
 }
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  justify-content: start;
-
-  height: 100vh;
-}

src/ModManUi/src/style/utils.scss

@@ -0,0 +1,3 @@
+.icon {
+    height: 1lh;
+}

src/ModManUi/src/view/inspect/ZoneInspector.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useZoneStore } from "@/stores/ZoneStore";
-import ZoneSelectorDetails from "./ZoneSelectorDetails.vue";
+import ZoneInspectorDetails from "./ZoneInspectorDetails.vue";
-import ZoneSelectorZoneList from "./ZoneSelectorZoneList.vue";
+import ZoneInspectorZoneList from "./ZoneInspectorZoneList.vue";
 
 const zoneStore = useZoneStore();
 const selectedZone = ref<string | null>(null);
@@ -20,15 +20,14 @@ watch(
 </script>
 
 <template>
-  <div class="zone-selector">
+  <div class="zone-inspector">
-    <ZoneSelectorZoneList v-model:selected-zone="selectedZone" />
+    <ZoneInspectorZoneList v-model:selected-zone="selectedZone" />
-
+    <ZoneInspectorDetails :selected-zone="selectedZone" />
-    <ZoneSelectorDetails :selected-zone="selectedZone" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-.zone-selector {
+.zone-inspector {
   display: flex;
   flex-direction: row;
   width: 100%;

src/ModManUi/tsconfig.app.json

@@ -6,7 +6,8 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@style/*": ["./src/style/*"]
     }
   }
 }

src/ModManUi/vite.config.ts

@@ -30,6 +30,7 @@ export default defineConfig({
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
+      "@style": fileURLToPath(new URL("./src/style", import.meta.url)),
     },
   },
 });