From 0f76978a33658d45c08d30f320a9b86a4dfab872 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Wed, 10 Dec 2025 21:19:04 +0100
Subject: [PATCH 01/14] Add admin layout and pages: implement sidebar
 navigation and user role checks

---
 app/layouts/admin.vue       | 92 +++++++++++++++++++++++++++++++++++++
 app/layouts/default.vue     | 16 +++++++
 app/pages/admin.vue         |  9 ++++
 app/pages/admin/albums.vue  |  1 +
 app/pages/admin/artists.vue |  1 +
 app/pages/admin/index.vue   |  1 +
 app/pages/admin/songs.vue   |  1 +
 7 files changed, 121 insertions(+)
 create mode 100644 app/layouts/admin.vue
 create mode 100644 app/pages/admin.vue
 create mode 100644 app/pages/admin/albums.vue
 create mode 100644 app/pages/admin/artists.vue
 create mode 100644 app/pages/admin/index.vue
 create mode 100644 app/pages/admin/songs.vue

diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
new file mode 100644
index 0000000..fe3dcb0
--- /dev/null
+++ b/app/layouts/admin.vue
@@ -0,0 +1,92 @@
+<template>
+	<Sidebar>
+		<template #sidebar>
+			<p class="title">Music - Admin</p>
+
+			<div class="category">
+				<Button
+					full
+					variant="ghost"
+					to="/admin"
+					type="link"
+					icon-name="lucide:house"
+				>
+					Dashboard
+				</Button>
+			</div>
+
+			<div class="category">
+				<p>Manage</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/admin/artists"
+					type="link"
+					icon-name="lucide:mic-vocal"
+				>
+					Manage Artists
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/admin/albums"
+					type="link"
+					icon-name="lucide:gallery-vertical-end"
+				>
+					Manage Albums
+				</Button>
+				<Button
+					full
+					variant="ghost"
+					to="/admin/songs"
+					type="link"
+					icon-name="lucide:music"
+				>
+					Manage Songs
+				</Button>
+			</div>
+
+			<div class="category">
+				<p>Exit</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/"
+					type="link"
+					icon-name="lucide:settings-2"
+				>
+					Exit Admin Panel
+				</Button>
+			</div>
+		</template>
+
+		<template #default>
+			<slot />
+		</template>
+	</Sidebar>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+}
+
+.search-input,
+.title {
+	margin-bottom: 1rem;
+}
+
+.category {
+	margin-bottom: 0.8rem;
+
+	& > p {
+		@include fontSize(13px);
+		font-weight: 600;
+		margin-bottom: 0.1rem;
+	}
+}
+</style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 5eaa024..8f25c6c 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -11,6 +11,8 @@ const onSearchInput = (v: string) => {
 		else router.replace("/search")
 	}, 300)
 }
+
+const { data: user } = useApiFetch<any>("/user")
 </script>
 
 <template>
