feat: View queue from homepage if not admin or owner

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

@@ -2,14 +2,16 @@
 	<modal
 		v-if="station"
 		:title="
-			!isOwnerOrAdmin() && station.partyMode
+			sector === 'home' && !isOwnerOrAdmin()
+				? 'View Queue'
+				: !isOwnerOrAdmin() && station.partyMode
 				? 'Add Song to Queue'
 				: 'Manage Station'
 		"
 		:style="`--primary-color: var(--${station.theme})`"
 		class="manage-station-modal"
-		:wide="true"
-		:split="true"
+		:wide="isOwnerOrAdmin() || sector !== 'home'"
+		:split="isOwnerOrAdmin() || sector !== 'home'"
 	>
 		<template #body v-if="station && station._id">
 			<div class="left-section">
@@ -90,50 +92,52 @@
 							</router-link>
 						</div>
 					</div>
-					<div class="tab-selection">
-						<button
+					<div v-if="isOwnerOrAdmin() || sector !== 'home'">
+						<div class="tab-selection">
+							<button
+								v-if="isOwnerOrAdmin()"
+								class="button is-default"
+								:class="{ selected: tab === 'settings' }"
+								ref="settings-tab"
+								@click="showTab('settings')"
+							>
+								Settings
+							</button>
+							<button
+								v-if="isAllowedToParty() || isOwnerOrAdmin()"
+								class="button is-default"
+								:class="{ selected: tab === 'playlists' }"
+								ref="playlists-tab"
+								@click="showTab('playlists')"
+							>
+								Playlists
+							</button>
+							<button
+								v-if="isAllowedToParty() || isOwnerOrAdmin()"
+								class="button is-default"
+								:class="{ selected: tab === 'songs' }"
+								ref="songs-tab"
+								@click="showTab('songs')"
+							>
+								Songs
+							</button>
+						</div>
+						<settings
 							v-if="isOwnerOrAdmin()"
-							class="button is-default"
-							:class="{ selected: tab === 'settings' }"
-							ref="settings-tab"
-							@click="showTab('settings')"
-						>
-							Settings
-						</button>
-						<button
+							class="tab"
+							v-show="tab === 'settings'"
+						/>
+						<playlists
 							v-if="isAllowedToParty() || isOwnerOrAdmin()"
-							class="button is-default"
-							:class="{ selected: tab === 'playlists' }"
-							ref="playlists-tab"
-							@click="showTab('playlists')"
-						>
-							Playlists
-						</button>
-						<button
+							class="tab"
+							v-show="tab === 'playlists'"
+						/>
+						<songs
 							v-if="isAllowedToParty() || isOwnerOrAdmin()"
-							class="button is-default"
-							:class="{ selected: tab === 'songs' }"
-							ref="songs-tab"
-							@click="showTab('songs')"
-						>
-							Songs
-						</button>
+							class="tab"
+							v-show="tab === 'songs'"
+						/>
 					</div>
-					<settings
-						v-if="isOwnerOrAdmin()"
-						class="tab"
-						v-show="tab === 'settings'"
-					/>
-					<playlists
-						v-if="isAllowedToParty() || isOwnerOrAdmin()"
-						class="tab"
-						v-show="tab === 'playlists'"
-					/>
-					<songs
-						v-if="isAllowedToParty() || isOwnerOrAdmin()"
-						class="tab"
-						v-show="tab === 'songs'"
-					/>
 				</div>
 			</div>
 			<div class="right-section">
@@ -687,10 +691,6 @@ export default {
 	height: 100%;
 
 	.left-section {
-		.section:first-child {
-			padding: 0 15px 15px !important;
-		}
-
 		#about-station-container {
 			padding: 20px;
 			display: flex;
@@ -803,5 +803,8 @@ export default {
 			}
 		}
 	}
+	&.modal-wide .left-section .section:first-child {
+		padding: 0 15px 15px !important;
+	}
 }
 </style>

frontend/src/pages/Home.vue

@@ -64,9 +64,10 @@
 							"
 						>
 							<song-thumbnail :song="element.currentSong">
-								<template #icon v-if="isOwnerOrAdmin(element)">
+								<template #icon>
 									<div class="icon-container">
 										<div
+											v-if="isOwnerOrAdmin(element)"
 											class="
 												material-icons
 												manage-station
@@ -79,6 +80,20 @@
 										>
 											settings
 										</div>
+										<div
+											v-else
+											class="
+												material-icons
+												manage-station
+											"
+											@click.prevent="
+												manageStation(element._id)
+											"
+											content="View Queue"
+											v-tippy
+										>
+											queue_music
+										</div>
 									</div>
 								</template>
 							</song-thumbnail>
@@ -306,9 +321,10 @@
 					:style="'--primary-color: var(--' + station.theme + ')'"
 				>
 					<song-thumbnail :song="station.currentSong">
-						<template #icon v-if="isOwnerOrAdmin(station)">
+						<template #icon>
 							<div class="icon-container">
 								<div
+									v-if="isOwnerOrAdmin(station)"
 									class="material-icons manage-station"
 									@click.prevent="manageStation(station._id)"
 									content="Manage Station"
@@ -316,6 +332,15 @@
 								>
 									settings
 								</div>
+								<div
+									v-else
+									class="material-icons manage-station"
+									@click.prevent="manageStation(station._id)"
+									content="View Queue"
+									v-tippy
+								>
+									queue_music
+								</div>
 							</div>
 						</template>
 					</song-thumbnail>