fix(Station): Using invalid tab in query does not select default tab

frontend/src/pages/Station/Sidebar/History.vue

@@ -8,17 +8,16 @@ import MediaItem from "@/components/MediaItem.vue";
 import { useConfigStore } from "@/stores/config";
 import { useUserAuthStore } from "@/stores/userAuth";
 
-const stationStore = useStationStore();
-
 const { socket } = useWebsocketsStore();
 
+const stationStore = useStationStore();
 const { history } = storeToRefs(stationStore);
+const { hasPermission } = stationStore;
 
 const configStore = useConfigStore();
 const { experimental } = storeToRefs(configStore);
 
 const userAuthStore = useUserAuthStore();
-const { loggedIn, userId, role: userRole } = storeToRefs(userAuthStore);
 
 const station = computed({
 	get() {
@@ -46,6 +45,17 @@ const songsInQueue = computed(() => {
 	return songsList.value.map(song => song.mediaSource);
 });
 
+const canRequest = computed(
+	() =>
+		station.value &&
+		userAuthStore.loggedIn &&
+		station.value.requests &&
+		station.value.requests.enabled &&
+		(station.value.requests.access === "user" ||
+			(station.value.requests.access === "owner" &&
+				hasPermission("stations.request")))
+);
+
 const formatDate = dateString => {
 	const skippedAtDate = new Date(dateString);
 	const now = new Date();
@@ -107,14 +117,7 @@ onMounted(async () => {});
 			>
 				<template
 					v-if="
-						loggedIn &&
-						station &&
-						station.requests &&
-						station.requests.enabled &&
-						(station.requests.access === 'user' ||
-							(station.requests.access === 'owner' &&
-								(userRole === 'admin' ||
-									station.owner === userId))) &&
+						canRequest &&
 						(!historyItem.payload.song.mediaSource.startsWith(
 							'soundcloud:'
 						) ||

frontend/src/pages/Station/Sidebar/index.vue

@@ -43,14 +43,20 @@ watch(
 		if (tab.value === "request" && !canRequest()) showTab("queue");
 	}
 );
+watch(
+	() => experimental.value.station_history,
+	value => {
+		if (!value && tab.value === "history") showTab("queue");
+	}
+);
 
 onMounted(() => {
-	if (
-		route.query.tab === "queue" ||
-		route.query.tab === "users" ||
-		route.query.tab === "request"
-	)
-		tab.value = route.query.tab;
+	const validTabs = ["queue", "users"];
+	if (canRequest()) validTabs.push("request");
+	if (experimental.value.station_history) validTabs.push("history");
+	if (validTabs.find(tab => tab === route.query.tab))
+		showTab(route.query.tab);
+	else showTab("queue");
 });
 </script>