@@ -69,6 +71,20 @@ const onSearchInput = (v: string) => {
 					Songs
 				</Button>
 			</div>
+
+			<div v-if="user?.role == 'admin'" class="category">
+				<p>Secret stuff</p>
+
+				<Button
+					full
+					variant="ghost"
+					to="/admin"
+					type="link"
+					icon-name="lucide:settings-2"
+				>
+					Go To Admin Panel
+				</Button>
+			</div>
 		</template>
 
 		<template #default>
diff --git a/app/pages/admin.vue b/app/pages/admin.vue
new file mode 100644
index 0000000..f805b6b
--- /dev/null
+++ b/app/pages/admin.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+definePageMeta({
+	layout: "admin",
+})
+</script>
+
+<template>
+	<NuxtPage />
+</template>
diff --git a/app/pages/admin/albums.vue b/app/pages/admin/albums.vue
new file mode 100644
index 0000000..cc340bc
--- /dev/null
+++ b/app/pages/admin/albums.vue
@@ -0,0 +1 @@
+<template></template>
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
new file mode 100644
index 0000000..cc340bc
--- /dev/null
+++ b/app/pages/admin/artists.vue
@@ -0,0 +1 @@
+<template></template>
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
new file mode 100644
index 0000000..773d3dd
--- /dev/null
+++ b/app/pages/admin/index.vue
@@ -0,0 +1 @@
+<template>Hello</template>
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
new file mode 100644
index 0000000..63eef66
--- /dev/null
+++ b/app/pages/admin/songs.vue
@@ -0,0 +1 @@
+<template>Songs</template>

From cb0c87a4ca575ce1dacfab9f52e5147a8600131b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 16 Dec 2025 16:46:14 +0100
Subject: [PATCH 02/14] Enhance Input component: add file input handling and
 improve label rendering logic

---
 app/ui/Input.vue | 44 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

diff --git a/app/ui/Input.vue b/app/ui/Input.vue
index 48b43a7..d6884e3 100644
--- a/app/ui/Input.vue
+++ b/app/ui/Input.vue
@@ -10,22 +10,47 @@ interface InputProps {
 	name?: string
 	required?: boolean
 	autocomplete?: AutocompleteType
+	label?: string
 }
 
-const value = defineModel("value")
+const value = defineModel<string | File | File[] | null>("value")
 
 const emit = defineEmits<{
 	(e: "input", value: string): void
+	(e: "file", value: File | File[] | null | undefined): void
 	(e: "focus"): void
+	(e: "blur"): void
 }>()
 
 const props = defineProps<InputProps>()
+
+const onFileChange = (e: Event) => {
+	const input = e.target as HTMLInputElement
+	const files = input.files
+
+	if (!files || files.length == 0) {
+		value.value = null
+		emit("file", null)
+		return
+	}
+
+	const result = files.length == 1 ? files[0] : Array.from(files)
+
+	value.value = result
+	emit("file", result)
+}
 </script>
 
 <template>
 	<div class="input-wrapper">
-		<label v-if="$slots.label" :for="props.name">
-			<slot name="label" />
+		<label v-if="$slots.label || props.label" :for="props.name">
+			<template v-if="!props.label">
+				<slot name="label" />
+			</template>
+			<template v-else>
+				{{ props.label }}
+			</template>
+
 			<span v-if="props.required" class="required">*</span>
 		</label>
 		<div
@@ -38,16 +63,29 @@ const props = defineProps<InputProps>()
 			</span>
 
 			<input
+				v-if="props.type != 'file'"
 				:placeholder="props.placeholder"
 				v-model="value"
 				@input="(e) => emit('input', e.target?.value)"
 				@focus="emit('focus')"
+				@blur="emit('blur')"
 				:type="props.type"
 				:name="props.name"
 				:id="props.name"
 				:required="props.required"
 				:autocomplete="props.autocomplete"
 			/>
+
+			<input
+				v-else
+				@focus="emit('focus')"
+				@blur="emit('blur')"
+				@change="onFileChange"
+				:type="props.type"
+				:name="props.name"
+				:id="props.name"
+				:required="props.required"
+			/>
 		</div>
 	</div>
 </template>

From 111a3cc677b7eb82ff0171eaa7e0faf62d757042 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 16 Dec 2025 16:46:30 +0100
Subject: [PATCH 03/14] Add Modal and Table components: implement modal
 functionality and table structure with props

---
 app/ui/Modal.vue | 40 ++++++++++++++++++++++++++++++++++++++++
 app/ui/Table.vue | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 app/ui/Modal.vue
 create mode 100644 app/ui/Table.vue

diff --git a/app/ui/Modal.vue b/app/ui/Modal.vue
new file mode 100644
index 0000000..66fc2c5
--- /dev/null
+++ b/app/ui/Modal.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const open = defineModel("open")
+</script>
+
+<template>
+	<Transition>
+		<div class="modal-container" v-show="open" @click="open = false">
+			<Card @click.stop>
+				<slot />
+			</Card>
+		</div>
+	</Transition>
+</template>
+
+<style lang="scss" scoped>
+.modal-container {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 10;
+
+	width: 100vw;
+	height: 100vh;
+
+	backdrop-filter: blur(10px);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.v-enter-active,
+.v-leave-active {
+	transition: opacity 0.2s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/app/ui/Table.vue b/app/ui/Table.vue
new file mode 100644
index 0000000..c776432
--- /dev/null
+++ b/app/ui/Table.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+export type Row = {
+	name: string
+	class?: string
+	width?: string
+	type?: "image"
+	displayName?: string
+}
+
+type TableProps = {
+	rows: Row[]
+	data: any
+}
+
+const { rows, data } = defineProps<TableProps>()
+</script>
+
+<template>
+	<table>
+		<thead>
+			<tr>
+				<th
+					v-for="row in rows"
+					:key="row.name"
+					:class="row.class"
+					:style="{ width: row.width }"
+				>
+					{{ row.displayName || row.name }}
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="(item, i) in data" :key="i">
+				<td v-for="(row, j) in rows" :key="j">
+					<slot :name="row.name" :item="item" :index="i">
+						<p v-if="row.type != 'image'">{{ item[row.name] }}</p>
+					</slot>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>

From 5c44febc65ad6dd1389118520d527746f4faff17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 16 Dec 2025 16:46:55 +0100
Subject: [PATCH 04/14] Add SearchSelect component

---
 app/styles/_variables.scss |  1 +
 app/ui/SearchSelect.vue    | 77 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 app/ui/SearchSelect.vue

diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index c200b6e..b047d8b 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -1,5 +1,6 @@
 $color-accent: rgb(255, 69, 58);
 $color-background: oklch(14.1% 0.005 285.823); // #1a202c
+$color-secondary-background: oklch(26.862% 0.00003 271.152);
 $color-text: rgba(255, 255, 255, 0.92);
 $color-placeholder-text: rgba(255, 255, 255, 0.44);
 $color-border: rgba(255, 255, 255, 0.16);
diff --git a/app/ui/SearchSelect.vue b/app/ui/SearchSelect.vue
new file mode 100644
index 0000000..d2d8960
--- /dev/null
+++ b/app/ui/SearchSelect.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+export interface Option {
+	label: string
+	value: any
+}
+
+interface SearchSelectProps {
+	fetchOptions: (q: string) => Promise<Option[]>
+}
+
+const props = defineProps<SearchSelectProps>()
+const value = defineModel<string>("value")
+
+const query = ref<string>("")
+const options = ref<Option[]>([])
+const show = ref<boolean>(false)
+
+watch(query, async (q) => {
+	options.value = q ? await props.fetchOptions(q) : []
+	show.value = true
+})
+
+const select = (item: Option) => {
+	value.value = item.value
+	query.value = item.label
+	nextTick(() => (options.value = []))
+}
+</script>
+
+<template>
+	<div class="search-select" @blur="show = false">
+		<Input v-model:value="query" @focus="show = true" type="text" full />
+
+		<ul v-if="options.length && show">
+			<li v-for="opt in options" :key="opt.value" @click="select(opt)">
+				{{ opt.label }}
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.search-select {
+	position: relative;
+
+	& ul,
+	& li {
+		border-radius: $border-radius-standard;
+	}
+
+	& ul {
+		position: absolute;
+		top: calc(100% + 2px);
+		z-index: 10;
+
+		width: 100%;
+		padding: 0.25rem;
+
+		display: flex;
+		flex-direction: column;
+		background-color: $color-secondary-background;
+		gap: 0.2rem;
+	}
+
+	& li {
+		padding: 0.35rem 0.85rem;
+
+		transition: background-color 0.1s ease;
+
+		&:hover {
+			background-color: $color-button-hover;
+		}
+	}
+}
+</style>

From 1ef0cfb419d92579c3ed17ef4bed202833b7cba7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Mon, 2 Feb 2026 16:07:24 +0100
Subject: [PATCH 05/14] Misc changes

---
 app/components/Admin/ModalForm.vue         | 85 ++++++++++++++++++++++
 app/components/{artist => Artist}/Name.vue |  0
 app/composables/useApiFetch.ts             |  9 +--
 app/ui/Modal.vue                           |  4 +-
 app/ui/SearchSelect.vue                    | 20 ++++-
 app/ui/Table.vue                           | 27 ++++++-
 app/utils/types.ts                         | 11 +++
 7 files changed, 147 insertions(+), 9 deletions(-)
 create mode 100644 app/components/Admin/ModalForm.vue
 rename app/components/{artist => Artist}/Name.vue (100%)

diff --git a/app/components/Admin/ModalForm.vue b/app/components/Admin/ModalForm.vue
new file mode 100644
index 0000000..9809aaa
--- /dev/null
+++ b/app/components/Admin/ModalForm.vue
@@ -0,0 +1,85 @@
+<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
+}
+
+interface TextField<T> extends BaseField<T> {
+	type?: "text"
+}
+
+interface FileField<T> extends BaseField<T> {
+	type: "file"
+}
+
+interface SearchSelectField<T> extends BaseField<T> {
+	type: "search-select"
+	fetchOptions: (q: string) => Promise<Option[]>
+}
+
+export type Field<T = any> = TextField<T> | FileField<T> | SearchSelectField<T>
+
+interface ModalFormProps<T> {
+	item?: T
+	fields: Field<T>[]
+	title?: string
+}
+
+const props = defineProps<ModalFormProps<any>>()
+const open = defineModel("open", { required: true })
+const emit = defineEmits<{ (e: "save", value: any): boolean }>()
+
+let localItem = reactive<any>({})
+
+const save = () => {
+	if (emit("save", localItem)) open.value = false
+}
+</script>
+
+<template>
+	<Modal v-model:open="open" width="40%">
+		<p v-if="props.title" class="title">{{ props.title }}</p>
+
+		<form class="form" @submit.prevent="save">
+			<template v-for="field in props.fields">
+				<SearchSelect
+					v-if="field.type == 'search-select'"
+					v-model:value="localItem[field.key]"
+					:fetch-options="field.fetchOptions"
+					:label="field.label || field.key"
+					:predefined="props.item?.[field.key]"
+				/>
+				<Input
+					v-else
+					:type="field.type"
+					:key="field.key"
+					:label="field.label || field.key"
+					v-model:value="localItem[field.key]"
+					full
+				/>
+			</template>
+
+			<Button type="submit" full center-text>Save</Button>
+		</form>
+	</Modal>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(20px);
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.8rem;
+}
+</style>
diff --git a/app/components/artist/Name.vue b/app/components/Artist/Name.vue
similarity index 100%
rename from app/components/artist/Name.vue
rename to app/components/Artist/Name.vue
diff --git a/app/composables/useApiFetch.ts b/app/composables/useApiFetch.ts
index ffda4ce..ffc0241 100644
--- a/app/composables/useApiFetch.ts
+++ b/app/composables/useApiFetch.ts
@@ -3,9 +3,9 @@ import defu from "defu"
 
 export function useApiFetch<DataT = any, ErrorT = any>(
 	url: string | Request | Ref<string | Request> | (() => string | Request),
-	options: UseFetchOptions<DataT, ErrorT> = {},
+	options?: UseFetchOptions<DataT, ErrorT>,
 	authorize: boolean = true
-) {
+): ReturnType<typeof useFetch<DataT, ErrorT>> {
 	const baseUrl = import.meta.env.VITE_PUBLIC_BACKEND
 
 	if (!baseUrl) throw new Error("BACKEND URL not set")
@@ -39,10 +39,7 @@ export function useApiFetch<DataT = any, ErrorT = any>(
 		},
 	}
 
-	const config = defu(options || {}, defaults) as UseFetchOptions<
-		DataT,
-		ErrorT
-	>
+	const config: UseFetchOptions<DataT, ErrorT> = defu(options ?? {}, defaults)
 
 	// @ts-ignore
 	return useFetch<DataT, ErrorT>(url, config)
diff --git a/app/ui/Modal.vue b/app/ui/Modal.vue
index 66fc2c5..4fbad62 100644
--- a/app/ui/Modal.vue
+++ b/app/ui/Modal.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
+const props = defineProps<{ width?: string }>()
+
 const open = defineModel("open")
 </script>
 
 <template>
 	<Transition>
 		<div class="modal-container" v-show="open" @click="open = false">
-			<Card @click.stop>
+			<Card @click.stop :width="props.width">
 				<slot />
 			</Card>
 		</div>
diff --git a/app/ui/SearchSelect.vue b/app/ui/SearchSelect.vue
index d2d8960..318a8dc 100644
--- a/app/ui/SearchSelect.vue
+++ b/app/ui/SearchSelect.vue
@@ -5,7 +5,9 @@ export interface Option {
 }
 
 interface SearchSelectProps {
+	label?: string
 	fetchOptions: (q: string) => Promise<Option[]>
+	predefined?: Option
 }
 
 const props = defineProps<SearchSelectProps>()
@@ -15,6 +17,16 @@ const query = ref<string>("")
 const options = ref<Option[]>([])
 const show = ref<boolean>(false)
 
+watchEffect(() => {
+	if (!props.predefined) return
+
+	console.log(props.predefined)
+
+	query.value = props.predefined.label
+	value.value = props.predefined.value
+	nextTick(() => (options.value = []))
+})
+
 watch(query, async (q) => {
 	options.value = q ? await props.fetchOptions(q) : []
 	show.value = true
@@ -29,7 +41,13 @@ const select = (item: Option) => {
 
 <template>
 	<div class="search-select" @blur="show = false">
-		<Input v-model:value="query" @focus="show = true" type="text" full />
+		<Input
+			v-model:value="query"
+			@focus="show = true"
+			:label="props.label"
+			type="text"
+			full
+		/>
 
 		<ul v-if="options.length && show">
 			<li v-for="opt in options" :key="opt.value" @click="select(opt)">
diff --git a/app/ui/Table.vue b/app/ui/Table.vue
index c776432..b54c201 100644
--- a/app/ui/Table.vue
+++ b/app/ui/Table.vue
@@ -16,7 +16,7 @@ const { rows, data } = defineProps<TableProps>()
 </script>
 
 <template>
-	<table>
+	<table class="table">
 		<thead>
 			<tr>
 				<th
@@ -40,3 +40,28 @@ const { rows, data } = defineProps<TableProps>()
 		</tbody>
 	</table>
 </template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+@use "@/styles/util" as *;
+
+.table {
+	width: 100%;
+	text-align: left;
+	border-collapse: collapse;
+	@include fontSize(15px);
+
+	& th,
+	& td {
+		border-bottom: 1px solid $color-border;
+		padding: 0.5rem 0.6rem;
+	}
+
+	& tr:last-child td {
+		border-bottom: none;
+	}
+
+	& thead {
+	}
+}
+</style>
diff --git a/app/utils/types.ts b/app/utils/types.ts
index e4d02ab..2392393 100644
--- a/app/utils/types.ts
+++ b/app/utils/types.ts
@@ -17,3 +17,14 @@ export interface Artist extends Base {
 export interface Genre extends Base {
 	name: string
 }
+
+export interface Track extends Base {
+	name: string
+	file: string
+	lyrics: {
+		synced: boolean
+		text: string
+	}
+	album: Album
+	artists: Artist[]
+}

From 602d1a7b3c6754a762ef328170eb674a09537965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Mon, 2 Feb 2026 16:07:42 +0100
Subject: [PATCH 06/14] Add songs management page: implement table display,
 modal form, and CRUD functionality

---
 app/pages/admin/songs.vue | 104 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 103 insertions(+), 1 deletion(-)

diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
index 63eef66..2a3c1dd 100644
--- a/app/pages/admin/songs.vue
+++ b/app/pages/admin/songs.vue
@@ -1 +1,103 @@
-<template>Songs</template>
+<script setup lang="ts">
+import type { Field } from "~/components/Admin/ModalForm.vue"
+import type { Row } from "~/ui/Table.vue"
+
+const { data, status } = useApiFetch<Track[]>("/all/tracks")
+
+const tableRows: Row[] = [
+	{
+		name: "_id",
+		displayName: "ID",
+	},
+	{
+		name: "name",
+		displayName: "Name",
+	},
+	{
+		name: "action",
+	},
+]
+
+import { type Option } from "~/ui/SearchSelect.vue"
+
+const options: Option[] = [
+	{ label: "A", value: "a" },
+	{ label: "B", value: "b" },
+]
+
+const fetchOptions = async (q: string): Promise<Option[]> => {
+	return options
+}
+
+const modalFields: Field[] = [
+	{ key: "name", label: "Name" },
+	{ key: "album", label: "Album", type: "search-select", fetchOptions },
+	{ key: "file", label: "Audio file", type: "file" },
+]
+
+const showModal = ref<boolean>(false)
+const item = ref<Track | undefined>(undefined)
+
+const save = (value: any) => {
+	console.log(value)
+
+	return false
+}
+
+/**
+ * @param id Set it to a value to make it edit instead of creating a new one
+ */
+const show = (id?: string) => {
+	if (!id) {
+		item.value = undefined
+		showModal.value = true
+	}
+
+	const curItem: any = data.value.filter((i) => i._id == id)[0]
+
+	if (!curItem) return
+
+	const transformed = { ...curItem }
+
+	if (transformed.album)
+		transformed.album = {
+			value: curItem.album._id,
+			label: curItem.album.name,
+		}
+
+	item.value = transformed
+
+	showModal.value = true
+}
+</script>
+
+<template>
+	<Table :rows="tableRows" :data="data" class="table">
+		<template #action="{ item, index }">
+			<div class="action">
+				<Button @click="show(item._id)">Edit</Button>
+				<Button @click="">Delete</Button>
+			</div>
+		</template>
+	</Table>
+	<Button @click="show()">Add a new song</Button>
+
+	<AdminModalForm
+		v-model:open="showModal"
+		@save="save"
+		:fields="modalFields"
+		:item="item"
+		title="Add new song"
+	/>
+</template>
+
+<style lang="scss" scoped>
+.action {
+	display: flex;
+	gap: 0.2rem;
+}
+
+.table {
+	margin-bottom: 0.4rem;
+}
+</style>

From 57d4b62f22c05f090a1745a3351e3c9b91379a51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 14:38:53 +0100
Subject: [PATCH 07/14] Implement artist management functionality: add modal
 form, table display, and save logic

---
 app/components/Admin/ModalForm.vue |  24 +++++-
 app/pages/admin/artists.vue        | 132 ++++++++++++++++++++++++++++-
 app/ui/Table.vue                   |  10 +++
 app/utils/cfetch.ts                |  38 ++++++++-
 4 files changed, 197 insertions(+), 7 deletions(-)

diff --git a/app/components/Admin/ModalForm.vue b/app/components/Admin/ModalForm.vue
index 9809aaa..daa7186 100644
--- a/app/components/Admin/ModalForm.vue
+++ b/app/components/Admin/ModalForm.vue
@@ -27,16 +27,34 @@ interface ModalFormProps<T> {
 	item?: T
 	fields: Field<T>[]
 	title?: string
+	onSave: (value: any) => Promise<boolean>
 }
 
 const props = defineProps<ModalFormProps<any>>()
 const open = defineModel("open", { required: true })
-const emit = defineEmits<{ (e: "save", value: any): boolean }>()
 
 let localItem = reactive<any>({})
 
-const save = () => {
-	if (emit("save", localItem)) 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)) {
+			localItem[key] = value
+		}
+
+		for (const field of props.fields) {
+			if (field.type == "file") localItem[field.key as string] = null
+		}
+	},
+	{ immediate: true },
+)
+
+const save = async () => {
+	if (await props.onSave(localItem)) open.value = false
 }
 </script>
 
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
index cc340bc..dba835b 100644
--- a/app/pages/admin/artists.vue
+++ b/app/pages/admin/artists.vue
@@ -1 +1,131 @@
-<template></template>
+<script setup lang="ts">
+import type { Field } from "~/components/Admin/ModalForm.vue"
+import type { Row } from "~/ui/Table.vue"
+
+const { data, refresh } = useApiFetch<Track[]>("/all/artists")
+const toast = useToast()
+
+const tableRows: Row[] = [
+	{
+		name: "_id",
+		displayName: "ID",
+	},
+	{
+		name: "file",
+		displayName: "Cover",
+		type: "image",
+		imagePrefix: `${import.meta.env.VITE_PUBLIC_BACKEND}/static/`,
+	},
+	{
+		name: "name",
+		displayName: "Name",
+	},
+	{
+		name: "action",
+	},
+]
+
+const modalFields: Field[] = [
+	{ key: "name", label: "Name" },
+	{ key: "file", label: "Cover file", type: "file" },
+]
+
+const showModal = ref<boolean>(false)
+const item = ref<Track | undefined>(undefined)
+
+const save = async (value: any) => {
+	if (value._id) {
+		try {
+			await cfetch("/admin/artist", {
+				method: "PATCH",
+				data: value,
+				params: { id: value._id },
+				forceFormData: true,
+			})
+
+			toast.show("Artist updated successfully", "success")
+		} catch {
+			toast.show("Failed to update artist", "error")
+
+			return false
+		}
+	} else {
+		try {
+			await cfetch("/admin/artist", {
+				method: "POST",
+				data: value,
+			})
+
+			toast.show("Artist added successfully", "success")
+		} catch {
+			toast.show("Failed to add artist", "error")
+
+			return false
+		}
+	}
+
+	refresh()
+
+	return true
+}
+
+/**
+ * @param id Set it to a value to make it edit instead of creating a new one
+ */
+const show = (id?: string) => {
+	if (!id) {
+		item.value = undefined
+		showModal.value = true
+
+		return
+	}
+
+	const curItem: any = data.value.filter((i) => i._id == id)[0]
+
+	if (!curItem) return
+
+	item.value = curItem
+
+	showModal.value = true
+}
+</script>
+
+<template>
+	<h1 class="title">Manage artists</h1>
+
+	<Table :rows="tableRows" :data="data" class="table">
+		<template #action="{ item, index }">
+			<div class="action">
+				<Button @click="show(item._id)">Edit</Button>
+				<Button @click="">Delete</Button>
+			</div>
+		</template>
+	</Table>
+	<Button @click="show()">Add a new artist</Button>
+
+	<AdminModalForm
+		v-model:open="showModal"
+		@save="save"
+		:fields="modalFields"
+		:item="item"
+		:title="item ? 'Edit artist' : 'Add new artist'"
+	/>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+	margin-bottom: 0.4rem;
+}
+
+.action {
+	display: flex;
+	gap: 0.2rem;
+}
+
+.table {
+	margin-bottom: 0.4rem;
+}
+</style>
diff --git a/app/ui/Table.vue b/app/ui/Table.vue
index b54c201..94f7d0e 100644
--- a/app/ui/Table.vue
+++ b/app/ui/Table.vue
@@ -4,6 +4,7 @@ export type Row = {
 	class?: string
 	width?: string
 	type?: "image"
+	imagePrefix?: string
 	displayName?: string
 }
 
@@ -34,6 +35,10 @@ const { rows, data } = defineProps<TableProps>()
 				<td v-for="(row, j) in rows" :key="j">
 					<slot :name="row.name" :item="item" :index="i">
 						<p v-if="row.type != 'image'">{{ item[row.name] }}</p>
+						<nuxt-img
+							v-else-if="row.type == 'image'"
+							:src="`${row.imagePrefix}${item[row.name]}`"
+						/>
 					</slot>
 				</td>
 			</tr>
@@ -63,5 +68,10 @@ const { rows, data } = defineProps<TableProps>()
 
 	& thead {
 	}
+
+	& img {
+		height: 60px;
+		border-radius: $border-radius-standard;
+	}
 }
 </style>
