Add singles from admin

AGENTS.md

@@ -0,0 +1,56 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+
+This repository is a Nuxt 4 app. Application code lives under `app/`:
+
+- `app/pages/` route pages
+- `app/components/` feature components
+- `app/ui/` shared UI primitives
+- `app/composables/` reusable Vue logic
+- `app/utils/` helpers and type utilities
+- `app/styles/` global SCSS and variables
+- `app/plugins/` client-side plugins
+
+Static files belong in `public/`. Keep page-specific logic close to the page, and prefer shared code in `composables/`, `ui/`, or `utils/` when it is reused.
+
+## Build, Test, and Development Commands
+
+- `npm install` installs dependencies and runs Nuxt prepare through `postinstall`.
+- `npm run dev` starts the local dev server on `http://localhost:3000`.
+- `npm run build` creates a production build.
+- `npm run preview` serves the production build locally.
+- `npm run generate` builds a static output when needed.
+
+There is no dedicated automated test script in `package.json`, so verify changes manually in the browser after building or running the dev server.
+
+## Coding Style & Naming Conventions
+
+Prettier is configured with tabs, `tabWidth = 4`, and no semicolons. Follow the existing Vue/Nuxt style in the repo:
+
+- Use `PascalCase` for Vue components, such as `Player.vue` or `TrackDisplay.vue`.
+- Use `camelCase` for functions, composables, and variables.
+- Keep filenames descriptive and route-driven in `app/pages/` (for example `artist/[id]/index.vue`).
+
+Prefer the current patterns in the codebase over introducing new abstractions.
+
+When making changes that force an element's width or height, always ask the user for confirmation before doing so. This applies to any element, not just images. Do not force a width or height without explicit user approval.
+
+## Testing Guidelines
+
+No test framework is currently configured. For changes that affect rendering, routing, or API access, validate the affected pages manually and check browser console output. If you add tests later, colocate them near the feature or under a dedicated `tests/` directory.
+
+## Commit & Pull Request Guidelines
+
+Recent commits are short and direct, often written as brief past-tense summaries such as `Fixed lyrics` or `Small cleanup`. Keep commit messages similarly concise and action-oriented.
+
+Pull requests should include:
+
+- a short description of the change
+- any related issue or context
+- screenshots or screen recordings for UI work
+- notes about environment variables or backend expectations when relevant
+
+## Security & Configuration Tips
+
+The app reads `VITE_PUBLIC_BACKEND` from `.env` and expects remote assets from `api.music.lucasskt.dk`. You can get the API schema from `https://api.music.lucasskt.dk/schema`. Do not commit secrets or machine-specific values.

app/components/Admin/ModalForm.vue

