Added showBitrateTags and showSearchButton options

Re-added executeCommand as read-only

src/components/TheSearchBar.vue

@@ -1,6 +1,6 @@
 <template>
-	<header id="search" aria-label="searchbar">
-		<div class="search__icon">
+	<header id="search" aria-label="searchbar" :class="{ showSearchButton }">
+		<div v-if="!showSearchButton" class="search__icon">
 			<i class="material-icons">search</i>
 		</div>
 
@@ -14,14 +14,22 @@
 			value=""
 			:placeholder="$t('searchbar')"
 			autofocus
-			@keyup="performSearch($event)"
+			@keyup="keyPerformSearch($event)"
 		/>
 		<!-- @keyup.enter.exact="onEnter"
 			@keyup.ctrl.enter="onCTRLEnter" -->
+		<a
+			href="#"
+			class="searchButton"
+			@contextmenu="rightClickPerformSearch"
+			@click="clickPerformSearch"
+			v-if="showSearchButton"
+		><i class="material-icons">search</i></a>
 	</header>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { defineComponent, ref } from '@vue/composition-api'
 import { isValidURL } from '@/utils/utils'
 import { sendAddToQueue } from '@/utils/downloads'
@@ -57,25 +65,48 @@ export default defineComponent({
 			document.removeEventListener('keyup', deleteSearchBarContent)
 		})
 	},
