refactor: Made global components normal components again

frontend/src/components/PlaylistItem.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { defineAsyncComponent, ref, computed, onMounted } from "vue";
 import utils from "@/utils";
 
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
+
 const props = defineProps({
 	playlist: { type: Object, default: () => {} },
 	showOwner: { type: Boolean, default: false }

frontend/src/components/PlaylistTabBase.vue

@@ -16,6 +16,9 @@ import { useSortablePlaylists } from "@/composables/useSortablePlaylists";
 const PlaylistItem = defineAsyncComponent(
 	() => import("@/components/PlaylistItem.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" },

frontend/src/components/PunishmentItem.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { defineAsyncComponent, computed } from "vue";
 import { format, formatDistance, parseISO } from "date-fns";
 
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
+
 const props = defineProps({
 	punishment: { type: Object, default: () => {} }
 });

frontend/src/components/Queue.vue

@@ -11,6 +11,9 @@ import { useManageStationStore } from "@/stores/manageStation";
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" },

frontend/src/components/RunJobDropdown.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
-import { PropType, ref } from "vue";
+import { defineAsyncComponent, PropType, ref } from "vue";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useLongJobsStore } from "@/stores/longJobs";
 
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+
 defineProps({
 	jobs: { type: Array as PropType<any[]>, default: () => [] }
 });

frontend/src/components/SongItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { defineAsyncComponent, ref, onMounted, onUnmounted } from "vue";
 import { formatDistance, parseISO } from "date-fns";
 import { storeToRefs } from "pinia";
 import AddToPlaylistDropdown from "./AddToPlaylistDropdown.vue";
@@ -7,6 +7,13 @@ import { useUserAuthStore } from "@/stores/userAuth";
 import { useModalsStore } from "@/stores/modals";
 import utils from "@/utils";
 
+const SongThumbnail = defineAsyncComponent(
+	() => import("@/components/SongThumbnail.vue")
+);
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
+
 const props = defineProps({
 	song: {
 		type: Object,

frontend/src/components/modals/BulkActions.vue

@@ -8,6 +8,7 @@ import { useBulkActionsStore } from "@/stores/bulkActions";
 import { useModalsStore } from "@/stores/modals";
 import ws from "@/ws";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const AutoSuggest = defineAsyncComponent(
 	() => import("@/components/AutoSuggest.vue")
 );

frontend/src/components/modals/Confirm.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { onBeforeUnmount } from "vue";
+import { defineAsyncComponent, onBeforeUnmount } from "vue";
 import { storeToRefs } from "pinia";
 import { useConfirmStore } from "@/stores/confirm";
 import { useModalsStore } from "@/stores/modals";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/components/modals/CreatePlaylist.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, onBeforeUnmount } from "vue";
+import { defineAsyncComponent, ref, onBeforeUnmount } from "vue";
 import Toast from "toasters";
 import validation from "@/validation";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+
 defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/components/modals/CreateStation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onBeforeUnmount } from "vue";
+import { defineAsyncComponent, ref, onBeforeUnmount } from "vue";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
@@ -7,6 +7,8 @@ import { useCreateStationStore } from "@/stores/createStation";
 import { useModalsStore } from "@/stores/modals";
 import validation from "@/validation";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/components/modals/EditNews.vue

@@ -10,9 +10,13 @@ import { useEditNewsStore } from "@/stores/editNews";
 import { useModalsStore } from "@/stores/modals";
 import ws from "@/ws";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const SaveButton = defineAsyncComponent(
 	() => import("@/components/SaveButton.vue")
 );
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }

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

@@ -17,6 +17,7 @@ import { useModalsStore } from "@/stores/modals";
 import ws from "@/ws";
 import utils from "@/utils";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
 );
@@ -25,6 +26,9 @@ const AddSongs = defineAsyncComponent(() => import("./Tabs/AddSongs.vue"));
 const ImportPlaylists = defineAsyncComponent(
 	() => import("./Tabs/ImportPlaylists.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }

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

@@ -21,6 +21,7 @@ import { useModalsStore } from "@/stores/modals";
 import { useEditSongStore } from "@/stores/editSong";
 import { useStationStore } from "@/stores/station";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const FloatingBox = defineAsyncComponent(
 	() => import("@/components/FloatingBox.vue")
 );
@@ -37,6 +38,9 @@ const Discogs = defineAsyncComponent(() => import("./Tabs/Discogs.vue"));
 const ReportsTab = defineAsyncComponent(() => import("./Tabs/Reports.vue"));
 const Youtube = defineAsyncComponent(() => import("./Tabs/Youtube.vue"));
 const MusareSongs = defineAsyncComponent(() => import("./Tabs/Songs.vue"));
+const SongThumbnail = defineAsyncComponent(
+	() => import("@/components/SongThumbnail.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" },

frontend/src/components/modals/EditUser.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import {
+	defineAsyncComponent,
+	ref,
+	watch,
+	onMounted,
+	onBeforeUnmount
+} from "vue";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
 import ws from "@/ws";
@@ -8,6 +14,11 @@ import { useEditUserStore } from "@/stores/editUser";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/components/modals/ImportAlbum.vue

@@ -15,6 +15,7 @@ import { useModalsStore } from "@/stores/modals";
 import { useImportAlbumStore } from "@/stores/importAlbum";
 import ws from "@/ws";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
 );

frontend/src/components/modals/Login.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import Toast from "toasters";
 import { useUserAuthStore } from "@/stores/userAuth";
 import { useModalsStore } from "@/stores/modals";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+
 const route = useRoute();
 
 const email = ref("");

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

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
 import validation from "@/validation";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useManageStationStore } from "@/stores/manageStation";
 
+const InfoIcon = defineAsyncComponent(
+	() => import("@/components/InfoIcon.vue")
+);
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

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

@@ -13,6 +13,7 @@ import { useUserAuthStore } from "@/stores/userAuth";
 import { useModalsStore } from "@/stores/modals";
 import { useManageStationStore } from "@/stores/manageStation";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const Queue = defineAsyncComponent(() => import("@/components/Queue.vue"));
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
@@ -25,6 +26,9 @@ const PlaylistTabBase = defineAsyncComponent(
 	() => import("@/components/PlaylistTabBase.vue")
 );
 const Request = defineAsyncComponent(() => import("@/components/Request.vue"));
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }

frontend/src/components/modals/Register.vue

@@ -6,6 +6,7 @@ import { useUserAuthStore } from "@/stores/userAuth";
 import { useModalsStore } from "@/stores/modals";
 import validation from "@/validation";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const InputHelpBox = defineAsyncComponent(
 	() => import("@/components/InputHelpBox.vue")
 );

frontend/src/components/modals/RemoveAccount.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
@@ -8,6 +8,11 @@ import { useWebsocketsStore } from "@/stores/websockets";
 import { useRemoveAccountStore } from "@/stores/removeAccount";
 import { useModalsStore } from "@/stores/modals";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/components/modals/Report.vue

@@ -7,6 +7,7 @@ import { useModalsStore } from "@/stores/modals";
 import { useReportStore } from "@/stores/report";
 import ws from "@/ws";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
 );

