refactor: Dont use export default for composables

frontend/src/components/AdvancedTable.vue

@@ -17,7 +17,7 @@ import { useWebsocketsStore } from "@/stores/websockets";
 import { useModalsStore } from "@/stores/modals";
 import keyboardShortcuts from "@/keyboardShortcuts";
 import ws from "@/ws";
-import useDragBox from "@/composables/useDragBox";
+import { useDragBox } from "@/composables/useDragBox";
 
 const { dragBox, setInitialBox, onDragBox, resetBoxPosition } = useDragBox();
 

frontend/src/components/FloatingBox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, defineExpose, nextTick } from "vue";
-import useDragBox from "@/composables/useDragBox";
+import { useDragBox } from "@/composables/useDragBox";
 
 const props = defineProps({
 	id: { type: String, default: null },

frontend/src/components/PlaylistTabBase.vue

@@ -11,7 +11,7 @@ import { useUserPlaylistsStore } from "@/stores/userPlaylists";
 import { useModalsStore } from "@/stores/modals";
 import { useManageStationStore } from "@/stores/manageStation";
 
-import useSortablePlaylists from "@/composables/useSortablePlaylists";
+import { useSortablePlaylists } from "@/composables/useSortablePlaylists";
 
 const PlaylistItem = defineAsyncComponent(
 	() => import("@/components/PlaylistItem.vue")

frontend/src/components/Request.vue

@@ -4,8 +4,8 @@ import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useStationStore } from "@/stores/station";
 import { useManageStationStore } from "@/stores/manageStation";
-import useSearchYoutube from "@/composables/useSearchYoutube";
-import useSearchMusare from "@/composables/useSearchMusare";
+import { useSearchYoutube } from "@/composables/useSearchYoutube";
+import { useSearchMusare } from "@/composables/useSearchMusare";
 
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")

frontend/src/components/modals/EditPlaylist/Tabs/AddSongs.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch, onMounted } from "vue";
 import { storeToRefs } from "pinia";
-import useSearchYoutube from "@/composables/useSearchYoutube";
-import useSearchMusare from "@/composables/useSearchMusare";
+import { useSearchYoutube } from "@/composables/useSearchYoutube";
+import { useSearchMusare } from "@/composables/useSearchMusare";
 import { useEditPlaylistStore } from "@/stores/editPlaylist";
 
 const SongItem = defineAsyncComponent(

frontend/src/components/modals/EditPlaylist/Tabs/ImportPlaylists.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Toast from "toasters";
 import { storeToRefs } from "pinia";
-import useSearchYoutube from "@/composables/useSearchYoutube";
+import { useSearchYoutube } from "@/composables/useSearchYoutube";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useLongJobsStore } from "@/stores/longJobs";
 import { useEditPlaylistStore } from "@/stores/editPlaylist";

frontend/src/components/modals/EditSong/Tabs/Songs.vue

@@ -5,7 +5,7 @@ import { storeToRefs } from "pinia";
 
 import { useEditSongStore } from "@/stores/editSong";
 
-import useSearchMusare from "@/composables/useSearchMusare";
+import { useSearchMusare } from "@/composables/useSearchMusare";
 
 const SongItem = defineAsyncComponent(
 	() => import("@/components/SongItem.vue")

frontend/src/components/modals/EditSong/Tabs/Youtube.vue

@@ -3,7 +3,7 @@ import { storeToRefs } from "pinia";
 
 import { useEditSongStore } from "@/stores/editSong";
 
-import useSearchYoutube from "@/composables/useSearchYoutube";
+import { useSearchYoutube } from "@/composables/useSearchYoutube";
 
 import SearchQueryItem from "../../../SearchQueryItem.vue";
 

frontend/src/composables/useDragBox.ts

@@ -1,6 +1,6 @@
 import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
-export default function useDragBox() {
+export const useDragBox = () => {
 	const dragBox = ref({
 		top: 0,
 		left: 0,
@@ -168,4 +168,4 @@ export default function useDragBox() {
 		onWindowResizeDragBox,
 		setOnDragBoxUpdate
 	};
-}
+};

frontend/src/composables/useSearchMusare.ts

@@ -2,7 +2,7 @@ import { ref, computed } from "vue";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
 
-export default function useSearchMusare() {
+export const useSearchMusare = () => {
 	const musareSearch = ref({
 		query: "",
 		searchedQuery: "",
@@ -92,4 +92,4 @@ export default function useSearchMusare() {
 		searchForMusareSongs,
 		addMusareSongToPlaylist
 	};
-}
+};

frontend/src/composables/useSearchYoutube.ts

@@ -2,7 +2,7 @@ import { ref } from "vue";
 import Toast from "toasters";
 import { useWebsocketsStore } from "@/stores/websockets";
 
-export default function useSearchYoutube() {
+export const useSearchYoutube = () => {
 	const youtubeSearch = ref({
 		songs: {
 			results: [],
@@ -100,4 +100,4 @@ export default function useSearchYoutube() {
 		loadMoreSongs,
 		addYouTubeSongToPlaylist
 	};
-}
+};

frontend/src/composables/useSortablePlaylists.ts

@@ -7,7 +7,7 @@ import { useUserAuthStore } from "@/stores/userAuth";
 import { useUserPlaylistsStore } from "@/stores/userPlaylists";
 import ws from "@/ws";
 
-export default function useSortablePlaylists() {
+export const useSortablePlaylists = () => {
 	const orderOfPlaylists = ref([]);
 	const drag = ref(false);
 	const userId = ref();
@@ -201,4 +201,4 @@ export default function useSortablePlaylists() {
 		savePlaylistOrder,
 		calculatePlaylistOrder
 	};
-}
+};

frontend/src/composables/useTabQueryHandler.ts

@@ -1,7 +1,7 @@
 import { ref } from "vue";
 import { useRoute } from "vue-router";
 
-export default function useTabQueryHandler(defaultTab) {
+export const useTabQueryHandler = defaultTab => {
 	const route = useRoute();
 
 	const tab = ref(defaultTab);
@@ -34,4 +34,4 @@ export default function useTabQueryHandler(defaultTab) {
 		tab,
 		showTab
 	};
-}
+};

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent, onMounted } from "vue";
-import useSortablePlaylists from "@/composables/useSortablePlaylists";
+import { useSortablePlaylists } from "@/composables/useSortablePlaylists";
 import { useModalsStore } from "@/stores/modals";
 
 const PlaylistItem = defineAsyncComponent(

frontend/src/pages/Profile/index.vue

@@ -6,7 +6,7 @@ import { storeToRefs } from "pinia";
 import { useWebsocketsStore } from "@/stores/websockets";
 import { useUserAuthStore } from "@/stores/userAuth";
 import ws from "@/ws";
-import useTabQueryHandler from "@/composables/useTabQueryHandler";
+import { useTabQueryHandler } from "@/composables/useTabQueryHandler";
 
 const ProfilePicture = defineAsyncComponent(
 	() => import("@/components/ProfilePicture.vue")

frontend/src/pages/Settings/index.vue

@@ -5,7 +5,7 @@ import Toast from "toasters";
 import { useSettingsStore } from "@/stores/settings";
 import { useWebsocketsStore } from "@/stores/websockets";
 import ws from "@/ws";
-import useTabQueryHandler from "@/composables/useTabQueryHandler";
+import { useTabQueryHandler } from "@/composables/useTabQueryHandler";
 
 const SecuritySettings = defineAsyncComponent(
 	() => import("./Tabs/Security.vue")

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

@@ -4,7 +4,7 @@ import { defineAsyncComponent, watch, onMounted } from "vue";
 import { storeToRefs } from "pinia";
 import { useUserAuthStore } from "@/stores/userAuth";
 import { useStationStore } from "@/stores/station";
-import useTabQueryHandler from "@/composables/useTabQueryHandler";
+import { useTabQueryHandler } from "@/composables/useTabQueryHandler";
 
 const Queue = defineAsyncComponent(() => import("@/components/Queue.vue"));
 const Users = defineAsyncComponent(