diff --git a/app/utils/cfetch.ts b/app/utils/cfetch.ts
index f5d9245..e542bfb 100644
--- a/app/utils/cfetch.ts
+++ b/app/utils/cfetch.ts
@@ -1,10 +1,25 @@
 import axios, { type AxiosRequestConfig, type AxiosResponse } from "axios"
 import defu from "defu"
 
+const hasFile = (value: any): boolean => {
+	if (!value || typeof value !== "object") return false
+
+	return Object.values(value).some(
+		(v) =>
+			v instanceof File ||
+			v instanceof Blob ||
+			(Array.isArray(v) && v.some((i) => i instanceof File)),
+	)
+}
+
+type RequestConfig = {
+	forceFormData?: boolean
+} & AxiosRequestConfig
+
 export const cfetch = async (
 	url: string,
-	options: AxiosRequestConfig = {},
-	authorize: boolean = true
+	options: RequestConfig = {},
+	authorize: boolean = true,
 ): Promise<AxiosResponse> => {
 	const baseUrl = import.meta.env.VITE_PUBLIC_BACKEND
 
@@ -26,7 +41,24 @@ export const cfetch = async (
 			}
 	}
 
-	const config: AxiosRequestConfig = defu(options, defaults)
+	const config: RequestConfig = defu(options, defaults)
+
+	if (config.data && (hasFile(config.data) || config.forceFormData)) {
+		const form = new FormData()
+
+		for (const [key, val] of Object.entries(config.data)) {
+			if (Array.isArray(val)) {
+				val.forEach((v) => form.append(`${key}[]`, v))
+			} else if (val !== undefined && val !== null) {
+				form.append(key, val as any)
+			}
+		}
+
+		config.data = form
+
+		if (!config.headers) config.headers = {}
+		delete config.headers["Content-Type"]
+	}
 
 	let response
 	try {

From 01c40cb2f4c9579ebc437ded20d06d0d59c8adaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 14:52:40 +0100
Subject: [PATCH 08/14] Implemented genre

---
 app/pages/admin/genre.vue | 122 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 app/pages/admin/genre.vue

diff --git a/app/pages/admin/genre.vue b/app/pages/admin/genre.vue
new file mode 100644
index 0000000..97fff31
--- /dev/null
+++ b/app/pages/admin/genre.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { Field } from "~/components/Admin/ModalForm.vue"
+import type { Row } from "~/ui/Table.vue"
+
+const { data, refresh } = useApiFetch<Track[]>("/all/genres")
+const toast = useToast()
+
+const tableRows: Row[] = [
+	{
+		name: "_id",
+		displayName: "ID",
+	},
+	{
+		name: "name",
+		displayName: "Name",
+	},
+	{
+		name: "action",
+	},
+]
+
+const modalFields: Field[] = [{ key: "name", label: "Name" }]
+
+const showModal = ref<boolean>(false)
+const item = ref<Track | undefined>(undefined)
+
+const save = async (value: any) => {
+	if (value._id) {
+		try {
+			await cfetch("/admin/genre", {
+				method: "PATCH",
+				data: value,
+				params: { id: value._id },
+				forceFormData: true,
+			})
+
+			toast.show("Genre updated successfully", "success")
+		} catch {
+			toast.show("Failed to update genre", "error")
+
+			return false
+		}
+	} else {
+		try {
+			await cfetch("/admin/genre", {
+				method: "POST",
+				data: value,
+			})
+
+			toast.show("Genre added successfully", "success")
+		} catch {
+			toast.show("Failed to add genre", "error")
+
+			return false
+		}
+	}
+
+	refresh()
+
+	return true
+}
+
+/**
+ * @param id Set it to a value to make it edit instead of creating a new one
+ */
+const show = (id?: string) => {
+	if (!id) {
+		item.value = undefined
+		showModal.value = true
+
+		return
+	}
+
+	const curItem: any = data.value.filter((i) => i._id == id)[0]
+
+	if (!curItem) return
+
+	item.value = curItem
+
+	showModal.value = true
+}
+</script>
+
+<template>
+	<h1 class="title">Manage genres</h1>
+
+	<Table :rows="tableRows" :data="data" class="table">
+		<template #action="{ item, index }">
+			<div class="action">
+				<Button @click="show(item._id)">Edit</Button>
+				<Button @click="">Delete</Button>
+			</div>
+		</template>
+	</Table>
+	<Button @click="show()">Add a new genre</Button>
+
+	<AdminModalForm
+		v-model:open="showModal"
+		@save="save"
+		:fields="modalFields"
+		:item="item"
+		:title="item ? 'Edit genre' : 'Add new genre'"
+	/>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+	margin-bottom: 0.4rem;
+}
+
+.action {
+	display: flex;
+	gap: 0.2rem;
+}
+
+.table {
+	margin-bottom: 0.4rem;
+}
+</style>

