From 9f92e6d0a8c18783a9206f7692b8c4401a86243d Mon Sep 17 00:00:00 2001
From: Walid Saleh <superwal@gmail.com>
Date: Fri, 8 Dec 2023 12:48:44 +0000
Subject: [PATCH] relocate executeCommand. style

---
 webui/src/components/pages/Settings.vue | 985 ++++++++++++------------
 1 file changed, 491 insertions(+), 494 deletions(-)

diff --git a/webui/src/components/pages/Settings.vue b/webui/src/components/pages/Settings.vue
index ecc6e8c..62a0698 100644
--- a/webui/src/components/pages/Settings.vue
+++ b/webui/src/components/pages/Settings.vue
@@ -100,538 +100,542 @@
 				</h3>
 			</template>
 
-			<div class="pl-5">
-				<BaseAccordion class="settings-group">
-					<template #title>
-						<h3 class="settings-group__header">
-							<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
-						</h3>
-					</template>
+			<BaseAccordion class="settings-group">
+				<template #title>
+					<h3 class="settings-group__header">
+						<i class="material-icons">folder</i>{{ $t('settings.downloadPath.title') }}
+					</h3>
+				</template>
 
-					<div class="flex items-center">
-						<input v-model="settings.downloadLocation" autocomplete="off" type="text" />
-						<button v-if="clientMode" class="ml-2 btn btn-primary btn-only-icon" @click="selectDownloadFolder">
-							<i class="material-icons">folder</i>
-						</button>
-					</div>
-				</BaseAccordion>
+				<div class="flex items-center">
+					<input v-model="settings.downloadLocation" autocomplete="off" type="text" />
+					<button v-if="clientMode" class="ml-2 btn btn-primary btn-only-icon" @click="selectDownloadFolder">
+						<i class="material-icons">folder</i>
+					</button>
+				</div>
+			</BaseAccordion>
 
-				<BaseAccordion class="settings-group">
-					<template #title>
-						<h3 class="settings-group__header">
-							<i class="material-icons">create_new_folder</i>{{ $t('settings.folders.title') }}
-						</h3>
-					</template>
+			<BaseAccordion class="settings-group">
+				<template #title>
+					<h3 class="settings-group__header">
+						<i class="material-icons">create_new_folder</i>{{ $t('settings.folders.title') }}
+					</h3>
+				</template>
 
-					<div class="space-x-5 settings-container">
-						<div class="settings-container__third">
-							<label class="with-checkbox">
-								<input v-model="settings.createPlaylistFolder" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.folders.createPlaylistFolder') }}</span>
-							</label>
-							<div v-if="settings.createPlaylistFolder" class="input-group">
-								<p class="input-group-text">{{ $t('settings.folders.playlistNameTemplate') }}</p>
-								<input v-model="settings.playlistNameTemplate" type="text" />
-							</div>
-						</div>
-						<div class="settings-container__third">
-							<label class="with-checkbox">
-								<input v-model="settings.createArtistFolder" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.folders.createArtistFolder') }}</span>
-							</label>
-
-							<div v-if="settings.createArtistFolder" class="input-group">
-								<p class="input-group-text">{{ $t('settings.folders.artistNameTemplate') }}</p>
-								<input v-model="settings.artistNameTemplate" type="text" />
-							</div>
-						</div>
-						<div class="settings-container__third">
-							<label class="with-checkbox">
-								<input v-model="settings.createAlbumFolder" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.folders.createAlbumFolder') }}</span>
-							</label>
-
-							<div v-if="settings.createAlbumFolder" class="input-group">
-								<p class="input-group-text">{{ $t('settings.folders.albumNameTemplate') }}</p>
-								<input v-model="settings.albumNameTemplate" type="text" />
-							</div>
+				<div class="space-x-5 settings-container">
+					<div class="settings-container__third">
+						<label class="with-checkbox">
+							<input v-model="settings.createPlaylistFolder" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.folders.createPlaylistFolder') }}</span>
+						</label>
+						<div v-if="settings.createPlaylistFolder" class="input-group">
+							<p class="input-group-text">{{ $t('settings.folders.playlistNameTemplate') }}</p>
+							<input v-model="settings.playlistNameTemplate" type="text" />
 						</div>
 					</div>
+					<div class="settings-container__third">
+						<label class="with-checkbox">
+							<input v-model="settings.createArtistFolder" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.folders.createArtistFolder') }}</span>
+						</label>
 
