Merge main into refactor/code-cleanup

src/App.vue

@@ -5,6 +5,7 @@
 
 			<div class="content-container">
 				<TheSearchBar />
+				<DeezerWarning />
 				<TheContent />
 			</div>
 
@@ -32,6 +33,7 @@ import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.v
 import TheContextMenu from '@components/globals/TheContextMenu.vue'
 import TheTrackPreview from '@components/globals/TheTrackPreview.vue'
 import TheQualityModal from '@components/globals/TheQualityModal.vue'
+import DeezerWarning from '@components/globals/DeezerWarning.vue'
 // import ConfirmModal from '@components/globals/ConfirmModal.vue'
 import TheSidebar from '@components/TheSidebar.vue'
 import TheSearchBar from '@components/TheSearchBar.vue'
@@ -47,7 +49,8 @@ export default {
 		TheQualityModal,
 		BaseLoadingPlaceholder,
 		TheContextMenu,
-		TheContent
+		TheContent,
+		DeezerWarning
 		// ConfirmModal
 	},
 	data() {

src/app.js

@@ -36,6 +36,7 @@ async function startApp() {
 	}).$mount('#app')
 
 	const connectResponse = await (await fetch('connect')).json()
+	if (!connectResponse.deezerAvailable) document.getElementById('deezer_not_available').classList.remove('hide')
 
 	store.dispatch('setAppInfo', connectResponse.update).catch(console.error)
 

src/components/globals/DeezerWarning.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="deezer_not_available" class="hide">
+    <i class="material-icons">warning</i> {{ $t('toasts.deezerNotAvailable') }}
+  </div>
+</template>
+
+<style>
+  #deezer_not_available {
+    background-color: hsl(53, 98%, 47%);
+    color: rgba(0,0,0, .75);
+    padding: 8px 12px;
+    margin: -10px 10px 0px;
+    display: flex;
+    border-radius: 8px;
+    align-items: center;
+  }
+  #deezer_not_available i {
+    margin-right: 8px;
+  }
+  #deezer_not_available.hide {
+    display: none !important;
+  }
+</style>