From 1060eeba586335ede40f03e9b72c3ec196e75f46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 22 Feb 2026 16:09:01 +0100
Subject: [PATCH] Added TrackRow to album page

---
 app/pages/album/[id].vue | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/pages/album/[id].vue b/app/pages/album/[id].vue
index ff5d363..0b9ebc9 100644
--- a/app/pages/album/[id].vue
+++ b/app/pages/album/[id].vue
@@ -2,12 +2,11 @@
 const route = useRoute()
 const id = computed(() => route.params.id)
 
-const {
-	data: albumData,
-	pending,
-	error,
-	refresh,
-} = await useApiFetch(`/albums/${id.value}`)
+const { data: albumData } = await useApiFetch<Album>(`/albums/${id.value}`)
+
+const { data: tracksData } = await useApiFetch<Track[]>(
+	`/albums/${id.value}/tracks`,
+)
 </script>
 
 <template>
@@ -29,6 +28,15 @@ const {
 			</div>
 		</div>
 	</section>
+
+	<section class="tracks">
+		<TrackRow
+			v-for="(track, i) in tracksData"
+			:key="track._id"
+			:track="track"
+			:index="i"
+		/>
+	</section>
 </template>
 
 <style lang="scss" scoped>
@@ -38,6 +46,7 @@ const {
 .info {
 	display: flex;
 	gap: 1rem;
+	margin-bottom: 2rem;
 
 	& img {
 		border-radius: $border-radius-standard;
@@ -67,4 +76,10 @@ const {
 		}
 	}
 }
+
+.tracks {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4rem;
+}
 </style>