track item redirect to correct username + hero goes to username

src/components/playlist/PlaylistHero.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { FaPlay, FaPause, FaLock } from "react-icons/fa";
 import { type PlaylistDetails } from "@/services/api/playlist/playlist.service";
 import { useAuthStore } from "@/stores/auth.store";
@@ -128,6 +129,11 @@ export default function PlaylistHero({
         ? user?.displayName
         : ownerUsername || playlist.owner_user_id;
 
+  const ownerProfileHref =  moreOfLike
+  ? `/${user?.username}`
+    : `/${ownerUsername}`
+
+
   return (
     <div
       data-test="playlist-hero"
@@ -177,9 +183,18 @@ export default function PlaylistHero({
 
             {/* "Playlist owner" */}
             <div data-test="playlist-hero-owner" className="bg-[#121212] px-4 py-1.5">
-              <p className="text-[17px] text-white font-bold cursor-pointer">
-                {ownerLabel}
-              </p>
+              {ownerProfileHref ? (
+                <Link
+                  to={ownerProfileHref}
+                  className="text-[17px] text-white font-bold cursor-pointer hover:text-[#717171] transition-colors"
+                >
+                  {ownerLabel}
+                </Link>
+              ) : (
+                <p className="text-[17px] text-white font-bold cursor-pointer">
+                  {ownerLabel}
+                </p>
+              )}
             </div>
           </div>
         </div>

src/components/playlist/test/PlaylistHero.test.tsx

@@ -86,7 +86,10 @@ describe("PlaylistHero", () => {
       </MemoryRouter>,
     );
     expect(screen.getByText("Related Tracks: Seed Title")).toBeInTheDocument();
-    expect(screen.getByText("Made for Mariam")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Made for Mariam" })).toHaveAttribute(
+      "href",
+      "/artist-x",
+    );
 
     render(
       <MemoryRouter>
@@ -99,7 +102,10 @@ describe("PlaylistHero", () => {
       </MemoryRouter>,
     );
     expect(screen.getByText("artist-x's Station")).toBeInTheDocument();
-    expect(screen.getByText("Artist Station")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Artist Station" })).toHaveAttribute(
+      "href",
+      "/artist-x",
+    );
   });
 
   it("uses the explicit genre label and hides the upload button prop", async () => {

src/pages/you/sets/SetsPage.tsx

@@ -45,6 +45,14 @@ type SetsMixCardItem = {
 
 type SetsCarouselItem = MadeForYouItem | SetsMixCardItem;
 
+function getPersonalMixCoverUrl(mix: PersonalMix) {
+  return mix.cover_image ?? mix.preview_track.cover_image ?? null;
+}
+
+function getMadeForYouCoverUrl(mix: HomeData["made_for_you"] extends infer T ? NonNullable<T> extends { daily_mix: infer D } ? D : never : never) {
+  return mix.cover_url ?? mix.preview_track.cover_image ?? "";
+}
+
 const SkeletonCard = () => (
   <div className={`flex flex-col gap-2 ${CARD_WIDTH} shrink-0 animate-pulse`}>
     <div className="w-full aspect-square rounded-md bg-[#303030]" />
@@ -152,7 +160,7 @@ export default function SetsPage() {
         id: homeData.made_for_you.daily_mix.id,
         title: homeData.made_for_you.daily_mix.label,
         subtitle: homeData.made_for_you.daily_mix.description,
-        coverUrl: homeData.made_for_you.daily_mix.cover_url ?? "",
+        coverUrl: getMadeForYouCoverUrl(homeData.made_for_you.daily_mix),
         madeKind: "daily",
         badgeWords: ["DAILY", "DROPS"],
         badgeBg: "#1a237e",
@@ -165,7 +173,7 @@ export default function SetsPage() {
         id: homeData.made_for_you.weekly_mix.id,
         title: homeData.made_for_you.weekly_mix.label,
         subtitle: homeData.made_for_you.weekly_mix.description,
-        coverUrl: homeData.made_for_you.weekly_mix.cover_url ?? "",
+        coverUrl: getMadeForYouCoverUrl(homeData.made_for_you.weekly_mix),
         madeKind: "weekly",
         badgeWords: ["WEEKLY", "WAVE"],
         badgeBg: "#1b5e20",
@@ -188,7 +196,7 @@ export default function SetsPage() {
             mix.flavor === "listening_history"
               ? "Based on listening history"
               : "Based on your taste",
-          cover_image: mix.cover_image ?? mix.preview_track.cover_image ?? null,
+          cover_image: getPersonalMixCoverUrl(mix),
           badgeWords: ["MIX", ""],
           badgeBg: mix.flavor === "listening_history" ? "#1a237e" : "#1b5e20",
           previewTrack: mapDiscoveryTrack(mix.preview_track),
@@ -299,7 +307,7 @@ export default function SetsPage() {
                       label: mix.title,
                       flavor: "listening_history",
                       genre_name: null,
-                      cover_image: mix.cover_image,
+                      cover_image: mix.cover_image ?? mix.previewTrack?.coverUrl ?? null,
                       track_count: 0,
                       generated_at: new Date().toISOString(),
                       preview_track: {

src/pages/you/sets/moreOfLike.helpers.ts

@@ -57,6 +57,7 @@ export function toPlaylistTrackItem(
     is_public: !track.isPrivate,
     deleted_at: null,
     artist_name: track.artistName || null,
+    artist_id: track.artistId || track.artistUsername || undefined,
     artist_username: track.artistUsername || null,
     audio_url: track.audioUrl || null,
     play_count: track.playCount ?? 0,