From 4eb7c6d5a9631be50735bceeba0e722572facb72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sun, 8 Mar 2026 11:24:46 +0100
Subject: [PATCH] Added groups to dropdown menu

---
 app/components/Track/Row.vue | 38 ++++++++++++-----------
 app/ui/DropdownMenu.vue      | 58 +++++++++++++++++++++++++-----------
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/app/components/Track/Row.vue b/app/components/Track/Row.vue
index 7e4ee48..86cd9dc 100644
--- a/app/components/Track/Row.vue
+++ b/app/components/Track/Row.vue
@@ -14,26 +14,28 @@ 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")
+const dropdownMenuItems: DropdownMenuItem[][] = [
+	[
+		{
+			label: "Play only this",
+			icon: "lucide:play",
+			onSelect() {},
 		},
-	},
-	{
-		label: "Add to queue",
-		icon: "lucide:list-end",
-		onSelect() {
-			toast.show("Added to queue")
+		{
+			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")
+			},
+		},
+	],
 ]
 
 const durationFormatted = computed(() =>
diff --git a/app/ui/DropdownMenu.vue b/app/ui/DropdownMenu.vue
index 170b59f..306301f 100644
--- a/app/ui/DropdownMenu.vue
+++ b/app/ui/DropdownMenu.vue
@@ -6,7 +6,7 @@ export interface DropdownMenuItem {
 }
 
 interface DropdownMenuProps {
-	items: DropdownMenuItem[]
+	items: DropdownMenuItem[][]
 }
 
 const props = defineProps<DropdownMenuProps>()
@@ -85,20 +85,26 @@ onBeforeMount(() => {
 
 		<Transition name="dropdown">
 			<div v-show="open" class="menu" :class="placement">
-				<button
-					v-for="(item, i) in items"
-					:key="i"
-					class="item"
-					@click="
-						() => {
-							item.onSelect?.()
-							close()
-						}
-					"
+				<div
+					v-for="(group, i) in items"
+					:key="`group-${i}`"
+					class="group"
 				>
-					<Icon :name="item.icon" class="icon" />
-					<span>{{ item.label }}</span>
-				</button>
+					<button
+						v-for="(item, i) in group"
+						:key="`item-${i}`"
+						class="item"
+						@click="
+							() => {
+								item.onSelect?.()
+								close()
+							}
+						"
+					>
+						<Icon :name="item.icon" class="icon" />
+						<span>{{ item.label }}</span>
+					</button>
+				</div>
 			</div>
 		</Transition>
 	</div>
@@ -113,11 +119,10 @@ onBeforeMount(() => {
 
 	.menu {
 		position: absolute;
-
 		right: 0;
 
-		min-width: 180px;
 		padding: 0.5rem;
+		min-width: 180px;
 
 		background-color: $color-secondary-background;
 		border-radius: $border-radius-standard;
@@ -125,7 +130,6 @@ onBeforeMount(() => {
 
 		display: flex;
 		flex-direction: column;
-		gap: 2px;
 
 		z-index: 1000;
 
@@ -140,6 +144,26 @@ onBeforeMount(() => {
 		}
 	}
 
+	.group {
+		width: 100%;
+
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		padding: 0.4rem 0;
+		border-bottom: 1px solid $color-border;
+
+		&:first-child {
+			padding-top: 0;
+		}
+
+		&:last-child {
+			border-bottom: none;
+			padding-bottom: 0;
+		}
+	}
+
 	.item {
 		display: flex;
 		align-items: center;