frontend/src/components/modals/ViewApiRequest.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { defineAsyncComponent, ref, onMounted, onBeforeUnmount } from "vue";
 import Toast from "toasters";
 import VueJsonPretty from "vue-json-pretty";
 import { storeToRefs } from "pinia";
@@ -9,6 +9,11 @@ import { useViewApiRequestStore } from "@/stores/viewApiRequest";
 import ws from "@/ws";
 import "vue-json-pretty/lib/styles.css";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/components/modals/ViewPunishment.vue

@@ -7,6 +7,7 @@ import { useModalsStore } from "@/stores/modals";
 import { useViewPunishmentStore } from "@/stores/viewPunishment";
 import ws from "@/ws";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const PunishmentItem = defineAsyncComponent(
 	() => import("@/components/PunishmentItem.vue")
 );

frontend/src/components/modals/ViewReport.vue

@@ -9,12 +9,16 @@ import { useReports } from "@/composables/useReports";
 import ws from "@/ws";
 import { Report } from "@/types/report";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")
 );
 const ReportInfoItem = defineAsyncComponent(
 	() => import("@/components/ReportInfoItem.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const props = defineProps({
 	modalUuid: { type: String, default: "" }

frontend/src/components/modals/ViewYoutubeVideo.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount, ref } from "vue";
+import { defineAsyncComponent, onMounted, onBeforeUnmount, ref } from "vue";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
 import aw from "@/aw";
@@ -9,6 +9,11 @@ import { useModalsStore } from "@/stores/modals";
 import { useViewYoutubeVideoStore } from "@/stores/viewYoutubeVideo";
 import { useStationStore } from "@/stores/station";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+const SongThumbnail = defineAsyncComponent(
+	() => import("@/components/SongThumbnail.vue")
+);
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/components/modals/WhatIsNew.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount } from "vue";
+import { defineAsyncComponent, onMounted, onBeforeUnmount } from "vue";
 import { storeToRefs } from "pinia";
 import { formatDistance } from "date-fns";
 import { marked } from "marked";
 import dompurify from "dompurify";
 import { useWhatIsNewStore } from "@/stores/whatIsNew";
 
