Align search results with track rows

app/components/Track/Row.vue

@@ -2,20 +2,26 @@
 import type { DropdownMenuItem } from "~/ui/DropdownMenu.vue"
 
 interface TrackRowProps {
-	track: Track
+	track?: Track
+	entity?: {
+		type: "album" | "artist"
+		_id: string
+		name: string
+		file?: string
+		cover?: string
+		artists?: Artist[]
+	}
 	index: number
 	extendedInfo?: boolean
 	showImage?: boolean
 	queueMode?: boolean
 }
 
-const { track, index, extendedInfo, showImage, queueMode } =
+const props = defineProps<TrackRowProps>()
-	defineProps<TrackRowProps>()
 const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
 
 const hovering = ref(false)
 const { playAlbum, addToFrontOfQueue, addToQueue } = usePlayer()
-
 const toast = useToast()
 
 const dropdownMenuItems: DropdownMenuItem[][] = [
@@ -24,14 +30,15 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 			label: "Play only this",
 			icon: "lucide:play",
 			onSelect() {
-				playAlbum([track])
+				if (props.track) playAlbum([props.track])
 			},
 		},
 		{
 			label: "Play next",
 			icon: "lucide:list-start",
 			onSelect() {
-				addToFrontOfQueue(track)
+				if (!props.track) return
+				addToFrontOfQueue(props.track)
 				toast.show("Playing next")
 			},
 		},
@@ -39,41 +46,56 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 			label: "Add to queue",
 			icon: "lucide:list-end",
 			onSelect() {
-				addToQueue(track)
+				if (!props.track) return
+				addToQueue(props.track)
 				toast.show("Added to queue")
 			},
 		},
 	],
 ]
 
-const durationFormatted = computed(() =>
+const durationFormatted = computed(() => {
-	new Date(track.durationInSeconds * 1000).toISOString().slice(14, 19),
+	if (!props.track) return ""
-)
+	return new Date(props.track.durationInSeconds * 1000)
+		.toISOString()
+		.slice(14, 19)
+})
 
-const artworkSrc = computed(() => GET_FILE(track.album.file))
+const artworkSrc = computed(() => {
+	if (props.track) return GET_FILE(props.track.album.file)
+	const file = props.entity?.file ?? props.entity?.cover
+	return file ? GET_FILE(file) : undefined
+})
 </script>
 
 <template>
 	<article
 		class="track"
 		:class="{
-			extended: extendedInfo,
+			extended: props.extendedInfo,
-			odd: index % 2 == 1,
+			odd: props.index % 2 == 1,
-			image: showImage,
+			image: props.showImage,
-			queue: queueMode,
+			queue: props.queueMode,
 		}"
 		@mouseenter="hovering = true"
 		@mouseleave="hovering = false"
 	>
 		<div class="index" :class="{ hovering }">
-			<template v-if="showImage">
+			<template v-if="props.showImage">
 				<Icon
+					v-if="props.track"
 					name="lucide:play"
 					class="play-icon"
 					@click="emit('playAlbumAtIndex')"
 				/>
-				<!-- Confirm before changing forced image dimensions. -->
+				<!-- Keep the existing TrackRow artwork dimensions unchanged. -->
-				<NuxtImg :src="artworkSrc" width="40" height="40" placeholder />
+				<NuxtImg
+					v-if="artworkSrc"
+					:src="artworkSrc"
+					width="40"
+					height="40"
+					placeholder
+				/>
 			</template>
 			<template v-else>
 				<Icon
@@ -82,28 +104,43 @@ const artworkSrc = computed(() => GET_FILE(track.album.file))
 					class="play-icon inline"
 					@click="emit('playAlbumAtIndex')"
 				/>
-				<p v-else>{{ index + 1 }}</p>
+				<p v-else>{{ props.index + 1 }}</p>
 			</template>
 		</div>
 
-		<p>{{ track.name }}</p>
+		<p v-if="props.track">{{ props.track.name }}</p>
+		<NuxtLink
+			v-else-if="props.entity"
+			:to="`/${props.entity.type}/${props.entity._id}`"
+		>
+			{{ props.entity.name }}
+		</NuxtLink>
 
-		<template v-if="extendedInfo">
+		<template v-if="props.track && props.extendedInfo">
-			<ArtistName :artists="track.artists" class="artists" />
+			<ArtistName :artists="props.track.artists" class="artists" />
-			<NuxtLink :to="`/album/${track.album._id}`">
+			<NuxtLink :to="`/album/${props.track.album._id}`">
-				<p>{{ track.album.name }}</p>
+				<p>{{ props.track.album.name }}</p>
 			</NuxtLink>
 		</template>
+		<template v-else-if="props.entity">
+			<ArtistName
+				v-if="props.entity.type === 'album' && props.entity.artists?.length"
+				:artists="props.entity.artists"
+				class="artists"
+			/>
+			<span v-else />
+			<p>{{ props.entity.type }}</p>
+		</template>
 
-		<p>{{ durationFormatted }}</p>
+		<p v-if="props.track">{{ durationFormatted }}</p>
 
 		<Icon
-			v-if="queueMode"
+			v-if="props.queueMode"
 			name="lucide:grip-vertical"
 			class="queue-handle"
 			aria-hidden="true"
 		/>
