Added "Select Download Folder" button

src/app.js

@@ -32,6 +32,7 @@ function mountApp() {
 function initClient() {
 	window.clientMode = true
 	document.querySelector(`#open_downloads_folder`).classList.remove('hide')
+	document.querySelector(`#select_downloads_folder`).classList.remove('hide')
 }
 
 document.addEventListener('DOMContentLoaded', startApp)

src/components/TheSettingsTab.vue

@@ -19,7 +19,7 @@
 			</h3>
 			<div class="inline-flex">
 				<input autocomplete="off" type="password" id="login_input_arl" ref="loginInput" placeholder="ARL" />
-				<button id="settings_btn_copyArl" @click="copyARLtoClipboard">
+				<button id="settings_btn_copyArl" class="only_icon" @click="copyARLtoClipboard">
 					<i class="material-icons">assignment</i>
 				</button>
 			</div>
@@ -62,7 +62,12 @@
 			<h3 class="settings-group__header settings-group__header--with-icon">
 				<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
 			</h3>
-			<input type="text" v-model="settings.downloadLocation" />
+			<div class="inline-flex">
+				<input autocomplete="off" type="text" v-model="settings.downloadLocation" />
+				<button id="select_downloads_folder" class="only_icon hide" @click="selectDownloadFolder">
+					<i class="material-icons">folder</i>
+				</button>
+			</div>
 		</div>
 
 		<div class="settings-group">
@@ -672,6 +677,7 @@ export default {
 		socket.on('updateSettings', this.updateSettings)
 		socket.on('accountChanged', this.accountChanged)
 		socket.on('familyAccounts', this.initAccounts)
+		socket.on('downloadFolderSelected', this.downloadFolderSelected)
 	},
 	methods: {
 		revertSettings() {
@@ -713,6 +719,13 @@ export default {
 
 			socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
 		},
+		selectDownloadFolder() {
+			if (window.clientMode) socket.emit('selectDownloadFolder')
+		},
+		downloadFolderSelected(folder){
+			console.log(folder)
+			this.settings.downloadLocation = folder
+		},
 		loadSettings(settings, spotifyCredentials, defaults = null) {
 			if (defaults) {
 				this.defaultSettings = { ...defaults }

src/styles/scss/globals/_globals.scss

@@ -112,6 +112,17 @@ button {
 		}
 	}
 
+	&.only_icon {
+		min-width: 24px;
+		width: 48px;
+		margin: 0px 0px 0px 8px;
+		padding: 0px 4px;
+
+		i {
+			padding: 6px 0px;
+		}
+	}
+
 	&:active {
 		background-color: var(--accent-color);
 		transform: scale(0.98);

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

@@ -21,21 +21,10 @@
 	margin: 8px 0px;
 }
 
-#login_input_arl {
+.inline-flex input {
 	margin-bottom: 0px;
 }
 
-#settings_btn_copyArl {
-	min-width: 24px;
-	width: 48px;
-	margin: 0px 0px 0px 8px;
-	padding: 0px 4px;
-
-	i {
-		padding: 6px 0px;
-	}
-}
-
 #spotify_icon {
 	width: 24px;
 	height: 24px;