perf: removed TheMiddleSection component

src/components/App.vue

@@ -5,7 +5,7 @@
 		<div class="app-container">
 			<div class="content-container">
 				<TheSearchBar />
-				<TheMiddleSection />
+				<TheContent />
 			</div>
 			<TheDownloadTab class="downlaods" />
 		</div>
@@ -38,24 +38,24 @@
 
 <script>
 import TheSidebar from '@components/TheSidebar.vue'
-import TheMiddleSection from '@components/TheMiddleSection.vue'
 import TheTrackPreview from '@components/TheTrackPreview.vue'
 import TheQualityModal from '@components/TheQualityModal.vue'
 import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
 import TheContextMenu from '@components/TheContextMenu.vue'
 import TheDownloadTab from '@components/TheDownloadTab.vue'
 import TheSearchBar from '@components/TheSearchBar.vue'
+import TheContent from '@components/TheContent.vue'
 
 export default {
 	components: {
 		TheSidebar,
 		TheSearchBar,
-		TheMiddleSection,
 		TheDownloadTab,
 		TheTrackPreview,
 		TheQualityModal,
 		BaseLoadingPlaceholder,
-		TheContextMenu
+		TheContextMenu,
+		TheContent
 	}
 }
 </script>

src/components/TheContent.vue

@@ -1,5 +1,10 @@
 <template>
-	<section id="content" @scroll="$route.name === 'Search' ? handleContentScroll($event) : null" ref="content">
+	<main
+		id="content"
+		@scroll="$route.name === 'Search' ? handleContentScroll($event) : null"
+		ref="content"
+		aria-label="main content"
+	>
 		<div id="container">
 			<BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="!loading" />
 
@@ -21,7 +26,7 @@
 				exclude=""
 			></router-view>
 		</div>
-	</section>
+	</main>
 </template>
 
 <style lang="scss">
@@ -31,8 +36,9 @@
 	width: var(--container-width);
 }
 
-#content {
+main {
 	background-color: var(--main-background);
+	padding-right: 5px;
 	width: 100%;
 	height: calc(100vh - 93px);
 	overflow-y: scroll;
@@ -57,7 +63,6 @@
 
 <script>
 import { debounce } from '@/utils/utils'
-import EventBus from '@/utils/EventBus.js'
 import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
 
 export default {
@@ -70,9 +75,7 @@ export default {
 	}),
 	mounted() {
 		this.$root.$on('updateSearchLoadingState', loading => {
-			console.log('yes')
 			this.loading = loading
-			console.log('no')
 		})
 
 		this.$router.beforeEach((to, from, next) => {

src/components/TheMiddleSection.vue

@@ -1,33 +0,0 @@
-<template>
-	<main id="main_content" aria-label="content">
-		<TheContent />
-		<!-- <BaseLoadingPlaceholder id="search_placeholder" text="Searching..." :hidden="true" /> -->
-	</main>
-</template>
-
-<style lang="scss" scoped>
-#main_content {
-	background-color: var(--main-background);
-	min-width: 10px;
-	// margin-left: 48px; // $sidebar-width
-	// width: calc(100% - #{$sidebar-width});
-	// flex: 1;
-	width: 100%;
-	height: 100%;
-}
-</style>
-
-<script>
-import TheContent from '@components/TheContent.vue'
-import BaseLoadingPlaceholder from '@components/BaseLoadingPlaceholder.vue'
-
-export default {
-	components: {
-		TheContent,
-		BaseLoadingPlaceholder
-	}
-}
-</script>
-
-<style>
-</style>