Add Album and Song management pages; implement AlbumSlider component and update Card component for genre handling

app/components/Album/Card.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { Album } from "@/utils/types"
 
-type AlbumProps = Omit<Album, "artists"> & {
+type AlbumProps = Omit<Omit<Album, "genre">, "artists"> & {
 	artists: Array<Omit<Artist, "file">>
+	genre?: Genre
 }
 
 const props = defineProps<AlbumProps>()

app/components/Album/Slider.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const { data, pending, refresh } = useAsyncData("random-albums", async () => {
+	const { data: genres } = await cfetch("/genres/random")
+
+	const results = await Promise.allSettled(
+		genres.map(async (genre: Genre) => {
+			const res = await cfetch(`/genres/albums/${genre._id}`)
+
+			return {
+				genre,
+				albums: res.data,
+			}
+		}),
+	)
+
+	return results
+		.filter(
+			(
+				r,
+			): r is PromiseFulfilledResult<{
+				genre: any
+				albums: any[]
+			}> => r.status === "fulfilled",
+		)
+		.map((r) => r.value)
+})
+</script>
+
+<template>
+	<template v-for="item in data" :key="item.genre._id">
+		<Slider v-if="item.albums.length" :title="item.genre.name">
+			<AlbumCard
+				v-for="album in item.albums"
+				:key="album._id"
+				:name="album.name"
+				:file="`${BACKEND_SERVE}${album.file}`"
+				:artists="album.artists"
+				:_id="album._id"
+			/>
+		</Slider>
+	</template>
+</template>