refactor: Clarified watch usage

frontend/src/components/AdvancedTable.vue

@@ -1142,14 +1142,11 @@ onUnmounted(() => {
 	}
 });
 
-watch(
-	() => selectedRows.value,
-	(newSelectedRows, oldSelectedRows) => {
-		// If selected rows goes from zero to one or more selected, trigger onWindowResize, as otherwise the popup could be out of bounds
-		if (oldSelectedRows.length === 0 && newSelectedRows.length > 0)
-			onWindowResize();
-	}
-);
+watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
+	// If selected rows goes from zero to one or more selected, trigger onWindowResize, as otherwise the popup could be out of bounds
+	if (oldSelectedRows.length === 0 && newSelectedRows.length > 0)
+		onWindowResize();
+});
 </script>
 
 <template>

frontend/src/components/PunishmentItem.vue

@@ -8,11 +8,14 @@ const props = defineProps({
 
 const active = ref(false);
 
-watch(props.punishment, punishment => {
-	active.value =
-		punishment.active &&
-		new Date(punishment.expiresAt).getTime() > Date.now();
-});
+watch(
+	() => props.punishment,
+	punishment => {
+		active.value =
+			punishment.active &&
+			new Date(punishment.expiresAt).getTime() > Date.now();
+	}
+);
 </script>
 
 <template>

frontend/src/components/global/MainHeader.vue

@@ -65,12 +65,9 @@ const onResize = () => {
 	windowWidth.value = window.innerWidth;
 };
 
-watch(
-	() => localNightmode.value,
-	nightmode => {
-		if (localNightmode.value !== nightmode) toggleNightmode(nightmode);
-	}
-);
+watch(localNightmode, nightmode => {
+	if (localNightmode.value !== nightmode) toggleNightmode(nightmode);
+});
 
 onMounted(async () => {
 	localNightmode.value = JSON.parse(localStorage.getItem("nightmode"));

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

@@ -39,45 +39,56 @@ const {
 	addMusareSongToPlaylist
 } = useSearchMusare();
 
-watch(youtubeSearch.value.songs.results, songs => {
-	songs.forEach((searchItem, index) =>
-		playlist.songs.find(song => {
-			if (song.youtubeId === searchItem.id)
-				youtubeSearch.value.songs.results[index].isAddedToQueue = true;
-			return song.youtubeId === searchItem.id;
-		})
-	);
-});
-watch(musareSearch.value.results, songs => {
-	songs.forEach((searchItem, index) =>
-		playlist.songs.find(song => {
-			if (song._id === searchItem._id)
-				musareSearch.value.results[index].isAddedToQueue = true;
+watch(
+	() => youtubeSearch.value.songs.results,
+	songs => {
+		songs.forEach((searchItem, index) =>
+			playlist.songs.find(song => {
+				if (song.youtubeId === searchItem.id)
+					youtubeSearch.value.songs.results[index].isAddedToQueue =
+						true;
+				return song.youtubeId === searchItem.id;
+			})
+		);
+	}
+);
+watch(
+	() => musareSearch.value.results,
+	songs => {
+		songs.forEach((searchItem, index) =>
+			playlist.songs.find(song => {
+				if (song._id === searchItem._id)
+					musareSearch.value.results[index].isAddedToQueue = true;
 
-			return song._id === searchItem._id;
-		})
-	);
-});
-watch(playlist.songs, () => {
-	youtubeSearch.value.songs.results.forEach((searchItem, index) =>
-		playlist.songs.find(song => {
-			youtubeSearch.value.songs.results[index].isAddedToQueue = false;
-			if (song.youtubeId === searchItem.id)
-				youtubeSearch.value.songs.results[index].isAddedToQueue = true;
+				return song._id === searchItem._id;
+			})
+		);
+	}
+);
+watch(
+	() => playlist.songs,
+	() => {
+		youtubeSearch.value.songs.results.forEach((searchItem, index) =>
+			playlist.songs.find(song => {
+				youtubeSearch.value.songs.results[index].isAddedToQueue = false;
+				if (song.youtubeId === searchItem.id)
+					youtubeSearch.value.songs.results[index].isAddedToQueue =
+						true;
 
-			return song.youtubeId === searchItem.id;
-		})
-	);
-	musareSearch.value.results.forEach((searchItem, index) =>
-		playlist.songs.find(song => {
-			musareSearch.value.results[index].isAddedToQueue = false;
-			if (song.youtubeId === searchItem.youtubeId)
-				musareSearch.value.results[index].isAddedToQueue = true;
+				return song.youtubeId === searchItem.id;
+			})
+		);
+		musareSearch.value.results.forEach((searchItem, index) =>
+			playlist.songs.find(song => {
+				musareSearch.value.results[index].isAddedToQueue = false;
+				if (song.youtubeId === searchItem.youtubeId)
+					musareSearch.value.results[index].isAddedToQueue = true;
 
-			return song.youtubeId === searchItem.youtubeId;
-		})
-	);
-});
+				return song.youtubeId === searchItem.youtubeId;
+			})
+		);
+	}
+);
 
 onMounted(async () => {
 	sitename.value = await lofig.get("siteSettings.sitename");

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

@@ -1053,14 +1053,11 @@ watch(
 	() => song.value.skipDuration,
 	() => drawCanvas()
 );
-watch(
-	() => youtubeId.value,
-	(_youtubeId, _oldYoutubeId) => {
-		console.log("NEW YOUTUBE ID", _youtubeId);
-		unloadSong(_oldYoutubeId);
-		loadSong(_youtubeId);
-	}
-);
+watch(youtubeId, (_youtubeId, _oldYoutubeId) => {
+	console.log("NEW YOUTUBE ID", _youtubeId);
+	unloadSong(_oldYoutubeId);
+	loadSong(_youtubeId);
+});
 
 onMounted(async () => {
 	activityWatchVideoDataInterval.value = setInterval(() => {

frontend/src/components/modals/EditUser.vue

@@ -148,10 +148,7 @@ const removeSessions = () => {
 };
 
 // When the userId changes, run init. There can be a delay between the modal opening and the required data (userId) being available
-watch(
-	() => userId.value,
-	() => init()
-);
+watch(userId, () => init());
 
 onMounted(() => {
 	ws.onConnect(init);

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

@@ -124,17 +124,23 @@ const resetQueue = () => {
 	});
 };
 
-watch(station.value.requests, () => {
-	if (tab.value === "request" && !canRequest()) {
-		if (isOwnerOrAdmin()) showTab("settings");
-		else if (!(sector.value === "home" && !isOwnerOrAdmin()))
-			closeCurrentModal();
+watch(
+	() => station.value.requests,
+	() => {
+		if (tab.value === "request" && !canRequest()) {
+			if (isOwnerOrAdmin()) showTab("settings");
+			else if (!(sector.value === "home" && !isOwnerOrAdmin()))
+				closeCurrentModal();
+		}
 	}
-});
-watch(station.value.autofill, value => {
-	if (tab.value === "autofill" && value && !value.enabled)
-		showTab("settings");
-});
+);
+watch(
+	() => station.value.autofill,
+	value => {
+		if (tab.value === "autofill" && value && !value.enabled)
+			showTab("settings");
+	}
+);
 
 onMounted(() => {
 	socket.dispatch(`stations.getStationById`, stationId.value, res => {

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

@@ -34,10 +34,12 @@ const canRequest = (requireLogin = true) =>
 	(station.value.requests.access === "user" ||
 		(station.value.requests.access === "owner" && isOwnerOrAdmin()));
 
-// TODO fix
-watch(station.value.requests, () => {
-	if (tab.value === "request" && !canRequest()) showTab("queue");
-});
+watch(
+	() => station.value.requests,
+	() => {
+		if (tab.value === "request" && !canRequest()) showTab("queue");
+	}
+);
 
 onMounted(() => {
 	if (