-					<label class="with-checkbox">
-						<input v-model="settings.createCDFolder" type="checkbox" />
-						<span class="checkbox-text">{{ $t('settings.folders.createCDFolder') }}</span>
-					</label>
-
-					<label class="with-checkbox">
-						<input v-model="settings.createStructurePlaylist" type="checkbox" />
-						<span class="checkbox-text">{{ $t('settings.folders.createStructurePlaylist') }}</span>
-					</label>
-
-					<label class="with-checkbox">
-						<input v-model="settings.createSingleFolder" type="checkbox" />
-						<span class="checkbox-text">{{ $t('settings.folders.createSingleFolder') }}</span>
-					</label>
-				</BaseAccordion>
-
-				<BaseAccordion class="settings-group">
-					<template #title>
-						<h3 class="settings-group__header">
-							<i class="material-icons">font_download</i>{{ $t('settings.templates.title') }}
-						</h3>
-					</template>
-
-					<p>{{ $t('settings.templates.tracknameTemplate') }}</p>
-					<input v-model="settings.tracknameTemplate" type="text" />
-
-					<TemplateVariablesList :template-variables="trackTemplateVariables" @variable-click="onTemplateVariableClick">
-						<template #title>
-							{{ $t('settings.templates.tracknameAvailableVariables') }}
-						</template>
-					</TemplateVariablesList>
-
-					<p>{{ $t('settings.templates.albumTracknameTemplate') }}</p>
-					<input v-model="settings.albumTracknameTemplate" type="text" />
-					<TemplateVariablesList :template-variables="trackTemplateVariables" @variable-click="onTemplateVariableClick">
-						<template #title>
-							{{ $t('settings.templates.albumTracknameAvailableVariables') }}
-						</template>
-					</TemplateVariablesList>
-
-					<p>{{ $t('settings.templates.playlistTracknameTemplate') }}</p>
-					<input v-model="settings.playlistTracknameTemplate" type="text" />
-					<TemplateVariablesList :template-variables="trackTemplateVariables" @variable-click="onTemplateVariableClick">
-						<template #title>
-							{{ $t('settings.templates.playlistTracknameAvailableVariables') }}
-						</template>
-					</TemplateVariablesList>
-				</BaseAccordion>
-
-				<BaseAccordion class="settings-group">
-					<template #title>
-						<h3 class="settings-group__header">
-							<i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}
-						</h3>
-					</template>
-
-					<div class="space-x-5 settings-container">
-						<div class="settings-container__third settings-container__third--only-checkbox">
-							<label class="with-checkbox">
-								<input v-model="settings.padTracks" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.trackTitles.padTracks') }}</span>
-							</label>
-						</div>
-						<div class="settings-container__third">
-							<div class="input-group">
-								<p class="input-group-text">{{ $t('settings.trackTitles.paddingSize') }}</p>
-								<input v-model="settings.paddingSize" max="10" type="number" />
-							</div>
-						</div>
-						<div class="settings-container__third">
-							<div class="input-group">
-								<p class="input-group-text">{{ $t('settings.trackTitles.illegalCharacterReplacer') }}</p>
-								<input v-model="settings.illegalCharacterReplacer" type="text" />
-							</div>
+						<div v-if="settings.createArtistFolder" class="input-group">
+							<p class="input-group-text">{{ $t('settings.folders.artistNameTemplate') }}</p>
+							<input v-model="settings.artistNameTemplate" type="text" />
 						</div>
 					</div>
-				</BaseAccordion>
+					<div class="settings-container__third">
+						<label class="with-checkbox">
+							<input v-model="settings.createAlbumFolder" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.folders.createAlbumFolder') }}</span>
+						</label>
 
