feat: isolated downloads and slim sidebar logic to store

src/components/TheSidebar.vue

@@ -2,6 +2,7 @@
 	<aside
 		id="sidebar"
 		class="top-0 left-0 flex flex-col w-64 h-screen bg-panels-bg text-foreground"
+		:class="{ slim: isSlim }"
 		role="navigation"
 		aria-label="sidebar"
 		ref="sidebar"
@@ -63,13 +64,16 @@
 </template>
 
 <style lang="scss" scoped>
-#sidebar.slim{
+#sidebar.slim {
 	width: 46px;
 }
-#sidebar.slim .main_tablinks_text{
+
+#sidebar.slim .main_tablinks_text {
 	display: none;
 }
-#sidebar.slim #theme_selector, #sidebar.slim #theme_togglers{
+
+#sidebar.slim #theme_selector,
+#sidebar.slim #theme_togglers {
 	display: inline-grid;
 	grid-gap: 8px;
 }
@@ -122,6 +126,7 @@
 
 <script>
 import { socket } from '@/utils/socket'
+import { mapGetters } from 'vuex'
 
 export default {
 	data() {
@@ -191,6 +196,11 @@ export default {
 			]
 		}
 	},
+	computed: {
+		...mapGetters({
+			isSlim: 'getSlimSidebar'
+		})
+	},
 	mounted() {
 		/* === Online status handling === */
 		this.appOnline = navigator.onLine

src/components/downloads/TheDownloadBar.vue

@@ -1,7 +1,7 @@
 <template>
 	<section
 		id="download_tab_container"
-		class="block bg-panels-bg text-foreground h-screen"
+		class="block h-screen bg-panels-bg text-foreground"
 		:class="{ 'tab-hidden': !isExpanded, 'w-8': !isExpanded }"
 		@transitionend="$refs.container.style.transition = ''"
 		ref="container"
@@ -51,7 +51,7 @@
 			</i>
 		</div>
 
-		<div v-show="isExpanded" id="download_list" class="w-full pr-2" ref="list">
+		<div v-show="isExpanded" id="download_list" class="w-full pr-2" :class="{ slim: isSlim }" ref="list">
 			<QueueItem
 				v-for="item in queueList"
 				:queue-item="item"
@@ -140,7 +140,8 @@ export default {
 	},
 	computed: {
 		...mapGetters({
-			clientMode: 'getClientMode'
+			clientMode: 'getClientMode',
+			isSlim: 'getSlimDownloads'
 		})
 	},
 	created() {

src/components/pages/Settings.vue

@@ -60,8 +60,8 @@
 		<div class="settings-group">
 			<h3 class="settings-group__header"><i class="material-icons">language</i>{{ $t('settings.languages') }}</h3>
 
-			<div class="my-5">
-				<span
+			<ul class="my-5">
+				<li
 					v-for="locale in locales"
 					:key="locale"
 					class="inline-flex items-center locale-flag"
@@ -70,7 +70,7 @@
 					v-html="flags[locale]"
 					:title="locale"
 				/>
-			</div>
+			</ul>
 		</div>
 
 		<BaseAccordion class="settings-group">
@@ -82,11 +82,11 @@
 			</template>
 
 			<label class="with-checkbox">
-				<input type="checkbox" v-model="changeSlimDownloads" />
+				<input type="checkbox" v-model="modelSlimDownloads" />
 				<span class="checkbox-text">{{ $t('settings.appearance.slimDownloadTab') }}</span>
 			</label>
 			<label class="mb-4 with-checkbox">
-				<input type="checkbox" v-model="changeSlimSidebar" />
+				<input type="checkbox" v-model="modelSlimSidebar" />
 				<span class="checkbox-text">{{ $t('settings.appearance.slimSidebar') }}</span>
 			</label>
 		</BaseAccordion>
@@ -780,8 +780,6 @@ export default {
 			defaultSettings: {},
 			lastUser: '',
 			spotifyUser: '',
-			slimDownloads: false,
-			slimSidebar: false,
 			accountNum: 0,
 			accounts: []
 		}
@@ -792,8 +790,13 @@ export default {
 			user: 'getUser',
 			isLoggedIn: 'isLoggedIn',
 			clientMode: 'getClientMode',
-			previewVolume: 'getPreviewVolume'
+			previewVolume: 'getPreviewVolume',
+			hasSlimDownloads: 'getSlimDownloads',
+			hasSlimSidebar: 'getSlimSidebar'
 		}),
+		needToWait() {
+			return Object.keys(this.getSettings).length === 0
+		},
 		modelVolume: {
 			get() {
 				return this.previewVolume
@@ -802,31 +805,20 @@ export default {
 				this.setPreviewVolume(value)
 			}, 20)
 		},
-		needToWait() {
-			return Object.keys(this.getSettings).length === 0
-		},
-		changeSlimDownloads: {
+		modelSlimDownloads: {
 			get() {
-				return this.slimDownloads
+				return this.hasSlimDownloads
 			},
 			set(wantSlimDownloads) {
-				this.slimDownloads = wantSlimDownloads
-				document.getElementById('download_list').classList.toggle('slim', wantSlimDownloads)
-				localStorage.setItem('slimDownloads', wantSlimDownloads)
+				this.setSlimDownloads(wantSlimDownloads)
 			}
 		},
-		changeSlimSidebar: {
+		modelSlimSidebar: {
 			get() {
-				return this.slimSidebar
+				return this.hasSlimSidebar
 			},
 			set(wantSlimSidebar) {
-				this.slimSidebar = wantSlimSidebar
-				document.getElementById('sidebar').classList.toggle('slim', wantSlimSidebar)
-				// Moves all toast messages when the option changes
-				Array.from(document.getElementsByClassName('toastify')).forEach(toast => {
-					toast.style.transform = `translate(${wantSlimSidebar ? '3rem' : '14rem'}, 0)`
-				})
-				localStorage.setItem('slimSidebar', wantSlimSidebar)
+				this.setSlimSidebar(wantSlimSidebar)
 			}
 		},
 		pictureHref() {
@@ -854,18 +846,6 @@ export default {
 			socket.emit('update_userSpotifyPlaylists', spotifyUser)
 		}
 
-		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
-		this.changeSlimSidebar = 'true' === localStorage.getItem('slimSidebar')
-
-		let volume = parseInt(localStorage.getItem('previewVolume'))
-
-		if (isNaN(volume)) {
-			volume = 80
-			localStorage.setItem('previewVolume', volume)
-		}
-
-		this.setPreviewVolume(volume)
-
 		socket.on('updateSettings', this.updateSettings)
 		socket.on('accountChanged', this.accountChanged)
 		socket.on('familyAccounts', this.initAccounts)
@@ -883,7 +863,9 @@ export default {
 	methods: {
 		...mapActions({
 			dispatchARL: 'setARL',
-			setPreviewVolume: 'setPreviewVolume'
+			setPreviewVolume: 'setPreviewVolume',
+			setSlimDownloads: 'setSlimDownloads',
+			setSlimSidebar: 'setSlimSidebar'
 		}),
 		revertSettings() {
 			this.settings = JSON.parse(JSON.stringify(this.lastSettings))
@@ -908,12 +890,6 @@ export default {
 			this.currentLocale = newLocale
 			localStorage.setItem('locale', newLocale)
 		},
-		/**
-		 * @deprecated
-		 */
-		updateMaxVolume() {
-			localStorage.setItem('previewVolume', this.previewVolume)
-		},
 		saveSettings() {
 			this.lastSettings = JSON.parse(JSON.stringify(this.settings))
 			this.lastCredentials = JSON.parse(JSON.stringify(this.spotifyFeatures))

src/data/settings.js

@@ -25,3 +25,31 @@ export function getSettingsData() {
 		})
 	}
 }
+
+/**
+ * @returns	{number}
+ */
+export function getInitialPreviewVolume() {
+	let volume = parseInt(localStorage.getItem('previewVolume'))
+
+	if (isNaN(volume)) {
+		volume = 80
+		localStorage.setItem('previewVolume', volume.toString())
+	}
+
+	return volume
+}
+
+/**
+ * @returns	{boolean}
+ */
+export function checkInitialSlimDownloads() {
+	return 'true' === localStorage.getItem('slimDownloads')
+}
+
+/**
+ * @returns	{boolean}
+ */
+export function checkInitialSlimSidebar() {
+	return 'true' === localStorage.getItem('slimSidebar')
+}

src/store/modules/appInfo.js

@@ -1,3 +1,5 @@
+import { getInitialPreviewVolume, checkInitialSlimDownloads, checkInitialSlimSidebar } from '@/data/settings'
+
 /**
  * @typedef		{object}	AppInfo
  * @property	{string}	currentCommit
@@ -5,6 +7,8 @@
  * @property	{boolean}	updateAvailable
  * @property	{string}	deemixVersion
  * @property	{number}	previewVolume
+ * @property	{boolean}	hasSlimDownloads
+ * @property	{boolean}	hasSlimSidebar
  */
 
 /**
@@ -15,7 +19,9 @@ const state = () => ({
 	latestCommit: null,
 	updateAvailable: false,
 	deemixVersion: null,
-	previewVolume: Number(localStorage.getItem('previewVolume')) || 100
+	previewVolume: getInitialPreviewVolume(),
+	hasSlimDownloads: checkInitialSlimDownloads(),
+	hasSlimSidebar: checkInitialSlimSidebar()
 })
 
 const actions = {
@@ -36,6 +42,27 @@ const actions = {
 	setPreviewVolume({ commit }, payload) {
 		commit('SET_PREVIEW_VOLUME', payload)
 		localStorage.setItem('previewVolume', payload.toString())
+	},
+	/**
+	 * @param {any}													action
+	 * @param {AppInfo['hasSlimDownloads']}	payload
+	 */
+	setSlimDownloads({ commit }, payload) {
+		commit('SET_SLIM_DOWNLOADS', payload)
+		localStorage.setItem('slimDownloads', payload.toString())
+	},
+	/**
+	 * @param {any}												action
+	 * @param {AppInfo['hasSlimSidebar']}	payload
+	 */
+	setSlimSidebar({ commit }, payload) {
+		commit('SET_SLIM_SIDEBAR', payload)
+		localStorage.setItem('slimSidebar', payload.toString())
+
+		// Moves all toast messages when the option changes
+		Array.from(document.getElementsByClassName('toastify')).forEach(toast => {
+			toast.style.transform = `translate(${payload ? '3rem' : '14rem'}, 0)`
+		})
 	}
 }
 
@@ -46,47 +73,71 @@ const getters = {
 	 */
 	getAppInfo: state => state,
 	/**
-	 * @param		{AppInfo}	state
+	 * @param		{AppInfo}										state
 	 * @returns	{AppInfo['previewVolume']}
 	 */
-	getPreviewVolume: state => state.previewVolume
+	getPreviewVolume: state => state.previewVolume,
+	/**
+	 * @param		{AppInfo}											state
+	 * @returns	{AppInfo['hasSlimDownloads']}
+	 */
+	getSlimDownloads: state => state.hasSlimDownloads,
+	/**
+	 * @param		{AppInfo}										state
+	 * @returns	{AppInfo['hasSlimSidebar']}
+	 */
+	getSlimSidebar: state => state.hasSlimSidebar
 }
 
 const mutations = {
 	/**
-	 * @param {AppInfo} state
-	 * @param {AppInfo['currentCommit']} payload
+	 * @param {AppInfo} 									state
+	 * @param {AppInfo['currentCommit']}	payload
 	 */
 	SET_CURRENT_COMMIT(state, payload) {
 		state.currentCommit = payload
 	},
 	/**
-	 * @param {AppInfo} state
-	 * @param {AppInfo['latestCommit']} payload
+	 * @param {AppInfo} 								state
+	 * @param {AppInfo['latestCommit']}	payload
 	 */
 	SET_LATEST_COMMIT(state, payload) {
 		state.latestCommit = payload
 	},
 	/**
-	 * @param {AppInfo} state
-	 * @param {AppInfo['updateAvailable']} payload
+	 * @param {AppInfo} 										state
+	 * @param {AppInfo['updateAvailable']}	payload
 	 */
 	SET_UPDATE_AVAILABLE(state, payload) {
 		state.updateAvailable = payload
 	},
 	/**
-	 * @param {AppInfo} state
-	 * @param {AppInfo['deemixVersion']} payload
+	 * @param {AppInfo} 									state
+	 * @param {AppInfo['deemixVersion']}	payload
 	 */
 	SET_DEEMIX_VERSION(state, payload) {
 		state.deemixVersion = payload
 	},
 	/**
-	 * @param {AppInfo} state
-	 * @param {AppInfo['previewVolume']} payload
+	 * @param {AppInfo} 									state
+	 * @param {AppInfo['previewVolume']}	payload
 	 */
 	SET_PREVIEW_VOLUME(state, payload) {
 		state.previewVolume = payload
+	},
+	/**
+	 * @param {AppInfo} 										state
+	 * @param {AppInfo['hasSlimDownloads']}	payload
+	 */
+	SET_SLIM_DOWNLOADS(state, payload) {
+		state.hasSlimDownloads = payload
+	},
+	/**
+	 * @param {AppInfo} 									state
+	 * @param {AppInfo['hasSlimSidebar']}	payload
+	 */
+	SET_SLIM_SIDEBAR(state, payload) {
+		state.hasSlimSidebar = payload
 	}
 }