feat: added count tags to some tabs in stations, and fixed a few issues

frontend/src/App.vue

@@ -1314,7 +1314,29 @@ button.delete:focus {
 }
 
 .tag {
-	padding-right: 6px !important;
+	background-color: var(--dark-grey-3);
+	font-family: monospace;
+	font-weight: 700;
+	color: white;
+	border-radius: 100%;
+	text-align: center;
+	padding: 0 !important;
+	font-size: 12px;
+	line-height: 18px;
+	min-width: 18px;
+	height: 18px;
+	margin-left: 4px;
+
+	.material-icons {
+		font-size: 18px;
+	}
+}
+
+.selected {
+	.tag {
+		background-color: var(--light-grey);
+		color: var(--dark-grey);
+	}
 }
 
 #tab-selection,

frontend/src/components/PlaylistTabBase.vue

@@ -306,7 +306,8 @@ onMounted(() => {
 
 		if (
 			autorequestLocalStorageItem &&
-			station.value.requests.allowAutorequest
+			station.value.requests.allowAutorequest &&
+			autoRequest.value.length === 0
 		) {
 			const autorequestParsedItem = JSON.parse(
 				autorequestLocalStorageItem
@@ -378,6 +379,9 @@ onMounted(() => {
 					@click="showTab('current')"
 				>
 					Current
+					<span class="tag" v-if="selectedPlaylists().length > 0">{{
+						selectedPlaylists().length
+					}}</span>
 				</button>
 			</div>
 			<div class="tab" v-show="tab === 'search'">

frontend/src/components/Request.vue

@@ -92,9 +92,14 @@ const songsInQueue = computed(() => {
 // 			queueSong => queueSong.requestedBy === userId.value
 // 		).length
 // );
+const autorequestPlaylistCount = computed(() => {
+	if (props.sector === "station") return stationStore.autoRequest.length;
+	return 0;
+});
 
 const showTab = _tab => {
-	tabs.value[`${_tab}-tab`].scrollIntoView({ block: "nearest" });
+	const tabElement = tabs.value[`${_tab}-tab`];
+	if (tabElement) tabElement.scrollIntoView({ block: "nearest" });
 	tab.value = _tab;
 };
 
@@ -170,6 +175,13 @@ onMounted(async () => {
 					@click="showTab('autorequest')"
 				>
 					Autorequest
+					<span
+						v-tippy
+						content="You are autorequesting playlists"
+						class="tag has-icon"
+						v-if="autorequestPlaylistCount > 0"
+						><i class="material-icons">play_arrow</i></span
+					>
 				</button>
 				<button
 					v-else-if="station.requests.allowAutorequest"

frontend/src/components/modals/EditUser.vue

@@ -411,10 +411,6 @@ onBeforeUnmount(() => {
 	color: var(--white);
 }
 
-.tag:not(:last-child) {
-	margin-right: 5px;
-}
-
 .select:after {
 	border-color: var(--primary-color);
 }

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

@@ -19,7 +19,7 @@ const stationStore = useStationStore();
 const { tab, showTab } = useTabQueryHandler("queue");
 
 const { loggedIn } = storeToRefs(userAuthStore);
-const { station } = storeToRefs(stationStore);
+const { station, userCount } = storeToRefs(stationStore);
 const { hasPermission } = stationStore;
 
 const canRequest = (requireLogin = true) =>
@@ -64,6 +64,7 @@ onMounted(() => {
 				@click="showTab('users')"
 			>
 				Users
+				<span class="tag">{{ Math.min(userCount, 1) }}</span>
 			</button>
 			<button
 				v-if="canRequest()"