-				<BaseAccordion class="settings-group">
-					<template #title>
-						<h3 class="settings-group__header"><i class="material-icons">album</i>{{ $t('settings.covers.title') }}</h3>
-					</template>
-
-					<label class="with-checkbox">
-						<input v-model="settings.saveArtwork" type="checkbox" />
-						<span class="checkbox-text">{{ $t('settings.covers.saveArtwork') }}</span>
-					</label>
-
-					<div v-if="settings.saveArtwork" class="input-group">
-						<p class="input-group-text">{{ $t('settings.covers.coverImageTemplate') }}</p>
-						<input v-model="settings.coverImageTemplate" type="text" />
-					</div>
-
-					<label class="with-checkbox">
-						<input v-model="settings.saveArtworkArtist" type="checkbox" />
-						<span class="checkbox-text">{{ $t('settings.covers.saveArtworkArtist') }}</span>
-					</label>
-
-					<div v-if="settings.saveArtworkArtist" class="input-group">
-						<p class="input-group-text">{{ $t('settings.covers.artistImageTemplate') }}</p>
-						<input v-model="settings.artistImageTemplate" type="text" />
-					</div>
-
-					<div class="input-group">
-						<p class="input-group-text">{{ $t('settings.covers.localArtworkSize') }}</p>
-						<input v-model.number="settings.localArtworkSize" max="10000" min="100" step="100" type="number" />
-						<p v-if="settings.localArtworkSize > 1200" class="input-group-text" style="opacity: 0.75; color: #ffcc22">
-							⚠️ {{ $t('settings.covers.imageSizeWarning') }}
-						</p>
-					</div>
-
-					<div class="input-group">
-						<p class="input-group-text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
-						<input v-model.number="settings.embeddedArtworkSize" max="10000" min="100" step="100" type="number" />
-						<p v-if="settings.embeddedArtworkSize > 1200" class="input-group-text" style="opacity: 0.75; color: #ffcc22">
-							⚠️ {{ $t('settings.covers.imageSizeWarning') }}
-						</p>
-					</div>
-
-					<div class="input-group">
-						<p class="input-group-text">{{ $t('settings.covers.localArtworkFormat.title') }}</p>
-						<select v-model="settings.localArtworkFormat">
-							<option value="jpg">{{ $t('settings.covers.localArtworkFormat.jpg') }}</option>
-							<option value="png">{{ $t('settings.covers.localArtworkFormat.png') }}</option>
-							<option value="jpg,png">{{ $t('settings.covers.localArtworkFormat.both') }}</option>
-						</select>
-					</div>
-
-					<label class="with-checkbox">
-						<input v-model="settings.embeddedArtworkPNG" type="checkbox" />
-						<span class="checkbox-text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
-					</label>
-					<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22">
-						⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}
-					</p>
-
-					<label class="with-checkbox">
-						<input v-model="settings.tags.coverDescriptionUTF8" type="checkbox" />
-						<span class="checkbox-text">{{ $t('settings.covers.coverDescriptionUTF8') }}</span>
-					</label>
-
-					<div class="input-group">
-						<p class="input-group-text">{{ $t('settings.covers.jpegImageQuality') }}</p>
-						<input v-model.number="settings.jpegImageQuality" max="100" min="1" type="number" />
-					</div>
-				</BaseAccordion>
-
-				<BaseAccordion class="settings-group">
-					<template #title>
-						<h3 class="settings-group__header">
-							<i class="material-icons" style="width: 1em; height: 1em">bookmarks</i>{{ $t('settings.tags.head') }}
-						</h3>
-					</template>
-
-					<div class="space-x-5 settings-container">
-						<div class="settings-container__half">
-							<label class="with-checkbox">
-								<input v-model="settings.tags.title" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.title') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.artist" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.artist') }}</span>
-							</label>
-							<label class="with-checkbox" v-if="settings.tags.multiArtistSeparator != 'default'">
-								<input v-model="settings.tags.artists" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.artists') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.album" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.album') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.cover" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.cover') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.trackNumber" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.trackNumber') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.trackTotal" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.trackTotal') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.discNumber" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.discNumber') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.discTotal" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.discTotal') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.albumArtist" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.albumArtist') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.genre" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.genre') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.year" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.year') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.date" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.date') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.explicit" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.explicit') }}</span>
-							</label>
-						</div>
-
-						<div class="settings-container__half">
-							<label class="with-checkbox">
-								<input v-model="settings.tags.isrc" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.isrc') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.length" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.length') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.barcode" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.barcode') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.bpm" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.bpm') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.replayGain" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.replayGain') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.label" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.label') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.lyrics" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.lyrics') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.syncedLyrics" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.syncedLyrics') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.copyright" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.copyright') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.composer" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.composer') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.involvedPeople" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.involvedPeople') }}</span>
-							</label>
-							<label class="with-checkbox">
-								<input v-model="settings.tags.source" type="checkbox" />
-								<span class="checkbox-text">{{ $t('settings.tags.source') }}</span>
-							</label>
+						<div v-if="settings.createAlbumFolder" class="input-group">
+							<p class="input-group-text">{{ $t('settings.folders.albumNameTemplate') }}</p>
+							<input v-model="settings.albumNameTemplate" type="text" />
 						</div>
 					</div>
-					<p v-if="settings.tags.multiArtistSeparator != 'default' && !settings.tags.artists"
-						style="opacity: 0.75; color: #ffcc22">
-						⚠️ {{ $t('settings.tags.artistsWarning') }}
-					</p>
-				</BaseAccordion>
-
-				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.downloads.queueConcurrency') }}</p>
-					<input v-model.number="settings.queueConcurrency" min="1" type="number" />
 				</div>
 
-				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.downloads.maxBitrate.title') }}</p>
-					<select v-model="settings.maxBitrate">
-						<option value="9" :disabled="!canDownload(9)">{{ $t('settings.downloads.maxBitrate.9') }}</option>
-						<option value="3" :disabled="!canDownload(3)">{{ $t('settings.downloads.maxBitrate.3') }}</option>
-						<option value="1" :disabled="!canDownload(1)">{{ $t('settings.downloads.maxBitrate.1') }}</option>
-					</select>
-				</div>
+				<label class="with-checkbox">
+					<input v-model="settings.createCDFolder" type="checkbox" />
+					<span class="checkbox-text">{{ $t('settings.folders.createCDFolder') }}</span>
+				</label>
 
