feat(Station page): tab choice e.g. 'my-playlists' is persistent on page reload

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/.eslintrc

@@ -21,7 +21,8 @@
 	"plugins": [ "prettier" ],
 	"globals": {
 		"lofig": "writable",
-		"grecaptcha": "readonly"
+		"grecaptcha": "readonly",
+		"history": "readonly"
 	},
 	"rules": {
 		"no-console": 0,

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

@@ -4,14 +4,14 @@
 			<button
 				class="button is-default"
 				:class="{ selected: tab === 'queue' }"
-				@click="tab = 'queue'"
+				@click="showTab('queue')"
 			>
 				Queue
 			</button>
 			<button
 				class="button is-default"
 				:class="{ selected: tab === 'users' }"
-				@click="tab = 'users'"
+				@click="showTab('users')"
 			>
 				Users
 			</button>
@@ -19,7 +19,7 @@
 				v-if="loggedIn"
 				class="button is-default"
 				:class="{ selected: tab === 'my-playlists' }"
-				@click="tab = 'my-playlists'"
+				@click="showTab('my-playlists')"
 			>
 				My Playlists
 			</button>
@@ -49,8 +49,38 @@ export default {
 		userCount: state => state.station.userCount,
 		loggedIn: state => state.user.auth.loggedIn
 	}),
+	mounted() {
+		if (
+			this.$route.query.tab === "queue" ||
+			this.$route.query.tab === "users" ||
+			this.$route.query.tab === "my-playlists"
+		)
+			this.tab = this.$route.query.tab;
+	},
 	methods: {
-		...mapActions("modals", ["openModal"])
+		...mapActions("modals", ["openModal"]),
+		showTab(tab) {
+			const queries = this.$route.query.tab
+				? this.$route.query
+				: { ...this.$route.query, tab };
+
+			queries.tab = tab;
+			this.$route.query.tab = tab;
+			this.tab = this.$route.query.tab;
+
+			// eslint-disable-next-line no-restricted-globals
+			history.pushState(
+				{},
+				null,
+				`${this.$route.path}?${Object.keys(queries)
+					.map(key => {
+						return `${encodeURIComponent(key)}=${encodeURIComponent(
+							queries[key]
+						)}`;
+					})
+					.join("&")}`
+			);
+		}
 	}
 };
 </script>