refactor: Started migrating createPlaylist to new modal system

frontend/src/App.vue

@@ -7,7 +7,6 @@
 				class="main-container"
 				:class="{ 'main-container-modal-active': aModalIsOpen2 }"
 			/>
-			<create-playlist-modal v-if="modals.createPlaylist" />
 		</div>
 		<falling-snow v-if="christmas" />
 	</div>
@@ -24,9 +23,6 @@ import keyboardShortcuts from "./keyboardShortcuts";
 
 export default {
 	components: {
-		CreatePlaylistModal: defineAsyncComponent(() =>
-			import("@/components/modals/CreatePlaylist.vue")
-		),
 		Banned: defineAsyncComponent(() => import("@/pages/Banned.vue")),
 		FallingSnow: defineAsyncComponent(() =>
 			import("@/components/FallingSnow.vue")

frontend/src/components/ModalManager.vue

@@ -25,7 +25,8 @@ export default {
 			editNews: "EditNews.vue",
 			manageStation: "ManageStation/index.vue",
 			importPlaylist: "ImportPlaylist.vue",
-			editPlaylist: "EditPlaylist/index.vue"
+			editPlaylist: "EditPlaylist/index.vue",
+			createPlaylist: "CreatePlaylist.vue"
 		}),
 		...mapState("modalVisibility", {
 			activeModals: state => state.new.activeModals,

frontend/src/components/modals/CreatePlaylist.vue

@@ -39,6 +39,9 @@ import Toast from "toasters";
 import validation from "@/validation";
 
 export default {
+	props: {
+		modalUuid: { type: String, default: "" }
+	},
 	data() {
 		return {
 			playlist: {
@@ -51,6 +54,14 @@ export default {
 	computed: mapGetters({
 		socket: "websockets/getSocket"
 	}),
+	beforeUnmount() {
+		// Delete the VueX module that was created for this modal, after all other cleanup tasks are performed
+		this.$store.unregisterModule([
+			"modals",
+			"createPlaylist",
+			this.modalUuid
+		]);
+	},
 	unmounted() {
 		if (window.addToPlaylistDropdown)
 			window.addToPlaylistDropdown.tippy.setProps({

frontend/src/pages/Admin/Stations.vue

@@ -145,7 +145,6 @@
 			</advanced-table>
 		</div>
 
-		<create-playlist v-if="modals.createPlaylist" />
 		<edit-song v-if="modals.editSong" song-type="songs" sector="admin" />
 		<report v-if="modals.report" />
 	</div>
@@ -162,9 +161,6 @@ import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 export default {
 	components: {
-		CreatePlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/CreatePlaylist.vue")
-		),
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),

frontend/src/pages/Home.vue

@@ -492,7 +492,6 @@
 			:station-id="editingStationId"
 			sector="home"
 		/>
-		<create-playlist v-if="modals.createPlaylist" />
 		<edit-song v-if="modals.editSong" song-type="songs" sector="home" />
 		<report v-if="modals.report" />
 		<modal-manager />
@@ -518,9 +517,6 @@ export default {
 		ManageStation: defineAsyncComponent(() =>
 			import("@/components/modals/ManageStation/index.vue")
 		),
-		CreatePlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/CreatePlaylist.vue")
-		),
 		Report: defineAsyncComponent(() =>
 			import("@/components/modals/Report.vue")
 		),

frontend/src/pages/Profile/Tabs/Playlists.vue

@@ -1,7 +1,5 @@
 <template>
 	<div class="content playlists-tab">
-		<create-playlist v-if="modals.createPlaylist" />
-
 		<div v-if="playlists.length > 0">
 			<h4 class="section-title">
 				{{ myUserId === userId ? "My" : null }}
@@ -95,7 +93,6 @@
 
 <script>
 import { mapActions, mapState, mapGetters } from "vuex";
-import { defineAsyncComponent } from "vue";
 
 import PlaylistItem from "@/components/PlaylistItem.vue";
 import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
@@ -103,10 +100,7 @@ import ws from "@/ws";
 
 export default {
 	components: {
-		PlaylistItem,
-		CreatePlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/CreatePlaylist.vue")
-		)
+		PlaylistItem
 	},
 	mixins: [SortablePlaylists],
 	props: {

frontend/src/pages/Station/index.vue

@@ -630,7 +630,6 @@
 					</div>
 				</div>
 
-				<create-playlist v-if="modals.createPlaylist" />
 				<manage-station
 					v-if="modals.manageStation"
 					:station-id="station._id"
@@ -799,9 +798,6 @@ import StationSidebar from "./Sidebar/index.vue";
 export default {
 	components: {
 		ContentLoader,
-		CreatePlaylist: defineAsyncComponent(() =>
-			import("@/components/modals/CreatePlaylist.vue")
-		),
 		ManageStation: defineAsyncComponent(() =>
 			import("@/components/modals/ManageStation/index.vue")
 		),

frontend/src/store/index.js

@@ -37,6 +37,7 @@ export default createStore({
 				importAlbum: importAlbumModal,
 				importPlaylist: emptyModule,
 				editPlaylist: emptyModule,
+				createPlaylist: emptyModule,
 				manageStation: emptyModule,
 				editUser: emptyModule,
 				whatIsNew: emptyModule,

frontend/src/store/modules/modalVisibility.js

@@ -11,7 +11,6 @@ import editPlaylist from "./modals/editPlaylist";
 
 const state = {
 	modals: {
-		createPlaylist: false,
 		report: false,
 		removeAccount: false,
 		editSong: false,
@@ -49,7 +48,7 @@ const migratedModules = {
 	createStation: true,
 	importPlaylist: true,
 	editPlaylist: true,
-	createPlaylist: false,
+	createPlaylist: true,
 	report: false,
 	removeAccount: false,
 	editNews: true,