added dark mode toggle with animation, continued re-organization of settings tab

public/js/modules/components/settings-tab.js

@@ -2,13 +2,23 @@ import { toast } from '../toasts.js'
 import { socket } from '../socket.js'
 
 const SettingsTab = new Vue({
-	data() {
-		return {
-			settings: { tags: {} },
-			lastSettings: {},
-			lastCredentials: {},
-			spotifyFeatures: {},
-			defaultSettings: {}
+	data: () => ({
+		settings: { tags: {} },
+		lastSettings: {},
+		lastCredentials: {},
+		spotifyFeatures: {},
+		defaultSettings: {}
+	}),
+	computed: {
+		darkMode: {
+			get() {
+				return 'true' === localStorage.getItem('darkMode')
+			},
+			set(wantDarkMode) {
+				document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
+
+				localStorage.setItem('darkMode', wantDarkMode)
+			}
 		}
 	},
 	methods: {
@@ -28,7 +38,7 @@ const SettingsTab = new Vue({
 			this.lastCredentials = { ...SettingsTab.spotifyFeatures }
 			socket.emit('saveSettings', this.lastSettings, this.lastCredentials)
 		},
-		loadSettings(settings, spotifyCredentials, defaults=null) {
+		loadSettings(settings, spotifyCredentials, defaults = null) {
 			if (defaults) this.defaultSettings = { ...defaults }
 			this.lastSettings = { ...settings }
 			this.lastCredentials = { ...spotifyCredentials }
@@ -52,7 +62,7 @@ const SettingsTab = new Vue({
 			this.loadSettings(settings, credentials)
 			toast('Settings updated!', 'settings')
 		},
-		resetSettings(){
+		resetSettings() {
 			this.settings = { ...this.defaultSettings }
 		}
 	},

public/js/modules/components/tracklist-tab.js

@@ -5,7 +5,7 @@ import QualityModal from '../quality-modal.js'
 import TrackPreview from '../track-preview.js'
 
 const TracklistTab = new Vue({
-	data: {
+	data: () => ({
 		title: '',
 		metadata: '',
 		release_date: '',
@@ -16,7 +16,7 @@ const TracklistTab = new Vue({
 		link: '',
 		head: null,
 		body: []
-	},
+	}),
 	methods: {
 		artistView,
 		albumView,
@@ -32,21 +32,21 @@ const TracklistTab = new Vue({
 			this.head = []
 			this.body = []
 		},
-		addToQueue: function (e) {
+		addToQueue(e) {
 			e.stopPropagation()
 			Downloads.sendAddToQueue(e.currentTarget.dataset.link)
 		},
-		openQualityModal: function (e) {
+		openQualityModal(e) {
 			QualityModal.open(e.currentTarget.dataset.link)
 		},
-		toggleAll: function (e) {
+		toggleAll(e) {
 			this.body.forEach(item => {
 				if (item.type == 'track') {
 					item.selected = e.currentTarget.checked
 				}
 			})
 		},
-		selectedLinks: function () {
+		selectedLinks() {
 			var selected = []
 			if (this.body) {
 				this.body.forEach(item => {