From d0d06f1513e9c4fdc6aacce5d98ecbf9e99cffa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Mon, 16 Feb 2026 13:08:10 +0100
Subject: [PATCH] Add player component and integrate into app layout

---
 app/app.vue                     |  1 +
 app/components/Player/index.vue | 37 +++++++++++++++++++++++++++++++++
 app/pages/index.vue             | 15 ++++++++++++-
 app/ui/Sidebar.vue              |  1 +
 4 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 app/components/Player/index.vue

diff --git a/app/app.vue b/app/app.vue
index ac86994..d149f07 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -2,6 +2,7 @@
 	<ToastContainer />
 	<NuxtLayout>
 		<NuxtPage />
+		<Player />
 	</NuxtLayout>
 </template>
 
diff --git a/app/components/Player/index.vue b/app/components/Player/index.vue
new file mode 100644
index 0000000..9f9cee0
--- /dev/null
+++ b/app/components/Player/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="tsx">
+const widthFixer = useTemplateRef("width-fixer")
+const player = useTemplateRef("player")
+
+onMounted(() => {
+	const resizeObserver = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			if (player.value)
+				player.value.style.width = `${entry.target.clientWidth}px`
+		}
+	})
+
+	if (widthFixer.value) resizeObserver.observe(widthFixer.value)
+})
+</script>
+
+<template>
+	<div id="width-fixer" ref="width-fixer"></div>
+	<article class="player" ref="player"></article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+#width-fixer {
+	width: 100%;
+}
+
+.player {
+	position: fixed;
+	bottom: 1rem;
+
+	height: 72px;
+
+	border-radius: $border-radius-standard;
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 9263154..99724ff 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,18 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const player = usePlayer()
+
+const { data } = useApiFetch("/all/tracks")
+
+const play = () => {
+	player.addToQueue(data.value[0])
+	player.play()
+}
+</script>
 
 <template>
+	<Button @click="play">Test play</Button>
+
 	<AlbumSlider />
+
+	<div :style="{ height: '100vh' }"></div>
 </template>
diff --git a/app/ui/Sidebar.vue b/app/ui/Sidebar.vue
index eef62f7..0286d0b 100644
--- a/app/ui/Sidebar.vue
+++ b/app/ui/Sidebar.vue
@@ -39,6 +39,7 @@
 		height: 100%;
 		overflow-y: auto;
 		padding: 2rem 3rem;
+		position: relative;
 	}
 }
 </style>