-				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.downloads.overwriteFile.title') }}</p>
-					<select v-model="settings.overwriteFile">
-						<option value="y">{{ $t('settings.downloads.overwriteFile.y') }}</option>
-						<option value="n">{{ $t('settings.downloads.overwriteFile.n') }}</option>
-						<option value="e">{{ $t('settings.downloads.overwriteFile.e') }}</option>
-						<option value="b">{{ $t('settings.downloads.overwriteFile.b') }}</option>
-						<option value="t">{{ $t('settings.downloads.overwriteFile.t') }}</option>
-						<option value="l">{{ $t('settings.downloads.overwriteFile.l') }}</option>
-					</select>
-				</div>
+				<label class="with-checkbox">
+					<input v-model="settings.createStructurePlaylist" type="checkbox" />
+					<span class="checkbox-text">{{ $t('settings.folders.createStructurePlaylist') }}</span>
+				</label>
+
+				<label class="with-checkbox">
+					<input v-model="settings.createSingleFolder" type="checkbox" />
+					<span class="checkbox-text">{{ $t('settings.folders.createSingleFolder') }}</span>
+				</label>
+			</BaseAccordion>
+
+			<BaseAccordion class="settings-group">
+				<template #title>
+					<h3 class="settings-group__header">
+						<i class="material-icons">font_download</i>{{ $t('settings.templates.title') }}
+					</h3>
+				</template>
+
+				<p>{{ $t('settings.templates.tracknameTemplate') }}</p>
+				<input v-model="settings.tracknameTemplate" type="text" />
+
+				<TemplateVariablesList :template-variables="trackTemplateVariables" @variable-click="onTemplateVariableClick">
+					<template #title>
+						{{ $t('settings.templates.tracknameAvailableVariables') }}
+					</template>
+				</TemplateVariablesList>
+
+				<p>{{ $t('settings.templates.albumTracknameTemplate') }}</p>
+				<input v-model="settings.albumTracknameTemplate" type="text" />
+				<TemplateVariablesList :template-variables="trackTemplateVariables" @variable-click="onTemplateVariableClick">
+					<template #title>
+						{{ $t('settings.templates.albumTracknameAvailableVariables') }}
+					</template>
+				</TemplateVariablesList>
+
+				<p>{{ $t('settings.templates.playlistTracknameTemplate') }}</p>
+				<input v-model="settings.playlistTracknameTemplate" type="text" />
+				<TemplateVariablesList :template-variables="trackTemplateVariables" @variable-click="onTemplateVariableClick">
+					<template #title>
+						{{ $t('settings.templates.playlistTracknameAvailableVariables') }}
+					</template>
+				</TemplateVariablesList>
+			</BaseAccordion>
+
+			<BaseAccordion class="settings-group">
+				<template #title>
+					<h3 class="settings-group__header">
+						<i class="material-icons">title</i>{{ $t('settings.trackTitles.title') }}
+					</h3>
+				</template>
 
 				<div class="space-x-5 settings-container">
 					<div class="settings-container__third settings-container__third--only-checkbox">
 						<label class="with-checkbox">
-							<input v-model="settings.fallbackBitrate" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.fallbackBitrate') }}</span>
-						</label>
-
-						<label class="with-checkbox">
-							<input v-model="settings.fallbackSearch" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.fallbackSearch') }}</span>
-						</label>
-
-						<label class="with-checkbox">
-							<input v-model="settings.fallbackISRC" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.fallbackISRC') }}</span>
+							<input v-model="settings.padTracks" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.trackTitles.padTracks') }}</span>
 						</label>
 					</div>
-					<div class="settings-container__third settings-container__third--only-checkbox">
-						<label class="with-checkbox">
-							<input v-model="settings.logErrors" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.logErrors') }}</span>
-						</label>
-
-						<label class="with-checkbox">
-							<input v-model="settings.logSearched" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.logSearched') }}</span>
-						</label>
-
-						<label class="with-checkbox">
-							<input v-model="settings.feelingLucky" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.feelingLucky') }}</span>
-						</label>
+					<div class="settings-container__third">
+						<div class="input-group">
+							<p class="input-group-text">{{ $t('settings.trackTitles.paddingSize') }}</p>
+							<input v-model="settings.paddingSize" max="10" type="number" />
+						</div>
 					</div>
-					<div class="settings-container__third settings-container__third--only-checkbox">
-						<label class="with-checkbox">
-							<input v-model="settings.syncedLyrics" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.syncedLyrics') }}</span>
-						</label>
-
-						<label class="with-checkbox">
-							<input v-model="settings.createM3U8File" type="checkbox" />
-							<span class="checkbox-text">{{ $t('settings.downloads.createM3U8File') }}</span>
-						</label>
+					<div class="settings-container__third">
+						<div class="input-group">
+							<p class="input-group-text">{{ $t('settings.trackTitles.illegalCharacterReplacer') }}</p>
+							<input v-model="settings.illegalCharacterReplacer" type="text" />
+						</div>
 					</div>
 				</div>
+			</BaseAccordion>
 
-				<div v-if="settings.createM3U8File" class="input-group">
-					<p class="input-group-text">{{ $t('settings.downloads.playlistFilenameTemplate') }}</p>
-					<input v-model="settings.playlistFilenameTemplate" type="text" />
+			<BaseAccordion class="settings-group">
+				<template #title>
+					<h3 class="settings-group__header"><i class="material-icons">album</i>{{ $t('settings.covers.title') }}</h3>
+				</template>
+
+				<label class="with-checkbox">
+					<input v-model="settings.saveArtwork" type="checkbox" />
+					<span class="checkbox-text">{{ $t('settings.covers.saveArtwork') }}</span>
+				</label>
+
+				<div v-if="settings.saveArtwork" class="input-group">
+					<p class="input-group-text">{{ $t('settings.covers.coverImageTemplate') }}</p>
+					<input v-model="settings.coverImageTemplate" type="text" />
 				</div>
 
