Added groups to dropdown menu

app/components/Track/Row.vue

@@ -14,26 +14,28 @@ const hovering = ref(false)
 
 const toast = useToast()
 
-const dropdownMenuItems: DropdownMenuItem[] = [
+const dropdownMenuItems: DropdownMenuItem[][] = [
-	{
+	[
-		label: "Play only this",
+		{
-		icon: "lucide:play",
+			label: "Play only this",
-		onSelect() {},
+			icon: "lucide:play",
-	},
+			onSelect() {},
-	{
-		label: "Play next",
-		icon: "lucide:list-start",
-		onSelect() {
-			toast.show("Playing next")
 		},
-	},
+		{
-	{
+			label: "Play next",
-		label: "Add to queue",
+			icon: "lucide:list-start",
-		icon: "lucide:list-end",
+			onSelect() {
-		onSelect() {
+				toast.show("Playing next")
-			toast.show("Added to queue")
+			},
 		},
-	},
+		{
+			label: "Add to queue",
+			icon: "lucide:list-end",
+			onSelect() {
+				toast.show("Added to queue")
+			},
+		},
+	],
 ]
 
 const durationFormatted = computed(() =>

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
+				<div
-					v-for="(item, i) in items"
+					v-for="(group, i) in items"
-					:key="i"
+					:key="`group-${i}`"
-					class="item"
+					class="group"
-					@click="
-						() => {
-							item.onSelect?.()
-							close()
-						}
-					"
 				>
-					<Icon :name="item.icon" class="icon" />
+					<button
-					<span>{{ item.label }}</span>
+						v-for="(item, i) in group"
-				</button>
+						: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;