@@ -4,6 +4,7 @@ import { type Option } from "~/ui/SearchSelect.vue"
 interface BaseField<T> {
 	key: keyof T
 	label?: string
+	visibleWhen?: (value: any) => boolean
 }
 
 interface TextField<T> extends BaseField<T> {
@@ -114,7 +115,12 @@ watch(
 		<p v-if="props.title" class="title">{{ props.title }}</p>
 
 		<form class="form" @submit.prevent="save">
-			<template v-for="field in props.fields">
+			<template
+				v-for="field in props.fields.filter(
+					(field) =>
+						!field.visibleWhen || field.visibleWhen(localItem),
+				)"
+			>
 				<SearchSelect
 					v-if="
 						field.type == 'search-select' ||

app/components/Album/Slider.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-const { data, pending, refresh } = useAsyncData("random-albums", async () => {
+const { data: genresData } = await useApiFetch<Genre[]>("/genres/random")
-	const { data: genres } = await cfetch("/genres/random")
 
-	const results = await Promise.allSettled(
+const data = await Promise.allSettled(
-		genres.map(async (genre: Genre) => {
+	(genresData.value ?? []).map(async (genre: Genre) => {
 		const res = await cfetch(`/genres/albums/${genre._id}`)
 
 		return {
@@ -11,9 +10,8 @@ const { data, pending, refresh } = useAsyncData("random-albums", async () => {
 			albums: res.data,
 		}
 	}),
-	)
+).then((results) =>
-
+	results
-	return results
 		.filter(
 			(
 				r,
@@ -22,8 +20,8 @@ const { data, pending, refresh } = useAsyncData("random-albums", async () => {
 				albums: any[]
 			}> => r.status === "fulfilled",
 		)
-		.map((r) => r.value)
+		.map((r) => r.value),
-})
+)
 </script>
 
 <template>

app/components/Player/Fullscreen.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import LyricsDisplay from "./Fullscreen/LyricsDisplay.vue"
+const { fullscreen, close: closeFullscreen } = useFullscreen()
-
-const fullscreen = useFullscreen()
 const song = useSong()
 
 const mouseMovedRecently = ref(true)
@@ -24,6 +22,12 @@ onMounted(() => {
 		window.removeEventListener("mousemove", handleMouseMove)
 	})
 })
+
+const nuxtApp = useNuxtApp()
+
+nuxtApp.hook("page:finish", () => {
+	closeFullscreen()
+})
 </script>
 
 <template>
@@ -42,19 +46,17 @@ onMounted(() => {
 			/>
 		</template>
 
-		<section class="screen-container">
+		<section class="screen-container" v-if="song">
 			<Icon
 				name="lucide:x"
 				class="close-btn"
 				:class="{ show: mouseMovedRecently }"
-				@click="fullscreen = false"
+				@click="closeFullscreen()"
 			/>
 
-			<div class="content-container">
+			<div class="content-container" :class="{ lyrics: song.lyrics?.text }">
-				<PlayerFullscreenTrackDisplay
+				<PlayerFullscreenTrackDisplay :show-buttons="mouseMovedRecently" />
-					:show-buttons="mouseMovedRecently"
+				<PlayerFullscreenLyricsDisplay
-				/>
-				<LyricsDisplay
 					:animation-duration="0.2"
 					:offset="150"
 					:show-scroll-bar="mouseMovedRecently"
@@ -126,13 +128,26 @@ onMounted(() => {
 	margin: 0 auto;
 
 	display: grid;
-	grid-template-columns: 500px 1fr;
+	grid-template-columns: 1fr;
 	gap: 110px;
 
 	align-items: center;
 
 	& > * {
 		max-height: 675px;
+		margin: 0 auto;
+	}
+
+	&.lyrics {
+		grid-template-columns: 500px 1fr;
+
+		& > * {
+			margin: initial;
+		}
+
+		& > :deep(.synced-lyrics-container) {
+			max-height: none;
+		}
 	}
 }
 </style>

app/components/Player/Fullscreen/LyricsDisplay.vue

@@ -6,10 +6,11 @@ const { animationDuration, offset, showScrollBar } = defineProps<{
 }>()
 
 const song = useSong()
+const { fullscreen } = useFullscreen()
 const { secondsPlayed } = usePlayer()
 
 const parsedLyrics = computed(() => {
-	if (!song.value || !song.value.lyrics.synced) return
+	if (!song.value?.lyrics?.synced) return
 
 	if (song.value.lyrics.synced) return parseLyrics(song.value.lyrics.text)
 })
@@ -45,19 +46,31 @@ const scrollActiveIndex = computed(() => {
 	return index
 })
 
-const height = ref(0)
+const height = ref<number>()
+const top = ref(0)
+const syncedHeight = ref<number>()
 
-watch(song, () => {
+const updateLyricsLayout = () => {
 	const trackDisplay = document.querySelector(".track-display")
 
 	if (!trackDisplay) return
 
-	const resizeObserver = new ResizeObserver((entries) => {
+	height.value = trackDisplay.clientHeight
-		height.value = entries[0]!.target.clientHeight
+	top.value = trackDisplay.getBoundingClientRect().top
-	})
+	syncedHeight.value = window.innerHeight - top.value - 100
+}
 
-	resizeObserver.observe(trackDisplay)
+watch(
-})
+	fullscreen,
+	async () => {
+		await nextTick()
+		updateLyricsLayout()
+	},
+	{ immediate: true },
+)
+
+onMounted(() => window.addEventListener("resize", updateLyricsLayout))
+onUnmounted(() => window.removeEventListener("resize", updateLyricsLayout))
 
 const transformY = computed(() => {
 	if (activeIndex.value < 0) return 0
@@ -85,6 +98,10 @@ let scrollingTimeout: any = null
 const onWheel = (event: WheelEvent) => {
 	if (!containerRef.value || !outerRef.value) return
 
+	if (!isScrolling.value) {
+		manualOffset.value = transformY.value + offset
+	}
+
 	isScrolling.value = true
 	clearTimeout(scrollingTimeout)
 
@@ -93,8 +110,12 @@ const onWheel = (event: WheelEvent) => {
 	manualOffset.value -= delta
 
 	const maxTranslate = offset
+	const lowerViewportLimit = Math.max(
+		outerRef.value.offsetHeight,
+		window.innerHeight - 300,
+	)
 	const minTranslate =
-		-containerRef.value.scrollHeight + outerRef.value.offsetHeight
+		-containerRef.value.scrollHeight + lowerViewportLimit
 
 	manualOffset.value = Math.min(
 		maxTranslate,
@@ -104,6 +125,12 @@ const onWheel = (event: WheelEvent) => {
 	scrollingTimeout = setTimeout(() => (isScrolling.value = false), 3000)
 }
 
+const onLyricClick = (time: number) => {
+	clearTimeout(scrollingTimeout)
+	isScrolling.value = false
+	secondsPlayed.value = time
+}
+
 const finalTransform = computed(() => {
 	if (isScrolling.value) return manualOffset.value
 
@@ -114,10 +141,11 @@ const finalTransform = computed(() => {
 <template>
 	<div
 		ref="outer-ref"
-		v-if="song && song.lyrics.synced"
+		v-if="song && song.lyrics && song.lyrics.synced"
 		class="synced-lyrics-container"
 		:style="{
-			height: `${height}px`,
+			height: `${syncedHeight}px`,
+			marginTop: `${top}px`,
 		}"
 		@wheel.prevent="onWheel"
 	>
@@ -132,16 +160,16 @@ const finalTransform = computed(() => {
 			<p
 				v-for="(lyric, i) in parsedLyrics"
 				:key="lyric.time"
-				:class="{ active: i == activeIndex }"
+				:class="{ active: i == scrollActiveIndex }"
 				ref="lyrics"
-				@click="() => (secondsPlayed = lyric.time)"
+				@click="onLyricClick(lyric.time)"
 			>
 				{{ lyric.text }}
 			</p>
 		</div>
 	</div>
 	<div
-		v-else-if="song"
+		v-else-if="song?.lyrics?.text"
 		class="lyrics"
 		:style="{
 			height: `${height}px`,
@@ -159,13 +187,13 @@ const finalTransform = computed(() => {
 .synced-lyrics-container {
 	position: relative;
 	overflow: hidden;
+	align-self: start;
 
 	mask-image: linear-gradient(
+		to bottom,
 		transparent 0%,
 		#000 15%,
-		#000,
+		#000 calc(100% - 200px),
-		#000,
-		95%,
 		transparent 100%
 	);
 }

app/components/Player/Fullscreen/TrackDisplay.vue

@@ -12,6 +12,7 @@ const {
 	repeat,
 	secondsPlayed,
 	duration,
+	volume,
 } = usePlayer()
 
 const secondsPlayedFormatted = computed(() =>
@@ -66,6 +67,22 @@ const durationFormatted = computed(() =>
 				@click="repeat = !repeat"
 			/>
 		</div>
+
+		<div class="volume-slider" :class="{ hidden: !showButtons }">
+			<Icon name="lucide:volume-2" />
+			<RangeSlider
+				:model-value="volume"
+				@update:model-value="
+					(v) => {
+						if (v !== undefined) volume = v
+					}
+				"
+				:max="1"
+				:min="0"
+				:step="0.01"
+				monochrome
+			/>
+		</div>
 	</article>
 </template>
 
@@ -78,6 +95,8 @@ const durationFormatted = computed(() =>
 	flex-direction: column;
 	align-items: center;
 	gap: 1rem;
+
+	max-width: 500px;
 }
 
 .cover {
@@ -125,12 +144,11 @@ const durationFormatted = computed(() =>
 	width: 100%;
 	gap: 1rem;
 
-	overflow: hidden;
+	transition: opacity 0.2s ease-in-out;
-	max-height: 30px;
-	transition: max-height 0.2s ease-in-out;
 
 	&.hidden {
-		max-height: 0;
+		opacity: 0;
+		pointer-events: none;
 	}
 
 	& > * {
@@ -141,4 +159,23 @@ const durationFormatted = computed(() =>
 		color: $color-accent;
 	}
 }
+
+.volume-slider {
+	align-self: stretch;
+	margin: 0.5rem 1rem 0;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	opacity: 1;
+	transition: opacity 0.2s ease-in-out;
+
+	:deep(.slider) {
+		flex: 1;
+	}
+
+	&.hidden {
+		opacity: 0;
+		pointer-events: none;
+	}
+}
 </style>

app/components/Player/Queue.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+const open = defineModel<boolean>("open", { default: false })
+const { queue, playAlbumAtIndex } = usePlayer()
+
+interface QueueRow {
+	key: number
+	track: Track
+}
+
+const queueRows = ref<QueueRow[]>([])
+const draggedKey = ref<number | null>(null)
+const overKey = ref<number | null>(null)
+let nextRowKey = 0
+
+const syncRows = (tracks: Track[]) => {
+	const previousRows = [...queueRows.value]
+	queueRows.value = tracks.map((track) => {
+		const previousIndex = previousRows.findIndex((row) => row.track === track)
+		if (previousIndex !== -1) {
+			const [row] = previousRows.splice(previousIndex, 1)
+			return row!
+		}
+		return { key: nextRowKey++, track }
+	})
+}
+
+watch(queue, syncRows, { immediate: true, deep: true })
+
+const close = () => (open.value = false)
+
+const handleKeydown = (event: KeyboardEvent) => {
+	if (event.key === "Escape") close()
+}
+
+watch(open, (isOpen) => {
+	if (isOpen) document.addEventListener("keydown", handleKeydown)
+	else document.removeEventListener("keydown", handleKeydown)
+})
+
+onBeforeUnmount(() => document.removeEventListener("keydown", handleKeydown))
+
+const startDrag = (event: DragEvent, index: number) => {
+	const row = queueRows.value[index]
+	if (!row) return
+	draggedKey.value = row.key
+	if (event.dataTransfer) {
+		event.dataTransfer.effectAllowed = "move"
+		event.dataTransfer.setData("text/plain", String(row.key))
+	}
+}
+
+const moveTo = (event: DragEvent, key: number) => {
+	event.preventDefault()
+	const from = queueRows.value.findIndex((row) => row.key === draggedKey.value)
+	const to = queueRows.value.findIndex((row) => row.key === key)
+	if (from === -1 || to === -1 || from === to) return
+
+	const [row] = queueRows.value.splice(from, 1)
+	queueRows.value.splice(to, 0, row!)
+	overKey.value = key
+}
+
+const finishDrag = () => {
+	if (draggedKey.value === null) return
+	queue.value = queueRows.value.map((row) => row.track)
+	draggedKey.value = null
+	overKey.value = null
+}
+
+const cancelDrag = () => {
+	if (draggedKey.value === null) return
+	syncRows(queue.value)
+	draggedKey.value = null
+	overKey.value = null
+}
+
+const playAt = (index: number) =>
+	playAlbumAtIndex(
+		queueRows.value.map((row) => row.track),
+		index,
+	)
+</script>
+
+<template>
+	<Teleport to="body">
+		<Transition name="queue">
+			<div v-if="open" class="queue-root" @click.self="close">
+				<div class="backdrop" @click="close"></div>
+				<aside
+					class="drawer"
+					role="dialog"
+					aria-modal="true"
+					aria-labelledby="queue-heading"
+				>
+					<header class="header">
+						<h2 id="queue-heading">Up Next</h2>
+						<button class="close" aria-label="Close queue" @click="close">
+							<Icon name="lucide:x" />
+						</button>
+					</header>
+
+					<div v-if="queueRows.length === 0" class="empty">
+						<p>No upcoming songs.</p>
+					</div>
+					<ol v-else class="tracks">
+						<li
+							v-for="(row, index) in queueRows"
+							:key="row.key"
+							:class="{
+								dragging: draggedKey === row.key,
+								over: overKey === row.key,
+							}"
+							draggable="true"
+							@dragstart="startDrag($event, index)"
+							@dragenter="moveTo($event, row.key)"
+							@dragover.prevent
+							@dragleave="overKey = null"
+							@drop="finishDrag"
+							@dragend="cancelDrag"
+						>
+							<TrackRow
+								:track="row.track"
+								:index="index"
+								show-image
+								queue-mode
+								class="queue-track"
+								@play-album-at-index="playAt(index)"
+							/>
+						</li>
+					</ol>
+				</aside>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.queue-root {
+	position: fixed;
+	inset: 0;
+	z-index: 30;
+}
+
+.backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgb(0 0 0 / 55%);
+}
+
+.drawer {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-end: 0;
+	display: flex;
+	flex-direction: column;
+	inline-size: min(28rem, 92vw);
+	max-inline-size: 100vw;
+	background: $color-background;
+	border-inline-start: 1px solid $color-border;
+	box-shadow: 0 0 2rem rgb(0 0 0 / 30%);
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 2rem;
+	padding: 1rem 1.25rem;
+	border-bottom: 1px solid $color-border;
+
+	h2 {
+		margin: 0;
+		font-size: 1.1rem;
+	}
+}
+
+.close,
+.play {
+	border: 0;
+	color: inherit;
+	background: transparent;
+	cursor: pointer;
+}
+
+.close {
+	display: grid;
+	place-items: center;
+	font-size: 1.25rem;
+}
+
+.tracks {
+	margin: 0;
+	padding: 0.5rem;
+	list-style: none;
+	overflow-y: auto;
+}
+
+.tracks li {
+	list-style: none;
+	border-radius: $border-radius-standard;
+
+	&.over :deep(.track) {
+		background: rgb(255 255 255 / 8%);
+	}
+
+	&.dragging :deep(.track) {
+		opacity: 0.45;
+	}
+}
+
+.empty {
+	flex: 1;
+	display: grid;
+	place-items: center;
+	padding: 2rem;
+	color: rgb(255 255 255 / 55%);
+}
+
+.queue-enter-active,
+.queue-leave-active {
+	transition: opacity 0.2s ease;
+
+	.drawer {
+		transition: transform 0.2s ease;
+	}
+}
+
+.queue-enter-from,
+.queue-leave-to {
+	opacity: 0;
+
+	.drawer {
+		transform: translateX(100%);
+	}
+}
+</style>

app/components/Player/index.vue

@@ -38,8 +38,8 @@ const durationFormatted = computed(() =>
 	new Date(duration.value * 1000).toISOString().slice(14, 19),
 )
 
-const toast = useToast()
+const { open: openFullscreen } = useFullscreen()
-const fullscreen = useFullscreen()
+const queueOpen = ref(false)
 </script>
 
 <template>
@@ -105,12 +105,13 @@ const fullscreen = useFullscreen()
 				</div>
 				<Icon
 					name="lucide:list"
-					@click="toast.show('Not yet implemented')"
+					@click="queueOpen = true"
 				/>
-				<Icon name="lucide:expand" @click="fullscreen = true" />
+				<Icon name="lucide:expand" @click="openFullscreen()" />
 			</div>
 		</template>
 	</article>
+	<PlayerQueue v-model:open="queueOpen" />
 	<PlayerFullscreen />
 </template>
 

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>

app/components/Track/Row.vue

@@ -2,16 +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 } = defineProps<TrackRowProps>()
+const props = defineProps<TrackRowProps>()
 const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
 
 const hovering = ref(false)
-
+const { playAlbum, addToFrontOfQueue, addToQueue } = usePlayer()
 const toast = useToast()
 
 const dropdownMenuItems: DropdownMenuItem[][] = [
@@ -19,12 +29,16 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 		{
 			label: "Play only this",
 			icon: "lucide:play",
-			onSelect() {},
+			onSelect() {
+				if (props.track) playAlbum([props.track])
+			},
 		},
 		{
 			label: "Play next",
 			icon: "lucide:list-start",
 			onSelect() {
+				if (!props.track) return
+				addToFrontOfQueue(props.track)
 				toast.show("Playing next")
 			},
 		},
@@ -32,45 +46,101 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 			label: "Add to queue",
 			icon: "lucide:list-end",
 			onSelect() {
+				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(() => {
+	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, odd: index % 2 == 1 }"
+		:class="{
-		@mouseover="hovering = true"
+			extended: props.extendedInfo,
+			odd: props.index % 2 == 1,
+			image: props.showImage,
+			queue: props.queueMode,
+		}"
+		@mouseenter="hovering = true"
 		@mouseleave="hovering = false"
 	>
-		<div class="index">
+		<div class="index" :class="{ hovering }">
+			<template v-if="props.showImage">
 				<Icon
+					v-if="props.track"
 					name="lucide:play"
+					class="play-icon"
 					@click="emit('playAlbumAtIndex')"
-				v-if="hovering"
 				/>
-			<p v-else>{{ index + 1 }}</p>
+				<!-- Keep the existing TrackRow artwork dimensions unchanged. -->
+				<NuxtImg
+					v-if="artworkSrc"
+					:src="artworkSrc"
+					width="40"
+					height="40"
+					placeholder
+				/>
+			</template>
+			<template v-else>
+				<Icon
+					v-if="hovering"
+					name="lucide:play"
+					class="play-icon inline"
+					@click="emit('playAlbumAtIndex')"
+				/>
+				<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>
 
-		<DropdownMenu :items="dropdownMenuItems">
+		<Icon
+			v-if="props.queueMode"
+			name="lucide:grip-vertical"
+			class="queue-handle"
+			aria-hidden="true"
+		/>
+		<DropdownMenu v-else-if="props.track" :items="dropdownMenuItems">
 			<Icon name="lucide:ellipsis" class="dropdown-icon" />
 		</DropdownMenu>
 	</article>
@@ -83,7 +153,7 @@ const durationFormatted = computed(() =>
 
 .track {
 	display: grid;
-	grid-template-columns: 30px 1fr 50px 30px;
+	grid-template-columns: 40px 1fr 50px 30px;
 	gap: 0.5rem;
 	align-items: center;
 	padding: 0.6rem 1rem;
@@ -92,18 +162,41 @@ const durationFormatted = computed(() =>
 	line-height: 1;
 
 	&.odd {
+		background-color: color.adjust($color-background, $lightness: 3%);
+	}
+
+	&:hover {
 		background-color: color.adjust($color-background, $lightness: 5%);
 	}
 
 	&.extended {
-		grid-template-columns: 30px 2fr 1fr 1fr 50px 30px;
+		grid-template-columns: 40px 2fr 1fr 1fr 50px 30px;
 	}
 
-	p {
+	&.image {
+		grid-template-columns: 40px 1fr 50px 30px;
+		padding: 0.45rem 1rem;
+
+		.index {
+			height: 40px;
+		}
+	}
+
+	&.queue {
+		cursor: grab;
+	}
+
+	p,
+	> a {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+
+	> a {
+		color: inherit;
+		text-decoration: none;
+	}
 }
 
 .index {
@@ -112,8 +205,43 @@ const durationFormatted = computed(() =>
 	align-items: center;
 	font-size: 20px;
 	height: 20px;
-
+	position: relative;
 	cursor: pointer;
+
+	img {
+		border-radius: $border-radius-standard;
+	}
+
+	.play-icon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		opacity: 0;
+		z-index: 1;
+		font-size: 24px;
+	}
+
+	.play-icon.inline {
+		position: static;
+		transform: none;
+		opacity: 1;
+	}
+
+	img,
+	.play-icon {
+		transition: opacity 0.15s ease;
+	}
+
+	&.hovering {
+		img {
+			opacity: 0.4;
+		}
+
+		.play-icon {
+			opacity: 1;
+		}
+	}
 }
 
 .artists {
@@ -124,4 +252,9 @@ const durationFormatted = computed(() =>
 	font-size: 20px;
 	cursor: pointer;
 }
+
+.queue-handle {
+	opacity: 0.5;
+	cursor: grab;
+}
 </style>

app/composables/useAuth.ts

@@ -127,13 +127,18 @@ export const useAuth = () => {
 
 				return null
 			})
+			.finally(() => {
+				waitForPromise = false
+			})
 
 		return refreshPromise
 	}
 
+	if (getCurrentInstance()) {
 		onMounted(() => {
 			if (refreshToken.value && !sessionToken.value) refreshSessionToken()
 		})
+	}
 
 	return {
 		refreshToken,

app/composables/useFullscreen.ts

@@ -1 +1,66 @@
-export const useFullscreen = () => useState<boolean>("fullscreen", () => false)
+type FullscreenState = ReturnType<typeof useState<boolean>>
+
+type FullscreenControls = {
+	fullscreen: FullscreenState
+	open: () => Promise<boolean>
+	close: () => Promise<boolean>
+	toggle: () => Promise<boolean>
+}
+
+const syncFullscreenState = (fullscreen: FullscreenState) => {
+	fullscreen.value = Boolean(document.fullscreenElement)
+}
+
+let fullscreenListenerInstalled = false
+
+export const useFullscreen = () => {
+	const fullscreen = useState<boolean>("fullscreen", () => false)
+
+	const open = async () => {
+		fullscreen.value = true
+
+		if (!import.meta.client) return true
+		if (!document.documentElement.requestFullscreen) return true
+
+		try {
+			await document.documentElement.requestFullscreen()
+			return true
+		} catch {
+			fullscreen.value = false
+			return false
+		}
+	}
+
+	const close = async () => {
+		if (import.meta.client && document.fullscreenElement) {
+			try {
+				await document.exitFullscreen()
+			} catch {
+				// Fall through to keep the app state consistent.
+			}
+		}
+
+		fullscreen.value = false
+		return true
+	}
+
+	const toggle = async () => {
+		if (fullscreen.value) return close()
+		return open()
+	}
+
+	if (import.meta.client && !fullscreenListenerInstalled) {
+		fullscreenListenerInstalled = true
+		document.addEventListener("fullscreenchange", () => {
+			syncFullscreenState(fullscreen)
+		})
+		syncFullscreenState(fullscreen)
+	}
+
+	return {
+		fullscreen,
+		open,
+		close,
+		toggle,
+	} as FullscreenControls
+}

app/pages/admin/songs.vue

@@ -48,6 +48,14 @@ const albumFetchOptions = async (q?: string): Promise<Option[]> => {
 	}))
 }
 
+const { data: genreData } = useApiFetch<Genre[]>("/all/genres")
+const genreFetchOptions = async (): Promise<Option[]> => {
+	return genreData.value.map<Option>((genre) => ({
+		label: genre.name,
+		value: genre._id,
+	}))
+}
+
 const modalFields: Field[] = [
 	{ key: "name", label: "Name" },
 	{ key: "file", label: "Audio file", type: "file" },
@@ -57,16 +65,41 @@ const modalFields: Field[] = [
 		type: "search-select-array",
 		fetchOptions: artistFetchOptions,
 	},
+	{
+		key: "createSingle",
+		label: "Create a single album automatically",
+		type: "checkbox",
+		visibleWhen: (value) => !value._id,
+	},
 	{
 		key: "album",
 		label: "Album",
 		type: "search-select",
 		fetchOptions: albumFetchOptions,
+		visibleWhen: (value) => !value.createSingle,
+	},
+	{
+		key: "cover",
+		label: "Single cover",
+		type: "file",
+		visibleWhen: (value) => !value._id && value.createSingle,
+	},
+	{
+		key: "genre",
+		label: "Genre",
+		type: "search-select",
+		fetchOptions: genreFetchOptions,
+		visibleWhen: (value) => !value._id && value.createSingle,
 	},
 	{ key: "lyrics.text", label: "Lyrics", type: "textarea", rows: 6 },
 	{ key: "lyrics.synced", label: "Synced lyrics", type: "checkbox" },
 ]
 
+const serializeLyrics = (lyrics: Track["lyrics"] | undefined) => {
+	if (!lyrics?.text?.trim()) return JSON.stringify(null)
+	return JSON.stringify(lyrics)
+}
+
 const showModal = ref<boolean>(false)
 const item = ref<Track | undefined>(undefined)
 
@@ -77,7 +110,7 @@ const save = async (value: any) => {
 				method: "PATCH",
 				data: {
 					...value,
-					lyrics: JSON.stringify(value.lyrics),
+					lyrics: serializeLyrics(value.lyrics),
 				},
 				params: { id: value._id },
 				forceFormData: true,
@@ -91,11 +124,48 @@ const save = async (value: any) => {
 		}
 	} else {
 		try {
+			if (!value.name || !value.file || !value.artists?.length) {
+				toast.show(
+					"Name, audio file, and at least one artist are required",
+					"error",
+				)
+				return false
+			}
+
+			if (value.createSingle) {
+				if (!value.cover || !value.genre) {
+					toast.show(
+						"A cover image and genre are required for a single",
+						"error",
+					)
+					return false
+				}
+
+				const albumResponse = await cfetch("/admin/album", {
+					method: "POST",
+					data: {
+						name: `${value.name} - Single`,
+						artists: value.artists.map((artist: Option) => artist.value),
+						genres: value.genre.value,
+						file: value.cover,
+					},
+				})
+				value.album = albumResponse.data._id
+			} else if (!value.album) {
+				toast.show(
+					"Choose an album or create a single album",
+					"error",
+				)
+				return false
+			}
+
 			await cfetch("/admin/track", {
 				method: "POST",
 				data: {
 					...value,
-					lyrics: JSON.stringify(value.lyrics),
+					album: value.album?.value ?? value.album,
+					artists: value.artists.map((artist: Option) => artist.value),
+					lyrics: serializeLyrics(value.lyrics),
 				},
 			})
 

app/pages/artist/[id].vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-const route = useRoute()
-const id = computed(() => route.params.id)
-
-const { data: artistData } = await useApiFetch<Album>(`/artists/${id.value}`)
-
-const { data: albumsData } = await useApiFetch<Album[]>(
-	`/artists/${id.value}/albums`,
-)
-
-const { data: tracksData } = await useApiFetch<Track[]>(
-	`/artists/${id.value}/tracks`,
-)
-
-const chunkedTracks = computed(() => {
-	const SIZE = 3
-	const chunks = []
-
-	for (let i = 0; i < tracksData.value.length; i += SIZE) {
-		chunks.push(tracksData.value.slice(i, i + SIZE))
-	}
-
-	return chunks
-})
-
-const slider = useTemplateRef("slider")
-
-const scrollWidth = () => {
-	if (!slider.value) return 0
-
-	const el = Array.isArray(slider.value) ? slider.value[0] : slider.value
-
-	if (!el) return 0
-
-	return el.offsetWidth
-}
-
-const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
-</script>
-
-<template>
-	<section class="info" v-if="artistData">
-		<NuxtImg
-			:src="GET_FILE(artistData.file)"
-			width="300"
-			height="300"
-			placeholder
-		/>
-
-		<div class="details">
-			<h1>{{ artistData.name }}</h1>
-
-			<div class="buttons">
-				<Button
-					icon-name="lucide:play"
-					@click="() => playAlbum(tracksData)"
-					>Play</Button
-				>
-				<Button
-					icon-name="lucide:shuffle"
-					@click="() => playShuffledAlbum(tracksData)"
-					>Shuffle</Button
-				>
-			</div>
-		</div>
-	</section>
-
-	<Slider slider-class="slider" :scroll-width="scrollWidth" title="Tracks">
-		<section
-			class="tracks"
-			v-for="(chunk, pI) in chunkedTracks"
-			:key="`chunk-${pI}`"
-			ref="slider"
-		>
-			<TrackRow
-				v-for="(track, i) in chunk"
-				:key="`track-${track._id}`"
-				:track="track"
-				:index="i + pI * 3"
-				@play-album-at-index="
-					() => playAlbumAtIndex(tracksData, i + pI * 3)
-				"
-			/>
-		</section>
-	</Slider>
-
-	<Slider title="Albums">
-		<AlbumCard
-			v-for="album in albumsData"
-			:key="album._id"
-			:name="album.name"
-			:file="`${BACKEND_SERVE}${album.file}`"
-			:artists="album.artists"
-			:_id="album._id"
-		/>
-	</Slider>
-</template>
-
-<style lang="scss" scoped>
-@use "@/styles/variables" as *;
-@use "@/styles/util";
-
-.info {
-	display: flex;
-	gap: 1rem;
-	margin-bottom: 2rem;
-
-	& img {
-		border-radius: $border-radius-standard;
-	}
-
-	.details {
-		padding-top: 3.5rem;
-
-		display: flex;
-		flex-direction: column;
-		gap: 0.2rem;
-
-		& h1 {
-			@include util.fontSize(32px);
-			font-weight: 700;
-			line-height: 2.4rem;
-		}
-
-		.artist {
-			@include util.fontSize(18px);
-		}
-
-		.buttons {
-			margin-top: auto;
-			display: flex;
-			gap: 1rem;
-		}
-	}
-}
-
-$gap: 12px;
-
-:deep(.slider) {
-	gap: $gap;
-}
-
-.tracks {
-	display: grid;
-	grid-template-rows: repeat(3, 1fr);
-	gap: 0.4rem;
-
-	flex: 0 0 calc((100% - 3 * $gap) / 4);
-}
-</style>

app/pages/artist/[id]/index.vue

@@ -2,12 +2,40 @@
 const route = useRoute()
 const id = computed(() => route.params.id)
 
-const { data: artistData } = await useApiFetch<Artist>(`/artists/${id.value}`)
+const { data: artistData } = await useApiFetch<Album>(`/artists/${id.value}`)
+
+const { data: albumsData } = await useApiFetch<Album[]>(
+	`/artists/${id.value}/albums`,
+)
+
 const { data: tracksData } = await useApiFetch<Track[]>(
 	`/artists/${id.value}/tracks`,
 )
 
-const { playAlbum, playAlbumAtIndex } = usePlayer()
+const chunkedTracks = computed(() => {
+	const SIZE = 3
+	const chunks = []
+
+	for (let i = 0; i < tracksData.value.length; i += SIZE) {
+		chunks.push(tracksData.value.slice(i, i + SIZE))
+	}
+
+	return chunks
+})
+
+const slider = useTemplateRef("slider")
+
+const scrollWidth = () => {
+	if (!slider.value) return 0
+
+	const el = Array.isArray(slider.value) ? slider.value[0] : slider.value
+
+	if (!el) return 0
+
+	return el.offsetWidth
+}
+
+const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
 </script>
 
 <template>
@@ -28,34 +56,45 @@ const { playAlbum, playAlbumAtIndex } = usePlayer()
 					@click="() => playAlbum(tracksData)"
 					>Play</Button
 				>
+				<Button
+					icon-name="lucide:shuffle"
+					@click="() => playShuffledAlbum(tracksData)"
+					>Shuffle</Button
+				>
 			</div>
 		</div>
 	</section>
 
-	<section class="tracks-container">
+	<Slider slider-class="slider" :scroll-width="scrollWidth" title="Tracks">
-		<NuxtLink :to="`/artist/${id}/tracks`">
+		<section
-			Tracks
+			class="tracks"
-			<Icon name="lucide:chevron-right" />
+			:class="[`tracks-${chunkedTracks[0]?.length ?? 1}`]"
-		</NuxtLink>
+			v-for="(chunk, pI) in chunkedTracks"
-
+			:key="`chunk-${pI}`"
-		<Slider>
+			ref="slider"
-			<div class="tracks">
+		>
-				<template v-for="j in 25">
+			<TrackRow
-					<TrackImageRow
+				v-for="(track, i) in chunk"
-						v-for="(track, i) in tracksData"
+				:key="`track-${track._id}`"
-						:key="track._id"
 				:track="track"
-						:index="i"
+				:index="i + pI * 3"
 				@play-album-at-index="
-							() => playAlbumAtIndex(tracksData, i)
+					() => playAlbumAtIndex(tracksData, i + pI * 3)
 				"
 			/>
-				</template>
-			</div>
-		</Slider>
 		</section>
+	</Slider>
 
-	<section class="albums"></section>
+	<Slider title="Albums">
+		<AlbumCard
+			v-for="album in albumsData"
+			:key="album._id"
+			:name="album.name"
+			:file="`${BACKEND_SERVE}${album.file}`"
+			:artists="album.artists"
+			:_id="album._id"
+		/>
+	</Slider>
 </template>
 
 <style lang="scss" scoped>
@@ -67,7 +106,7 @@ const { playAlbum, playAlbumAtIndex } = usePlayer()
 	gap: 1rem;
 	margin-bottom: 2rem;
 
-	img {
+	& img {
 		border-radius: $border-radius-standard;
 	}
 
@@ -76,6 +115,7 @@ const { playAlbum, playAlbumAtIndex } = usePlayer()
 
 		display: flex;
 		flex-direction: column;
+		gap: 0.2rem;
 
 		& h1 {
 			@include util.fontSize(32px);
@@ -83,26 +123,35 @@ const { playAlbum, playAlbumAtIndex } = usePlayer()
 			line-height: 2.4rem;
 		}
 
+		.artist {
+			@include util.fontSize(18px);
+		}
+
 		.buttons {
 			margin-top: auto;
+			display: flex;
+			gap: 1rem;
 		}
 	}
 }
 
-.tracks-container {
+$gap: 12px;
-	a {
-		display: inline-flex;
-		align-items: center;
 
-		@include util.fontSize(24px);
+:deep(.slider) {
-		font-weight: 600;
+	gap: $gap;
-	}
+	margin-bottom: 1rem;
+}
 
-	.tracks {
+.tracks {
 	display: grid;
-		grid-template-rows: repeat(3, 1fr);
+	gap: 0.4rem;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
+
-		grid-auto-flow: column;
+	flex: 0 0 calc((100% - 3 * $gap) / 4);
+
+	@for $i from 1 through 3 {
+		&-#{$i} {
+			grid-template-rows: repeat(#{$i}, 1fr);
+		}
 	}
 }
 </style>

app/pages/artist/[id]/tracks.vue

@@ -1,3 +1,42 @@
+<script setup lang="ts">
+const route = useRoute()
+const id = computed(() => route.params.id)
+
+const { data: tracksData } = await useApiFetch<Track[]>(
+	`/artists/${id.value}/tracks`,
+)
+
+const { playAlbumAtIndex } = usePlayer()
+</script>
+
 <template>
-	<h1>Tracks!</h1>
+	<section class="tracks">
+		<h1 class="title">Songs</h1>
+
+		<TrackRow
+			v-for="(track, i) in tracksData"
+			:key="track._id"
+			:track="track"
+			:index="i"
+			show-image
+			@play-album-at-index="() => playAlbumAtIndex(tracksData, i)"
+		/>
+	</section>
 </template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.tracks {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+}
+
+.title {
+	@include fontSize(32px);
+	font-weight: 700;
+
+	margin-bottom: 1.5rem;
+}
+</style>

app/pages/index.vue

@@ -1,13 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts"></script>
-const player = usePlayer()
-
-const { data } = useApiFetch("/all/tracks")
-
-const play = () => {
-	player.addToQueue(data.value[0])
-	player.play()
-}
-</script>
 
 <template>
 	<h1>Home</h1>

app/pages/search.vue

@@ -1,7 +1,173 @@
 <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
+		debounceTimeout = undefined
+	}, 300)
+})
+
+onBeforeUnmount(() => {
+	clearTimeout(debounceTimeout)
+})
+
+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}`"
+			>
+				<SearchRow
+					:result="result"
+					:index="index"
+					@play="playResult(result)"
+				/>
+			</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>

app/plugins/player.ts

@@ -1,6 +1,10 @@
 import { Howl } from "howler"
 
 export default defineNuxtPlugin((nuxtApp) => {
+	const { close: closeFullscreen } = useFullscreen()
+	const VOLUME_STORAGE_KEY = "music-v2-player-volume"
+	const DEFAULT_VOLUME = 0.5
+
 	const sound = ref<Howl | null>(null)
 	const queue = ref<Track[]>([])
 	const prevQueue = ref<Track[]>([])
@@ -8,6 +12,29 @@ export default defineNuxtPlugin((nuxtApp) => {
 	const currentSong = ref<Track | null>(null)
 	const repeat = ref(false)
 	const isPlaying = ref(false)
+	const storedVolume = ref(DEFAULT_VOLUME)
+
+	const clampVolume = (value: number) => Math.min(1, Math.max(0, value))
+
+	const readStoredVolume = () => {
+		if (!import.meta.client) return DEFAULT_VOLUME
+
+		const rawVolume = window.localStorage.getItem(VOLUME_STORAGE_KEY)
+		if (rawVolume === null) return DEFAULT_VOLUME
+
+		const parsedVolume = Number(rawVolume)
+		if (Number.isNaN(parsedVolume)) return DEFAULT_VOLUME
+
+		return clampVolume(parsedVolume)
+	}
+
+	if (import.meta.client) {
+		storedVolume.value = readStoredVolume()
+
+		watch(storedVolume, (value) => {
+			window.localStorage.setItem(VOLUME_STORAGE_KEY, String(value))
+		})
+	}
 
 	const tick = ref(0)
 
@@ -23,10 +50,12 @@ export default defineNuxtPlugin((nuxtApp) => {
 	const volume = computed<number>({
 		get() {
 			tick.value
-			return sound.value?.volume() ?? 1
+			return storedVolume.value
 		},
 		set(value) {
-			sound.value?.volume(value)
+			const nextVolume = clampVolume(value)
+			storedVolume.value = nextVolume
+			sound.value?.volume(nextVolume)
 		},
 	})
 	const duration = ref(0)
@@ -83,12 +112,13 @@ export default defineNuxtPlugin((nuxtApp) => {
 			src: [GET_AUDIO_FILE(song.fileDir)],
 			html5: false,
 			autoplay: false,
-			volume: 0.5,
+			volume: storedVolume.value,
 			onload: () => {
 				duration.value = sound.value?.duration() || 0
-				volume.value = sound.value?.volume() || 1
+				sound.value?.volume(storedVolume.value)
 			},
 			onend: () => {
+				void closeFullscreen()
 				next()
 				stopTracking()
 			},

app/ui/DropdownMenu.vue

@@ -14,6 +14,7 @@ const props = defineProps<DropdownMenuProps>()
 const open = ref(false)
 const placement = ref<"bottom" | "top">("bottom")
 const root = useTemplateRef("root")
+const menuPosition = ref({ top: 0, left: 0 })
 
 const toggle = async () => {
 	open.value = !open.value
@@ -37,16 +38,12 @@ const updatePlacement = () => {
 	// TODO: Calculate height instead
 	const menuHeight = 220
 
-	console.log(
+	const showAbove = spaceBelow < menuHeight && spaceAbove > spaceBelow
-		spaceBelow,
+	placement.value = showAbove ? "top" : "bottom"
-		menuHeight,
+	menuPosition.value = {
-		spaceAbove,
+		top: showAbove ? rect.top : rect.bottom,
-		spaceBelow < menuHeight && spaceAbove > spaceBelow,
+		left: rect.right,
-		spaceBelow < menuHeight && spaceAbove > spaceBelow ? "top" : "bottom",
+	}
-	)
-
-	placement.value =
-		spaceBelow < menuHeight && spaceAbove > spaceBelow ? "top" : "bottom"
 }
 
 const handleOutsideClick = (e: MouseEvent) => {
@@ -84,7 +81,16 @@ onBeforeMount(() => {
 		</div>
 
 		<Transition name="dropdown">
-			<div v-show="open" class="menu" :class="placement">
+			<Teleport to="body">
+				<div
+					v-show="open"
+					class="dropdown-menu"
+					:class="placement"
+					:style="{
+						top: `${menuPosition.top}px`,
+						left: `${menuPosition.left}px`,
+					}"
+				>
 				<div
 					v-for="(group, i) in items"
 					:key="`group-${i}`"
@@ -106,6 +112,7 @@ onBeforeMount(() => {
 					</button>
 				</div>
 				</div>
+			</Teleport>
 		</Transition>
 	</div>
 </template>
@@ -116,10 +123,11 @@ onBeforeMount(() => {
 .dropdown {
 	position: relative;
 	display: inline-block;
+}
 
-	.menu {
+.dropdown-menu {
-		position: absolute;
+		position: fixed;
-		right: 0;
+		z-index: 1000;
 
 		padding: 0.5rem;
 		min-width: 180px;
@@ -131,18 +139,17 @@ onBeforeMount(() => {
 		display: flex;
 		flex-direction: column;
 
-		z-index: 1000;
+		transform: translateX(-100%);
 
 		&.bottom {
-			top: calc(100% + 0.5rem);
+			transform: translate(-100%, 0.5rem);
 			transform-origin: top right;
 		}
 
 		&.top {
-			bottom: calc(100% + 0.5rem);
+			transform: translate(-100%, calc(-100% - 0.5rem));
 			transform-origin: bottom right;
 		}
-	}
 
 	.group {
 		width: 100%;

app/ui/SearchSelect.vue

@@ -21,6 +21,17 @@ const show = ref<boolean>(false)
 
 const isMultiple = computed(() => !!props.multiple)
 
+const loadOptions = async (q = "") => {
+	const allOptions = await props.fetchOptions(q)
+	const normalizedQuery = q.trim().toLocaleLowerCase()
+
+	options.value = allOptions
+		.filter((option) =>
+			option.label.toLocaleLowerCase().includes(normalizedQuery),
+		)
+		.slice(0, 10)
+}
+
 watchEffect(() => {
 	if (!props.predefined) return
 
@@ -47,9 +58,7 @@ watchEffect(() => {
 	nextTick(() => (options.value = []))
 })
 
-watch(query, async (q) => {
+watch(query, loadOptions)
-	options.value = await (await props.fetchOptions(q)).slice(0, 10)
-})
 
 const isSelected = (opt: Option) => {
 	if (isMultiple.value && Array.isArray(value.value)) {
@@ -78,7 +87,7 @@ const select = (item: Option) => {
 const onFocus = async () => {
 	if (isMultiple.value) query.value = ""
 	show.value = true
-	options.value = await (await props.fetchOptions()).slice(0, 10)
+	await loadOptions(isMultiple.value ? "" : query.value)
 }
 
 const onFocusOut = () => {

app/utils/cfetch.ts

@@ -25,13 +25,13 @@ export const cfetch = async (
 
 	if (!baseUrl) throw new Error("BACKEND URL not set")
 
-	const { sessionToken, refreshSessionToken } = useAuth()
-
 	const defaults: AxiosRequestConfig = {
 		baseURL: baseUrl,
 	}
 
 	if (authorize) {
+		const { sessionToken, refreshSessionToken } = useAuth()
+
 		let token = sessionToken.value
 
 		if (token) defaults.headers = { Authorization: `Bearer ${token}` }
@@ -64,6 +64,8 @@ export const cfetch = async (
 		response = await axios(url, config)
 	} catch (error: any) {
 		if (error.response?.status == 401) {
+			const { sessionToken, refreshSessionToken } = useAuth()
+
 			if (!config.headers) config.headers = {}
 			config.headers.Authorization = `Bearer ${await refreshSessionToken()}`
 

app/utils/types.ts

@@ -24,7 +24,7 @@ export interface Track extends Base {
 	lyrics: {
 		synced: boolean
 		text: string
-	}
+	} | null
 	album: Album
 	artists: Artist[]
 	durationInSeconds: number