feat(core): redesign unified search result presentation

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

Author: pringelmann

apps/settings/lib/Search/SectionSearch.php

@@ -121,9 +121,7 @@ public function searchSections(ISearchQuery $query, array $sections, string $sub
 					continue;
 				}
 
-				// The section's own icon, falling back to a generic cog when it has none.
-				// These are dark monochrome glyphs; the client inverts them for dark
-				// themes via --background-invert-if-dark.
+				// The section's own icon, or a generic cog fallback.
 				$icon = $section->getIcon();
 				if ($icon === '') {
 					$icon = $this->urlGenerator->imagePath('settings', 'settings.svg');

core/src/components/AppIcon.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 withDefaults(defineProps<{
-	/** URL of the app icon. Painted bright on the coloured circle, like the app menu. */
+	/** URL of the app icon (painted bright on the coloured circle). */
 	icon: string
 	/** Render the circle as an outline only (no fill or gradient). */
 	outlined?: boolean
@@ -55,13 +55,11 @@ withDefaults(defineProps<{
 	&__img {
 		width: var(--app-icon-icon-size);
 		height: var(--app-icon-icon-size);
-		// App icons are bright by default; flip them to dark when the
-		// primary color (circle background) is bright (e.g. white in dark mode).
+		// App icons are bright; flip to dark when the circle background is bright (e.g. white in dark mode).
 		filter: var(--primary-invert-if-bright);
 		mask: var(--header-menu-icon-mask);
 	}
 
-	// Outlined variant: no fill or gradient.
 	&--outlined {
 		background: transparent;
 		background-image: none;

core/src/components/UnifiedSearch/SearchResult.vue

@@ -12,22 +12,29 @@
 		:href="resourceUrl"
 		target="_self">
 		<template #icon>
+			<AppIcon
+				v-if="isAppIcon"
+				class="result-item__app-icon"
+				:icon="icon" />
 			<div
+				v-else
 				aria-hidden="true"
 				class="result-item__icon"
 				:class="{
 					'result-item__icon--rounded': rounded,
-					'result-item__icon--no-preview': !isValidIconOrPreviewUrl(thumbnailUrl),
-					'result-item__icon--with-thumbnail': isValidIconOrPreviewUrl(thumbnailUrl),
-					[icon]: !isValidIconOrPreviewUrl(icon),
-				}"
-				:style="{
-					backgroundImage: isValidIconOrPreviewUrl(icon) ? `url(${icon})` : '',
+					'result-item__icon--with-thumbnail': hasThumbnail,
+					[icon]: !iconIsUrl && !hasThumbnail,
 				}">
 				<img
-					v-if="isValidIconOrPreviewUrl(thumbnailUrl) && !thumbnailHasError"
+					v-if="hasThumbnail"
 					:src="thumbnailUrl"
 					@error="thumbnailErrorHandler">
+				<img
+					v-else-if="iconIsUrl"
+					class="result-item__icon-img"
+					:src="icon"
+					alt=""
+					aria-hidden="true">
 			</div>
 		</template>
 		<template #subname>
@@ -38,10 +45,12 @@
 
 <script>
 import NcListItem from '@nextcloud/vue/components/NcListItem'
+import AppIcon from '../AppIcon.vue'
 
 export default {
 	name: 'SearchResult',
 	components: {
+		AppIcon,
 		NcListItem,
 	},
 
@@ -108,6 +117,26 @@ export default {
 		}
 	},
 
+	computed: {
+		/** A usable thumbnail image (a preview/avatar), not errored. */
+		hasThumbnail() {
+			return this.isValidIconOrPreviewUrl(this.thumbnailUrl) && !this.thumbnailHasError
+		},
+
+		/** The icon is a real URL we can put in an <img>, not a legacy CSS class string. */
+		iconIsUrl() {
+			return this.isValidIconOrPreviewUrl(this.icon)
+		},
+
+		/**
+		 * App-style icon (bright glyph on a primary circle, like the app menu). Providers
+		 * flag it by marking the entry rounded with an icon URL and no thumbnail.
+		 */
+		isAppIcon() {
+			return this.rounded && this.iconIsUrl && !this.hasThumbnail
+		},
+	},
+
 	watch: {
 		thumbnailUrl() {
 			this.thumbnailHasError = false
@@ -128,58 +157,96 @@ export default {
 
 <style lang="scss" scoped>
 .result-item {
+	padding-inline: 0;
+
 	:deep(a) {
 		border: 2px solid transparent;
 		border-radius: var(--border-radius-large) !important;
 
+		// Hover/press: neutral gray fill only, no border.
 		&:active,
-		&:hover,
-		&:focus {
+		&:hover {
 			background-color: var(--color-background-hover);
-			border: 2px solid var(--color-border-maxcontrast);
+		}
+
+		// Plain Tab into a result keeps a visible focus ring (a11y). Normally the combobox
+		// keeps focus in the input and drives selection via `active` below.
+		&:focus-visible {
+			background-color: var(--color-background-hover);
+			border-color: var(--color-border-maxcontrast);
 		}
 
 		* {
 			cursor: pointer;
 		}
 	}
 
+	// NcListItem's `active` state paints a primary fill, white text and a blue stripe.
+	// We want a neutral look: the gray hover fill plus a maxcontrast border, readable text.
+	&.list-item__wrapper--active {
+		:deep(.list-item) {
+			background-color: var(--color-background-hover);
+
+			&:hover {
+				background-color: var(--color-background-hover);
+			}
+		}
+
+		// Undo the forced active text colour. Chain through the anchor to outrank
+		// NcListItem's own !important rule.
+		:deep(.list-item__anchor .list-item-content__name),
+		:deep(.list-item__anchor .list-item-content__subname),
+		:deep(.list-item__anchor .list-item-content__details),
+		:deep(.list-item__anchor .list-item-details__details) {
+			color: var(--color-main-text) !important;
+		}
+	}
+
 	&__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		overflow: hidden;
 		width: var(--default-clickable-area);
 		height: var(--default-clickable-area);
 		border-radius: var(--border-radius);
-		background-repeat: no-repeat;
-		background-position: center center;
-		background-size: 32px;
+		margin-inline-start: var(--default-grid-baseline);
 
 		&--rounded {
 			border-radius: calc(var(--default-clickable-area) / 2);
 		}
 
-		&--no-preview {
-			background-size: 32px;
-		}
-
-		&--with-thumbnail {
-			background-size: cover;
-		}
-
 		&--with-thumbnail:not(#{&}--rounded) {
 			border: 1px solid var(--color-border);
 			// compensate for border
 			max-height: calc(var(--default-clickable-area) - 2px);
 			max-width: calc(var(--default-clickable-area) - 2px);
 		}
 
-		img {
+		// A full-bleed thumbnail (preview or avatar) fills the box.
+		&--with-thumbnail img {
 			// Make sure to keep ratio
 			width: 100%;
 			height: 100%;
 
 			object-fit: cover;
 			object-position: center;
 		}
+
+		// A small monochrome glyph (e.g. a settings section), not a thumbnail.
+		&-img {
+			width: 20px;
+			height: 20px;
+			object-fit: contain;
+			// Dark monochrome icons invert to light in dark themes.
+			filter: var(--background-invert-if-dark);
+		}
+	}
+
+	// App results reuse the app-menu tile (AppIcon); size its circle to the icon column.
+	&__app-icon {
+		--app-icon-circle-size: var(--default-clickable-area);
+		margin-inline-start: var(--default-grid-baseline);
 	}
 }
 </style>

core/src/components/UnifiedSearch/UnifiedSearchInput.vue

@@ -57,6 +57,11 @@
 					<IconFilterVariant :size="20" />
 				</template>
 			</NcButton>
+			<!-- Loading spinner while a search is in flight. -->
+			<NcLoadingIcon
+				v-if="loading"
+				class="unified-search-input__loading"
+				:size="20" />
 			<!-- Trailing X: clears the query, or closes the search when the field is empty. -->
 			<NcButton
 				v-if="isActive"
@@ -87,6 +92,7 @@ import { computed, ref } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcHeaderButton from '@nextcloud/vue/components/NcHeaderButton'
 import NcKbd from '@nextcloud/vue/components/NcKbd'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconFilterVariant from 'vue-material-design-icons/FilterVariant.vue'
 import IconMagnify from 'vue-material-design-icons/Magnify.vue'
@@ -106,6 +112,8 @@ const props = defineProps<{
 	/** Id of the active result row, for aria-activedescendant. Empty when none. */
 	activeDescendantId?: string
 	query: string
+	/** A search is in flight: show the loading spinner. */
+	loading?: boolean
 	/** Filters are already revealed, so hide the pre-typing funnel. */
 	filtersRevealed?: boolean
 }>()
@@ -391,6 +399,13 @@ defineExpose({ focus })
 		margin-inline-end: 2px;
 	}
 
+	&__loading {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		margin-inline: 4px;
+	}
+
 	// Pinned to the trailing edge, overlaid on the input (pointer-events: none so a
 	// click there still focuses the field).
 	&__shortcut {
@@ -429,9 +444,11 @@ defineExpose({ focus })
 	--resting-background-hover: color-mix(in srgb, var(--color-primary-element) 22%, transparent);
 }
 
-// translateX is physical, so flip the resting slide under RTL to keep it moving
-// toward the leading (right) edge.
-[dir=rtl] .unified-search-input__resting {
+// translateX is physical, so flip the resting slide under RTL to keep it moving toward
+// the leading (right) edge. :dir(rtl) tracks the computed direction, so it applies whether
+// RTL comes from the body dir attribute or a direction style (an [dir=rtl] attribute
+// selector would miss the latter).
+.unified-search-input__resting:dir(rtl) {
 	--slide-sign: -1;
 }