From 6b3fdbfb752eaeeed983f91d00a760d614dce936 Mon Sep 17 00:00:00 2001 From: Jan Laupetin Date: Wed, 22 Oct 2025 23:37:52 +0100 Subject: [PATCH] chore: add modman navigation --- src/ModManUi/package-lock.json | 24 +- src/ModManUi/package.json | 3 +- src/ModManUi/src/App.vue | 18 +- src/ModManUi/src/components/ModManHeader.vue | 60 ++++ .../src/components/icons/IconArrowLeft.vue | 9 + .../src/components/icons/IconGear.vue | 9 + src/ModManUi/src/main.ts | 4 +- src/ModManUi/src/router/Page.ts | 5 + src/ModManUi/src/router/Router.ts | 18 + src/ModManUi/src/style/_colors.scss | 311 ++++++++++++++++++ src/ModManUi/src/style/_variables.scss | 1 + src/ModManUi/src/{ => style}/main.scss | 15 +- src/ModManUi/src/style/utils.scss | 3 + .../inspect/ZoneInspector.vue} | 13 +- .../inspect/ZoneInspectorDetails.vue} | 0 .../inspect/ZoneInspectorZoneList.vue} | 0 src/ModManUi/tsconfig.app.json | 3 +- src/ModManUi/vite.config.ts | 1 + 18 files changed, 466 insertions(+), 31 deletions(-) create mode 100644 src/ModManUi/src/components/ModManHeader.vue create mode 100644 src/ModManUi/src/components/icons/IconArrowLeft.vue create mode 100644 src/ModManUi/src/components/icons/IconGear.vue create mode 100644 src/ModManUi/src/router/Page.ts create mode 100644 src/ModManUi/src/router/Router.ts create mode 100644 src/ModManUi/src/style/_colors.scss create mode 100644 src/ModManUi/src/style/_variables.scss rename src/ModManUi/src/{ => style}/main.scss (79%) create mode 100644 src/ModManUi/src/style/utils.scss rename src/ModManUi/src/{components/unlinking/zone_selector/ZoneSelector.vue => view/inspect/ZoneInspector.vue} (68%) rename src/ModManUi/src/{components/unlinking/zone_selector/ZoneSelectorDetails.vue => view/inspect/ZoneInspectorDetails.vue} (100%) rename src/ModManUi/src/{components/unlinking/zone_selector/ZoneSelectorZoneList.vue => view/inspect/ZoneInspectorZoneList.vue} (100%) diff --git a/src/ModManUi/package-lock.json b/src/ModManUi/package-lock.json index 40b2841d..14a58f0d 100644 --- a/src/ModManUi/package-lock.json +++ b/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", diff --git a/src/ModManUi/package.json b/src/ModManUi/package.json index 0eeaac30..78ef8bad 100644 --- a/src/ModManUi/package.json +++ b/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", diff --git a/src/ModManUi/src/App.vue b/src/ModManUi/src/App.vue index 308f9eba..08fc7fde 100644 --- a/src/ModManUi/src/App.vue +++ b/src/ModManUi/src/App.vue @@ -1,20 +1,22 @@ diff --git a/src/ModManUi/src/components/ModManHeader.vue b/src/ModManUi/src/components/ModManHeader.vue new file mode 100644 index 00000000..eb0d48d2 --- /dev/null +++ b/src/ModManUi/src/components/ModManHeader.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/ModManUi/src/components/icons/IconArrowLeft.vue b/src/ModManUi/src/components/icons/IconArrowLeft.vue new file mode 100644 index 00000000..3e37cfb5 --- /dev/null +++ b/src/ModManUi/src/components/icons/IconArrowLeft.vue @@ -0,0 +1,9 @@ + diff --git a/src/ModManUi/src/components/icons/IconGear.vue b/src/ModManUi/src/components/icons/IconGear.vue new file mode 100644 index 00000000..6ba8ca16 --- /dev/null +++ b/src/ModManUi/src/components/icons/IconGear.vue @@ -0,0 +1,9 @@ + diff --git a/src/ModManUi/src/main.ts b/src/ModManUi/src/main.ts index 1f9883ef..dc4dcad6 100644 --- a/src/ModManUi/src/main.ts +++ b/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); diff --git a/src/ModManUi/src/router/Page.ts b/src/ModManUi/src/router/Page.ts new file mode 100644 index 00000000..1a8c8744 --- /dev/null +++ b/src/ModManUi/src/router/Page.ts @@ -0,0 +1,5 @@ +export const PAGE = { + HOME: "Home", + INSPECT_ZONE: "Inspect zone", + OPTIONS: "Options", +}; diff --git a/src/ModManUi/src/router/Router.ts b/src/ModManUi/src/router/Router.ts new file mode 100644 index 00000000..48a3e294 --- /dev/null +++ b/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, + }); +} diff --git a/src/ModManUi/src/style/_colors.scss b/src/ModManUi/src/style/_colors.scss new file mode 100644 index 00000000..687d2dd2 --- /dev/null +++ b/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); diff --git a/src/ModManUi/src/style/_variables.scss b/src/ModManUi/src/style/_variables.scss new file mode 100644 index 00000000..70c003a2 --- /dev/null +++ b/src/ModManUi/src/style/_variables.scss @@ -0,0 +1 @@ +$TRANSITION_DURATION: var(--p-transition-duration); diff --git a/src/ModManUi/src/main.scss b/src/ModManUi/src/style/main.scss similarity index 79% rename from src/ModManUi/src/main.scss rename to src/ModManUi/src/style/main.scss index a1906699..05162d79 100644 --- a/src/ModManUi/src/main.scss +++ b/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; -} diff --git a/src/ModManUi/src/style/utils.scss b/src/ModManUi/src/style/utils.scss new file mode 100644 index 00000000..7de368ca --- /dev/null +++ b/src/ModManUi/src/style/utils.scss @@ -0,0 +1,3 @@ +.icon { + height: 1lh; +} \ No newline at end of file diff --git a/src/ModManUi/src/components/unlinking/zone_selector/ZoneSelector.vue b/src/ModManUi/src/view/inspect/ZoneInspector.vue similarity index 68% rename from src/ModManUi/src/components/unlinking/zone_selector/ZoneSelector.vue rename to src/ModManUi/src/view/inspect/ZoneInspector.vue index 02a85d85..67c6ca45 100644 --- a/src/ModManUi/src/components/unlinking/zone_selector/ZoneSelector.vue +++ b/src/ModManUi/src/view/inspect/ZoneInspector.vue @@ -1,8 +1,8 @@