From fceddf641a656698092fdcd7c00f8a131f877500 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 8 Mar 2026 12:05:53 +0100
Subject: [PATCH 1/7] Added track image row component

---
 app/components/Track/ImageRow.vue | 141 ++++++++++++++++++++++++++++++
 app/styles/_variables.scss        |   1 +
 2 files changed, 142 insertions(+)
 create mode 100644 app/components/Track/ImageRow.vue

diff --git a/app/components/Track/ImageRow.vue b/app/components/Track/ImageRow.vue
new file mode 100644
index 0000000..7505ae8
--- /dev/null
+++ b/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>
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index ac1bb92..01c1104 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -9,6 +9,7 @@ $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;
 

From 427437bb3ba376054eb7bdb17dcc17a81da065e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 8 Mar 2026 12:06:05 +0100
Subject: [PATCH 2/7] Moved artist page

---
 app/pages/artist/[id].vue       |   1 -
 app/pages/artist/[id]/index.vue | 108 ++++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 1 deletion(-)
 delete mode 100644 app/pages/artist/[id].vue
 create mode 100644 app/pages/artist/[id]/index.vue

diff --git a/app/pages/artist/[id].vue b/app/pages/artist/[id].vue
deleted file mode 100644
index cc340bc..0000000
--- a/app/pages/artist/[id].vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
diff --git a/app/pages/artist/[id]/index.vue b/app/pages/artist/[id]/index.vue
new file mode 100644
index 0000000..cd03b21
--- /dev/null
+++ b/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>

From e8d2173f17cbc63550b58f3dcfb1d76da07b58ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 8 Mar 2026 12:06:17 +0100
Subject: [PATCH 3/7] Created tracks page for artists

---
 app/pages/artist/[id]/tracks.vue | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 app/pages/artist/[id]/tracks.vue

diff --git a/app/pages/artist/[id]/tracks.vue b/app/pages/artist/[id]/tracks.vue
new file mode 100644
index 0000000..feb239f
--- /dev/null
+++ b/app/pages/artist/[id]/tracks.vue
@@ -0,0 +1,3 @@
+<template>
+	<h1>Tracks!</h1>
+</template>

From cb481ad983f3a29fbff74c304c4d4d7acaff47af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 5 Apr 2026 11:55:17 +0200
Subject: [PATCH 4/7] Added track slider for artist page

---
 app/components/Slider.vue |  31 ++++++--
 app/pages/artist/[id].vue | 147 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 172 insertions(+), 6 deletions(-)
 create mode 100644 app/pages/artist/[id].vue

diff --git a/app/components/Slider.vue b/app/components/Slider.vue
index 695f82e..da4d0f6 100644
--- a/app/components/Slider.vue
+++ b/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)
@@ -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;
 	}
 }
 
diff --git a/app/pages/artist/[id].vue b/app/pages/artist/[id].vue
new file mode 100644
index 0000000..c34c307
--- /dev/null
+++ b/app/pages/artist/[id].vue
@@ -0,0 +1,147 @@
+<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 = []
+
+	let data = []
+
+	for (let i = 0; i < 10; i++) {
+		for (let j = 0; j < tracksData.value.length; j++) {
+			data.push(tracksData.value[j])
+		}
+	}
+
+	for (let i = 0; i < data.length; i += SIZE) {
+		chunks.push(data.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">
+		<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>
+</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>

From 307f467f94118329095fd9af8da5987a428783e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 5 Apr 2026 11:55:45 +0200
Subject: [PATCH 5/7] Added track title to slider

---
 app/pages/artist/[id].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/artist/[id].vue b/app/pages/artist/[id].vue
index c34c307..521c5f3 100644
--- a/app/pages/artist/[id].vue
+++ b/app/pages/artist/[id].vue
@@ -73,7 +73,7 @@ const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
 		</div>
 	</section>
 
-	<Slider slider-class="slider" :scroll-width="scrollWidth">
+	<Slider slider-class="slider" :scroll-width="scrollWidth" title="Tracks">
 		<section
 			class="tracks"
 			v-for="(chunk, pI) in chunkedTracks"

From 5c9b82265d11d70bdd00f64aeb8b7d1f9ed59dc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 5 Apr 2026 11:57:21 +0200
Subject: [PATCH 6/7] Test data cleanup

---
 app/pages/artist/[id].vue | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/app/pages/artist/[id].vue b/app/pages/artist/[id].vue
index 521c5f3..6e0d716 100644
--- a/app/pages/artist/[id].vue
+++ b/app/pages/artist/[id].vue
@@ -16,16 +16,8 @@ const chunkedTracks = computed(() => {
 	const SIZE = 3
 	const chunks = []
 
-	let data = []
-
-	for (let i = 0; i < 10; i++) {
-		for (let j = 0; j < tracksData.value.length; j++) {
-			data.push(tracksData.value[j])
-		}
-	}
-
-	for (let i = 0; i < data.length; i += SIZE) {
-		chunks.push(data.slice(i, i + SIZE))
+	for (let i = 0; i < tracksData.value.length; i += SIZE) {
+		chunks.push(tracksData.value.slice(i, i + SIZE))
 	}
 
 	return chunks

From 7cbc0870494037b05024fa6c5576669a59259ae4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 5 Apr 2026 12:02:22 +0200
Subject: [PATCH 7/7] Added album slider

---
 app/pages/artist/[id].vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/pages/artist/[id].vue b/app/pages/artist/[id].vue
index 6e0d716..9ef5d8a 100644
--- a/app/pages/artist/[id].vue
+++ b/app/pages/artist/[id].vue
@@ -83,6 +83,17 @@ const { playAlbum, playShuffledAlbum, playAlbumAtIndex } = usePlayer()
 			/>
 		</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>