Allow reference tab by name in URL directly, Fix Dead Links

packages/client/src/components/MkNotification.vue

@@ -225,7 +225,7 @@
 			<MkA
 				v-if="notification.type === 'achievementEarned'"
 				class="text"
-				:to="'/my/achievements'">
+				:to="'/my/space/achievements'">
 				{{ i18n.ts._achievements._types['_' + notification.achievement].title }}
 			</MkA>
 			<span

packages/client/src/pages/my-space/index.vue

@@ -70,6 +70,10 @@
 	import { defaultStore } from "@/store";
 	import "swiper/scss";
 	import "swiper/scss/virtual";
+
+	const props = defineProps<{
+		tab?: string;
+	}>();
 	
 	definePageMetadata({
 		title: i18n.ts.space,
@@ -84,6 +88,7 @@
 
 	const tabs = ["achievements", "reels", "journal"];
 	let tab = $ref(tabs[0]);
+
 	watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
 	const MOBILE_THRESHOLD = 500;
@@ -124,6 +129,7 @@
 
 	function onSlideChange() {
 		tab = tabs[swiperRef.activeIndex];
+		window.history.pushState(null, null, '/my/space/' + tab); 
 	}
 
 	function syncSlide(index) {
@@ -131,7 +137,7 @@
 	}
 
 	onMounted(() => {
-		syncSlide(tabs.indexOf(swiperRef.activeIndex));
+		syncSlide(tabs.indexOf(props.tab ?? swiperRef.activeIndex));
 	});
 
 	onActivated(() => {

packages/client/src/router.ts

@@ -341,7 +341,7 @@ export const routes = [
 		component: page(() => import("./pages/discover.vue")),
 	},
 	{
-		path: "/discover",
+		path: "/discover/:tab?",
 		component: page(() => import("./pages/discover.vue")),
 	},
 	{
@@ -582,7 +582,7 @@ export const routes = [
 		loginRequired: true,
 	},
 	{
-		path: "/my/snippets",
+		path: "/my/snippets/:tab?",
 		component: page(() => import("./pages/my-snippets/index.vue")),
 		loginRequired: true,
 	},
@@ -643,12 +643,12 @@ export const routes = [
 		loginRequired: true,
 	},
 	{
-		path: "/my/space",
+		path: "/my/space/:tab?",
 		component: page(() => import("./pages/my-space/index.vue")),
 		loginRequired: true,
 	},
 	{
-		path: "/news",
+		path: "/news/:tab?",
 		component: page(() => import("./pages/news.vue")),
 		loginRequired: true,
 	},

packages/client/src/ui/visitor/b.vue

@@ -45,14 +45,6 @@
 					><i class="ph-lightning ph-bold ph-lg icon"></i
 					>{{ i18n.ts.discover }}</MkA
 				>
-				<MkA to="/pages" class="link" active-class="active"
-					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</MkA
-				>
-				<MkA to="/gallery" class="link" active-class="active"
-					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</MkA
-				>
 				<MkA to="/settings" class="link" active-class="active">
 					<i class="ph-gear-six ph-bold ph-lg icon"></i
 					><span>{{ i18n.ts.settings }}</span>

packages/client/src/ui/visitor/header.vue

@@ -18,14 +18,6 @@
 					><i class="ph-lightning ph-bold ph-lg icon"></i
 					>{{ i18n.ts.discover }}</MkA
 				>
-				<MkA to="/pages" class="link" active-class="active"
-					><i class="ph-file-text ph-bold ph-lg icon"></i
-					>{{ i18n.ts.pages }}</MkA
-				>
-				<MkA to="/gallery" class="link" active-class="active"
-					><i class="ph-image-square ph-bold ph-lg icon"></i
-					>{{ i18n.ts.gallery }}</MkA
-				>
 				<div v-if="info" class="page active link">
 					<div class="title">
 						<i v-if="info.icon" class="icon" :class="info.icon"></i>