-		<DropdownMenu v-else :items="dropdownMenuItems">
+		<DropdownMenu v-else-if="props.track" :items="dropdownMenuItems">
 			<Icon name="lucide:ellipsis" class="dropdown-icon" />
 		</DropdownMenu>
 	</article>
@@ -149,11 +186,17 @@ const artworkSrc = computed(() => GET_FILE(track.album.file))
 		cursor: grab;
 	}
 
-	p {
+	p,
+	> a {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+
+	> a {
+		color: inherit;
+		text-decoration: none;
+	}
 }
 
 .index {
@@ -162,7 +205,6 @@ const artworkSrc = computed(() => GET_FILE(track.album.file))
 	align-items: center;
 	font-size: 20px;
 	height: 20px;
-
 	position: relative;
 	cursor: pointer;
 

app/pages/search.vue

@@ -1,7 +1,176 @@
 <script setup lang="ts">
-const route = useRoute()
+import type { Track } from "@/utils/types"
 
-watchEffect(() => console.log(route.query.q))
+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 route = useRoute()
+const { currentSong, playAlbum } = usePlayer()
+const query = computed(() => {
+	const value = route.query.q
+	return (Array.isArray(value) ? value[0] : value ?? "").trim()
+})
+const debouncedQuery = ref(query.value)
+let debounceTimeout: ReturnType<typeof setTimeout> | undefined
+
+watch(query, (value) => {
+	clearTimeout(debounceTimeout)
+	debounceTimeout = setTimeout(() => {
+		debouncedQuery.value = value
+	}, 300)
+})
+
+const { data, status, error } = await useApiFetch<SearchResult[]>("/search", {
+	query: { q: debouncedQuery, limit: 9 },
+	watch: [debouncedQuery],
+})
+
+const results = computed<SearchResult[]>(() => {
+	const payload: any = data.value
+	if (Array.isArray(payload)) return payload
+	if (Array.isArray(payload?.results)) return payload.results
+	if (Array.isArray(payload?.data)) return payload.data
+	if (!payload || typeof payload !== "object") return []
+
+	return (["tracks", "albums", "artists"] as const).flatMap((kind) =>
+		Array.isArray(payload[kind])
+			? payload[kind].map((result: SearchResult) => ({
+					...result,
+					type: kind.slice(0, -1) as SearchResult["type"],
+				}))
+			: [],
+	)
+})
+
+const recentTracks = ref<Track[]>([])
+const recentStorageKey = "music-v2-recently-played"
+
+onMounted(() => {
+	try {
+		recentTracks.value = JSON.parse(
+			window.localStorage.getItem(recentStorageKey) ?? "[]",
+		) as Track[]
+	} catch {
+		recentTracks.value = []
+	}
+})
+
+watch(currentSong, (track) => {
+	if (!track || !import.meta.client) return
+	const updated = [
+		track,
+		...recentTracks.value.filter((item) => item._id !== track._id),
+	].slice(0, 9)
+	recentTracks.value = updated
+	window.localStorage.setItem(recentStorageKey, JSON.stringify(updated))
+})
+
+const playResult = (result: SearchResult | Track) => {
+	if ("album" in result && result.album) playAlbum([result as Track])
+}
 </script>
 
-<template></template>
+<template>
+	<main class="search-page">
+		<h1>Search</h1>
+
+		<p v-if="query && status === 'pending'" class="message" role="status">
+			Searching…
+		</p>
+		<p v-else-if="query && error" class="message" role="alert">
+			Search could not be loaded. Please try again.
+		</p>
+		<p
+			v-else-if="query && status === 'success' && results.length === 0"
+			class="message"
+		>
+			No results for “{{ query }}”.
+		</p>
+
+		<template v-if="!query || (status === 'success' && results.length === 0)">
+			<h2>Recently Played</h2>
+			<p v-if="recentTracks.length === 0" class="message">
+				Your recently played tracks will appear here.
+			</p>
+		</template>
+
+		<section
+			v-if="query && results.length"
+			class="results"
+			aria-label="Search results"
+		>
+			<template
+				v-for="(result, index) in results"
+				:key="`${result.type}-${result._id}`"
+			>
+				<TrackRow
+					v-if="result.type === 'track'"
+					:track="result as unknown as Track"
+					:index="index"
+					show-image
+					@play-album-at-index="playResult(result)"
+				/>
+				<TrackRow
+					v-else
+					:entity="result"
+					:index="index"
+					show-image
+				/>
+			</template>
+		</section>
+
+		<section
+			v-else-if="recentTracks.length && (!query || status === 'success')"
+			class="results"
+			aria-label="Recently played tracks"
+		>
+			<TrackRow
+				v-for="(track, index) in recentTracks"
+				:key="track._id"
+				:track="track"
+				:index="index"
+				show-image
+				@play-album-at-index="playResult(track)"
+			/>
+		</section>
+	</main>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.search-page {
+	padding-bottom: 2rem;
+
+	h1 {
+		@include fontSize(32px);
+		font-weight: 700;
+		margin-bottom: 1rem;
+	}
+
+	h2 {
+		@include fontSize(20px);
+		font-weight: 600;
+		margin: 1.5rem 0 0.8rem;
+	}
+}
+
+.results {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+}
+
+.message {
+	@include fontSize(14px);
+	opacity: 0.65;
+	margin: 0.75rem 0;
+}
+</style>