+const Modal = defineAsyncComponent(() => import("@/components/Modal.vue"));
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
+
 const props = defineProps({
 	modalUuid: { type: String, default: "" }
 });

frontend/src/main.ts

@@ -69,15 +69,6 @@ app.component("PageMetadata", {
 	}
 });
 
-const globalComponents = import.meta.glob("@/components/global/*.vue");
-Object.entries(globalComponents).forEach(
-	async ([componentFilePath, definition]) => {
-		const componentName = componentFilePath.split("/").pop().split(".")[0];
-		const component: any = await definition();
-		app.component(componentName, component.default);
-	}
-);
-
 app.directive("scroll", {
 	mounted(el, binding) {
 		const f = evt => {

frontend/src/pages/404.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
+</script>
+
 <template>
 	<div>
 		<main-header />

frontend/src/pages/About.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
+</script>
+
 <template>
 	<div class="app">
 		<page-metadata title="About" />

frontend/src/pages/Admin/News.vue

@@ -8,6 +8,12 @@ import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
 
 const { socket } = useWebsocketsStore();
 

frontend/src/pages/Admin/Playlists.vue

@@ -10,6 +10,9 @@ const AdvancedTable = defineAsyncComponent(
 const RunJobDropdown = defineAsyncComponent(
 	() => import("@/components/RunJobDropdown.vue")
 );
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
 
 const columnDefault = ref(<TableColumn>{
 	sortable: true,

frontend/src/pages/Admin/Reports.vue

@@ -8,6 +8,9 @@ import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
 );
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
 
 const columnDefault = ref(<TableColumn>{
 	sortable: true,

frontend/src/pages/Admin/Songs/Import.vue

@@ -10,6 +10,12 @@ import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
 );
+const InfoIcon = defineAsyncComponent(
+	() => import("@/components/InfoIcon.vue")
+);
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
 
 const router = useRouter();
 

frontend/src/pages/Admin/Songs/index.vue

@@ -13,6 +13,12 @@ const AdvancedTable = defineAsyncComponent(
 const RunJobDropdown = defineAsyncComponent(
 	() => import("@/components/RunJobDropdown.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+const SongThumbnail = defineAsyncComponent(
+	() => import("@/components/SongThumbnail.vue")
+);
 
 const route = useRoute();
 

frontend/src/pages/Admin/Stations.vue

@@ -11,6 +11,12 @@ const AdvancedTable = defineAsyncComponent(
 const RunJobDropdown = defineAsyncComponent(
 	() => import("@/components/RunJobDropdown.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
 
 const { socket } = useWebsocketsStore();
 

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

@@ -8,6 +8,12 @@ import { TableColumn, TableFilter, TableEvents } from "@/types/advancedTable";
 const AdvancedTable = defineAsyncComponent(
 	() => import("@/components/AdvancedTable.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
 
 const { socket } = useWebsocketsStore();
 

frontend/src/pages/Admin/YouTube/Videos.vue

@@ -17,6 +17,9 @@ const AdvancedTable = defineAsyncComponent(
 const RunJobDropdown = defineAsyncComponent(
 	() => import("@/components/RunJobDropdown.vue")
 );
+const SongThumbnail = defineAsyncComponent(
+	() => import("@/components/SongThumbnail.vue")
+);
 
 const { setJob } = useLongJobsStore();
 

frontend/src/pages/Admin/YouTube/index.vue

@@ -16,6 +16,9 @@ const RunJobDropdown = defineAsyncComponent(
 const LineChart = defineAsyncComponent(
 	() => import("@/components/LineChart.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const route = useRoute();
 

frontend/src/pages/Admin/index.vue

@@ -10,6 +10,12 @@ import { useRoute, useRouter } from "vue-router";
 import { useWebsocketsStore } from "@/stores/websockets";
 import keyboardShortcuts from "@/keyboardShortcuts";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
 const FloatingBox = defineAsyncComponent(
 	() => import("@/components/FloatingBox.vue")
 );

frontend/src/pages/Home.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from "vue-router";
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import {
+	defineAsyncComponent,
+	ref,
+	computed,
+	onMounted,
+	onBeforeUnmount
+} from "vue";
 import { Sortable } from "sortablejs-vue3";
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
@@ -10,6 +16,19 @@ import { useModalsStore } from "@/stores/modals";
 import keyboardShortcuts from "@/keyboardShortcuts";
 import ws from "@/ws";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
+const SongThumbnail = defineAsyncComponent(
+	() => import("@/components/SongThumbnail.vue")
+);
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
+
 const userAuthStore = useUserAuthStore();
 const route = useRoute();
 const router = useRouter();

frontend/src/pages/News.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { defineAsyncComponent, ref, onMounted } from "vue";
 
 import { formatDistance } from "date-fns";
 import { marked } from "marked";
@@ -8,6 +8,16 @@ import { useWebsocketsStore } from "@/stores/websockets";
 
 import ws from "@/ws";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
+const UserLink = defineAsyncComponent(
+	() => import("@/components/UserLink.vue")
+);
+
 const { socket } = useWebsocketsStore();
 
 const news = ref([]);

frontend/src/pages/Privacy.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
+</script>
+
 <template>
 	<div class="app">
 		<page-metadata title="Privacy policy" />

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

@@ -9,6 +9,9 @@ import ws from "@/ws";
 const ActivityItem = defineAsyncComponent(
 	() => import("@/components/ActivityItem.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const { socket } = useWebsocketsStore();
 

frontend/src/pages/Profile/index.vue

@@ -8,6 +8,12 @@ import { useUserAuthStore } from "@/stores/userAuth";
 import ws from "@/ws";
 import { useTabQueryHandler } from "@/composables/useTabQueryHandler";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
 const ProfilePicture = defineAsyncComponent(
 	() => import("@/components/ProfilePicture.vue")
 );

frontend/src/pages/ResetPassword.vue

@@ -6,6 +6,12 @@ import { useUserAuthStore } from "@/stores/userAuth";
 import validation from "@/validation";
 import { useWebsocketsStore } from "@/stores/websockets";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
 const InputHelpBox = defineAsyncComponent(
 	() => import("@/components/InputHelpBox.vue")
 );

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

@@ -15,6 +15,9 @@ const InputHelpBox = defineAsyncComponent(
 const SaveButton = defineAsyncComponent(
 	() => import("@/components/SaveButton.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const settingsStore = useSettingsStore();
 const userAuthStore = useUserAuthStore();

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

@@ -10,6 +10,9 @@ import _validation from "@/validation";
 const InputHelpBox = defineAsyncComponent(
 	() => import("@/components/InputHelpBox.vue")
 );
+const QuickConfirm = defineAsyncComponent(
+	() => import("@/components/QuickConfirm.vue")
+);
 
 const settingsStore = useSettingsStore();
 const userAuthStore = useUserAuthStore();

frontend/src/pages/Settings/index.vue

@@ -7,6 +7,12 @@ import { useWebsocketsStore } from "@/stores/websockets";
 import ws from "@/ws";
 import { useTabQueryHandler } from "@/composables/useTabQueryHandler";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
 const SecuritySettings = defineAsyncComponent(
 	() => import("./Tabs/Security.vue")
 );

frontend/src/pages/Station/index.vue

@@ -23,6 +23,12 @@ import ws from "@/ws";
 import keyboardShortcuts from "@/keyboardShortcuts";
 import utils from "@/utils";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
 const FloatingBox = defineAsyncComponent(
 	() => import("@/components/FloatingBox.vue")
 );

frontend/src/pages/Team.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref } from "vue";
 
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
 const ProfilePicture = defineAsyncComponent(
 	() => import("@/components/ProfilePicture.vue")
 );

frontend/src/pages/Terms.vue

@@ -1,3 +1,14 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const MainHeader = defineAsyncComponent(
+	() => import("@/components/MainHeader.vue")
+);
+const MainFooter = defineAsyncComponent(
+	() => import("@/components/MainFooter.vue")
+);
+</script>
+
 <template>
 	<div class="app">
 		<page-metadata title="Terms of Service" />