Improve playlist view

packages/app/src/components/Music/Playlist/index.jsx

@@ -6,14 +6,6 @@ import { Icons } from "@components/Icons"
 
 import "./index.less"
 
-const typeToNavigationType = {
-	playlist: "playlist",
-	album: "album",
-	track: "track",
-	single: "track",
-	ep: "album",
-}
-
 const Playlist = (props) => {
 	const [coverHover, setCoverHover] = React.useState(false)
 
@@ -28,13 +20,27 @@ const Playlist = (props) => {
 			return props.onClick(playlist)
 		}
 
-		return app.location.push(`/music/list/${playlist._id}`)
+		const params = new URLSearchParams()
+
+		if (playlist.type) {
+			params.set("type", playlist.type)
+		}
+
+		if (playlist.service) {
+			params.set("service", playlist.service)
+		}
+
+		return app.location.push(
+			`/music/list/${playlist._id}?${params.toString()}`,
+		)
 	}
 
 	const onClickPlay = (e) => {
 		e.stopPropagation()
 
-		app.cores.player.start(playlist.items)
+		if (playlist.items) {
+			app.cores.player.start(playlist.items)
+		}
 	}
 
 	return (
@@ -68,8 +74,16 @@ const Playlist = (props) => {
 				<div className="playlist_info_title" onClick={onClick}>
 					<h1>{playlist.title}</h1>
 				</div>
+
 				{props.row && (
 					<div className="playlist_details">
+						{playlist.service === "tidal" && (
+							<p>
+								<Icons.SiTidal />
+								Tidal
+							</p>
+						)}
+
 						<p>
 							<Icons.MdAlbum />
 							{playlist.type ?? "playlist"}

packages/app/src/components/Music/Playlist/index.less

@@ -45,6 +45,13 @@
 			justify-content: center;
 
 			.playlist_info_title {
+				display: flex;
+				flex-direction: row;
+
+				align-items: center;
+
+				gap: 7px;
+
 				h1 {
 					word-break: break-all;
 					white-space: wrap;

packages/app/src/components/Music/PlaylistView/header.jsx

@@ -16,6 +16,7 @@ const typeToKind = {
 	ep: "releases",
 	compilation: "releases",
 	playlist: "playlists",
+	single: "tracks",
 }
 
 const PlaylistHeader = ({
@@ -77,7 +78,6 @@ const PlaylistHeader = ({
 
 				<div className="play_info_details">
 					<div className="play_info_title">
-						{playlist.service === "tidal" && <Icons.SiTidal />}{" "}
 						{typeof playlist.title === "function" ? (
 							playlist.title()
 						) : (
@@ -86,19 +86,24 @@ const PlaylistHeader = ({
 					</div>
 
 					<div className="play_info_statistics">
+						{playlist.service === "tidal" && (
+							<div className="play_info_statistics_item">
+								<p>
+									<Icons.SiTidal /> From Tidal
+								</p>
+							</div>
+						)}
 						{PlaylistTypeDecorators[playlistType] && (
 							<div className="play_info_statistics_item">
 								{PlaylistTypeDecorators[playlistType]()}
 							</div>
 						)}
-
 						<div className="play_info_statistics_item">
 							<p>
 								<Icons.MdLibraryMusic /> {playlist.total_items}{" "}
 								Items
 							</p>
 						</div>
-
 						{playlist.total_duration > 0 && (
 							<div className="play_info_statistics_item">
 								<p>
@@ -107,7 +112,6 @@ const PlaylistHeader = ({
 								</p>
 							</div>
 						)}
-
 						{playlist.publisher && (
 							<div className="play_info_statistics_item">
 								<p onClick={handlePublisherClick}>