Added album slider

app/components/Admin/ModalForm.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { type Option } from "~/ui/SearchSelect.vue"
 
-type InputType = "text" | "file" | "search-select"
-
 interface BaseField<T> {
 	key: keyof T
 	label?: string
@@ -12,6 +10,11 @@ interface TextField<T> extends BaseField<T> {
 	type?: "text"
 }
 
+interface TextAreaField<T> extends BaseField<T> {
+	type?: "textarea"
+	rows: number
+}
+
 interface FileField<T> extends BaseField<T> {
 	type: "file"
 }
@@ -26,11 +29,17 @@ interface SearchSelectArrayField<T> extends BaseField<T> {
 	fetchOptions: (q?: string) => Promise<Option[]>
 }
 
+interface CheckboxField<T> extends BaseField<T> {
+	type?: "checkbox"
+}
+
 export type Field<T = any> =
 	| TextField<T>
+	| TextAreaField<T>
 	| FileField<T>
 	| SearchSelectField<T>
 	| SearchSelectArrayField<T>
+	| CheckboxField<T>
 
 interface ModalFormProps<T> {
 	item?: T
@@ -44,27 +53,60 @@ const open = defineModel("open", { required: true })
 
 let localItem = reactive<any>({})
 
+const getNestedValue = (obj: any, path: string) =>
+	path.split(".").reduce((acc, key) => acc?.[key], obj)
+
+const setNestedValue = (obj: any, path: string, value: any) => {
+	const keys = path.split(".")
+	keys.reduce((acc, key, i) => {
+		if (i === keys.length - 1) acc[key] = value
+		else acc[key] ??= {}
+		return acc[key]
+	}, obj)
+}
+
+const expandDotKeys = (flat: Record<string, any>) => {
+	const result: any = {}
+	for (const [key, value] of Object.entries(flat)) {
+		setNestedValue(result, key, toRaw(value))
+	}
+	return result
+}
+
+const save = async () => {
+	const expanded = expandDotKeys(localItem)
+
+	Object.keys(expanded).forEach((k) => {
+		if (expanded[k] == undefined || expanded[k] == null) delete expanded[k]
+	})
+
+	if (await props.onSave(expanded)) open.value = false
+}
+
 watch(
 	() => props.item,
 	(item) => {
 		Object.keys(localItem).forEach((k) => delete localItem[k])
 
-		if (!item) return
-
-		for (const [key, value] of Object.entries(item)) {
+		if (item)
+			for (const [key, value] of Object.entries(item))
 				localItem[key] = value
-		}
 
 		for (const field of props.fields) {
-			if (field.type == "file") localItem[field.key as string] = null
+			const key = field.key as string
+			if (field.type === "file") {
+				localItem[key] = null
+			} else if (field.type === "checkbox") {
+				localItem[key] = item
+					? (getNestedValue(item, key) ?? false)
+					: false
+			} else {
+				localItem[key] = item ? getNestedValue(item, key) : undefined
+			}
 		}
 	},
 	{ immediate: true },
 )
-
-const save = async () => {
-	if (await props.onSave(localItem)) open.value = false
-}
 </script>
 
 <template>
@@ -84,12 +126,20 @@ const save = async () => {
 					:predefined="props.item?.[field.key]"
 					:multiple="field.type == 'search-select-array'"
 				/>
+				<Checkbox
+					v-else-if="field.type == 'checkbox'"
+					:label="field.label || field.key"
+					:model-value="localItem[field.key]"
+					@change="(v) => (localItem[field.key] = v)"
+				/>
 				<Input
 					v-else
 					:type="field.type"
 					:key="field.key"
 					:label="field.label || field.key"
 					v-model:value="localItem[field.key]"
+					:textarea="field.type == 'textarea'"
+					:rows="field.type == 'textarea' ? field.rows : 0"
 					full
 				/>
 			</template>

app/components/Album/Slider.vue

@@ -27,6 +27,7 @@ const { data, pending, refresh } = useAsyncData("random-albums", async () => {
 </script>
 
 <template>
+	<section class="slider">
 		<template v-for="item in data" :key="item.genre._id">
 			<Slider v-if="item.albums.length" :title="item.genre.name">
 				<AlbumCard
@@ -39,4 +40,13 @@ const { data, pending, refresh } = useAsyncData("random-albums", async () => {
 				/>
 			</Slider>
 		</template>
+	</section>
 </template>
+
+<style lang="scss" scoped>
+.slider {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+</style>

app/components/Player/Fullscreen.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import LyricsDisplay from "./Fullscreen/LyricsDisplay.vue"
+
+const fullscreen = useFullscreen()
+const song = useSong()
+
+const mouseMovedRecently = ref(true)
+
+onMounted(() => {
+	let timeoutId: NodeJS.Timeout
+
+	const handleMouseMove = () => {
+		mouseMovedRecently.value = true
+
+		clearTimeout(timeoutId)
+		timeoutId = setTimeout(() => {
+			mouseMovedRecently.value = false
+		}, 2000)
+	}
+
+	window.addEventListener("mousemove", handleMouseMove)
+
+	onUnmounted(() => {
+		window.removeEventListener("mousemove", handleMouseMove)
+	})
+})
+</script>
+
+<template>
+	<section
+		class="fullscreen"
+		:class="{ showCursor: mouseMovedRecently }"
+		v-show="fullscreen"
+	>
+		<template v-if="song">
+			<NuxtImg
+				:src="GET_FILE(song.album.file)"
+				:alt="song.name"
+				width="500"
+				height="500"
+				class="background"
+			/>
+		</template>
+
+		<section class="screen-container">
+			<Icon
+				name="lucide:x"
+				class="close-btn"
+				:class="{ show: mouseMovedRecently }"
+				@click="fullscreen = false"
+			/>
+
+			<div class="content-container">
+				<PlayerFullscreenTrackDisplay
+					:show-buttons="mouseMovedRecently"
+				/>
+				<LyricsDisplay
+					:animation-duration="0.2"
+					:offset="150"
+					:show-scroll-bar="mouseMovedRecently"
+				/>
+			</div>
+		</section>
+	</section>
+</template>
+
+<style lang="scss" scoped>
+.fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 200vw;
+	height: 200vh;
+	z-index: 150;
+
+	cursor: none;
+
+	&.showCursor {
+		cursor: auto;
+	}
+}
+
+.background {
+	position: absolute;
+	top: -25%;
+	left: -25%;
+
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	filter: blur(40px);
+}
+
+.screen-container {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100vw;
+	height: 100vh;
+
+	background-color: rgba(0, 0, 0, 0.45);
+}
+
+.close-btn {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+
+	cursor: pointer;
+	font-size: 24px;
+	transition: opacity 0.2s ease;
+	opacity: 0;
+
+	&.show {
+		opacity: 1;
+	}
+}
+
+.content-container {
+	/* TODO: A lot of magic numbers... should be variables */
+	max-width: 1280px;
+	width: 100%;
+	height: 100%;
+	margin: 0 auto;
+
+	display: grid;
+	grid-template-columns: 500px 1fr;
+	gap: 110px;
+
+	align-items: center;
+
+	& > * {
+		max-height: 675px;
+	}
+}
+</style>

app/components/Player/Fullscreen/LyricsDisplay.vue

@@ -0,0 +1,226 @@
+<script setup lang="ts">
+const { animationDuration, offset, showScrollBar } = defineProps<{
+	animationDuration: number
+	offset: number
+	showScrollBar: boolean
+}>()
+
+const song = useSong()
+const { secondsPlayed } = usePlayer()
+
+const parsedLyrics = computed(() => {
+	if (!song.value || !song.value.lyrics.synced) return
+
+	if (song.value.lyrics.synced) return parseLyrics(song.value.lyrics.text)
+})
+
+const lyricsRefs = useTemplateRef("lyrics")
+
+const activeIndex = computed(() => {
+	if (!parsedLyrics.value) return -1
+
+	const time = secondsPlayed.value
+
+	return parsedLyrics.value.findIndex(
+		(lyric, i) =>
+			lyric.time <= time &&
+			(!parsedLyrics.value![i + 1] ||
+				parsedLyrics.value![i + 1]!.time > time),
+	)
+})
+const scrollActiveIndex = computed(() => {
+	if (!parsedLyrics.value) return -1
+
+	const time = secondsPlayed.value + animationDuration
+
+	let index = parsedLyrics.value.findIndex(
+		(lyric, i) =>
+			lyric.time <= time &&
+			(!parsedLyrics.value![i + 1] ||
+				parsedLyrics.value![i + 1]!.time > time),
+	)
+
+	if (index >= parsedLyrics.value.length - 1)
+		index = parsedLyrics.value.length - 2
+	return index
+})
+
+const height = ref(0)
+
+watch(song, () => {
+	const trackDisplay = document.querySelector(".track-display")
+
+	if (!trackDisplay) return
+
+	const resizeObserver = new ResizeObserver((entries) => {
+		height.value = entries[0]!.target.clientHeight
+	})
+
+	resizeObserver.observe(trackDisplay)
+})
+
+const transformY = computed(() => {
+	if (activeIndex.value < 0) return 0
+
+	let accumulatedHeight = 0
+
+	if (!lyricsRefs.value) return 0
+
+	for (let i = 0; i < scrollActiveIndex.value; i++) {
+		const el = lyricsRefs.value[i]
+		if (el) accumulatedHeight += el.getBoundingClientRect().height
+	}
+
+	return -accumulatedHeight
+})
+
+const containerRef = useTemplateRef("container-ref")
+const outerRef = useTemplateRef("outer-ref")
+
+const manualOffset = ref(0)
+const isScrolling = ref(false)
+
+let scrollingTimeout: any = null
+
+const onWheel = (event: WheelEvent) => {
+	if (!containerRef.value || !outerRef.value) return
+
+	isScrolling.value = true
+	clearTimeout(scrollingTimeout)
+
+	const delta = event.deltaY
+
+	manualOffset.value -= delta
+
+	const maxTranslate = offset
+	const minTranslate =
+		-containerRef.value.scrollHeight + outerRef.value.offsetHeight
+
+	manualOffset.value = Math.min(
+		maxTranslate,
+		Math.max(minTranslate, manualOffset.value),
+	)
+
+	scrollingTimeout = setTimeout(() => (isScrolling.value = false), 3000)
+}
+
+const finalTransform = computed(() => {
+	if (isScrolling.value) return manualOffset.value
+
+	return transformY.value + offset
+})
+</script>
+
+<template>
+	<div
+		ref="outer-ref"
+		v-if="song && song.lyrics.synced"
+		class="synced-lyrics-container"
+		:style="{
+			height: `${height}px`,
+		}"
+		@wheel.prevent="onWheel"
+	>
+		<div
+			ref="container-ref"
+			class="synced-lyrics"
+			:style="{
+				transform: `translateY(${finalTransform}px)`,
+				transition: `transform ${animationDuration}s ease`,
+			}"
+		>
+			<p
+				v-for="(lyric, i) in parsedLyrics"
+				:key="lyric.time"
+				:class="{ active: i == activeIndex }"
+				ref="lyrics"
+				@click="() => (secondsPlayed = lyric.time)"
+			>
+				{{ lyric.text }}
+			</p>
+		</div>
+	</div>
+	<div
+		v-else-if="song"
+		class="lyrics"
+		:style="{
+			height: `${height}px`,
+		}"
+		:class="{ show: showScrollBar }"
+	>
+		<p>{{ song.lyrics.text }}</p>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+@use "@/styles/variables" as *;
+
+.synced-lyrics-container {
+	position: relative;
+	overflow: hidden;
+
+	mask-image: linear-gradient(
+		transparent 0%,
+		#000 15%,
+		#000,
+		#000,
+		95%,
+		transparent 100%
+	);
+}
+
+.synced-lyrics {
+	position: absolute;
+	scrollbar-width: none;
+	will-change: transform;
+
+	top: 0;
+
+	& > p {
+		@include fontSize(40px);
+		font-weight: 600;
+		color: white;
+		opacity: 0.4;
+		padding: 10px 0;
+		transition:
+			opacity 0.1s ease,
+			filter 0.1s ease;
+		filter: blur(1.5px);
+
+		&.active {
+			opacity: 1;
+			filter: initial;
+		}
+
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+			filter: initial;
+		}
+	}
+}
+
+.lyrics {
+	overflow: hidden;
+
+	& > p {
+		height: 100%;
+		overflow-y: scroll;
+		white-space: pre-wrap;
+
+		&::-webkit-scrollbar {
+			width: 10px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: transparent;
+			border-radius: 5px;
+		}
+	}
+
+	&.show > p::-webkit-scrollbar-thumb {
+		background-color: $color-secondary-background;
+	}
+}
+</style>

app/components/Player/Fullscreen/TrackDisplay.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+const { showButtons } = defineProps<{ showButtons: boolean }>()
+
+const song = useSong()
+const {
+	isPlaying,
+	play,
+	pause,
+	next,
+	prev,
+	shuffle,
+	repeat,
+	secondsPlayed,
+	duration,
+} = usePlayer()
+
+const secondsPlayedFormatted = computed(() =>
+	new Date(secondsPlayed.value * 1000).toISOString().slice(14, 19),
+)
+
+const durationFormatted = computed(() =>
+	new Date((duration.value - secondsPlayed.value) * 1000)
+		.toISOString()
+		.slice(14, 19),
+)
+</script>
+
+<template>
+	<article class="track-display" v-if="song">
+		<NuxtImg
+			class="cover"
+			:src="GET_FILE(song.album.file)"
+			:alt="song.name"
+			width="512"
+			height="512"
+		/>
+
+		<div class="track">
+			<p class="name">{{ song.name }}</p>
+			<ArtistName :artists="song.artists" />
+		</div>
+
+		<div class="slider">
+			<RangeSlider
+				:model-value="secondsPlayed"
+				@update:model-value="(v) => (secondsPlayed = v ?? 0)"
+				:max="duration"
+				dont-update-immediately
+				monochrome
+			/>
+			<div class="time">
+				<p>{{ secondsPlayedFormatted }}</p>
+				<p>{{ durationFormatted }}</p>
+			</div>
+		</div>
+
+		<div class="btns" :class="{ hidden: !showButtons }">
+			<Icon name="lucide:shuffle" @click="shuffle()" />
+			<Icon name="lucide:skip-back" @click="prev()" />
+			<Icon name="lucide:pause" v-if="isPlaying" @click="pause()" />
+			<Icon name="lucide:play" v-else @click="play()" />
+			<Icon name="lucide:skip-forward" @click="next()" />
+			<Icon
+				name="lucide:repeat"
+				:class="{ repeating: repeat }"
+				@click="repeat = !repeat"
+			/>
+		</div>
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+@use "@/styles/variables" as *;
+
+.track-display {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+}
+
+.cover {
+	width: 100%;
+	aspect-ratio: 1;
+	object-fit: cover;
+	border-radius: $border-radius-standard;
+}
+
+.track {
+	@include fontSize(16px);
+	width: 100%;
+
+	line-height: 1.3;
+
+	.name {
+		@include fontSize(17px);
+		font-weight: bold;
+	}
+}
+
+.slider {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: 4px;
+
+	.time {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		opacity: 0.5;
+
+		& p {
+			@include fontSize(15px);
+		}
+	}
+}
+
+.btns {
+	cursor: pointer;
+	font-size: 30px;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	gap: 1rem;
+
+	overflow: hidden;
+	max-height: 30px;
+	transition: max-height 0.2s ease-in-out;
+
+	&.hidden {
+		max-height: 0;
+	}
+
+	& > * {
+		transition: color 0.2s ease;
+	}
+
+	.repeating {
+		color: $color-accent;
+	}
+}
+</style>

app/components/Player/index.vue

@@ -39,6 +39,7 @@ const durationFormatted = computed(() =>
 )
 
 const toast = useToast()
+const fullscreen = useFullscreen()
 </script>
 
 <template>
@@ -106,13 +107,11 @@ const toast = useToast()
 					name="lucide:list"
 					@click="toast.show('Not yet implemented')"
 				/>
-				<Icon
-					name="lucide:expand"
-					@click="toast.show('Not yet implemented')"
-				/>
+				<Icon name="lucide:expand" @click="fullscreen = true" />
 			</div>
 		</template>
 	</article>
+	<PlayerFullscreen />
 </template>
 
 <style lang="scss" scoped>
@@ -127,11 +126,13 @@ const toast = useToast()
 	position: fixed;
 	bottom: 1rem;
 
-	height: 72px;
+	height: $player-height;
 
 	border-radius: $border-radius-lg;
 	border: 1px solid $color-border;
 
+	background-color: $color-background;
+
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 1rem;

app/components/Slider.vue

@@ -1,22 +1,39 @@
 <script setup lang="ts">
 interface SliderProps {
 	title?: string
+	scrollWidth?: () => number
+	sliderClass?: string
 }
 
 const props = defineProps<SliderProps>()
 
-const slider = ref<HTMLDivElement>()
+const slider = useTemplateRef<HTMLDivElement>("slider")
 
 const scrollLeft = (num: number) => {
-	if (slider.value) slider.value.scrollLeft += num
+	if (!slider.value) return
+
+	const maxScroll = slider.value.scrollWidth - slider.value.clientWidth
+
+	slider.value.scrollLeft = Math.max(
+		0,
+		Math.min(slider.value?.scrollLeft + num, maxScroll),
+	)
 }
 
 const left = () => {
-	if (slider.value) scrollLeft(-slider.value.offsetWidth)
+	if (slider.value)
+		scrollLeft(
+			props.scrollWidth
+				? -props.scrollWidth()
+				: -slider.value.offsetWidth,
+		)
 }
 
 const right = () => {
-	if (slider.value) scrollLeft(slider.value.offsetWidth)
+	if (slider.value)
+		scrollLeft(
+			props.scrollWidth ? props.scrollWidth() : slider.value.offsetWidth,
+		)
 }
 
 const doesScroll = ref<boolean>(false)
@@ -29,7 +46,7 @@ const computeIfScroll = () => {
 onMounted(() => {
 	computeIfScroll()
 
-	window.addEventListener("reisze", computeIfScroll)
+	window.addEventListener("resize", computeIfScroll)
 
 	onUnmounted(() => {
 		window.removeEventListener("resize", computeIfScroll)
@@ -48,7 +65,9 @@ onMounted(() => {
 				class="left"
 				name="material-symbols:chevron-left-rounded"
 			/>
-			<section class="slider" ref="slider"><slot /></section>
+			<section class="slider" :class="[props.sliderClass]" ref="slider">
+				<slot />
+			</section>
 			<Icon
 				v-if="doesScroll"
 				@click="right"
@@ -85,7 +104,7 @@ onMounted(() => {
 
 	& > * {
 		flex: 0 0 auto;
-		scroll-snap-align: center;
+		scroll-snap-align: start;
 	}
 }
 

app/components/Track/ImageRow.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from "~/ui/DropdownMenu.vue"
+
+interface TrackRowProps {
+	track: Track
+}
+
+const { track } = defineProps<TrackRowProps>()
+const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
+
+const hovering = ref(false)
+
+const toast = useToast()
+
+const dropdownMenuItems: DropdownMenuItem[][] = [
+	[
+		{
+			label: "Play only this",
+			icon: "lucide:play",
+			onSelect() {},
+		},
+		{
+			label: "Play next",
+			icon: "lucide:list-start",
+			onSelect() {
+				toast.show("Playing next")
+			},
+		},
+		{
+			label: "Add to queue",
+			icon: "lucide:list-end",
+			onSelect() {
+				toast.show("Added to queue")
+			},
+		},
+	],
+]
+</script>
+
+<template>
+	<article
+		class="track"
+		@mouseover="hovering = true"
+		@mouseleave="hovering = false"
+	>
+		<div
+			class="index"
+			:class="{ hovering }"
+			@click="emit('playAlbumAtIndex')"
+		>
+			<Icon name="lucide:play" />
+			<NuxtImg
+				:src="GET_FILE(track.album.file)"
+				width="50"
+				height="50"
+				placeholder
+			/>
+		</div>
+
+		<div>
+			<p>{{ track.name }}</p>
+			<ArtistName :artists="track.artists" class="artists" />
+		</div>
+
+		<DropdownMenu :items="dropdownMenuItems">
+			<Icon name="lucide:ellipsis" class="dropdown-icon" />
+		</DropdownMenu>
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+@use "@/styles/util" as *;
+@use "sass:color";
+
+.track {
+	display: grid;
+	grid-template-columns: 40px 1fr 30px;
+	gap: 0.5rem;
+	align-items: center;
+	padding: 0.6rem 1rem;
+	border-radius: $border-radius-standard;
+	background-color: $color-background;
+	line-height: 1;
+	width: 100%;
+
+	p {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.index {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 24px;
+
+	position: relative;
+
+	cursor: pointer;
+
+	img {
+		border-radius: $border-radius-standard;
+	}
+
+	span {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		opacity: 0;
+	}
+
+	img,
+	span {
+		transition: opacity 0.15s ease;
+	}
+
+	&.hovering {
+		img {
+			opacity: 0.4;
+		}
+
+		span {
+			opacity: 1;
+		}
+	}
+}
+
+.artists {
+	@include fontSize(14px);
+}
+
+.dropdown-icon {
+	font-size: 20px;
+	cursor: pointer;
+}
+</style>

app/components/Track/Row.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from "~/ui/DropdownMenu.vue"
+
+interface TrackRowProps {
+	track: Track
+	index: number
+	extendedInfo?: boolean
+}
+
+const { track, index, extendedInfo } = defineProps<TrackRowProps>()
+const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
+
+const hovering = ref(false)
+
+const toast = useToast()
+
+const dropdownMenuItems: DropdownMenuItem[][] = [
+	[
+		{
+			label: "Play only this",
+			icon: "lucide:play",
+			onSelect() {},
+		},
+		{
+			label: "Play next",
+			icon: "lucide:list-start",
+			onSelect() {
+				toast.show("Playing next")
+			},
+		},
+		{
+			label: "Add to queue",
+			icon: "lucide:list-end",
+			onSelect() {
+				toast.show("Added to queue")
+			},
+		},
+	],
+]
+
+const durationFormatted = computed(() =>
+	new Date(track.durationInSeconds * 1000).toISOString().slice(14, 19),
+)
+</script>
+
+<template>
+	<article
+		class="track"
+		:class="{ extended: extendedInfo, odd: index % 2 == 1 }"
+		@mouseover="hovering = true"
+		@mouseleave="hovering = false"
+	>
+		<div class="index">
+			<Icon
+				name="lucide:play"
+				@click="emit('playAlbumAtIndex')"
+				v-if="hovering"
+			/>
+			<p v-else>{{ index + 1 }}</p>
+		</div>
+
+		<p>{{ track.name }}</p>
+
+		<template v-if="extendedInfo">
+			<ArtistName :artists="track.artists" class="artists" />
+			<NuxtLink :to="`/album/${track.album._id}`">
+				<p>{{ track.album.name }}</p>
+			</NuxtLink>
+		</template>
+
+		<p>{{ durationFormatted }}</p>
+
+		<DropdownMenu :items="dropdownMenuItems">
+			<Icon name="lucide:ellipsis" class="dropdown-icon" />
+		</DropdownMenu>
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+@use "@/styles/util" as *;
+@use "sass:color";
+
+.track {
+	display: grid;
+	grid-template-columns: 30px 1fr 50px 30px;
+	gap: 0.5rem;
+	align-items: center;
+	padding: 0.6rem 1rem;
+	border-radius: $border-radius-standard;
+	background-color: $color-background;
+	line-height: 1;
+
+	&.odd {
+		background-color: color.adjust($color-background, $lightness: 5%);
+	}
+
+	&.extended {
+		grid-template-columns: 30px 2fr 1fr 1fr 50px 30px;
+	}
+
+	p {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+
+.index {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 20px;
+	height: 20px;
+
+	cursor: pointer;
+}
+
+.artists {
+	opacity: 1;
+}
+
+.dropdown-icon {
+	font-size: 20px;
+	cursor: pointer;
+}
+</style>

app/composables/useApiFetch.ts

@@ -4,7 +4,7 @@ import defu from "defu"
 export function useApiFetch<DataT = any, ErrorT = any>(
 	url: string | Request | Ref<string | Request> | (() => string | Request),
 	options?: UseFetchOptions<DataT, ErrorT>,
-	authorize: boolean = true
+	authorize: boolean = true,
 ): ReturnType<typeof useFetch<DataT, ErrorT>> {
 	const baseUrl = import.meta.env.VITE_PUBLIC_BACKEND
 
@@ -15,26 +15,25 @@ export function useApiFetch<DataT = any, ErrorT = any>(
 	const defaults: UseFetchOptions<DataT, ErrorT> = {
 		baseURL: baseUrl,
 
+		retry: 1,
+		retryDelay: 0,
+		retryStatusCodes: [401],
+
 		headers:
 			authorize && sessionToken.value
 				? { Authorization: `Bearer ${sessionToken.value}` }
 				: {},
-		onResponseError: async ({ response, options }) => {
+		onResponseError: async ({ request, response, options }) => {
 			if (response.status == 401 && authorize) {
 				const newToken = await refreshSessionToken()
 
 				if (!newToken) return
 
-				const newOptions = {
-					...options,
-					headers: {
-						...(options.headers || {}),
-						Authorization: `Bearer ${newToken}`,
-					},
-				}
-
+				options.headers = {
+					...(options.headers as unknown as Record<string, string>),
 					// @ts-ignore
-				return await $fetch<DataT, ErrorT>(url, newOptions)
+					Authorization: `Bearer ${newToken}`,
+				}
 			}
 		},
 	}

app/composables/useAuth.ts

@@ -79,7 +79,10 @@ export const useAuth = () => {
 
 	const signup = async (name: string, email: string, password: string) => {}
 
-	const signout = () => {}
+	const signout = () => {
+		refreshToken.value = null
+		sessionToken.value = null
+	}
 
 	const refreshSessionToken = async () => {
 		if (waitForPromise) {
@@ -128,6 +131,10 @@ export const useAuth = () => {
 		return refreshPromise
 	}
 
+	onMounted(() => {
+		if (refreshToken.value && !sessionToken.value) refreshSessionToken()
+	})
+
 	return {
 		refreshToken,
 		sessionToken,

app/composables/useFullscreen.ts

@@ -0,0 +1 @@
+export const useFullscreen = () => useState<boolean>("fullscreen", () => false)

app/pages/admin/albums.vue

@@ -14,7 +14,7 @@ const tableRows: Row[] = [
 		name: "file",
 		displayName: "Cover",
 		type: "image",
-		prefix: `${BACKEND_SERVE}/static/`,
+		prefix: `${BACKEND_SERVE}`,
 	},
 	{
 		name: "name",
@@ -31,7 +31,7 @@ const tableRows: Row[] = [
 
 import { type Option } from "~/ui/SearchSelect.vue"
 
-const { data: artistData } = useApiFetch<Genre[]>("/all/artists")
+const { data: artistData } = useApiFetch<Artist[]>("/all/artists")
 const artistFetchOptions = async (q?: string): Promise<Option[]> => {
 	return artistData.value.map<Option>((g) => ({
 		label: g.name,
@@ -65,7 +65,7 @@ const modalFields: Field[] = [
 ]
 
 const showModal = ref<boolean>(false)
-const item = ref<Track | undefined>(undefined)
+const item = ref<Album | undefined>(undefined)
 
 const save = async (value: any) => {
 	if (value._id) {

app/pages/admin/artists.vue

@@ -2,7 +2,7 @@
 import type { Field } from "~/components/Admin/ModalForm.vue"
 import type { Row } from "~/ui/Table.vue"
 
-const { data, refresh } = useApiFetch<Track[]>("/all/artists")
+const { data, refresh } = useApiFetch<Artist[]>("/all/artists")
 const toast = useToast()
 
 const tableRows: Row[] = [
@@ -31,7 +31,7 @@ const modalFields: Field[] = [
 ]
 
 const showModal = ref<boolean>(false)
-const item = ref<Track | undefined>(undefined)
+const item = ref<Artist | undefined>(undefined)
 
 const save = async (value: any) => {
 	if (value._id) {

app/pages/admin/genre.vue

@@ -2,7 +2,7 @@
 import type { Field } from "~/components/Admin/ModalForm.vue"
 import type { Row } from "~/ui/Table.vue"
 
-const { data, refresh } = useApiFetch<Track[]>("/all/genres")
+const { data, refresh } = useApiFetch<Genre[]>("/all/genres")
 const toast = useToast()
 
 const tableRows: Row[] = [
@@ -22,7 +22,7 @@ const tableRows: Row[] = [
 const modalFields: Field[] = [{ key: "name", label: "Name" }]
 
 const showModal = ref<boolean>(false)
-const item = ref<Track | undefined>(undefined)
+const item = ref<Genre | undefined>(undefined)
 
 const save = async (value: any) => {
 	if (value._id) {

app/pages/admin/songs.vue

@@ -2,7 +2,7 @@
 import type { Field } from "~/components/Admin/ModalForm.vue"
 import type { Row } from "~/ui/Table.vue"
 
-const { data, refresh } = useApiFetch<Album[]>("/all/tracks")
+const { data, refresh } = useApiFetch<Track[]>("/all/tracks")
 const toast = useToast()
 
 const tableRows: Row[] = [
@@ -15,7 +15,7 @@ const tableRows: Row[] = [
 		displayName: "Audio File",
 		type: "audio",
 		prefix: `${BACKEND_SERVE}`,
-		suffix: "/original.m4a",
+		suffix: "/high.m4a",
 	},
 	{
 		name: "name",
@@ -32,7 +32,7 @@ const tableRows: Row[] = [
 
 import { type Option } from "~/ui/SearchSelect.vue"
 
-const { data: artistData } = useApiFetch<Genre[]>("/all/artists")
+const { data: artistData } = useApiFetch<Artist[]>("/all/artists")
 const artistFetchOptions = async (q?: string): Promise<Option[]> => {
 	return artistData.value.map<Option>((g) => ({
 		label: g.name,
@@ -40,7 +40,7 @@ const artistFetchOptions = async (q?: string): Promise<Option[]> => {
 	}))
 }
 
-const { data: albumData } = useApiFetch<Genre[]>("/all/albums")
+const { data: albumData } = useApiFetch<Album[]>("/all/albums")
 const albumFetchOptions = async (q?: string): Promise<Option[]> => {
 	return albumData.value.map<Option>((g) => ({
 		label: g.name,
@@ -63,6 +63,8 @@ const modalFields: Field[] = [
 		type: "search-select",
 		fetchOptions: albumFetchOptions,
 	},
+	{ key: "lyrics.text", label: "Lyrics", type: "textarea", rows: 6 },
+	{ key: "lyrics.synced", label: "Synced lyrics", type: "checkbox" },
 ]
 
 const showModal = ref<boolean>(false)
@@ -73,7 +75,10 @@ const save = async (value: any) => {
 		try {
 			await cfetch("/admin/track", {
 				method: "PATCH",
-				data: value,
+				data: {
+					...value,
+					lyrics: JSON.stringify(value.lyrics),
+				},
 				params: { id: value._id },
 				forceFormData: true,
 			})
@@ -88,7 +93,10 @@ const save = async (value: any) => {
 		try {
 			await cfetch("/admin/track", {
 				method: "POST",
-				data: value,
+				data: {
+					...value,
+					lyrics: JSON.stringify(value.lyrics),
+				},
 			})
 
 			toast.show("Song added successfully", "success")
@@ -137,8 +145,6 @@ const show = (id?: string) => {
 
 	showModal.value = true
 }
-
-watch(data, () => console.log(data))
 </script>
 
 <template>

app/pages/album/[id].vue

@@ -1 +1,96 @@
-<template></template>
+<script setup lang="ts">
+const route = useRoute()
+const id = computed(() => route.params.id)
+
+const { data: albumData } = await useApiFetch<Album>(`/albums/${id.value}`)
+
+const { data: tracksData } = await useApiFetch<Track[]>(
+	`/albums/${id.value}/tracks`,
+)
+
+const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
+</script>
+
+<template>
+	<section class="info" v-if="albumData">
+		<NuxtImg
+			:src="GET_FILE(albumData.file)"
+			width="300"
+			height="300"
+			placeholder
+		/>
+
+		<div class="details">
+			<h1>{{ albumData.name }}</h1>
+			<ArtistName :artists="albumData.artists" class="artist" />
+
+			<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>
+
+	<section class="tracks">
+		<TrackRow
+			v-for="(track, i) in tracksData"
+			:key="track._id"
+			:track="track"
+			:index="i"
+			@play-album-at-index="() => playAlbumAtIndex(tracksData, i)"
+		/>
+	</section>
+</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;
+		}
+	}
+}
+
+.tracks {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+}
+</style>

app/pages/artist/[id].vue

@@ -1 +1,150 @@
-<template></template>
+<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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const route = useRoute()
+const id = computed(() => route.params.id)
+
+const { data: artistData } = await useApiFetch<Artist>(`/artists/${id.value}`)
+const { data: tracksData } = await useApiFetch<Track[]>(
+	`/artists/${id.value}/tracks`,
+)
+
+const { playAlbum, 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
+				>
+			</div>
+		</div>
+	</section>
+
+	<section class="tracks-container">
+		<NuxtLink :to="`/artist/${id}/tracks`">
+			Tracks
+			<Icon name="lucide:chevron-right" />
+		</NuxtLink>
+
+		<Slider>
+			<div class="tracks">
+				<template v-for="j in 25">
+					<TrackImageRow
+						v-for="(track, i) in tracksData"
+						:key="track._id"
+						:track="track"
+						:index="i"
+						@play-album-at-index="
+							() => playAlbumAtIndex(tracksData, i)
+						"
+					/>
+				</template>
+			</div>
+		</Slider>
+	</section>
+
+	<section class="albums"></section>
+</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;
+
+		& h1 {
+			@include util.fontSize(32px);
+			font-weight: 700;
+			line-height: 2.4rem;
+		}
+
+		.buttons {
+			margin-top: auto;
+		}
+	}
+}
+
+.tracks-container {
+	a {
+		display: inline-flex;
+		align-items: center;
+
+		@include util.fontSize(24px);
+		font-weight: 600;
+	}
+
+	.tracks {
+		display: grid;
+		grid-template-rows: repeat(3, 1fr);
+		grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
+		grid-auto-flow: column;
+	}
+}
+</style>

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

@@ -0,0 +1,3 @@
+<template>
+	<h1>Tracks!</h1>
+</template>

app/pages/index.vue

@@ -10,9 +10,7 @@ const play = () => {
 </script>
 
 <template>
-	<Button @click="play">Test play</Button>
+	<h1>Home</h1>
 
 	<AlbumSlider />
-
-	<div :style="{ height: '100vh' }"></div>
 </template>

app/plugins/player.ts

@@ -138,7 +138,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 		updateMediaSession()
 	}
 
-	const next = async () => {
+	const next = async (autoplay: boolean = true) => {
 		if (currentSong.value) {
 			prevQueue.value.unshift(currentSong.value)
 		}
@@ -153,7 +153,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 			currentSong.value = queue.value.shift() || null
 		}
 
-		if (currentSong.value) await play()
+		if (currentSong.value && autoplay) await play()
 
 		updateMediaSession()
 	}
@@ -184,6 +184,11 @@ export default defineNuxtPlugin((nuxtApp) => {
 		currentQueue.value.push(song)
 	}
 
+	const addToFrontOfQueue = (song: Track) => {
+		queue.value.unshift(song)
+		currentQueue.value.unshift(song)
+	}
+
 	const clear = () => {
 		queue.value = []
 		currentQueue.value = []
@@ -196,6 +201,35 @@ export default defineNuxtPlugin((nuxtApp) => {
 		queue.value.sort(() => Math.random() - 0.5)
 	}
 
+	// Album
+	const playAlbum = async (songs: Track[]) => {
+		clear()
+
+		songs.forEach((song) => addToQueue(song))
+
+		await next()
+	}
+
+	const playShuffledAlbum = async (songs: Track[]) => {
+		clear()
+
+		songs.forEach((song) => addToQueue(song))
+		shuffle()
+
+		await next()
+	}
+
+	const playAlbumAtIndex = async (songs: Track[], index: number) => {
+		clear()
+		songs.forEach((song) => addToQueue(song))
+
+		for (let i = 0; i < index + 1; i++) {
+			await next(false)
+		}
+
+		await play()
+	}
+
 	// Info
 	const getDuration = () =>
 		new Promise<number>((resolve) => {
@@ -218,8 +252,12 @@ export default defineNuxtPlugin((nuxtApp) => {
 				next,
 				prev,
 				addToQueue,
+				addToFrontOfQueue,
 				clear,
 				shuffle,
+				playAlbum,
+				playShuffledAlbum,
+				playAlbumAtIndex,
 				getDuration,
 				secondsPlayed,
 				duration,

app/styles/_variables.scss

@@ -7,6 +7,10 @@ $color-border: rgba(255, 255, 255, 0.16);
 $color-button: rgba(255, 255, 255, 0.08);
 $color-button-hover: rgba(255, 255, 255, 0.16);
 $color-attention: #fc8181;
+$color-slider-monochrome: white;
 
+$border-radius-sm: 0.15rem;
 $border-radius-standard: 0.3rem;
 $border-radius-lg: 0.6rem;
+
+$player-height: 72px;

app/styles/global.scss

@@ -1,7 +1,16 @@
 @use "reset" as *;
+@use "util" as *;
 
 html {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+	font-family:
+		-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
 		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	color: white;
 }
+
+main > h1 {
+	@include fontSize(32px);
+	font-weight: 700;
+
+	margin-bottom: 1.5rem;
+}

app/ui/DropdownMenu.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+export interface DropdownMenuItem {
+	label: string
+	icon: string
+	onSelect?: () => void
+}
+
+interface DropdownMenuProps {
+	items: DropdownMenuItem[][]
+}
+
+const props = defineProps<DropdownMenuProps>()
+
+const open = ref(false)
+const placement = ref<"bottom" | "top">("bottom")
+const root = useTemplateRef("root")
+
+const toggle = async () => {
+	open.value = !open.value
+
+	if (open.value) {
+		await nextTick()
+		updatePlacement()
+	}
+}
+const close = () => (open.value = false)
+
+const updatePlacement = () => {
+	const el = root.value
+	if (!el) return
+
+	const rect = el.getBoundingClientRect()
+
+	const spaceBelow = window.innerHeight - rect.bottom
+	const spaceAbove = rect.top
+
+	// TODO: Calculate height instead
+	const menuHeight = 220
+
+	console.log(
+		spaceBelow,
+		menuHeight,
+		spaceAbove,
+		spaceBelow < menuHeight && spaceAbove > spaceBelow,
+		spaceBelow < menuHeight && spaceAbove > spaceBelow ? "top" : "bottom",
+	)
+
+	placement.value =
+		spaceBelow < menuHeight && spaceAbove > spaceBelow ? "top" : "bottom"
+}
+
+const handleOutsideClick = (e: MouseEvent) => {
+	if (!root.value) return
+	if (!root.value.contains(e.target as Node)) close()
+}
+
+const handleKey = (e: KeyboardEvent) => {
+	if (e.key == "Escape") close()
+}
+
+const handleReposition = () => {
+	if (open.value) updatePlacement()
+}
+
+onMounted(() => {
+	document.addEventListener("click", handleOutsideClick)
+	document.addEventListener("keydown", handleKey)
+	window.addEventListener("resize", handleReposition)
+	window.addEventListener("scroll", handleReposition, true)
+})
+
+onBeforeMount(() => {
+	document.removeEventListener("click", handleOutsideClick)
+	document.removeEventListener("keydown", handleKey)
+	window.removeEventListener("resize", handleReposition)
+	window.removeEventListener("scroll", handleReposition, true)
+})
+</script>
+
+<template>
+	<div ref="root" class="dropdown">
+		<div @click="toggle" class="trigger">
+			<slot />
+		</div>
+
+		<Transition name="dropdown">
+			<div v-show="open" class="menu" :class="placement">
+				<div
+					v-for="(group, i) in items"
+					:key="`group-${i}`"
+					class="group"
+				>
+					<button
+						v-for="(item, i) in group"
+						:key="`item-${i}`"
+						class="item"
+						@click="
+							() => {
+								item.onSelect?.()
+								close()
+							}
+						"
+					>
+						<Icon :name="item.icon" class="icon" />
+						<span>{{ item.label }}</span>
+					</button>
+				</div>
+			</div>
+		</Transition>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.dropdown {
+	position: relative;
+	display: inline-block;
+
+	.menu {
+		position: absolute;
+		right: 0;
+
+		padding: 0.5rem;
+		min-width: 180px;
+
+		background-color: $color-secondary-background;
+		border-radius: $border-radius-standard;
+		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+
+		display: flex;
+		flex-direction: column;
+
+		z-index: 1000;
+
+		&.bottom {
+			top: calc(100% + 0.5rem);
+			transform-origin: top right;
+		}
+
+		&.top {
+			bottom: calc(100% + 0.5rem);
+			transform-origin: bottom right;
+		}
+	}
+
+	.group {
+		width: 100%;
+
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		padding: 0.4rem 0;
+		border-bottom: 1px solid $color-border;
+
+		&:first-child {
+			padding-top: 0;
+		}
+
+		&:last-child {
+			border-bottom: none;
+			padding-bottom: 0;
+		}
+	}
+
+	.item {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		padding: 0.5rem;
+		border-radius: $border-radius-standard;
+
+		background: transparent;
+		border: none;
+		cursor: pointer;
+
+		transition: background-color 0.2s ease;
+	}
+
+	.item:hover {
+		background-color: $color-button-hover;
+	}
+
+	.icon {
+		font-size: 16px;
+	}
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+	transition:
+		opacity 0.14s ease-out,
+		transform 0.14s ease-out;
+}
+
+/* Starting state */
+.dropdown-enter-from {
+	opacity: 0;
+	transform: translateY(-6px) scale(0.96);
+}
+
+/* End state */
+.dropdown-enter-to {
+	opacity: 1;
+	transform: translateY(0) scale(1);
+}
+
+/* Leaving */
+.dropdown-leave-from {
+	opacity: 1;
+	transform: translateY(0) scale(1);
+}
+
+.dropdown-leave-to {
+	opacity: 0;
+	transform: translateY(-4px) scale(0.98);
+}
+</style>

app/ui/Input.vue

@@ -11,6 +11,8 @@ interface InputProps {
 	required?: boolean
 	autocomplete?: AutocompleteType
 	label?: string
+	textarea?: boolean
+	rows?: number
 }
 
 const value = defineModel<string | File | File[] | null>("value")
@@ -63,7 +65,7 @@ const onFileChange = (e: Event) => {
 			</span>
 
 			<input
-				v-if="props.type != 'file'"
+				v-if="props.type != 'file' && props.type != 'textarea'"
 				:placeholder="props.placeholder"
 				v-model="value"
 				@input="(e) => emit('input', e.target?.value)"
@@ -76,6 +78,20 @@ const onFileChange = (e: Event) => {
 				:autocomplete="props.autocomplete"
 			/>
 
+			<textarea
+				v-else-if="props.textarea"
+				:placeholder="props.placeholder"
+				v-model="value"
+				@input="(e) => emit('input', e.target?.value)"
+				@focus="emit('focus')"
+				@blur="emit('blur')"
+				:name="props.name"
+				:id="props.name"
+				:required="props.required"
+				:autocomplete="props.autocomplete"
+				:rows="props.rows"
+			/>
+
 			<input
 				v-else
 				@focus="emit('focus')"
@@ -120,7 +136,8 @@ const onFileChange = (e: Event) => {
 		outline: 2px solid $color-accent;
 	}
 
-	& input {
+	& input,
+	& textarea {
 		width: 100%;
 		background: none;
 
@@ -132,6 +149,10 @@ const onFileChange = (e: Event) => {
 		}
 	}
 
+	& textarea:focus {
+		outline: none;
+	}
+
 	& input:focus {
 		outline: none;
 	}

app/ui/RangeSlider.vue

@@ -4,6 +4,7 @@ interface SliderProps {
 	max?: number
 	step?: number
 	dontUpdateImmediately?: boolean
+	monochrome?: boolean
 }
 
 const props = withDefaults(defineProps<SliderProps>(), {
@@ -11,6 +12,7 @@ const props = withDefaults(defineProps<SliderProps>(), {
 	max: 100,
 	step: 1,
 	dontUpdateImmediately: false,
+	monochrome: false,
 })
 
 const value = defineModel<number>()
@@ -67,7 +69,11 @@ const onMouseDown = (event: MouseEvent) => {
 <template>
 	<div ref="slider-ref" class="slider" @mousedown="onMouseDown">
 		<div class="track">
-			<div class="fill" :style="{ width: percentage + '%' }" />
+			<div
+				class="fill"
+				:class="{ monochrome }"
+				:style="{ width: percentage + '%' }"
+			/>
 		</div>
 	</div>
 </template>
@@ -98,4 +104,8 @@ const onMouseDown = (event: MouseEvent) => {
 	background: $color-accent;
 	border-radius: 999px;
 }
+
+.slider .monochrome {
+	background-color: $color-slider-monochrome;
+}
 </style>

app/ui/Sidebar.vue

@@ -38,8 +38,7 @@
 		width: 100%;
 		height: 100%;
 		overflow-y: auto;
-		padding: 2rem 3rem;
-		position: relative;
+		padding: 2rem 3rem calc(2rem + $player-height);
 	}
 }
 </style>

app/ui/ToastContainer.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 const { toasts, remove } = useToast()
+const song = useSong()
 </script>
 
 <template>
-	<div class="toast-container">
+	<div class="toast-container" :class="{ playerShown: song != undefined }">
 		<TransitionGroup name="toast">
 			<div
 				v-for="toast in toasts"
@@ -27,11 +28,17 @@ const { toasts, remove } = useToast()
 	right: 0;
 	z-index: 100;
 
-	padding: 20px;
+	padding: 2rem;
 
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
+
+	transition: trasnform 0.2s ease-out;
+}
+
+.playerShown {
+	transform: translateY(-$player-height);
 }
 
 .toast {
@@ -44,7 +51,9 @@ const { toasts, remove } = useToast()
 
 	cursor: pointer;
 
-	transition: transform 0.2s ease, opacity 0.2s ease;
+	transition:
+		transform 0.2s ease,
+		opacity 0.2s ease;
 }
 
 .toast-enter-from {

app/utils/cfetch.ts

@@ -62,13 +62,13 @@ export const cfetch = async (
 	let response
 	try {
 		response = await axios(url, config)
-	} catch {
-		if (response?.status == 401) {
+	} catch (error: any) {
+		if (error.response?.status == 401) {
 			if (!config.headers) config.headers = {}
 			config.headers.Authorization = `Bearer ${await refreshSessionToken()}`
 
 			response = await axios(url, config)
-		}
+		} else throw error
 	}
 
 	if (!response) throw new Error("Something went wrong. Please try again")

app/utils/parseLyrics.ts

@@ -0,0 +1,27 @@
+export const parseLyrics = (lrc: string) => {
+	const regex = /^\[(\d{2}:\d{2}(.\d{2,3})?)\](.*)/
+	const lines = lrc.split("\n")
+	const output: { time: number; text: any }[] = []
+
+	const parseTime = (time: any) => {
+		const minsec = time.split(":")
+		const min = parseInt(minsec[0]) * 60
+		const sec = parseFloat(minsec[1])
+		return min + sec
+	}
+
+	lines.forEach((line: any) => {
+		const match = line.match(regex)
+		if (match == null) return
+
+		const time = match[1]
+		const text = match[3]
+
+		output.push({
+			time: parseTime(time),
+			text: text.trim(),
+		})
+	})
+
+	return output
+}

app/utils/types.ts

@@ -27,4 +27,5 @@ export interface Track extends Base {
 	}
 	album: Album
 	artists: Artist[]
+	durationInSeconds: number
 }