Added track navigation menu items

app/components/Track/ImageRow.vue

@@ -7,6 +7,7 @@ interface TrackRowProps {
 
 const { track } = defineProps<TrackRowProps>()
 const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
+const route = useRoute()
 
 const hovering = ref(false)
 
@@ -34,7 +35,33 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 			},
 		},
 	],
+	[
+		{
+			label: "Go to artist",
+			icon: "lucide:user-round",
+			onSelect() {
+				const artist = track.artists[0]
+				if (artist) navigateTo(`/artist/${artist._id}`)
+			},
+		},
+		{
+			label: "Go to album",
+			icon: "lucide:disc-3",
+			onSelect() {
+				navigateTo(`/album/${track.album._id}`)
+			},
+		},
+	],
 ]
+
+const visibleDropdownMenuItems = computed(() =>
+	dropdownMenuItems.map((group) =>
+		group.filter(
+			(item) =>
+				!(item.label === "Go to album" && route.path.startsWith("/album/")),
+		),
+	),
+)
 </script>
 
 <template>
@@ -62,7 +89,7 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 			<ArtistName :artists="track.artists" class="artists" />
 		</div>
 
-		<DropdownMenu :items="dropdownMenuItems">
+		<DropdownMenu :items="visibleDropdownMenuItems">
 			<Icon name="lucide:ellipsis" class="dropdown-icon" />
 		</DropdownMenu>
 	</article>

app/components/Track/Row.vue

@@ -19,6 +19,7 @@ interface TrackRowProps {
 
 const props = defineProps<TrackRowProps>()
 const emit = defineEmits<{ (e: "playAlbumAtIndex"): void }>()
+const route = useRoute()
 
 const hovering = ref(false)
 const { playAlbum, addToFrontOfQueue, addToQueue } = usePlayer()
@@ -52,8 +53,34 @@ const dropdownMenuItems: DropdownMenuItem[][] = [
 			},
 		},
 	],
+	[
+		{
+			label: "Go to artist",
+			icon: "lucide:user-round",
+			onSelect() {
+				const artist = props.track?.artists[0]
+				if (artist) navigateTo(`/artist/${artist._id}`)
+			},
+		},
+		{
+			label: "Go to album",
+			icon: "lucide:disc-3",
+			onSelect() {
+				if (props.track) navigateTo(`/album/${props.track.album._id}`)
+			},
+		},
+	],
 ]
 
+const visibleDropdownMenuItems = computed(() =>
+	dropdownMenuItems.map((group) =>
+		group.filter(
+			(item) =>
+				!(item.label === "Go to album" && route.path.startsWith("/album/")),
+		),
+	),
+)
+
 const durationFormatted = computed(() => {
 	if (!props.track) return ""
 	return new Date(props.track.durationInSeconds * 1000)
@@ -140,7 +167,7 @@ const artworkSrc = computed(() => {
 			class="queue-handle"
 			aria-hidden="true"
 		/>
-		<DropdownMenu v-else-if="props.track" :items="dropdownMenuItems">
+		<DropdownMenu v-else-if="props.track" :items="visibleDropdownMenuItems">
 			<Icon name="lucide:ellipsis" class="dropdown-icon" />
 		</DropdownMenu>
 	</article>