refactor: Made Modal, QuickConfirm and UserIdToUsername global components (WIP)

frontend/src/components/PlaylistItem.vue

@@ -39,11 +39,9 @@
 </template>
 
 <script>
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import utils from "../../js/utils";
 
 export default {
-	components: { UserIdToUsername },
 	props: {
 		playlist: { type: Object, default: () => {} },
 		showOwner: { type: Boolean, default: false }

frontend/src/components/PlaylistTabBase.vue

@@ -644,14 +644,12 @@ import { mapActions, mapState, mapGetters } from "vuex";
 import Toast from "toasters";
 import ws from "@/ws";
 
-import QuickConfirm from "@/components/QuickConfirm.vue";
 import PlaylistItem from "@/components/PlaylistItem.vue";
 
 import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
 
 export default {
 	components: {
-		QuickConfirm,
 		PlaylistItem
 	},
 	mixins: [SortablePlaylists],

frontend/src/components/PunishmentItem.vue

@@ -75,10 +75,7 @@
 import { mapActions } from "vuex";
 import { format, formatDistance, parseISO } from "date-fns";
 
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
-
 export default {
-	components: { UserIdToUsername },
 	props: {
 		punishment: { type: Object, default: () => {} }
 	},

frontend/src/components/Queue.vue

@@ -78,10 +78,9 @@ import draggable from "vuedraggable";
 import Toast from "toasters";
 
 import SongItem from "@/components/SongItem.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { draggable, SongItem, QuickConfirm },
+	components: { draggable, SongItem },
 	props: {
 		sector: {
 			type: String,

frontend/src/components/RunJobDropdown.vue

@@ -56,12 +56,8 @@
 import { mapGetters } from "vuex";
 
 import Toast from "toasters";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: {
-		QuickConfirm
-	},
 	props: {
 		jobs: {
 			type: Array,

frontend/src/components/SongItem.vue

@@ -162,12 +162,11 @@ import { mapActions, mapState } from "vuex";
 import { formatDistance, parseISO } from "date-fns";
 
 import AddToPlaylistDropdown from "./AddToPlaylistDropdown.vue";
-import UserIdToUsername from "./UserIdToUsername.vue";
 import SongThumbnail from "./SongThumbnail.vue";
 import utils from "../../js/utils";
 
 export default {
-	components: { UserIdToUsername, AddToPlaylistDropdown, SongThumbnail },
+	components: { AddToPlaylistDropdown, SongThumbnail },
 	props: {
 		song: {
 			type: Object,

frontend/src/components/modals/BulkActions.vue

@@ -69,13 +69,12 @@ import { mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
-import Modal from "../Modal.vue";
 import AutoSuggest from "@/components/AutoSuggest.vue";
 
 import ws from "@/ws";
 
 export default {
-	components: { Modal, AutoSuggest },
+	components: { AutoSuggest },
 	props: {
 		type: {
 			type: Object,

frontend/src/components/modals/Confirm.vue

@@ -18,10 +18,8 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
-import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal },
 	emits: ["confirmed"],
 	data() {
 		return {

frontend/src/components/modals/CreatePlaylist.vue

@@ -37,10 +37,8 @@ import { mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 import validation from "@/validation";
-import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal },
 	data() {
 		return {
 			playlist: {

frontend/src/components/modals/CreateStation.vue

@@ -46,10 +46,8 @@ import { mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 import validation from "@/validation";
-import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal },
 	props: {
 		official: { type: Boolean, default: false }
 	},

frontend/src/components/modals/EditNews.vue

@@ -82,13 +82,11 @@ import { sanitize } from "dompurify";
 import Toast from "toasters";
 import { formatDistance } from "date-fns";
 
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import ws from "@/ws";
 import SaveButton from "../SaveButton.vue";
-import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal, SaveButton, UserIdToUsername },
+	components: { SaveButton },
 	props: {
 		newsId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }

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

@@ -248,8 +248,6 @@ import draggable from "vuedraggable";
 import Toast from "toasters";
 
 import ws from "@/ws";
-import QuickConfirm from "@/components/QuickConfirm.vue";
-import Modal from "../../Modal.vue";
 import SongItem from "../../SongItem.vue";
 
 import Settings from "./Tabs/Settings.vue";
@@ -260,9 +258,7 @@ import utils from "../../../../js/utils";
 
 export default {
 	components: {
-		Modal,
 		draggable,
-		QuickConfirm,
 		SongItem,
 		Settings,
 		AddSongs,

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

@@ -645,7 +645,6 @@ import ws from "@/ws";
 import validation from "@/validation";
 import keyboardShortcuts from "@/keyboardShortcuts";
 
-import Modal from "../../Modal.vue";
 import FloatingBox from "../../FloatingBox.vue";
 import SaveButton from "../../SaveButton.vue";
 import AutoSuggest from "@/components/AutoSuggest.vue";
@@ -657,7 +656,6 @@ import MusareSongs from "./Tabs/Songs.vue";
 
 export default {
 	components: {
-		Modal,
 		FloatingBox,
 		SaveButton,
 		AutoSuggest,

frontend/src/components/modals/EditUser.vue

@@ -111,11 +111,8 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import Toast from "toasters";
 import validation from "@/validation";
 import ws from "@/ws";
-import Modal from "../Modal.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { Modal, QuickConfirm },
 	props: {
 		userId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }

frontend/src/components/modals/ImportAlbum.vue

@@ -330,12 +330,10 @@ import draggable from "vuedraggable";
 import Toast from "toasters";
 import ws from "@/ws";
 
-import Modal from "../Modal.vue";
-
 import SongItem from "../SongItem.vue";
 
 export default {
-	components: { Modal, SongItem, draggable },
+	components: { SongItem, draggable },
 	props: {
 		sector: { type: String, default: "admin" }
 	},

frontend/src/components/modals/ImportPlaylist.vue

@@ -65,10 +65,7 @@ import Toast from "toasters";
 
 import SearchYoutube from "@/mixins/SearchYoutube.vue";
 
-import Modal from "../Modal.vue";
-
 export default {
-	components: { Modal },
 	mixins: [SearchYoutube],
 	computed: {
 		localEditSongs: {

frontend/src/components/modals/Login.vue

@@ -106,12 +106,8 @@
 import { mapActions } from "vuex";
 
 import Toast from "toasters";
-import Modal from "../Modal.vue";
 
 export default {
-	components: {
-		Modal
-	},
 	data() {
 		return {
 			email: "",

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

@@ -189,10 +189,8 @@ import { mapState, mapGetters, mapActions } from "vuex";
 
 import Toast from "toasters";
 
-import QuickConfirm from "@/components/QuickConfirm.vue";
 import Queue from "@/components/Queue.vue";
 import SongItem from "@/components/SongItem.vue";
-import Modal from "../../Modal.vue";
 
 import Settings from "./Settings.vue";
 import PlaylistTabBase from "@/components/PlaylistTabBase.vue";
@@ -200,8 +198,6 @@ import Request from "@/components/Request.vue";
 
 export default {
 	components: {
-		Modal,
-		QuickConfirm,
 		Queue,
 		SongItem,
 		Settings,

frontend/src/components/modals/Register.vue

@@ -137,13 +137,12 @@
 <script>
 import { mapActions } from "vuex";
 import Toast from "toasters";
-import Modal from "../Modal.vue";
 
 import validation from "@/validation";
 import InputHelpBox from "../InputHelpBox.vue";
 
 export default {
-	components: { Modal, InputHelpBox },
+	components: { InputHelpBox },
 	data() {
 		return {
 			username: {

frontend/src/components/modals/RemoveAccount.vue

@@ -179,11 +179,7 @@ import { mapActions, mapGetters } from "vuex";
 
 import Toast from "toasters";
 
-import QuickConfirm from "@/components/QuickConfirm.vue";
-import Modal from "../Modal.vue";
-
 export default {
-	components: { Modal, QuickConfirm },
 	data() {
 		return {
 			name: "RemoveAccount",

frontend/src/components/modals/Report.vue

@@ -204,10 +204,9 @@ import ws from "@/ws";
 import ViewReport from "@/components/modals/ViewReport.vue";
 import SongItem from "@/components/SongItem.vue";
 import ReportInfoItem from "@/components/ReportInfoItem.vue";
-import Modal from "../Modal.vue";
 
 export default {
-	components: { Modal, ViewReport, SongItem, ReportInfoItem },
+	components: { ViewReport, SongItem, ReportInfoItem },
 	data() {
 		return {
 			icons: {

frontend/src/components/modals/ViewPunishment.vue

@@ -15,11 +15,10 @@ import { format, formatDistance, parseISO } from "date-fns";
 import Toast from "toasters";
 import ws from "@/ws";
 
-import Modal from "../Modal.vue";
 import PunishmentItem from "../PunishmentItem.vue";
 
 export default {
-	components: { Modal, PunishmentItem },
+	components: { PunishmentItem },
 	props: {
 		punishmentId: { type: String, default: "" },
 		sector: { type: String, default: "admin" }

frontend/src/components/modals/ViewReport.vue

@@ -119,13 +119,11 @@ import { mapActions, mapGetters, mapState } from "vuex";
 import Toast from "toasters";
 import ws from "@/ws";
 
-import Modal from "@/components/Modal.vue";
 import SongItem from "@/components/SongItem.vue";
 import ReportInfoItem from "@/components/ReportInfoItem.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { Modal, SongItem, ReportInfoItem, QuickConfirm },
+	components: { SongItem, ReportInfoItem },
 	props: {
 		sector: { type: String, default: "admin" }
 	},

frontend/src/components/modals/WhatIsNew.vue

@@ -34,11 +34,7 @@ import { sanitize } from "dompurify";
 import { mapGetters, mapActions } from "vuex";
 import ws from "@/ws";
 
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
-import Modal from "../Modal.vue";
-
 export default {
-	components: { Modal, UserIdToUsername },
 	data() {
 		return {
 			isModalActive: false,

frontend/src/main.js

@@ -53,6 +53,17 @@ app.component("PageMetadata", {
 	}
 });
 
+const globalComponents = require.context(
+	"@/components/global/",
+	true,
+	/\.vue$/i
+);
+globalComponents.keys().forEach(componentFilePath => {
+	const componentName = componentFilePath.split("/").pop().split(".")[0];
+	const component = globalComponents(componentFilePath);
+	app.component(componentName, component.default || component);
+});
+
 app.directive("scroll", {
 	mounted(el, binding) {
 		const f = evt => {

frontend/src/pages/Admin/News.vue

@@ -84,14 +84,10 @@ import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 export default {
 	components: {
 		AdvancedTable,
-		QuickConfirm,
-		UserIdToUsername,
 		EditNews: defineAsyncComponent(() =>
 			import("@/components/modals/EditNews.vue")
 		)

frontend/src/pages/Admin/Playlists.vue

@@ -91,7 +91,6 @@ import { defineAsyncComponent } from "vue";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 import utils from "../../../js/utils";
 
@@ -107,8 +106,7 @@ export default {
 			import("@/components/modals/EditSong")
 		),
 		AdvancedTable,
-		RunJobDropdown,
-		UserIdToUsername
+		RunJobDropdown
 	},
 	data() {
 		return {

frontend/src/pages/Admin/Punishments.vue

@@ -129,15 +129,13 @@ import Toast from "toasters";
 import { defineAsyncComponent } from "vue";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 export default {
 	components: {
 		ViewPunishment: defineAsyncComponent(() =>
 			import("@/components/modals/ViewPunishment.vue")
 		),
-		AdvancedTable,
-		UserIdToUsername
+		AdvancedTable
 	},
 	data() {
 		return {

frontend/src/pages/Admin/Reports.vue

@@ -115,7 +115,6 @@ import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 export default {
 	components: {
@@ -128,8 +127,7 @@ export default {
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong/index.vue")
 		),
-		AdvancedTable,
-		UserIdToUsername
+		AdvancedTable
 	},
 	data() {
 		return {

frontend/src/pages/Admin/Songs.vue

@@ -273,8 +273,6 @@ import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 export default {
@@ -301,8 +299,6 @@ export default {
 			import("@/components/modals/Confirm.vue")
 		),
 		AdvancedTable,
-		UserIdToUsername,
-		QuickConfirm,
 		RunJobDropdown
 	},
 	data() {

frontend/src/pages/Admin/Stations.vue

@@ -129,8 +129,6 @@ import { defineAsyncComponent } from "vue";
 import Toast from "toasters";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 import RunJobDropdown from "@/components/RunJobDropdown.vue";
 
 export default {
@@ -154,8 +152,6 @@ export default {
 			import("@/components/modals/CreateStation.vue")
 		),
 		AdvancedTable,
-		QuickConfirm,
-		UserIdToUsername,
 		RunJobDropdown
 	},
 	data() {

frontend/src/pages/Admin/Users/DataRequests.vue

@@ -62,12 +62,10 @@ import { mapGetters } from "vuex";
 import Toast from "toasters";
 
 import AdvancedTable from "@/components/AdvancedTable.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
 	components: {
-		AdvancedTable,
-		QuickConfirm
+		AdvancedTable
 	},
 	data() {
 		return {

frontend/src/pages/Home.vue

@@ -477,7 +477,6 @@ import Toast from "toasters";
 import MainHeader from "@/components/layout/MainHeader.vue";
 import MainFooter from "@/components/layout/MainFooter.vue";
 import SongThumbnail from "@/components/SongThumbnail.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 import ws from "@/ws";
 
@@ -504,7 +503,6 @@ export default {
 		EditSong: defineAsyncComponent(() =>
 			import("@/components/modals/EditSong")
 		),
-		UserIdToUsername,
 		draggable
 	},
 	data() {

frontend/src/pages/News.vue

@@ -46,10 +46,9 @@ import ws from "@/ws";
 
 import MainHeader from "@/components/layout/MainHeader.vue";
 import MainFooter from "@/components/layout/MainFooter.vue";
-import UserIdToUsername from "@/components/UserIdToUsername.vue";
 
 export default {
-	components: { MainHeader, MainFooter, UserIdToUsername },
+	components: { MainHeader, MainFooter },
 	data() {
 		return {
 			news: []

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

@@ -45,10 +45,9 @@ import Toast from "toasters";
 
 import ActivityItem from "@/components/ActivityItem.vue";
 import ws from "@/ws";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { ActivityItem, QuickConfirm },
+	components: { ActivityItem },
 	props: {
 		userId: {
 			type: String,

frontend/src/pages/Settings/Tabs/Account.vue

@@ -88,13 +88,11 @@ import Toast from "toasters";
 import InputHelpBox from "@/components/InputHelpBox.vue";
 import SaveButton from "@/components/SaveButton.vue";
 import validation from "@/validation";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
 	components: {
 		InputHelpBox,
-		SaveButton,
-		QuickConfirm
+		SaveButton
 	},
 	data() {
 		return {

frontend/src/pages/Settings/Tabs/Security.vue

@@ -172,10 +172,9 @@ import { mapGetters, mapState } from "vuex";
 
 import InputHelpBox from "@/components/InputHelpBox.vue";
 import validation from "@/validation";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { InputHelpBox, QuickConfirm },
+	components: { InputHelpBox },
 	data() {
 		return {
 			apiDomain: "",

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

@@ -99,10 +99,9 @@ import ws from "@/ws";
 
 import PlaylistItem from "@/components/PlaylistItem.vue";
 import SortablePlaylists from "@/mixins/SortablePlaylists.vue";
-import QuickConfirm from "@/components/QuickConfirm.vue";
 
 export default {
-	components: { PlaylistItem, QuickConfirm },
+	components: { PlaylistItem },
 	mixins: [SortablePlaylists],
 	computed: {
 		currentPlaylists() {