chore: downgraded rollup-plugin-vue@4.2.0 due to watcher problems; performance: removed download tab styles

package.json

@@ -42,7 +42,7 @@
 		"rollup-plugin-postcss": "^3.1.8",
 		"rollup-plugin-svg": "^2.0.0",
 		"rollup-plugin-terser": "^7.0.2",
-		"rollup-plugin-vue": "^5.1.9",
+		"rollup-plugin-vue": "^4.2.0",
 		"sass": "^1.27.0",
 		"tailwindcss": "^1.9.6",
 		"vue-template-compiler": "^2.6.12"

src/components/downloads/TheDownloadBar.vue

@@ -1,13 +1,14 @@
 <template>
-	<div
+	<section
 		id="download_tab_container"
-		class="block tab_hidden bg-panels-bg text-foreground"
+		class="block bg-panels-bg text-foreground h-screen"
+		:class="{ 'tab-hidden': !isExpanded, 'w-8': !isExpanded }"
 		@transitionend="$refs.container.style.transition = ''"
 		ref="container"
 		:data-label="$t('downloads')"
 		aria-label="downloads"
 	>
-		<!-- Drag Handler -->
+		<!-- Drag handler -->
 		<div
 			v-show="isExpanded"
 			class="absolute w-4 h-full bg-grayscale-200"
@@ -15,14 +16,21 @@
 			style="cursor: ew-resize"
 		></div>
 
+		<!-- Bar toggler -->
 		<i
 			id="toggle_download_tab"
 			class="m-1 text-2xl cursor-pointer material-icons"
+			:class="{ 'ml-1': !isExpanded, 'ml-5': isExpanded }"
 			@click.prevent="toggleDownloadTab"
 			ref="toggler"
 			:title="$t('globals.toggle_download_tab_hint')"
 		></i>
-		<div id="queue_buttons">
+
+		<!-- Queue buttons -->
+		<div
+			class="absolute top-0 right-0 transition-all duration-200 ease-in-out"
+			:class="{ 'opacity-0 invisible': !isExpanded, 'opacity-100 visible': isExpanded }"
+		>
 			<i
 				v-if="clientMode"
 				class="m-1 text-2xl cursor-pointer material-icons"
@@ -52,12 +60,37 @@
 				@remove-item="onRemoveItem"
 			/>
 		</div>
-	</div>
+	</section>
 </template>
 
 <style lang="scss" scoped>
-#download_tab_container {
-	height: 100vh;
+#toggle_download_tab {
+	width: 25px;
+	height: 25px;
+
+	&::before {
+		font-family: 'Material Icons';
+		font-style: normal;
+		font-weight: 400;
+		content: 'chevron_right';
+	}
+}
+
+#download_tab_container.tab-hidden {
+	#toggle_download_tab {
+		&::before {
+			content: 'chevron_left';
+		}
+	}
+
+	&::after {
+		content: attr(data-label);
+		display: flex;
+		align-items: center;
+		text-transform: capitalize;
+		writing-mode: vertical-rl;
+		line-height: 2rem;
+	}
 }
 
 #download_list {
@@ -139,9 +172,7 @@ export default {
 			this.$refs.list.classList.add('slim')
 		}
 
-		if ('true' === localStorage.getItem('downloadTabOpen')) {
-			this.$refs.container.classList.remove('tab_hidden')
-
+		if (this.isExpanded) {
 			this.setTabWidth(this.cachedTabWidth)
 		}
 
@@ -305,8 +336,7 @@ export default {
 			this.$refs.container.style.transition = 'all 250ms ease-in-out'
 
 			// Toggle returns a Boolean based on the action it performed
-			let isHidden = this.$refs.container.classList.toggle('tab_hidden')
-			this.isExpanded = !isHidden
+			this.isExpanded = !this.isExpanded
 
 			if (this.isExpanded) {
 				this.setTabWidth(this.cachedTabWidth)

src/styles/scss/style.scss

@@ -25,7 +25,6 @@ body {
 @import './globals/globals';
 @import './globals/tables';
 
-@import './tabs/download-tab';
 @import './tabs/search-tab';
 @import './tabs/settings-tab';
 @import './tabs/tabs';

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

@@ -1,49 +0,0 @@
-#download_tab_container {
-	#queue_buttons {
-		position: absolute;
-		top: 0;
-		right: 0;
-		opacity: 1;
-		visibility: visible;
-		transition: all 250ms ease-in-out;
-	}
-
-	&.tab_hidden {
-		width: 32px;
-
-		#toggle_download_tab {
-			margin-left: 4px;
-
-			&::before {
-				content: 'chevron_left';
-			}
-		}
-
-		#queue_buttons {
-			opacity: 0;
-			visibility: hidden;
-		}
-
-		&::after {
-			content: attr(data-label);
-			display: flex;
-			align-items: center;
-			text-transform: capitalize;
-			writing-mode: vertical-rl;
-			line-height: 32px;
-		}
-	}
-}
-
-#toggle_download_tab {
-	width: 25px;
-	height: 25px;
-	margin-left: 20px;
-
-	&::before {
-		font-family: 'Material Icons';
-		font-style: normal;
-		font-weight: 400;
-		content: 'chevron_right';
-	}
-}