M4_track

src/Router.tsx

@@ -128,6 +128,9 @@ const TrackSlugPage = lazyWithRetry(
 const TrackEngagementPage = lazyWithRetry(
   () => import("@/pages/[username]/[trackSlug]/TrackEngagementPage"),
 );
+const TrackRelatedPage = lazyWithRetry(
+  () => import("@/pages/[username]/[trackSlug]/TrackRelatedPage"),
+);
 
 // Social
 const NotificationsPage = lazyWithRetry(
@@ -349,6 +352,7 @@ export const router = createBrowserRouter([
           { path: ":trackId", element: <Lazy component={TrackSlugPage} /> },
           { path: ":trackId/likes", element: <Lazy component={TrackEngagementPage} /> },
           { path: ":trackId/reposts", element: <Lazy component={TrackEngagementPage} /> },
+          { path: ":trackId/related", element: <Lazy component={TrackRelatedPage} /> },
           {
             path: "sets/:playlistSlug",
             element: <Lazy component={PlaylistSlugPage} />,

src/pages/[username]/[trackSlug]/TrackRelatedPage.tsx

@@ -0,0 +1,113 @@
+import { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { getTrackBySlug, getRelatedTracks } from "@/services/track.service";
+import type { Track } from "@/types/track";
+import Spinner from "@/components/UI/Spinner";
+import TrackList from "./components/TrackList";
+import { usePlayerStore } from "@/stores/player.store";
+
+export default function TrackRelatedPage() {
+  const { username, trackId } = useParams<{ username: string; trackId: string }>();
+  const navigate = useNavigate();
+  const { setTrack: setPlayerTrack, currentTrack, isPlaying } = usePlayerStore();
+
+  const [track, setTrack] = useState<Track | null>(null);
+  const [relatedTracks, setRelatedTracks] = useState<Track[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!username || !trackId) return;
+
+    async function fetchData() {
+      try {
+        const fetchedTrack = await getTrackBySlug(username!, trackId!);
+        setTrack(fetchedTrack);
+        const { tracks } = await getRelatedTracks(fetchedTrack.id);
+        setRelatedTracks(tracks);
+      } catch (err) {
+        console.error("Failed to load related tracks:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [username, trackId]);
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center py-20">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (!track) {
+    return (
+      <div className="flex-1 flex items-center justify-center py-20 text-text-secondary">
+        Track not found.
+      </div>
+    );
+  }
+
+  const effectiveArtistUsername = track.artistUsername || username || "unknown";
+  const effectiveTrackSlug = track.trackSlug || trackId || "";
+
+  return (
+    <div className="py-8 container px-4 md:px-8 lg:px-20">
+      {/* Header */}
+      <div className="flex items-center gap-6 mb-8">
+        <div 
+          className="w-40 h-40 shrink-0 cursor-pointer shadow-lg overflow-hidden rounded-sm"
+          onClick={() => navigate(`/${effectiveArtistUsername}/${effectiveTrackSlug}`)}
+        >
+          <img 
+            src={track.coverUrl} 
+            alt={track.title} 
+            className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
+          />
+        </div>
+        <div>
+          <h1 
+            className="text-white text-3xl font-bold cursor-pointer hover:underline mb-1"
+            onClick={() => navigate(`/${effectiveArtistUsername}/${effectiveTrackSlug}`)}
+          >
+            {track.title}
+          </h1>
+          <p 
+            className="text-xl text-text-secondary cursor-pointer hover:text-white"
+            onClick={() => navigate(`/${effectiveArtistUsername}`)}
+          >
+            {track.artistName}
+          </p>
+        </div>
+      </div>
+
+      {/* Title */}
+      <div className="mb-6 border-b border-[#333] pb-2">
+        <h2 className="text-xl font-bold text-white uppercase tracking-wider text-sm">Related Tracks</h2>
+      </div>
+
+      {/* List */}
+      {relatedTracks.length === 0 ? (
+        <div className="flex items-center justify-center py-24">
+          <p className="text-white text-lg font-bold">
+            No related tracks found.
+          </p>
+        </div>
+      ) : (
+        <TrackList 
+          tracks={relatedTracks}
+          currentTrackId={currentTrack?.id}
+          isPlaying={isPlaying}
+          onTrackPlay={(t) => {
+            if (currentTrack?.id === t.id) {
+              usePlayerStore.getState().togglePlay();
+            } else {
+              setPlayerTrack(t, [track, ...relatedTracks]);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+}

src/pages/[username]/[trackSlug]/TrackSlugPage.tsx

@@ -106,7 +106,7 @@ export default function TrackSlugPage() {
         t,
         [track!, ...relatedTracks].filter(Boolean) as Track[]
       );
-      navigate(`/${t.artistUsername}/${t.id}`);
+      navigate(`/${t.artistUsername || "unknown"}/${t.trackSlug || t.id}`);
     }
   };
 

src/pages/[username]/[trackSlug]/components/TrackList.tsx

@@ -154,11 +154,13 @@ function TrackRow({
           <span className="text-[var(--color-text-muted)] text-xs shrink-0">
             ·
           </span>
-          <span
-            className={`text-sm font-bold truncate ${isCurrent ? "text-[var(--color-accent)]" : "text-[var(--color-text-hover)]"}`}
+          <Link
+            to={`/${track.artistUsername || "unknown"}/${track.trackSlug || track.id}`}
+            onClick={(e) => e.stopPropagation()}
+            className={`text-sm font-bold truncate hover:underline ${isCurrent ? "text-[var(--color-accent)]" : "text-[var(--color-text-hover)]"}`}
           >
             {track.title}
-          </span>
+          </Link>
         </div>
 
         {/* ── Right: hover icons OR play count ── */}

src/pages/[username]/[trackSlug]/components/TrackSidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import type { Track } from "../../../../types/track";
 import type { MockUser } from "../../../../services/mocks/users";
@@ -13,6 +13,9 @@ interface TrackSidebarProps {
 }
 
 export default function TrackSidebar({ track, featuredArtists, relatedTracks = [] }: TrackSidebarProps) {
+  const { username: urlUsername } = useParams<{ username: string }>();
+  const artistUsername = track.artistUsername || urlUsername || "unknown";
+
   return (
     <Tooltip.Provider delayDuration={400} skipDelayDuration={100}>
       <aside data-test="track-sidebar" className="flex flex-col w-full">
@@ -66,11 +69,20 @@ export default function TrackSidebar({ track, featuredArtists, relatedTracks = [
         <div data-test="sidebar-related-tracks">
           <p className="text-[var(--color-text-muted)] text-[11px] font-bold uppercase tracking-widest mb-4 flex justify-between items-center">
             Related Tracks
-            <button className="text-[10px] lowercase font-normal hover:text-[var(--color-text-hover)]">View all</button>
+            <Link 
+              to={`/${artistUsername}/${track.trackSlug || track.id}/related`}
+              className="text-[10px] lowercase font-normal hover:text-[var(--color-text-hover)] cursor-pointer"
+            >
+              View all
+            </Link>
           </p>
           <div className="flex flex-col gap-4">
             {relatedTracks.slice(0, 3).map((t) => (
-              <div key={t.id} className="flex gap-3 group cursor-pointer group">
+              <Link 
+                key={t.id} 
+                to={`/${t.artistUsername || artistUsername}/${t.trackSlug || t.id}`}
+                className="flex gap-3 group cursor-pointer"
+              >
                 <div className="relative w-12 h-12 shrink-0">
                   <CoverImage
                     src={t.coverUrl}
@@ -96,7 +108,7 @@ export default function TrackSidebar({ track, featuredArtists, relatedTracks = [
                      </span>
                   </div>
                 </div>
-              </div>
+              </Link>
             ))}
           </div>
         </div>