Show mime icon, bump bundles, make the SearchResultEntry class non-abstract, Fix header search icon, various fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 98 insertions, 5 deletions

diff --git a/core/src/components/UnifiedSearch/SearchResult.vue b/core/src/components/UnifiedSearch/SearchResult.vue
index 832770c9abe..ffd4e2bf2f2 100644
--- a/core/src/components/UnifiedSearch/SearchResult.vue
+++ b/core/src/components/UnifiedSearch/SearchResult.vue
@@ -2,22 +2,28 @@
 	<a :href="resourceUrl || '#'"
 		class="unified-search__result"
 		:class="{
-			'unified-search__result--focused': focused
+			'unified-search__result--focused': focused,
 		}"
 		@click="reEmitEvent"
 		@focus="reEmitEvent">
+
 		<!-- Icon describing the result -->
 		<div class="unified-search__result-icon"
 			:class="{
 				'unified-search__result-icon--rounded': rounded,
 				'unified-search__result-icon--no-preview': !hasValidThumbnail && !loaded,
 				'unified-search__result-icon--with-thumbnail': hasValidThumbnail && loaded,
-				[iconClass]: true
+				[icon]: !loaded && !isIconUrl,
+			}"
+			:style="{
+				backgroundImage: isIconUrl ? `url(${icon})` : '',
 			}"
 			role="img">
+
 			<img v-if="hasValidThumbnail"
+				v-show="loaded"
 				:src="thumbnailUrl"
-				:alt="t('core', 'Thumbnail for {result}', {result: title})"
+				alt=""
 				@error="onError"
 				@load="onLoad">
 		</div>
@@ -59,7 +65,7 @@ export default {
 			type: String,
 			default: null,
 		},
-		iconClass: {
+		icon: {
 			type: String,
 			default: '',
 		},
@@ -90,6 +96,24 @@ export default {
 		}
 	},
 
+	computed: {
+		isIconUrl() {
+			// If we're facing an absolute url
+			if (this.icon.startsWith('/')) {
+				return true
+			}
+
+			// Otherwise, let's check if this is a valid url
+			try {
+				// eslint-disable-next-line no-new
+				new URL(this.icon)
+			} catch {
+				return false
+			}
+			return true
+		},
+	},
+
 	watch: {
 		// Make sure to reset state on change even when vue recycle the component
 		thumbnailUrl() {
@@ -148,6 +172,7 @@ $margin: 10px;
 		width: $clickable-area;
 		height: $clickable-area;
 		border-radius: var(--border-radius);
+		background-repeat: no-repeat;
 		background-position: center center;
 		background-size: 32px;
 		&--rounded {
@@ -195,7 +220,7 @@ $margin: 10px;
 	&-line-two {
 		overflow: hidden;
 		flex: 1 1 100%;
-		margin: 0;
+		margin: 1px 0;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		// Use the same color as the `a`
diff --git a/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue b/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue
new file mode 100644
index 00000000000..7eb0915b359
--- /dev/null
+++ b/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue
@@ -0,0 +1,68 @@
+<template>
+	<svg
+		class="unified-search__result-placeholder"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="url(#unified-search__result-placeholder-gradient)">
+		<defs>
+			<linearGradient id="unified-search__result-placeholder-gradient">
+				<stop offset="0%" stop-color="#ededed"><animate attributeName="stop-color"
+					values="#ededed; #ededed; #cccccc; #cccccc; #ededed"
+					dur="2s"
+					repeatCount="indefinite" /></stop>
+				<stop offset="100%" stop-color="#cccccc"><animate attributeName="stop-color"
+					values="#cccccc; #ededed; #ededed; #cccccc; #cccccc"
+					dur="2s"
+					repeatCount="indefinite" /></stop>
+			</linearGradient>
+		</defs>
+		<rect class="unified-search__result-placeholder-icon" />
+		<rect class="unified-search__result-placeholder-line-one" />
+		<rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth}%)`}" />
+	</svg>
+</template>
+
+<script>
+export default {
+	name: 'SearchResultPlaceholder',
+
+	data() {
+		return {
+			randWidth: Math.floor(Math.random() * 20) + 30,
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+$clickable-area: 44px;
+$margin: 10px;
+
+.unified-search__result-placeholder {
+	width: calc(100% - 2 * #{$margin});
+	height: $clickable-area;
+	margin: $margin;
+
+	&-icon {
+		width: $clickable-area;
+		height: $clickable-area;
+		rx: var(--border-radius);
+		ry: var(--border-radius);
+	}
+
+	&-line-one,
+	&-line-two {
+		width: calc(100% - #{$margin + $clickable-area});
+		height: 1em;
+		x: $margin + $clickable-area;
+	}
+
+	&-line-one {
+		y: 5px;
+	}
+
+	&-line-two {
+		y: 25px;
+	}
+}
+
+</style>