changed purple sidebar link active color; now app.js is importing all the vue components to make sure they are all mounted

src/js/app.js

@@ -1,3 +1,17 @@
+// Global Vue components
+import './modules/components/LoadingPlaceholder.js'
+
+// Vue views components
+import './modules/components/artist-tab.js'
+import './modules/components/charts-tab.js'
+import './modules/components/errors-tab.js'
+import './modules/components/favorites-tab.js'
+import './modules/components/home-tab.js'
+import './modules/components/link-analyzer-tab.js'
+import './modules/components/main-search.js'
+import './modules/components/settings-tab.js'
+import './modules/components/tracklist-tab.js'
+
 import $ from 'jquery'
 import { socket } from './modules/socket.js'
 import { toast } from './modules/toasts.js'
@@ -10,8 +24,7 @@ import TrackPreview from './modules/track-preview.js'
 /* ===== App initialization ===== */
 
 function startApp() {
-	// Setting current theme
-	setUserTheme()
+	setCurrentUserTheme()
 
 	Downloads.init()
 	QualityModal.init()
@@ -33,9 +46,8 @@ window.addEventListener('pywebviewready', initClient)
 /**
  * Sets the current theme according to
  * the localStorage saved theme.
- * @since		0.1.6
  */
-function setUserTheme() {
+function setCurrentUserTheme() {
 	let selectedTheme = localStorage.getItem('selectedTheme')
 
 	if (selectedTheme) {

src/js/modules/components/LoadingPlaceholder.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+Vue.component('loading-placeholder', {
+	template: `<div class="loading_placeholder">
+		<span class="loading_placeholder__text">Loading...</span>
+		<div class="lds-ring">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+	</div>`
+})

src/js/modules/tabs.js

@@ -1,9 +1,6 @@
 import ArtistTab from './components/artist-tab.js'
 import TracklistTab from './components/tracklist-tab.js'
 import LinkAnalyzerTab from './components/link-analyzer-tab.js'
-import HomeTab from './components/home-tab.js'
-import ChartsTab from './components/charts-tab.js'
-import FavoritesTab from './components/favorites-tab.js'
 import ErrorsTab from './components/errors-tab.js'
 import { socket } from './socket.js'
 import SettingsTab from './components/settings-tab.js'
@@ -73,7 +70,6 @@ function linkListeners() {
  * according to clicked icon.
  * Uses event delegation
  * @param		{Event}		event
- * @since		0.1.0
  */
 function handleSidebarClick(event) {
 	const { target } = event

src/styles/scss/_sidebar.scss

@@ -74,7 +74,7 @@ $sidebar-delay: 75ms;
 
 				// Fix for purple theme in which grayscale shows incoherent color
 				html[data-theme='purple'] & {
-					background: var(--sidebar-link-bg);
+					background: var(--sidebar-link-bg-20);
 					filter: grayscale(0);
 				}