refactor: Various modal fixes and tweaks

frontend/src/App.vue

@@ -1,5 +1,6 @@
 <template>
 	<div class="upper-container">
+		<modal-manager />
 		<banned v-if="banned" />
 		<div v-else class="upper-container">
 			<router-view
@@ -23,6 +24,9 @@ import keyboardShortcuts from "./keyboardShortcuts";
 
 export default {
 	components: {
+		ModalManager: defineAsyncComponent(() =>
+			import("@/components/ModalManager.vue")
+		),
 		Banned: defineAsyncComponent(() => import("@/pages/Banned.vue")),
 		FallingSnow: defineAsyncComponent(() =>
 			import("@/components/FallingSnow.vue")

frontend/src/pages/Admin/Playlists.vue

@@ -85,7 +85,6 @@
 		</div>
 
 		<edit-song v-if="modals.editSong" song-type="songs" />
-		<report v-if="modals.report" />
 	</div>
 </template>
 
@@ -100,9 +99,6 @@ import utils from "../../../js/utils";
 
 export default {
 	components: {
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),

frontend/src/pages/Admin/Reports.vue

@@ -108,7 +108,6 @@
 		</div>
 
 		<edit-song v-if="modals.editSong" song-type="songs" />
-		<report v-if="modals.report" />
 	</div>
 </template>
 
@@ -122,9 +121,6 @@ import AdvancedTable from "@/components/AdvancedTable.vue";
 
 export default {
 	components: {
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong/index.vue")
 		),

frontend/src/pages/Admin/Stations.vue

@@ -146,7 +146,6 @@
 		</div>
 
 		<edit-song v-if="modals.editSong" song-type="songs" sector="admin" />
-		<report v-if="modals.report" />
 	</div>
 </template>
 
@@ -161,9 +160,6 @@ import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 export default {
 	components: {
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),

frontend/src/pages/Admin/index.vue

@@ -238,7 +238,6 @@
 				</div>
 			</template>
 		</floating-box>
-		<modal-manager />
 	</div>
 </template>
 
@@ -249,12 +248,9 @@ import keyboardShortcuts from "@/keyboardShortcuts";
 
 import FloatingBox from "@/components/FloatingBox.vue";
 
-import ModalManager from "@/components/ModalManager.vue";
-
 export default {
 	components: {
-		FloatingBox,
-		ModalManager
+		FloatingBox
 	},
 	data() {
 		return {

frontend/src/pages/Home.vue

@@ -76,7 +76,14 @@
 												v-if="isOwnerOrAdmin(element)"
 												class="material-icons manage-station"
 												@click.prevent="
-													manageStation(element._id)
+													openModal({
+														modal: 'manageStation',
+														data: {
+															stationId:
+																element._id,
+															sector: 'home'
+														}
+													})
 												"
 												content="Manage Station"
 												v-tippy
@@ -87,7 +94,14 @@
 												v-else
 												class="material-icons manage-station"
 												@click.prevent="
-													manageStation(element._id)
+													openModal({
+														modal: 'manageStation',
+														data: {
+															stationId:
+																element._id,
+															sector: 'home'
+														}
+													})
 												"
 												content="View Queue"
 												v-tippy
@@ -327,7 +341,13 @@
 										v-if="isOwnerOrAdmin(station)"
 										class="material-icons manage-station"
 										@click.prevent="
-											manageStation(station._id)
+											openModal({
+												modal: 'manageStation',
+												data: {
+													stationId: station._id,
+													sector: 'home'
+												}
+											})
 										"
 										content="Manage Station"
 										v-tippy
@@ -338,7 +358,13 @@
 										v-else
 										class="material-icons manage-station"
 										@click.prevent="
-											manageStation(station._id)
+											openModal({
+												modal: 'manageStation',
+												data: {
+													stationId: station._id,
+													sector: 'home'
+												}
+											})
 										"
 										content="View Queue"
 										v-tippy
@@ -487,14 +513,7 @@
 			</div>
 			<main-footer />
 		</div>
-		<manage-station
-			v-if="modals.manageStation"
-			:station-id="editingStationId"
-			sector="home"
-		/>
 		<edit-song v-if="modals.editSong" song-type="songs" sector="home" />
-		<report v-if="modals.report" />
-		<modal-manager />
 	</div>
 </template>
 
@@ -506,20 +525,11 @@ import Toast from "toasters";
 
 import SongThumbnail from "@/components/SongThumbnail.vue";
 
-import ModalManager from "@/components/ModalManager.vue";
-
 import ws from "@/ws";
 
 export default {
 	components: {
-		ModalManager,
 		SongThumbnail,
-		ManageStation: defineAsyncComponent(() =>
-			import("@/components/modals/ManageStation/index.vue")
-		),
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),
@@ -829,10 +839,6 @@ export default {
 				res => new Toast(res.message)
 			);
 		},
-		manageStation(stationId) {
-			this.editingStationId = stationId;
-			this.openModal("manageStation");
-		},
 		...mapActions("modalVisibility", ["openModal"]),
 		...mapActions("station", ["updateIfStationIsFavorited"])
 	}

frontend/src/pages/Profile/index.vue

@@ -1,7 +1,6 @@
 <template>
 	<div v-if="isUser">
 		<edit-song v-if="modals.editSong" song-type="songs" />
-		<report v-if="modals.report" />
 
 		<page-metadata :title="`Profile | ${user.username}`" />
 		<main-header />
@@ -121,9 +120,6 @@ export default {
 		ProfilePicture,
 		RecentActivity,
 		Playlists,
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		)

frontend/src/pages/Station/index.vue

@@ -144,7 +144,15 @@
 								<!-- (Admin) Station Settings Button -->
 								<button
 									class="button is-primary"
-									@click="openModal('manageStation')"
+									@click="
+										openModal({
+											modal: 'manageStation',
+											data: {
+												stationId: station._id,
+												sector: 'station'
+											}
+										})
+									"
 								>
 									<i class="material-icons icon-with-button"
 										>settings</i
@@ -630,17 +638,11 @@
 					</div>
 				</div>
 
-				<manage-station
-					v-if="modals.manageStation"
-					:station-id="station._id"
-					sector="station"
-				/>
 				<edit-song
 					v-if="modals.editSong"
 					song-type="songs"
 					sector="station"
 				/>
-				<report v-if="modals.report" />
 			</div>
 
 			<main-footer />
@@ -798,12 +800,6 @@ import StationSidebar from "./Sidebar/index.vue";
 export default {
 	components: {
 		ContentLoader,
-		ManageStation: defineAsyncComponent(() =>
-			import("@/components/modals/ManageStation/index.vue")
-		),
-		Report: defineAsyncComponent(() =>
-			import("@/components/modals/Report.vue")
-		),
 		Z404,
 		FloatingBox,
 		StationSidebar,