+	computed: {
+		...mapGetters({
+			showSearchButton: 'getShowSearchButton',
+		})
+	},
 	methods: {
-		async performSearch(keyEvent) {
-			const isEnterPressed = keyEvent.keyCode === 13
+		async clickPerformSearch(ev) {
+			ev.preventDefault()
+			const term = this.$refs.searchbar.value
+			const isEmptySearch = term === ''
+			if (isEmptySearch) return
 
+			await this.performSearch(term, false)
+		},
+		async rightClickPerformSearch(ev){
+			ev.preventDefault()
+			ev.stopPropagation()
+			const term = this.$refs.searchbar.value
+			const isEmptySearch = term === ''
+			if (isEmptySearch) return
+
+			await this.performSearch(term, true)
+		},
+		async keyPerformSearch(keyEvent) {
+			const isEnterPressed = keyEvent.keyCode === 13
 			if (!isEnterPressed) return
 
 			const term = this.$refs.searchbar.value
 			const isEmptySearch = term === ''
-
 			if (isEmptySearch) return
 
-			const isSearchingURL = isValidURL(term)
 			const isCtrlPressed = keyEvent.ctrlKey
+			await this.performSearch(term, isCtrlPressed)
+		},
+		async performSearch(term, modifierKey){
+			const isSearchingURL = isValidURL(term)
 			const isShowingAnalyzer = this.$route.name === 'Link Analyzer'
 			const isShowingSearch = this.$route.name === 'Search'
 			const isSameAsLastSearch = term === this.lastTextSearch
 
 			if (isSearchingURL) {
-				if (isCtrlPressed) {
+				if (modifierKey) {
 					this.$root.$emit('ContextMenu:searchbar', term)
 					return
 				}
@@ -153,6 +184,7 @@ input[type='search']::-webkit-search-cancel-button {
 	transition: border 200ms ease-in-out;
 	border-radius: 15px;
 	margin: 10px 10px 20px 10px;
+	overflow: hidden;
 
 	.search__icon {
 		width: $icon-dimension;
@@ -201,8 +233,33 @@ input[type='search']::-webkit-search-cancel-button {
 		}
 	}
 
+	.searchButton {
+		background-color: var(--primary-color);
+		color: var(--primary-text);
+		height: 100%;
+		width: 48px;
+		display: flex;
+		text-decoration: none;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0px 15px 15px 0px;
+		margin-left: 1em;
+
+		i {
+			font-size: $icon-dimension;
+
+			&::selection {
+				background: none;
+			}
+		}
+	}
+
 	&:focus-within {
 		border: 1px solid var(--foreground);
 	}
+
+	&.showSearchButton {
+		padding: 0 0 0 1em;
+	}
 }
 </style>

src/components/downloads/QueueItem.vue

@@ -3,7 +3,7 @@
 		<div class="download-info">
 			<div class="relative coverart rounded">
 				<img width="75px" :src="queueItem.cover" :alt="`Cover ${queueItem.title}`">
-				<span class="tag">{{ bitrateText }}</span>
+				<span v-if="showTags" class="tag">{{ bitrateText }}</span>
 			</div>
 
 			<div class="download-info-data">
@@ -55,7 +55,8 @@ export default {
 		queueItem: {
 			type: Object,
 			default: () => ({})
-		}
+		},
+		showTags: Boolean
 	},
 	data() {
 		return {

src/components/downloads/TheDownloadBar.vue

@@ -56,6 +56,7 @@
 				v-for="item in queueList"
 				:key="item.uuid"
 				:queue-item="item"
+				:show-tags="showTags"
 				@show-errors="showErrorsTab"
 				@remove-item="onRemoveItem"
 			/>
@@ -90,7 +91,8 @@ export default {
 	computed: {
 		...mapGetters({
 			clientMode: 'getClientMode',
-			isSlim: 'getSlimDownloads'
+			isSlim: 'getSlimDownloads',
+			showTags: 'getShowBitrateTags'
 		}),
 		finishedWithoutErrors() {
 			const isCompletedWithoutErrors = el => (el.status || '') === 'download finished' && el.errors.length === 0

src/components/pages/Settings.vue

@@ -133,6 +133,14 @@
 				<input v-model="modelSlimSidebar" type="checkbox" />
 				<span class="checkbox-text">{{ $t('settings.appearance.slimSidebar') }}</span>
 			</label>
+			<label class="mb-4 with-checkbox">
+				<input v-model="modelShowBitrateTags" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.appearance.bitrateTags') }}</span>
+			</label>
+			<label class="mb-4 with-checkbox">
+				<input v-model="modelShowSearchButton" type="checkbox" />
+				<span class="checkbox-text">{{ $t('settings.appearance.searchButton') }}</span>
+			</label>
 		</BaseAccordion>
 
 		<BaseAccordion class="settings-group">
@@ -666,13 +674,12 @@
 				<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>
-				<input v-model="settings.executeCommand" type="text" />
+				<p v-if="settings.executeCommand"> {{ settings.executeCommand }} </p>
+				<p v-else>{{ $t('globals.empty').capitalize() }}</p>
 			</div>
-			-->
 		</BaseAccordion>
 
 		<BaseAccordion class="settings-group">
@@ -781,7 +788,9 @@ export default {
 			clientMode: 'getClientMode',
 			previewVolume: 'getPreviewVolume',
 			hasSlimDownloads: 'getSlimDownloads',
-			hasSlimSidebar: 'getSlimSidebar'
+			hasSlimSidebar: 'getSlimSidebar',
+			showBitrateTags: 'getShowBitrateTags',
+			showSearchButton: 'getShowSearchButton',
 		}),
 		needToWait() {
 			return Object.keys(this.getSettings).length === 0
@@ -810,6 +819,22 @@ export default {
 				this.setSlimSidebar(wantSlimSidebar)
 			}
 		},
+		modelShowBitrateTags: {
+			get() {
+				return this.showBitrateTags
+			},
+			set(wantShowBitrateTags) {
+				this.setShowBitrateTags(wantShowBitrateTags)
+			}
+		},
+		modelShowSearchButton: {
+			get() {
+				return this.showSearchButton
+			},
+			set(wantShowSearchButton) {
+				this.setShowSearchButton(wantShowSearchButton)
+			}
+		},
 		pictureHref() {
 			// Default image: https://e-cdns-images.dzcdn.net/images/user/125x125-000000-80-0-0.jpg
 			return `https://e-cdns-images.dzcdn.net/images/user/${this.user.picture}/125x125-000000-80-0-0.jpg`
@@ -865,6 +890,8 @@ export default {
 			setPreviewVolume: 'setPreviewVolume',
 			setSlimDownloads: 'setSlimDownloads',
 			setSlimSidebar: 'setSlimSidebar',
+			setShowBitrateTags: 'setShowBitrateTags',
+			setShowSearchButton: 'setShowSearchButton',
 			dispatchLogout: 'logout',
 			dispatchLogin: 'login',
 			setSpotifyUserId: 'setSpotifyUserId',