-				<label v-if="clientMode" class="with-checkbox">
-					<input v-model="settings.clearQueueOnExit" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.downloads.clearQueueOnExit') }}</span>
+				<label class="with-checkbox">
+					<input v-model="settings.saveArtworkArtist" type="checkbox" />
+					<span class="checkbox-text">{{ $t('settings.covers.saveArtworkArtist') }}</span>
 				</label>
 
-				<label class="with-checkbox">
-					<input v-model="settings.tags.savePlaylistAsCompilation" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.other.savePlaylistAsCompilation') }}</span>
-				</label>
-
-				<label class="with-checkbox">
-					<input v-model="settings.tags.useNullSeparator" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.other.useNullSeparator') }}</span>
-				</label>
-
-				<label class="with-checkbox">
-					<input v-model="settings.tags.saveID3v1" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.other.saveID3v1') }}</span>
-				</label>
+				<div v-if="settings.saveArtworkArtist" class="input-group">
+					<p class="input-group-text">{{ $t('settings.covers.artistImageTemplate') }}</p>
+					<input v-model="settings.artistImageTemplate" type="text" />
+				</div>
 
 				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.other.multiArtistSeparator.title') }}</p>
-					<select v-model="settings.tags.multiArtistSeparator">
-						<option value="nothing">{{ $t('settings.other.multiArtistSeparator.nothing') }}</option>
-						<option value="default">{{ $t('settings.other.multiArtistSeparator.default') }}</option>
-						<option value="andFeat">{{ $t('settings.other.multiArtistSeparator.andFeat') }}</option>
-						<option value=" & ">{{ $t('settings.other.multiArtistSeparator.using', { separator: ' & ' }) }}</option>
-						<option value=",">{{ $t('settings.other.multiArtistSeparator.using', { separator: ',' }) }}</option>
-						<option value=", ">{{ $t('settings.other.multiArtistSeparator.using', { separator: ', ' }) }}</option>
-						<option value="/">{{ $t('settings.other.multiArtistSeparator.using', { separator: '/' }) }}</option>
-						<option value=" / ">{{ $t('settings.other.multiArtistSeparator.using', { separator: ' / ' }) }}</option>
-						<option value=";">{{ $t('settings.other.multiArtistSeparator.using', { separator: ';' }) }}</option>
-						<option value="; ">{{ $t('settings.other.multiArtistSeparator.using', { separator: '; ' }) }}</option>
-					</select>
-					<p v-if="settings.tags.multiArtistSeparator != 'default'" style="opacity: 0.75; color: #ffcc22">
-						⚠️ {{ $t('settings.other.multiArtistSeparator.warning') }}
+					<p class="input-group-text">{{ $t('settings.covers.localArtworkSize') }}</p>
+					<input v-model.number="settings.localArtworkSize" max="10000" min="100" step="100" type="number" />
+					<p v-if="settings.localArtworkSize > 1200" class="input-group-text" style="opacity: 0.75; color: #ffcc22">
+						⚠️ {{ $t('settings.covers.imageSizeWarning') }}
 					</p>
 				</div>
 
-				<label class="with-checkbox">
-					<input v-model="settings.tags.singleAlbumArtist" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.other.singleAlbumArtist') }}</span>
-				</label>
-
-				<label class="with-checkbox">
-					<input v-model="settings.albumVariousArtists" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.other.albumVariousArtists') }}</span>
-				</label>
-
-				<label class="with-checkbox">
-					<input v-model="settings.removeAlbumVersion" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.other.removeAlbumVersion') }}</span>
-				</label>
-
-				<label class="with-checkbox">
-					<input v-model="settings.removeDuplicateArtists" type="checkbox" />
-					<span class="checkbox-text">{{ $t('settings.other.removeDuplicateArtists') }}</span>
-				</label>
-
 				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.other.dateFormat.title') }}</p>
-					<select v-model="settings.dateFormat">
-						<option value="Y-M-D">
-							{{
-								`${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.month')}-${$t(
-									'settings.other.dateFormat.day'
-								)}`
-							}}
-						</option>
-						<option value="Y-D-M">
-							{{
-								`${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.day')}-${$t(
-									'settings.other.dateFormat.month'
-								)}`
-							}}
-						</option>
-						<option value="D-M-Y">
-							{{
-								`${$t('settings.other.dateFormat.day')}-${$t('settings.other.dateFormat.month')}-${$t(
-									'settings.other.dateFormat.year'
-								)}`
-							}}
-						</option>
-						<option value="M-D-Y">
-							{{
-								`${$t('settings.other.dateFormat.month')}-${$t('settings.other.dateFormat.day')}-${$t(
-									'settings.other.dateFormat.year'
-								)}`
-							}}
-						</option>
-						<option value="Y">{{ $t('settings.other.dateFormat.year') }}</option>
-					</select>
+					<p class="input-group-text">{{ $t('settings.covers.embeddedArtworkSize') }}</p>
+					<input v-model.number="settings.embeddedArtworkSize" max="10000" min="100" step="100" type="number" />
+					<p v-if="settings.embeddedArtworkSize > 1200" class="input-group-text" style="opacity: 0.75; color: #ffcc22">
+						⚠️ {{ $t('settings.covers.imageSizeWarning') }}
+					</p>
 				</div>
 
 				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.other.featuredToTitle.title') }}</p>
