Added reload button in favorites tab

public/index.html

@@ -472,7 +472,11 @@ <h1>Favorites</h1>
 								<button class="favorites_tablinks" id="favorites_album_tab">Albums</button>
 								<button class="favorites_tablinks" id="favorites_artist_tab">Artists</button>
 								<button class="favorites_tablinks" id="favorites_track_tab">Tracks</button>
+								<div @click="reloadTabs" role="button" aria-label="reload" ref="reloadButton" class="right clickable reload-button">
+									<i class="material-icons">sync</i>
+								</div>
 							</div>
+
 							<div id="playlist_favorites" class="favorites_tabcontent">
 								<div v-if="playlists.length == 0">
 									<h1>No Playlists found</h1>
@@ -1415,4 +1419,4 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 
 	<script src="/public/js/bundle.js"></script>
 
-</html>
+</html>

src/js/modules/components/favorites-tab.js

@@ -47,18 +47,27 @@ const FavoritesTab = new Vue({
 		updated_userTracks(data) {
 			this.tracks = data
 		},
-		initFavorites(data) {
+		reloadTabs(){
+			this.$refs.reloadButton.classList.add("spin")
+			socket.emit('update_userFavorites')
+			if (localStorage.getItem('spotifyUser')) socket.emit('update_userSpotifyPlaylists', localStorage.getItem('spotifyUser'))
+		},
+		updated_userFavorites(data){
 			const { tracks, albums, artists, playlists } = data
-
 			this.tracks = tracks
 			this.albums = albums
 			this.artists = artists
 			this.playlists = playlists
+			this.$refs.reloadButton.classList.remove("spin")
+		},
+		initFavorites(data) {
+			this.updated_userFavorites(data)
 			document.getElementById('favorites_playlist_tab').click()
 		}
 	},
 	mounted() {
 		socket.on('init_favorites', this.initFavorites)
+		socket.on('updated_userFavorites', this.updated_userFavorites)
 		socket.on('updated_userSpotifyPlaylists', this.updated_userSpotifyPlaylists)
 		socket.on('updated_userPlaylists', this.updated_userPlaylists)
 		socket.on('updated_userAlbums', this.updated_userAlbums)

src/styles/scss/tabs/_favorites-tab.scss

@@ -1,3 +1,27 @@
 .favorites_tablinks.active {
 	color: var(--accent-text);
 }
+
+div.reload-button {
+	width: 36px;
+	height: 36px;
+}
+div.reload-button i{
+	padding: 6px;
+}
+
+div.reload-button.spin {
+	animation-name: spin;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-out;
+}
+
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
+}