Added search error page

For example while searching for curl and wget

src/components/pages/Search.vue

@@ -186,10 +186,11 @@ export default defineComponent({
 
 		// Search watcher
 		watch(result, newValue => {
-			const { next: nextResult, total, type, data: newData } = newValue
+			const { next: nextResult, total, type, data: newData, error } = newValue
 
 			const currentTabKey = `${type}Tab`
 			let next = total
+			state.results[currentTabKey].error = error
 
 			if (nextResult) {
 				next = parseInt(nextResult.match(/index=(\d*)/)[1])

src/components/search/ResultsAlbums.vue

@@ -3,8 +3,9 @@
 		<BaseLoadingPlaceholder v-if="isLoading" />
 
 		<template v-else>
-			<div v-if="viewInfo.data.length === 0">
+			<ResultsError v-if="viewInfo.error" :error="viewInfo.error"></ResultsError>
-				<h1>{{ $t('search.noResultsAlbum') }}</h1>
+			<div v-else-if="viewInfo.data.length === 0">
+				<h1 class="text-center">{{ $t('search.noResultsAlbum') }}</h1>
 			</div>
 
 			<div v-else class="release-grid">
@@ -45,11 +46,13 @@
 <script>
 import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 import CoverContainer from '@components/globals/CoverContainer.vue'
+import ResultsError from '@components/search/ResultsError.vue'
 
 export default {
 	components: {
 		BaseLoadingPlaceholder,
-		CoverContainer
+		CoverContainer,
+		ResultsError
 	},
 	props: {
 		viewInfo: {

src/components/search/ResultsAll.vue

@@ -1,7 +1,8 @@
 <template>
 	<section>
-		<div v-if="!thereAreResults">
+		<ResultsError v-if="viewInfo.ERROR" :error="viewInfo.ERROR"></ResultsError>
-			<h1>{{ $t('search.noResults') }}</h1>
+		<div v-else-if="!thereAreResults">
+			<h1 class="text-center">{{ $t('search.noResults') }}</h1>
 		</div>
 
 		<template v-else>
@@ -66,6 +67,7 @@ import ResultsTracks from '@components/search/ResultsTracks.vue'
 import ResultsAlbums from '@components/search/ResultsAlbums.vue'
 import ResultsArtists from '@components/search/ResultsArtists.vue'
 import ResultsPlaylists from '@components/search/ResultsPlaylists.vue'
+import ResultsError from '@components/search/ResultsError.vue'
 
 import { formatSingleTrack, formatAlbums, formatArtist, formatPlaylist } from '@/data/search'
 import { standardizeData } from '@/data/standardize'
@@ -76,7 +78,8 @@ export default {
 		ResultsTracks,
 		ResultsAlbums,
 		ResultsArtists,
-		ResultsPlaylists
+		ResultsPlaylists,
+		ResultsError
 	},
 	props: {
 		viewInfo: {

src/components/search/ResultsArtists.vue

@@ -3,8 +3,9 @@
 		<BaseLoadingPlaceholder v-if="isLoading" />
 
 		<template v-else>
-			<div v-if="viewInfo.data.length === 0">
+			<ResultsError v-if="viewInfo.error" :error="viewInfo.error"></ResultsError>
-				<h1>{{ $t('search.noResultsArtist') }}</h1>
+			<div v-else-if="viewInfo.data.length === 0">
+				<h1 class="text-center">{{ $t('search.noResultsArtist') }}</h1>
 			</div>
 
 			<div v-else class="release-grid">
@@ -33,11 +34,13 @@
 <script>
 import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 import CoverContainer from '@components/globals/CoverContainer.vue'
+import ResultsError from '@components/search/ResultsError.vue'
 
 export default {
 	components: {
 		BaseLoadingPlaceholder,
-		CoverContainer
+		CoverContainer,
+		ResultsError
 	},
 	props: {
 		viewInfo: {

src/components/search/ResultsError.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="text-center">
+    <h1>{{ $t('search.error') }}</h1>
+    <p class="secondary-text mt-4">{{ error }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+		error: {
+			type: String,
+			default: "Error"
+		}
+	}
+}
+</script>

src/components/search/ResultsPlaylists.vue

@@ -3,8 +3,9 @@
 		<BaseLoadingPlaceholder v-if="isLoading" />
 
 		<template v-else>
-			<div v-if="viewInfo.data.length === 0">
+			<ResultsError v-if="viewInfo.error" :error="viewInfo.error"></ResultsError>
-				<h1>{{ $t('search.noResultsPlaylist') }}</h1>
+			<div v-else-if="viewInfo.data.length === 0">
+				<h1 class="text-center">{{ $t('search.noResultsPlaylist') }}</h1>
 			</div>
 			<div v-else class="release-grid">
 				<div v-for="playlist in viewInfo.data.slice(0, itemsToShow)" :key="playlist.playlistID" class="w-40 release">
@@ -38,11 +39,13 @@
 <script>
 import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 import CoverContainer from '@components/globals/CoverContainer.vue'
+import ResultsError from '@components/search/ResultsError.vue'
 
 export default {
 	components: {
 		BaseLoadingPlaceholder,
-		CoverContainer
+		CoverContainer,
+		ResultsError
 	},
 	props: {
 		viewInfo: {

src/components/search/ResultsTracks.vue

@@ -3,8 +3,9 @@
 		<BaseLoadingPlaceholder v-if="isLoading" />
 
 		<template v-else>
-			<div v-if="viewInfo.data.length === 0">
+			<ResultsError v-if="viewInfo.error" :error="viewInfo.error"></ResultsError>
-				<h1>{{ $t('search.noResultsTrack') }}</h1>
+			<div v-else-if="viewInfo.data.length === 0">
+				<h1 class="text-center">{{ $t('search.noResultsTrack') }}</h1>
 			</div>
 
 			<table v-else class="table w-full table--tracks">
@@ -88,6 +89,7 @@
 <script>
 import BaseLoadingPlaceholder from '@components/globals/BaseLoadingPlaceholder.vue'
 import PreviewControls from '@components/globals/PreviewControls.vue'
+import ResultsError from '@components/search/ResultsError.vue'
 import { playPausePreview } from '@components/globals/TheTrackPreview.vue'
 
 import { convertDuration } from '@/utils/utils'
@@ -97,7 +99,8 @@ import { formatTitle } from '@/data/search'
 export default {
 	components: {
 		BaseLoadingPlaceholder,
-		PreviewControls
+		PreviewControls,
+		ResultsError
 	},
 	props: {
 		viewInfo: {

src/data/standardize.js

@@ -13,7 +13,8 @@ export function standardizeData(rawObj, formatFunc) {
 
 		return {
 			data: formattedData,
-			hasLoaded: rawObj.hasLoaded
+			hasLoaded: rawObj.hasLoaded,
+			error: rawObj.error
 		}
 	}
 }

src/lang/en.mjs

@@ -189,7 +189,8 @@ const en = {
 		noResultsTrack: 'No Tracks found',
 		noResultsAlbum: 'No Albums found',
 		noResultsArtist: 'No Artists found',
-		noResultsPlaylist: 'No Playlists found'
+		noResultsPlaylist: 'No Playlists found',
+		error: 'An error occurred, please try again later.'
 	},
 	searchbar: 'Search anything you want (or just paste a link)',
 	downloads: 'downloads',

src/lang/it.mjs

@@ -189,7 +189,8 @@ const it = {
 		noResultsTrack: 'Nessun brano trovato',
 		noResultsAlbum: 'Nessun album trovato',
 		noResultsArtist: 'Nessun artista trovato',
-		noResultsPlaylist: 'Nessuna playlist trovata'
+		noResultsPlaylist: 'Nessuna playlist trovata',
+		error: 'Si è verificato un errore, riprova più tardi.'
 	},
 	searchbar: 'Cerca qualsiasi cosa (o incolla semplicemente un link)',
 	downloads: 'download',