refactor(Station): Request tab naming improvements and toggle event handling

frontend/src/components/Request.vue

@@ -190,7 +190,6 @@
 						Current
 					</button>
 					<button
-						v-if="station.type === 'community'"
 						class="button is-default"
 						ref="my-playlists-child-tab"
 						:class="{ selected: childTab === 'my-playlists' }"
@@ -480,11 +479,7 @@
 						</button>
 					</div>
 				</div>
-				<div
-					v-if="station.type === 'community'"
-					class="tab"
-					v-show="childTab === 'my-playlists'"
-				>
+				<div class="tab" v-show="childTab === 'my-playlists'">
 					<button
 						class="button is-primary"
 						id="create-new-playlist-button"

frontend/src/components/modals/ManageStation/index.vue

@@ -231,13 +231,22 @@ export default {
 			socket: "websockets/getSocket"
 		})
 	},
+	watch: {
+		// eslint-disable-next-line
+		"station.requests": function (requests) {
+			if (this.tab === "request" && requests && !requests.enabled) {
+				if (this.isOwnerOrAdmin()) this.showTab("settings");
+				else this.closeModal("manageStation");
+			}
+		},
+	},
 	mounted() {
 		this.socket.dispatch(`stations.getStationById`, this.stationId, res => {
 			if (res.status === "success") {
 				const { station } = res.data;
 				this.editStation(station);
 
-				if (!this.isOwnerOrAdmin()) this.showTab("songs");
+				if (!this.isOwnerOrAdmin()) this.showTab("request");
 
 				const currentSong = res.data.station.currentSong
 					? res.data.station.currentSong

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

@@ -18,10 +18,10 @@
 			<button
 				v-if="station.requests && station.requests.enabled && loggedIn"
 				class="button is-default"
-				:class="{ selected: tab === 'requests' }"
-				@click="showTab('requests')"
+				:class="{ selected: tab === 'request' }"
+				@click="showTab('request')"
 			>
-				Requests
+				Request
 			</button>
 			<button
 				v-else-if="station.requests && station.requests.enabled"
@@ -29,14 +29,14 @@
 				content="Login to request songs"
 				v-tippy="{ theme: 'info' }"
 			>
-				Requests
+				Request
 			</button>
 		</div>
 		<queue class="tab" v-show="tab === 'queue'" />
 		<users class="tab" v-show="tab === 'users'" />
 		<request
 			v-if="station.requests && station.requests.enabled && loggedIn"
-			v-show="tab === 'requests'"
+			v-show="tab === 'request'"
 			class="tab requests-tab"
 			sector="station"
 		/>
@@ -65,11 +65,18 @@ export default {
 		userCount: state => state.station.userCount,
 		loggedIn: state => state.user.auth.loggedIn
 	}),
+	watch: {
+		// eslint-disable-next-line
+		"station.requests": function (requests) {
+			if (this.tab === "request" && requests && !requests.enabled)
+				this.showTab("queue");
+		}
+	},
 	mounted() {
 		if (
 			this.$route.query.tab === "queue" ||
 			this.$route.query.tab === "users" ||
-			this.$route.query.tab === "requests"
+			this.$route.query.tab === "request"
 		)
 			this.tab = this.$route.query.tab;
 	},