From e952dd7b7a96474b715be603a7e2a21ba97507a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 15:32:32 +0100
Subject: [PATCH 09/14] Added multiple field to SearchSelect and ModalForm

---
 app/components/Admin/ModalForm.vue | 19 +++++-
 app/ui/SearchSelect.vue            | 99 +++++++++++++++++++++++++-----
 2 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/app/components/Admin/ModalForm.vue b/app/components/Admin/ModalForm.vue
index daa7186..adadc00 100644
--- a/app/components/Admin/ModalForm.vue
+++ b/app/components/Admin/ModalForm.vue
@@ -18,10 +18,19 @@ interface FileField<T> extends BaseField<T> {
 
 interface SearchSelectField<T> extends BaseField<T> {
 	type: "search-select"
-	fetchOptions: (q: string) => Promise<Option[]>
+	fetchOptions: (q?: string) => Promise<Option[]>
 }
 
-export type Field<T = any> = TextField<T> | FileField<T> | SearchSelectField<T>
+interface SearchSelectArrayField<T> extends BaseField<T> {
+	type: "search-select-array"
+	fetchOptions: (q?: string) => Promise<Option[]>
+}
+
+export type Field<T = any> =
+	| TextField<T>
+	| FileField<T>
+	| SearchSelectField<T>
+	| SearchSelectArrayField<T>
 
 interface ModalFormProps<T> {
 	item?: T
@@ -65,11 +74,15 @@ const save = async () => {
 		<form class="form" @submit.prevent="save">
 			<template v-for="field in props.fields">
 				<SearchSelect
-					v-if="field.type == 'search-select'"
+					v-if="
+						field.type == 'search-select' ||
+						field.type == 'search-select-array'
+					"
 					v-model:value="localItem[field.key]"
 					:fetch-options="field.fetchOptions"
 					:label="field.label || field.key"
 					:predefined="props.item?.[field.key]"
+					:multiple="field.type == 'search-select-array'"
 				/>
 				<Input
 					v-else
diff --git a/app/ui/SearchSelect.vue b/app/ui/SearchSelect.vue
index 318a8dc..e867cc1 100644
--- a/app/ui/SearchSelect.vue
+++ b/app/ui/SearchSelect.vue
@@ -6,52 +6,109 @@ export interface Option {
 
 interface SearchSelectProps {
 	label?: string
-	fetchOptions: (q: string) => Promise<Option[]>
+	fetchOptions: (q?: string) => Promise<Option[]>
 	predefined?: Option
+	multiple?: boolean
 }
 
 const props = defineProps<SearchSelectProps>()
-const value = defineModel<string>("value")
+const value = defineModel<string | string[] | Option | Option[]>("value")
+const selectedOptions = ref<Option[]>([])
 
 const query = ref<string>("")
 const options = ref<Option[]>([])
 const show = ref<boolean>(false)
 
+const isMultiple = computed(() => !!props.multiple)
+
 watchEffect(() => {
 	if (!props.predefined) return
 
-	console.log(props.predefined)
+	if (isMultiple.value) {
+		const items = Array.isArray(props.predefined)
+			? props.predefined
+			: [props.predefined]
+
+		value.value = items.map((i) => i.value)
+
+		if (Array.isArray(items)) {
+			query.value = items.map((o) => o.label).join(", ")
+			selectedOptions.value = items
+		}
+	} else {
+		const item = Array.isArray(props.predefined)
+			? props.predefined[0]
+			: props.predefined
+
+		query.value = item.label
+		value.value = item.value
+	}
 
-	query.value = props.predefined.label
-	value.value = props.predefined.value
 	nextTick(() => (options.value = []))
 })
 
 watch(query, async (q) => {
-	options.value = q ? await props.fetchOptions(q) : []
-	show.value = true
+	options.value = await (await props.fetchOptions(q)).slice(0, 10)
 })
 
+const isSelected = (opt: Option) => {
+	if (isMultiple.value && Array.isArray(value.value)) {
+		return value.value.includes(opt.value)
+	}
+	return false
+}
+
 const select = (item: Option) => {
-	value.value = item.value
-	query.value = item.label
-	nextTick(() => (options.value = []))
+	if (isMultiple.value) {
+		const current = [...selectedOptions.value]
+		const idx = current.findIndex((o) => o.value === item.value)
+
+		if (idx === -1) current.push(item)
+		else current.splice(idx, 1)
+
+		selectedOptions.value = current
+		value.value = current.map((o) => o.value)
+	} else {
+		value.value = item.value
+		query.value = item.label
+		show.value = false
+	}
+}
+
+const onFocus = async () => {
+	if (isMultiple.value) query.value = ""
+	show.value = true
+	options.value = await (await props.fetchOptions()).slice(0, 10)
+}
+
+const onFocusOut = () => {
+	show.value = false
+
+	if (Array.isArray(selectedOptions.value) && isMultiple.value) {
+		query.value = selectedOptions.value.map((o) => o.label).join(", ")
+	}
 }
 </script>
 
 <template>
-	<div class="search-select" @blur="show = false">
+	<div class="search-select" tabindex="0" @focusout="onFocusOut">
 		<Input
 			v-model:value="query"
-			@focus="show = true"
+			@focus="onFocus"
+			@focusout="onFocusOut"
 			:label="props.label"
 			type="text"
 			full
 		/>
 
-		<ul v-if="options.length && show">
-			<li v-for="opt in options" :key="opt.value" @click="select(opt)">
-				{{ opt.label }}
+		<ul v-if="options.length && show" @mousedown.prevent>
+			<li
+				v-for="opt in options"
+				:key="opt.value"
+				@mousedown.prevent="select(opt)"
+			>
+				<span>{{ opt.label }}</span>
+				<span v-if="isSelected(opt)" class="li-chip">✓</span>
 			</li>
 		</ul>
 	</div>
@@ -83,13 +140,23 @@ const select = (item: Option) => {
 	}
 
 	& li {
-		padding: 0.35rem 0.85rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 
+		padding: 0.35rem 0.85rem;
 		transition: background-color 0.1s ease;
 
 		&:hover {
 			background-color: $color-button-hover;
 		}
 	}
+
+	.li-chip {
+		font-size: 0.7rem;
+		padding: 0.15rem 0.45rem;
+		border-radius: 999px;
+		background: $color-button-hover;
+	}
 }
 </style>

From 9474fa18f256ef771865ee3065f273a6a636f976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 15:54:49 +0100
Subject: [PATCH 10/14] Small bug fixes

---
 app/ui/Card.vue     | 1 +
 app/utils/cfetch.ts | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/ui/Card.vue b/app/ui/Card.vue
index 4f537a5..9374430 100644
--- a/app/ui/Card.vue
+++ b/app/ui/Card.vue
@@ -16,6 +16,7 @@ const props = defineProps<CardProps>()
 @use "@/styles/variables" as *;
 
 .card {
+	background-color: $color-background;
 	border: 1px solid $color-border;
 	border-radius: $border-radius-standard;
 	padding: 1rem;
diff --git a/app/utils/cfetch.ts b/app/utils/cfetch.ts
index e542bfb..dc8dcd7 100644
--- a/app/utils/cfetch.ts
+++ b/app/utils/cfetch.ts
@@ -48,14 +48,13 @@ export const cfetch = async (
 
 		for (const [key, val] of Object.entries(config.data)) {
 			if (Array.isArray(val)) {
-				val.forEach((v) => form.append(`${key}[]`, v))
+				val.forEach((v) => form.append(key, v)) // key as-is, no []
 			} else if (val !== undefined && val !== null) {
 				form.append(key, val as any)
 			}
 		}
 
 		config.data = form
-
 		if (!config.headers) config.headers = {}
 		delete config.headers["Content-Type"]
 	}

From 89caa3d3ad68c4d260110e6c08e2d50fd3af7ae4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 16:06:48 +0100
Subject: [PATCH 11/14] Implemented album

---
 app/pages/admin/albums.vue | 182 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 181 insertions(+), 1 deletion(-)

diff --git a/app/pages/admin/albums.vue b/app/pages/admin/albums.vue
index cc340bc..17ee0b0 100644
--- a/app/pages/admin/albums.vue
+++ b/app/pages/admin/albums.vue
@@ -1 +1,181 @@
-<template></template>
+<script setup lang="ts">
+import type { Field } from "~/components/Admin/ModalForm.vue"
+import type { Row } from "~/ui/Table.vue"
+
+const { data, refresh } = useApiFetch<Album[]>("/all/albums")
+const toast = useToast()
+
+const tableRows: Row[] = [
+	{
+		name: "_id",
+		displayName: "ID",
+	},
+	{
+		name: "file",
+		displayName: "Cover",
+		type: "image",
+		imagePrefix: `${import.meta.env.VITE_PUBLIC_BACKEND}/static/`,
+	},
+	{
+		name: "name",
+		displayName: "Name",
+	},
+	{
+		name: "genre.name",
+		displayName: "Genre",
+	},
+	{
+		name: "action",
+	},
+]
+
+import { type Option } from "~/ui/SearchSelect.vue"
+
+const { data: artistData } = useApiFetch<Genre[]>("/all/artists")
+const artistFetchOptions = async (q?: string): Promise<Option[]> => {
+	return artistData.value.map<Option>((g) => ({
+		label: g.name,
+		value: g._id,
+	}))
+}
+
+const { data: genreData } = useApiFetch<Genre[]>("/all/genres")
+const genreFetchOptions = async (q?: string): Promise<Option[]> => {
+	return genreData.value.map<Option>((g) => ({
+		label: g.name,
+		value: g._id,
+	}))
+}
+
+const modalFields: Field[] = [
+	{ key: "name", label: "Name" },
+	{ key: "file", label: "Cover file", type: "file" },
+	{
+		key: "artists",
+		label: "Artists",
+		type: "search-select-array",
+		fetchOptions: artistFetchOptions,
+	},
+	{
+		key: "genre",
+		label: "Genre",
+		type: "search-select",
+		fetchOptions: genreFetchOptions,
+	},
+]
+
+const showModal = ref<boolean>(false)
+const item = ref<Track | undefined>(undefined)
+
+const save = async (value: any) => {
+	if (value._id) {
+		try {
+			await cfetch("/admin/album", {
+				method: "PATCH",
+				data: value,
+				params: { id: value._id },
+				forceFormData: true,
+			})
+
+			toast.show("Album updated successfully", "success")
+		} catch {
+			toast.show("Failed to update album", "error")
+
+			return false
+		}
+	} else {
+		try {
+			await cfetch("/admin/album", {
+				method: "POST",
+				data: value,
+			})
+
+			toast.show("Album added successfully", "success")
+		} catch {
+			toast.show("Failed to add album", "error")
+
+			return false
+		}
+	}
+
+	refresh()
+
+	return true
+}
+
+/**
+ * @param id Set it to a value to make it edit instead of creating a new one
+ */
+const show = (id?: string) => {
+	if (!id) {
+		item.value = undefined
+		showModal.value = true
+
+		return
+	}
+
+	const curItem: any = data.value.filter((i) => i._id == id)[0]
+
+	if (!curItem) return
+
+	const transformed = { ...curItem }
+
+	console.log(transformed)
+
+	if (transformed.genre)
+		transformed.genre = {
+			value: curItem.genre._id,
+			label: curItem.genre.name,
+		}
+
+	if (transformed.artists)
+		transformed.artists = transformed.artists.map((a: Artist) => ({
+			value: a._id,
+			label: a.name,
+		}))
+
+	item.value = transformed
+
+	showModal.value = true
+}
+</script>
+
+<template>
+	<h1 class="title">Manage albums</h1>
+
+	<Table :rows="tableRows" :data="data" class="table">
+		<template #action="{ item, index }">
+			<div class="action">
+				<Button @click="show(item._id)">Edit</Button>
+				<Button @click="">Delete</Button>
+			</div>
+		</template>
+	</Table>
+	<Button @click="show()">Add a new album</Button>
+
+	<AdminModalForm
+		v-model:open="showModal"
+		@save="save"
+		:fields="modalFields"
+		:item="item"
+		:title="item ? 'Edit album' : 'Add new album'"
+	/>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+	margin-bottom: 0.4rem;
+}
+
+.action {
+	display: flex;
+	gap: 0.2rem;
+}
+
+.table {
+	margin-bottom: 0.4rem;
+}
+</style>

From 8595411c39268bf45ffed8dd3f8dae2a915a98b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 19:59:55 +0100
Subject: [PATCH 12/14] Added audio type

---
 app/ui/Table.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/ui/Table.vue b/app/ui/Table.vue
index 94f7d0e..2a30774 100644
--- a/app/ui/Table.vue
+++ b/app/ui/Table.vue
@@ -3,8 +3,9 @@ export type Row = {
 	name: string
 	class?: string
 	width?: string
-	type?: "image"
-	imagePrefix?: string
+	type?: "image" | "audio"
+	prefix?: string
+	suffix?: string
 	displayName?: string
 }
 
@@ -34,11 +35,16 @@ const { rows, data } = defineProps<TableProps>()
 			<tr v-for="(item, i) in data" :key="i">
 				<td v-for="(row, j) in rows" :key="j">
 					<slot :name="row.name" :item="item" :index="i">
-						<p v-if="row.type != 'image'">{{ item[row.name] }}</p>
 						<nuxt-img
-							v-else-if="row.type == 'image'"
-							:src="`${row.imagePrefix}${item[row.name]}`"
+							v-if="row.type == 'image'"
+							:src="`${row.prefix}${item[row.name]}`"
 						/>
+						<audio
+							v-else-if="row.type == 'audio'"
+							controls
+							:src="`${row.prefix}${item[row.name]}${row.suffix}`"
+						/>
+						<p v-else>{{ item[row.name] }}</p>
 					</slot>
 				</td>
 			</tr>
@@ -73,5 +79,10 @@ const { rows, data } = defineProps<TableProps>()
 		height: 60px;
 		border-radius: $border-radius-standard;
 	}
+
+	& audio {
+		max-width: 200px;
+		padding: 5px 0;
+	}
 }
 </style>

From e63b3fdbb4d43a8ea98c6150a0f7840ea407a2a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 20:00:02 +0100
Subject: [PATCH 13/14] Made sidebar smaller

---
 app/ui/Sidebar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/ui/Sidebar.vue b/app/ui/Sidebar.vue
index 0b9862e..eef62f7 100644
--- a/app/ui/Sidebar.vue
+++ b/app/ui/Sidebar.vue
@@ -27,8 +27,8 @@
 
 	& aside {
 		height: 100%;
-		min-width: 300px;
-		max-width: 350px;
+		min-width: 275px;
+		max-width: 300px;
 
 		border-right: 1px solid $color-border;
 		padding: 1.5rem;

From 9e29d1d7037bedd2d503012bc90bef12f92641e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 20:42:47 +0100
Subject: [PATCH 14/14] Finished admin part

---
 app/layouts/admin.vue       |  15 ++++--
 app/pages/admin/albums.vue  |   2 +-
 app/pages/admin/artists.vue |   2 +-
 app/pages/admin/index.vue   |   4 +-
 app/pages/admin/songs.vue   | 103 +++++++++++++++++++++++++++++++-----
 5 files changed, 108 insertions(+), 18 deletions(-)

diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index fe3dcb0..5746e30 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -18,6 +18,15 @@
 			<div class="category">
 				<p>Manage</p>
 
+				<Button
+					full
+					variant="ghost"
+					to="/admin/genre"
+					type="link"
+					icon-name="lucide:disc-3"
+				>
+					Genres
+				</Button>
 				<Button
 					full
 					variant="ghost"
@@ -25,7 +34,7 @@
 					type="link"
 					icon-name="lucide:mic-vocal"
 				>
-					Manage Artists
+					Artists
 				</Button>
 				<Button
 					full
@@ -34,7 +43,7 @@
 					type="link"
 					icon-name="lucide:gallery-vertical-end"
 				>
-					Manage Albums
+					Albums
 				</Button>
 				<Button
 					full
@@ -43,7 +52,7 @@
 					type="link"
 					icon-name="lucide:music"
 				>
-					Manage Songs
+					Songs
 				</Button>
 			</div>
 
diff --git a/app/pages/admin/albums.vue b/app/pages/admin/albums.vue
index 17ee0b0..8e75250 100644
--- a/app/pages/admin/albums.vue
+++ b/app/pages/admin/albums.vue
@@ -14,7 +14,7 @@ const tableRows: Row[] = [
 		name: "file",
 		displayName: "Cover",
 		type: "image",
-		imagePrefix: `${import.meta.env.VITE_PUBLIC_BACKEND}/static/`,
+		prefix: `${BACKEND_SERVE}/static/`,
 	},
 	{
 		name: "name",
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
index dba835b..5af9242 100644
--- a/app/pages/admin/artists.vue
+++ b/app/pages/admin/artists.vue
@@ -14,7 +14,7 @@ const tableRows: Row[] = [
 		name: "file",
 		displayName: "Cover",
 		type: "image",
-		imagePrefix: `${import.meta.env.VITE_PUBLIC_BACKEND}/static/`,
+		prefix: `${BACKEND_SERVE}/static/`,
 	},
 	{
 		name: "name",
diff --git a/app/pages/admin/index.vue b/app/pages/admin/index.vue
index 773d3dd..e519b41 100644
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -1 +1,3 @@
-<template>Hello</template>
+<script setup lang="ts"></script>
+
+<template></template>
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
index 2a3c1dd..b441a8e 100644
--- a/app/pages/admin/songs.vue
+++ b/app/pages/admin/songs.vue
@@ -2,17 +2,29 @@
 import type { Field } from "~/components/Admin/ModalForm.vue"
 import type { Row } from "~/ui/Table.vue"
 
-const { data, status } = useApiFetch<Track[]>("/all/tracks")
+const { data, refresh } = useApiFetch<Album[]>("/all/tracks")
+const toast = useToast()
 
 const tableRows: Row[] = [
 	{
 		name: "_id",
 		displayName: "ID",
 	},
+	{
+		name: "fileDir",
+		displayName: "Audio File",
+		type: "audio",
+		prefix: `${BACKEND_SERVE}/static/`,
+		suffix: "/original.m4a",
+	},
 	{
 		name: "name",
 		displayName: "Name",
 	},
+	{
+		name: "album.name",
+		displayName: "Album",
+	},
 	{
 		name: "action",
 	},
@@ -20,28 +32,76 @@ const tableRows: Row[] = [
 
 import { type Option } from "~/ui/SearchSelect.vue"
 
-const options: Option[] = [
-	{ label: "A", value: "a" },
-	{ label: "B", value: "b" },
-]
+const { data: artistData } = useApiFetch<Genre[]>("/all/artists")
+const artistFetchOptions = async (q?: string): Promise<Option[]> => {
+	return artistData.value.map<Option>((g) => ({
+		label: g.name,
+		value: g._id,
+	}))
+}
 
-const fetchOptions = async (q: string): Promise<Option[]> => {
-	return options
+const { data: albumData } = useApiFetch<Genre[]>("/all/albums")
+const albumFetchOptions = async (q?: string): Promise<Option[]> => {
+	return albumData.value.map<Option>((g) => ({
+		label: g.name,
+		value: g._id,
+	}))
 }
 
 const modalFields: Field[] = [
 	{ key: "name", label: "Name" },
-	{ key: "album", label: "Album", type: "search-select", fetchOptions },
 	{ key: "file", label: "Audio file", type: "file" },
+	{
+		key: "artists",
+		label: "Artists",
+		type: "search-select-array",
+		fetchOptions: artistFetchOptions,
+	},
+	{
+		key: "album",
+		label: "Album",
+		type: "search-select",
+		fetchOptions: albumFetchOptions,
+	},
 ]
 
 const showModal = ref<boolean>(false)
 const item = ref<Track | undefined>(undefined)
 
-const save = (value: any) => {
-	console.log(value)
+const save = async (value: any) => {
+	if (value._id) {
+		try {
+			await cfetch("/admin/track", {
+				method: "PATCH",
+				data: value,
+				params: { id: value._id },
+				forceFormData: true,
+			})
 
-	return false
+			toast.show("Song updated successfully", "success")
+		} catch {
+			toast.show("Failed to update song", "error")
+
+			return false
+		}
+	} else {
+		try {
+			await cfetch("/admin/track", {
+				method: "POST",
+				data: value,
+			})
+
+			toast.show("Song added successfully", "success")
+		} catch {
+			toast.show("Failed to add song", "error")
+
+			return false
+		}
+	}
+
+	refresh()
+
+	return true
 }
 
 /**
@@ -51,6 +111,8 @@ const show = (id?: string) => {
 	if (!id) {
 		item.value = undefined
 		showModal.value = true
+
+		return
 	}
 
 	const curItem: any = data.value.filter((i) => i._id == id)[0]
@@ -65,13 +127,23 @@ const show = (id?: string) => {
 			label: curItem.album.name,
 		}
 
+	if (transformed.artists)
+		transformed.artists = transformed.artists.map((a: Artist) => ({
+			value: a._id,
+			label: a.name,
+		}))
+
 	item.value = transformed
 
 	showModal.value = true
 }
+
+watch(data, () => console.log(data))
 </script>
 
 <template>
+	<h1 class="title">Manage songs</h1>
+
 	<Table :rows="tableRows" :data="data" class="table">
 		<template #action="{ item, index }">
 			<div class="action">
@@ -87,11 +159,18 @@ const show = (id?: string) => {
 		@save="save"
 		:fields="modalFields"
 		:item="item"
-		title="Add new song"
+		:title="item ? 'Edit song' : 'Add new song'"
 	/>
 </template>
 
 <style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+	margin-bottom: 0.4rem;
+}
+
 .action {
 	display: flex;
 	gap: 0.2rem;