From a6e8bb51c535a8d1a6095d7b968d2468868a72fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 25 Sep 2026 22:51:11 +0200
Subject: [PATCH] Split search result rows

---
 app/components/Search/Row.vue | 143 ++++++++++++++++++++++++++++++++++
 app/pages/search.vue          |  19 ++---
 2 files changed, 151 insertions(+), 11 deletions(-)
 create mode 100644 app/components/Search/Row.vue

diff --git a/app/components/Search/Row.vue b/app/components/Search/Row.vue
new file mode 100644
index 0000000..a1c0a49
--- /dev/null
+++ b/app/components/Search/Row.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+interface SearchResult {
+	type: "track" | "album" | "artist"
+	_id: string
+	name: string
+	file?: string
+	cover?: string
+	album?: { _id?: string; name?: string; file?: string; cover?: string }
+	artists?: Artist[]
+}
+
+const props = defineProps<{ result: SearchResult; index: number }>()
+const emit = defineEmits<{ (e: "play"): void }>()
+
+const artworkSrc = computed(() => {
+	const file = props.result.type === "track"
+		? props.result.album?.file ?? props.result.album?.cover
+		: props.result.file ?? props.result.cover
+	return file ? GET_FILE(file) : undefined
+})
+
+const entryType = computed(() =>
+	props.result.type === "track"
+		? "Song"
+		: props.result.type === "album"
+			? "Album"
+			: "Artist",
+)
+</script>
+
+<template>
+	<article class="search-row" :class="{ odd: props.index % 2 === 1 }">
+		<div class="artwork" @click="props.result.type === 'track' && emit('play')">
+			<NuxtImg
+				v-if="artworkSrc"
+				:src="artworkSrc"
+				width="40"
+				height="40"
+				placeholder
+			/>
+			<Icon
+				v-if="props.result.type === 'track'"
+				name="lucide:play"
+				class="play-icon"
+			/>
+		</div>
+		<div class="details">
+			<p v-if="props.result.type === 'track'">{{ props.result.name }}</p>
+			<NuxtLink
+				v-else
+				:to="`/${props.result.type}/${props.result._id}`"
+			>
+				{{ props.result.name }}
+			</NuxtLink>
+			<span class="entry-type">{{ entryType }}</span>
+		</div>
+		<ArtistName
+			v-if="props.result.type === 'album' && props.result.artists?.length"
+			:artists="props.result.artists"
+			class="artists"
+		/>
+		<span v-else />
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+@use "sass:color";
+
+.search-row {
+	display: grid;
+	grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr);
+	gap: 0.75rem;
+	align-items: center;
+	padding: 0.7rem 1rem;
+	border-radius: $border-radius-standard;
+	background-color: $color-background;
+	line-height: 1.2;
+
+	&.odd {
+		background-color: color.adjust($color-background, $lightness: 3%);
+	}
+
+	&:hover {
+		background-color: color.adjust($color-background, $lightness: 5%);
+	}
+}
+
+.artwork {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: $border-radius-standard;
+	cursor: pointer;
+
+	img {
+		max-width: 100%;
+		max-height: 100%;
+		border-radius: inherit;
+	}
+
+	&:hover .play-icon {
+		opacity: 1;
+	}
+}
+
+.play-icon {
+	position: absolute;
+	opacity: 0;
+	font-size: 1.4rem;
+	transition: opacity 0.15s ease;
+}
+
+.details {
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.3rem;
+
+	p,
+	a {
+		overflow: hidden;
+		margin: 0;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
+}
+
+.entry-type {
+	font-size: 0.8em;
+	opacity: 0.65;
+}
+
+.artists {
+	min-width: 0;
+}
+</style>
diff --git a/app/pages/search.vue b/app/pages/search.vue
index f3dc0bc..7ca5796 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -24,9 +24,14 @@ watch(query, (value) => {
 	clearTimeout(debounceTimeout)
 	debounceTimeout = setTimeout(() => {
 		debouncedQuery.value = value
+		debounceTimeout = undefined
 	}, 300)
 })
 
+onBeforeUnmount(() => {
+	clearTimeout(debounceTimeout)
+})
+
 const { data, status, error } = await useApiFetch<SearchResult[]>("/search", {
 	query: { q: debouncedQuery, limit: 9 },
 	watch: [debouncedQuery],
@@ -110,18 +115,10 @@ const playResult = (result: SearchResult | Track) => {
 				v-for="(result, index) in results"
 				:key="`${result.type}-${result._id}`"
 			>
-				<TrackRow
-					v-if="result.type === 'track'"
-					:track="result as unknown as Track"
+				<SearchRow
+					:result="result"
 					:index="index"
-					show-image
-					@play-album-at-index="playResult(result)"
-				/>
-				<TrackRow
-					v-else
-					:entity="result"
-					:index="index"
-					show-image
+					@play="playResult(result)"
 				/>
 			</template>
 		</section>