-					<select v-model="settings.featuredToTitle">
-						<option value="0">{{ $t('settings.other.featuredToTitle.0') }}</option>
-						<option value="1">{{ $t('settings.other.featuredToTitle.1') }}</option>
-						<option value="3">{{ $t('settings.other.featuredToTitle.3') }}</option>
-						<option value="2">{{ $t('settings.other.featuredToTitle.2') }}</option>
+					<p class="input-group-text">{{ $t('settings.covers.localArtworkFormat.title') }}</p>
+					<select v-model="settings.localArtworkFormat">
+						<option value="jpg">{{ $t('settings.covers.localArtworkFormat.jpg') }}</option>
+						<option value="png">{{ $t('settings.covers.localArtworkFormat.png') }}</option>
+						<option value="jpg,png">{{ $t('settings.covers.localArtworkFormat.both') }}</option>
 					</select>
 				</div>
 
+				<label class="with-checkbox">
+					<input v-model="settings.embeddedArtworkPNG" type="checkbox" />
+					<span class="checkbox-text">{{ $t('settings.covers.embeddedArtworkPNG') }}</span>
+				</label>
+				<p v-if="settings.embeddedArtworkPNG" style="opacity: 0.75; color: #ffcc22">
+					⚠️ {{ $t('settings.covers.embeddedPNGWarning') }}
+				</p>
+
+				<label class="with-checkbox">
+					<input v-model="settings.tags.coverDescriptionUTF8" type="checkbox" />
+					<span class="checkbox-text">{{ $t('settings.covers.coverDescriptionUTF8') }}</span>
+				</label>
+
 				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.other.titleCasing') }}</p>
-					<select v-model="settings.titleCasing">
-						<option value="nothing">{{ $t('settings.other.casing.nothing') }}</option>
-						<option value="lower">{{ $t('settings.other.casing.lower') }}</option>
-						<option value="upper">{{ $t('settings.other.casing.upper') }}</option>
-						<option value="start">{{ $t('settings.other.casing.start') }}</option>
-						<option value="sentence">{{ $t('settings.other.casing.sentence') }}</option>
-					</select>
+					<p class="input-group-text">{{ $t('settings.covers.jpegImageQuality') }}</p>
+					<input v-model.number="settings.jpegImageQuality" max="100" min="1" type="number" />
 				</div>
+			</BaseAccordion>
 
-				<div class="input-group">
-					<p class="input-group-text">{{ $t('settings.other.artistCasing') }}</p>
-					<select v-model="settings.artistCasing">
-						<option value="nothing">{{ $t('settings.other.casing.nothing') }}</option>
-						<option value="lower">{{ $t('settings.other.casing.lower') }}</option>
-						<option value="upper">{{ $t('settings.other.casing.upper') }}</option>
-						<option value="start">{{ $t('settings.other.casing.start') }}</option>
-						<option value="sentence">{{ $t('settings.other.casing.sentence') }}</option>
-					</select>
+			<BaseAccordion class="settings-group">
+				<template #title>
+					<h3 class="settings-group__header">
+						<i class="material-icons" style="width: 1em; height: 1em">bookmarks</i>{{ $t('settings.tags.head') }}
+					</h3>
+				</template>
+
+				<div class="space-x-5 settings-container">
+					<div class="settings-container__half">
+						<label class="with-checkbox">
+							<input v-model="settings.tags.title" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.title') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.artist" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.artist') }}</span>
+						</label>
+						<label class="with-checkbox" v-if="settings.tags.multiArtistSeparator != 'default'">
+							<input v-model="settings.tags.artists" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.artists') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.album" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.album') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.cover" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.cover') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.trackNumber" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.trackNumber') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.trackTotal" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.trackTotal') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.discNumber" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.discNumber') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.discTotal" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.discTotal') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.albumArtist" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.albumArtist') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.genre" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.genre') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.year" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.year') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.date" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.date') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.explicit" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.explicit') }}</span>
+						</label>
+					</div>
+
+					<div class="settings-container__half">
+						<label class="with-checkbox">
+							<input v-model="settings.tags.isrc" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.isrc') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.length" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.length') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.barcode" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.barcode') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.bpm" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.bpm') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.replayGain" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.replayGain') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.label" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.label') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.lyrics" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.lyrics') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.syncedLyrics" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.syncedLyrics') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.copyright" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.copyright') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.composer" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.composer') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.involvedPeople" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.involvedPeople') }}</span>
+						</label>
+						<label class="with-checkbox">
+							<input v-model="settings.tags.source" type="checkbox" />
+							<span class="checkbox-text">{{ $t('settings.tags.source') }}</span>
+						</label>
+					</div>
 				</div>
