build: v1.1.2, chore: improved charts displaying by removing duplicated worldwide chart code; style: removed a lot of .scss files in favor off tailwind utilities; chore: removed some unused ids; style: improved feedback on section-tabs; chore: replaced css variable in primary color in tailwind config with the hsl color code

src/components/downloads/QueueItem.vue

@@ -129,6 +129,58 @@
 		}
 	}
 }
+
+.progress {
+	position: relative;
+	height: 4px;
+	display: block;
+	width: 100%;
+	background-color: var(--secondary-background);
+	border-radius: 2px;
+	margin: 0.5rem 0 1rem 0;
+	overflow: hidden;
+
+	.determinate {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		background-color: var(--primary-color);
+		transition: width 0.3s linear;
+	}
+
+	.converting {
+		background-color: var(--secondary-color);
+		transition: none !important;
+	}
+
+	.indeterminate {
+		background-color: var(--primary-color);
+
+		&::before {
+			content: '';
+			position: absolute;
+			background-color: inherit;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			will-change: left, right;
+			animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			background-color: inherit;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			will-change: left, right;
+			animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+			animation-delay: 1.15s;
+		}
+	}
+}
 </style>
 
 <script>

src/components/downloads/TheDownloadBar.vue

@@ -1,16 +1,23 @@
 <template>
 	<div
 		id="download_tab_container"
-		class="tab_hidden"
+		class="block tab_hidden bg-panels-bg text-panels-text"
 		@transitionend="$refs.container.style.transition = ''"
 		ref="container"
 		:data-label="$t('downloads')"
 		aria-label="downloads"
 	>
-		<div id="download_tab_drag_handler" @mousedown.prevent="startDrag" ref="dragHandler"></div>
+		<!-- Drag Handler -->
+		<div
+			v-show="isExpanded"
+			class="absolute w-4 h-full bg-grayscale-200"
+			@mousedown.prevent="startDrag"
+			style="cursor: ew-resize"
+		></div>
+
 		<i
 			id="toggle_download_tab"
-			class="material-icons download_bar_icon"
+			class="m-1 text-2xl cursor-pointer material-icons"
 			@click.prevent="toggleDownloadTab"
 			ref="toggler"
 			:title="$t('globals.toggle_download_tab_hint')"
@@ -18,20 +25,25 @@
 		<div id="queue_buttons">
 			<i
 				v-if="clientMode"
-				class="material-icons download_bar_icon"
+				class="m-1 text-2xl cursor-pointer material-icons"
 				:title="$t('globals.open_downloads_folder')"
 				@click="openDownloadsFolder"
 			>
 				folder_open
 			</i>
-			<i class="material-icons download_bar_icon" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
+			<i class="m-1 text-2xl cursor-pointer material-icons" @click="cleanQueue" :title="$t('globals.clean_queue_hint')">
 				clear_all
 			</i>
-			<i class="material-icons download_bar_icon" @click="cancelQueue" :title="$t('globals.cancel_queue_hint')">
+			<i
+				class="m-1 text-2xl cursor-pointer material-icons"
+				@click="cancelQueue"
+				:title="$t('globals.cancel_queue_hint')"
+			>
 				delete_sweep
 			</i>
 		</div>
-		<div id="download_list" ref="list">
+
+		<div v-show="isExpanded" id="download_list" class="w-full pr-2" ref="list">
 			<QueueItem
 				v-for="item in queueList"
 				:queue-item="item"
@@ -47,6 +59,27 @@
 #download_tab_container {
 	height: 100vh;
 }
+
+#download_list {
+	height: calc(100% - 32px);
+	padding-left: 28px;
+	overflow-y: scroll;
+
+	&::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: var(--panels-background);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--panels-scroll);
+		border-radius: 4px;
+		width: 6px;
+		padding: 0px 2px;
+	}
+}
 </style>
 
 <script>
@@ -68,8 +101,8 @@ export default {
 			cachedTabWidth: parseInt(localStorage.getItem('downloadTabWidth')) || 300,
 			queue: [],
 			queueList: {},
-			queueComplete: []
-			// clientMode: window.clientMode
+			queueComplete: [],
+			isExpanded: localStorage.getItem('downloadTabOpen') === 'true'
 		}
 	},
 	computed: {
@@ -273,12 +306,13 @@ export default {
 
 			// Toggle returns a Boolean based on the action it performed
 			let isHidden = this.$refs.container.classList.toggle('tab_hidden')
+			this.isExpanded = !isHidden
 
-			if (!isHidden) {
+			if (this.isExpanded) {
 				this.setTabWidth(this.cachedTabWidth)
 			}
 
-			localStorage.setItem('downloadTabOpen', !isHidden)
+			localStorage.setItem('downloadTabOpen', this.isExpanded)
 		},
 		cleanQueue() {
 			socket.emit('removeFinishedDownloads')