Improve queue list UI

Author: kuba2k2

src/core/queue/TrackQueue.ts

@@ -51,7 +51,7 @@ export class TrackQueue {
 		return this.observables.get(slug)
 	}
 
-	private getTrack(slug: string): Track | undefined {
+	getTrack(slug: string): Track | undefined {
 		return this.getSubject(slug)?.value
 	}
 

src/ui/components/StateButton.tsx

@@ -67,12 +67,7 @@ export class StateButton extends Spicetify.React.Component<StateButtonProps, Sta
 		if (this.props.onClick) {
 			this.props.onClick(this.state.track)
 		} else {
-			Spicetify.showReactModal({
-				title: "Beat Saber - Search results",
-				children: <TrackPage track={this.state.track} />,
-				okLabel: "OK",
-				className: "bs-modal",
-			})
+			TrackPage.showAsModal(this.state.track)
 		}
 	}
 

src/ui/pages/PopupPage.tsx

@@ -1,5 +1,6 @@
 import { Subscription } from "rxjs"
 import { QueueRequest } from "../../core/queue/requests/QueueRequest"
+import { TrackPage } from "./TrackPage"
 
 type QueueButtonState = {
 	items: QueueRequest[]
@@ -66,6 +67,12 @@ export class PopupPage extends Spicetify.React.Component<unknown, QueueButtonSta
 		return true
 	}
 
+	handleItemClick(request: QueueRequest) {
+		const track = BeatSaber.TrackQueue.getTrack(request.slug)
+		if (!track) return
+		TrackPage.showAsModal(track)
+	}
+
 	render() {
 		const settings = {
 			"blockQueue": "Block queue",
@@ -120,19 +127,31 @@ export class PopupPage extends Spicetify.React.Component<unknown, QueueButtonSta
 						)}
 
 						<ul>
-							{this.state.items.map(request => (
-								<li>
-									<button className="ConnectPopup__device ConnectPopup__device--available ConnectPopup__device--active">
-										<span className="ConnectPopup__device-image spoticon-device-computer-32"></span>
+							{this.state.items.map(request => {
+								let icon = "airplay";
+								switch (request.type) {
+									case "MapsRequest":
+										icon = "search"
+										break
+									case "DetailsRequest":
+										icon = "album"
+										break
+									case "ArtistImageRequest":
+										icon = "artist"
+										break
+								}
+								return (<li onClick={this.handleItemClick.bind(this, request)}>
+									<button className="ConnectPopup__device ConnectPopup__device--available ConnectPopup__device--active-no">
+										<span className={`ConnectPopup__device-image spoticon-${icon}-32`}></span>
 										<div className="ConnectPopup__device-body">
 											<p className="ConnectPopup__device-title">{request.type}</p>
 											<p className="ConnectPopup__device-info">
 												<code>{request.slug}</code>
 											</p>
 										</div>
 									</button>
-								</li>
-							))}
+								</li>)
+							})}
 						</ul>
 					</div>
 				</div>

src/ui/pages/TrackPage.tsx

@@ -39,6 +39,15 @@ export class TrackPage extends Spicetify.React.Component<TrackPageProps, TrackPa
 		}
 	}
 
+	static showAsModal(track: Track) {
+		Spicetify.showReactModal({
+			title: "Beat Saber - Search results",
+			children: <TrackPage track={track} />,
+			okLabel: "OK",
+			className: "bs-modal",
+		})
+	}
+
 	private log(...data: unknown[]) {
 		if (BeatSaber.Settings.logTrackPage) {
 			console.log(...data)