oof

packages/client/src/components/MkModalPageWindow.vue

@@ -29,8 +29,9 @@ import { url } from '@/config';
 import * as os from '@/os';
 import { mainRouter, routes } from '@/router';
 import { i18n } from '@/i18n';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
-import { Router } from '@/nirax';
+
+import VueRouter from "vue-router"
 
 const props = defineProps<{
 	initialPath: string;
@@ -41,11 +42,11 @@ defineEmits<{
 	(ev: 'click'): void;
 }>();
 
-const router = new Router(routes, props.initialPath);
+const router = VueRouter.createRouter({
-
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
-router.addListener('push', ctx => {
+  history: VueRouter.createWebHashHistory(),
-
+  routes, // short for `routes: routes`
-});
+})
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let rootEl = $ref();

packages/client/src/components/MkPageWindow.vue

@@ -32,10 +32,11 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';
 import * as os from '@/os';
 import { mainRouter, routes } from '@/router';
-import { Router } from '@/nirax';
 import { i18n } from '@/i18n';
 import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
 
+import VueRouter from "vue-router"
+
 const props = defineProps<{
 	initialPath: string;
 }>();
@@ -44,40 +45,15 @@ defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const router = new Router(routes, props.initialPath);
+const router = VueRouter.createRouter({
+  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
+  history: VueRouter.createWebHashHistory(),
+  routes, // short for `routes: routes`
+})
 
 let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
 let windowEl = $ref<InstanceType<typeof XWindow>>();
-const history = $ref<{ path: string; key: any; }[]>([{
+	
-	path: router.getCurrentPath(),
-	key: router.getCurrentKey(),
-}]);
-const buttonsLeft = $computed(() => {
-	const buttons = [];
-
-	if (history.length > 1) {
-		buttons.push({
-			icon: 'ph-caret-left-bold ph-lg',
-			onClick: back,
-		});
-	}
-
-	return buttons;
-});
-const buttonsRight = $computed(() => {
-	const buttons = [{
-		icon: 'ph-arrows-out-simple-bold ph-lg',
-		title: i18n.ts.showInPage,
-		onClick: expand,
-	}];
-
-	return buttons;
-});
-
-router.addListener('push', ctx => {
-	history.push({ path: ctx.path, key: ctx.key });
-});
-
 provide('router', router);
 provideMetadataReceiver((info) => {
 	pageMetadata = info;

packages/client/src/components/global/RouterView.vue

@@ -1,7 +1,7 @@
 <template>
 <KeepAlive :max="defaultStore.state.numberOfPageCache">
 	<Suspense>
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+		<component/>
 
 		<template #fallback>
 			<MkLoading/>
@@ -12,11 +12,12 @@
 
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue';
-import { Resolved, Router } from '@/nirax';
 import { defaultStore } from '@/store';
 
+import VueRouter from "vue-router"
+
 const props = defineProps<{
-	router?: Router;
+	router?: VueRouter.Router;
 }>();
 
 const router = props.router ?? inject('router');
@@ -27,35 +28,4 @@ if (router == null) {
 
 const currentDepth = inject('routerCurrentDepth', 0);
 provide('routerCurrentDepth', currentDepth + 1);
-
-function resolveNested(current: Resolved, d = 0): Resolved | null {
-	if (d === currentDepth) {
-		return current;
-	} else {
-		if (current.child) {
-			return resolveNested(current.child, d + 1);
-		} else {
-			return null;
-		}
-	}
-}
-
-const current = resolveNested(router.current)!;
-let currentPageComponent = $shallowRef(current.route.component);
-let currentPageProps = $ref(current.props);
-let key = $ref(current.route.path + JSON.stringify(Object.fromEntries(current.props)));
-
-function onChange({ resolved, key: newKey }) {
-	const current = resolveNested(resolved);
-	if (current == null) return;
-	currentPageComponent = current.route.component;
-	currentPageProps = current.props;
-	key = current.route.path + JSON.stringify(Object.fromEntries(current.props));
-}
-
-router.addListener('change', onChange);
-
-onBeforeUnmount(() => {
-	router.removeListener('change', onChange);
-});
 </script>

packages/client/src/scripts/get-user-menu.ts

@@ -7,9 +7,9 @@ import * as os from "@/os";
 import { userActions } from "@/store";
 import { $i, iAmModerator } from "@/account";
 import { mainRouter } from "@/router";
-import { Router } from "@/nirax";
+import VueRouter from "vue-router"
 
-export function getUserMenu(user, router: Router = mainRouter) {
+export function getUserMenu(user, router: VueRouter.Router = mainRouter) {
 	const meId = $i ? $i.id : null;
 
 	async function pushList() {