+				<p v-if="settings.tags.multiArtistSeparator != 'default' && !settings.tags.artists"
+					style="opacity: 0.75; color: #ffcc22">
+					⚠️ {{ $t('settings.tags.artistsWarning') }}
+				</p>
+			</BaseAccordion>
 
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.downloads.queueConcurrency') }}</p>
+				<input v-model.number="settings.queueConcurrency" min="1" type="number" />
+			</div>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.downloads.maxBitrate.title') }}</p>
+				<select v-model="settings.maxBitrate">
+					<option value="9" :disabled="!canDownload(9)">{{ $t('settings.downloads.maxBitrate.9') }}</option>
+					<option value="3" :disabled="!canDownload(3)">{{ $t('settings.downloads.maxBitrate.3') }}</option>
+					<option value="1" :disabled="!canDownload(1)">{{ $t('settings.downloads.maxBitrate.1') }}</option>
+				</select>
+			</div>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.downloads.overwriteFile.title') }}</p>
+				<select v-model="settings.overwriteFile">
+					<option value="y">{{ $t('settings.downloads.overwriteFile.y') }}</option>
+					<option value="n">{{ $t('settings.downloads.overwriteFile.n') }}</option>
+					<option value="e">{{ $t('settings.downloads.overwriteFile.e') }}</option>
+					<option value="b">{{ $t('settings.downloads.overwriteFile.b') }}</option>
+					<option value="t">{{ $t('settings.downloads.overwriteFile.t') }}</option>
+					<option value="l">{{ $t('settings.downloads.overwriteFile.l') }}</option>
+				</select>
+			</div>
+
+			<div class="space-x-5 settings-container">
+				<div class="settings-container__third settings-container__third--only-checkbox">
+					<label class="with-checkbox">
+						<input v-model="settings.fallbackBitrate" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.fallbackBitrate') }}</span>
+					</label>
+
+					<label class="with-checkbox">
+						<input v-model="settings.fallbackSearch" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.fallbackSearch') }}</span>
+					</label>
+
+					<label class="with-checkbox">
+						<input v-model="settings.fallbackISRC" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.fallbackISRC') }}</span>
+					</label>
+				</div>
+				<div class="settings-container__third settings-container__third--only-checkbox">
+					<label class="with-checkbox">
+						<input v-model="settings.logErrors" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.logErrors') }}</span>
+					</label>
+
+					<label class="with-checkbox">
+						<input v-model="settings.logSearched" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.logSearched') }}</span>
+					</label>
+
+					<label class="with-checkbox">
+						<input v-model="settings.feelingLucky" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.feelingLucky') }}</span>
+					</label>
+				</div>
+				<div class="settings-container__third settings-container__third--only-checkbox">
+					<label class="with-checkbox">
+						<input v-model="settings.syncedLyrics" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.syncedLyrics') }}</span>
+					</label>
+
+					<label class="with-checkbox">
+						<input v-model="settings.createM3U8File" type="checkbox" />
+						<span class="checkbox-text">{{ $t('settings.downloads.createM3U8File') }}</span>
+					</label>
+				</div>
+			</div>
+
+			<div v-if="settings.createM3U8File" class="input-group">
+				<p class="input-group-text">{{ $t('settings.downloads.playlistFilenameTemplate') }}</p>
+				<input v-model="settings.playlistFilenameTemplate" type="text" />
+			</div>
+
+			<label v-if="clientMode" class="with-checkbox">
+				<input v-model="settings.clearQueueOnExit" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.downloads.clearQueueOnExit') }}</span>
+			</label>
+
+			<label class="with-checkbox">
+				<input v-model="settings.tags.savePlaylistAsCompilation" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.other.savePlaylistAsCompilation') }}</span>
+			</label>
+
+			<label class="with-checkbox">
+				<input v-model="settings.tags.useNullSeparator" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.other.useNullSeparator') }}</span>
+			</label>
+
+			<label class="with-checkbox">
+				<input v-model="settings.tags.saveID3v1" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.other.saveID3v1') }}</span>
+			</label>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.other.multiArtistSeparator.title') }}</p>
+				<select v-model="settings.tags.multiArtistSeparator">
+					<option value="nothing">{{ $t('settings.other.multiArtistSeparator.nothing') }}</option>
+					<option value="default">{{ $t('settings.other.multiArtistSeparator.default') }}</option>
+					<option value="andFeat">{{ $t('settings.other.multiArtistSeparator.andFeat') }}</option>
+					<option value=" & ">{{ $t('settings.other.multiArtistSeparator.using', { separator: ' & ' }) }}</option>
+					<option value=",">{{ $t('settings.other.multiArtistSeparator.using', { separator: ',' }) }}</option>
+					<option value=", ">{{ $t('settings.other.multiArtistSeparator.using', { separator: ', ' }) }}</option>
+					<option value="/">{{ $t('settings.other.multiArtistSeparator.using', { separator: '/' }) }}</option>
+					<option value=" / ">{{ $t('settings.other.multiArtistSeparator.using', { separator: ' / ' }) }}</option>
+					<option value=";">{{ $t('settings.other.multiArtistSeparator.using', { separator: ';' }) }}</option>
+					<option value="; ">{{ $t('settings.other.multiArtistSeparator.using', { separator: '; ' }) }}</option>
+				</select>
+				<p v-if="settings.tags.multiArtistSeparator != 'default'" style="opacity: 0.75; color: #ffcc22">
+					⚠️ {{ $t('settings.other.multiArtistSeparator.warning') }}
+				</p>
+			</div>
+
+			<label class="with-checkbox">
+				<input v-model="settings.tags.singleAlbumArtist" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.other.singleAlbumArtist') }}</span>
+			</label>
+
+			<label class="with-checkbox">
+				<input v-model="settings.albumVariousArtists" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.other.albumVariousArtists') }}</span>
+			</label>
+
+			<label class="with-checkbox">
+				<input v-model="settings.removeAlbumVersion" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.other.removeAlbumVersion') }}</span>
+			</label>
+
+			<label class="with-checkbox">
+				<input v-model="settings.removeDuplicateArtists" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.other.removeDuplicateArtists') }}</span>
+			</label>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.other.dateFormat.title') }}</p>
+				<select v-model="settings.dateFormat">
+					<option value="Y-M-D">
+						{{
+							`${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.month')}-${$t(
+								'settings.other.dateFormat.day'
+							)}`
+						}}
+					</option>
+					<option value="Y-D-M">
+						{{
+							`${$t('settings.other.dateFormat.year')}-${$t('settings.other.dateFormat.day')}-${$t(
+								'settings.other.dateFormat.month'
+							)}`
+						}}
+					</option>
+					<option value="D-M-Y">
+						{{
+							`${$t('settings.other.dateFormat.day')}-${$t('settings.other.dateFormat.month')}-${$t(
+								'settings.other.dateFormat.year'
+							)}`
+						}}
+					</option>
+					<option value="M-D-Y">
+						{{
+							`${$t('settings.other.dateFormat.month')}-${$t('settings.other.dateFormat.day')}-${$t(
+								'settings.other.dateFormat.year'
+							)}`
+						}}
+					</option>
+					<option value="Y">{{ $t('settings.other.dateFormat.year') }}</option>
+				</select>
+			</div>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.other.featuredToTitle.title') }}</p>
+				<select v-model="settings.featuredToTitle">
+					<option value="0">{{ $t('settings.other.featuredToTitle.0') }}</option>
+					<option value="1">{{ $t('settings.other.featuredToTitle.1') }}</option>
+					<option value="3">{{ $t('settings.other.featuredToTitle.3') }}</option>
+					<option value="2">{{ $t('settings.other.featuredToTitle.2') }}</option>
+				</select>
+			</div>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.other.titleCasing') }}</p>
+				<select v-model="settings.titleCasing">
+					<option value="nothing">{{ $t('settings.other.casing.nothing') }}</option>
+					<option value="lower">{{ $t('settings.other.casing.lower') }}</option>
+					<option value="upper">{{ $t('settings.other.casing.upper') }}</option>
+					<option value="start">{{ $t('settings.other.casing.start') }}</option>
+					<option value="sentence">{{ $t('settings.other.casing.sentence') }}</option>
+				</select>
+			</div>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.other.artistCasing') }}</p>
+				<select v-model="settings.artistCasing">
+					<option value="nothing">{{ $t('settings.other.casing.nothing') }}</option>
+					<option value="lower">{{ $t('settings.other.casing.lower') }}</option>
+					<option value="upper">{{ $t('settings.other.casing.upper') }}</option>
+					<option value="start">{{ $t('settings.other.casing.start') }}</option>
+					<option value="sentence">{{ $t('settings.other.casing.sentence') }}</option>
+				</select>
+			</div>
+
+			<div class="input-group">
+				<p class="input-group-text">{{ $t('settings.other.executeCommand.title') }}</p>
+				<p class="secondary-text">{{ $t('settings.other.executeCommand.description') }}</p>
+				<p v-if="settings.executeCommand"> {{ settings.executeCommand }} </p>
+				<p v-else>{{ $t('globals.empty').capitalize() }}</p>
 			</div>
 
 		</BaseAccordion>
@@ -679,13 +683,6 @@
 				<span>{{ previewVolume }}%</span>
 			</div>
 
-			<div class="input-group">
-				<p class="input-group-text">{{ $t('settings.other.executeCommand.title') }}</p>
-				<p class="secondary-text">{{ $t('settings.other.executeCommand.description') }}</p>
-				<p v-if="settings.executeCommand"> {{ settings.executeCommand }} </p>
-				<p v-else>{{ $t('globals.empty').capitalize() }}</p>
-			</div>
-
 			<BaseAccordion class="settings-group">
 				<template #title>
 					<h3 class="settings-group__header">