made sure header link returns all the way to home

webdev-prosjekt1/src/App.tsx

@@ -232,10 +232,10 @@ function App() {
 		matchesGenre([artist])
 	) ?? [];
 
-	if (isAlbumDetailRoute) return <AlbumDetailPage album={selectedAlbum ?? dummyAlbum} onTrackClick={handleAlbumTrackClick} />;
-	if (isArtistDetailRoute) return <ArtistDetailPage artist={selectedArtist ?? dummyArtist} onTrackClick={handleTrackClick} onAlbumClick={handleAlbumClick} />;
-	if (isSongDetailRoute) return <TrackDetailPage song={selectedTrack ?? dummyTrack} onAlbumClick={handleAlbumClick} />;
-	if (isFavoritesRoute) return <FavoritesPage onTrackClick={handleFavoriteTrackClick} />;
+	if (isAlbumDetailRoute) return <AlbumDetailPage album={selectedAlbum ?? dummyAlbum} onTrackClick={handleAlbumTrackClick} onHome={handleHome} />;
+	if (isArtistDetailRoute) return <ArtistDetailPage artist={selectedArtist ?? dummyArtist} onTrackClick={handleTrackClick} onAlbumClick={handleAlbumClick} onHome={handleHome} />;
+	if (isSongDetailRoute) return <TrackDetailPage song={selectedTrack ?? dummyTrack} onAlbumClick={handleAlbumClick} onHome={handleHome} />;
+	if (isFavoritesRoute) return <FavoritesPage onTrackClick={handleFavoriteTrackClick} onHome={handleHome} />;
 
 	return (
 		<main className='app-shell'>

webdev-prosjekt1/src/components/AlbumDetailPage.tsx

@@ -11,9 +11,10 @@ import { PreviewPlayer } from './PreviewPlayer';
 type AlbumDetailPageProps = {
 	album: Album;
 	onTrackClick: (track: AlbumTrack) => void;
+	onHome: () => void;
 };
 
-export const AlbumDetailPage = ({ album, onTrackClick }: AlbumDetailPageProps) => {
+export const AlbumDetailPage = ({ album, onTrackClick, onHome }: AlbumDetailPageProps) => {
 	const [playingTrackId, setPlayingTrackId] = useState<string | null>(null);
 	const artistNames = album.artists.map((artist) => artist.name).join(', ');
 	const albumImage = album.images[0]?.url;
@@ -26,7 +27,7 @@ export const AlbumDetailPage = ({ album, onTrackClick }: AlbumDetailPageProps) =
 
 	return (
 		<main className='album-detail-page'>
-			<Header />
+			<Header onHome={onHome} />
 
 			<section className='detail-content' aria-labelledby='album-detail-title'>
 				<figure className='detail-art'>

webdev-prosjekt1/src/components/ArtistDetailPage.tsx

@@ -11,9 +11,10 @@ type ArtistDetailPageProps = {
 	artist: Artist;
 	onTrackClick: (track: Track) => void;
 	onAlbumClick: (album: Album) => void;
+	onHome: () => void;
 };
 
-export const ArtistDetailPage = ({ artist, onTrackClick, onAlbumClick }: ArtistDetailPageProps) => {
+export const ArtistDetailPage = ({ artist, onTrackClick, onAlbumClick, onHome }: ArtistDetailPageProps) => {
 	const artistImage = artist.images[0]?.url;
 	const { data: tracks, isLoading: isLoadingTracks, isError: isTracksError } = useQuery({
 		queryKey: ['artist-tracks', artist.name],
@@ -30,7 +31,7 @@ export const ArtistDetailPage = ({ artist, onTrackClick, onAlbumClick }: ArtistD
 
 	return (
 		<main className='artist-detail-page'>
-			<Header />
+			<Header onHome={onHome} />
 
 			<section className='detail-content' aria-labelledby='artist-detail-title'>
 				<figure className='detail-art'>

webdev-prosjekt1/src/components/FavoritesPage.tsx

@@ -8,14 +8,15 @@ import musicWizImage from '../assets/musicwiz.png';
 
 type FavoritesPageProps = {
     onTrackClick: (track: Track | AlbumTrack) => void;
+    onHome: () => void;
 };
 
-export const FavoritesPage = ({ onTrackClick }: FavoritesPageProps) => {
+export const FavoritesPage = ({ onTrackClick, onHome }: FavoritesPageProps) => {
     const { favorites } = useFavorites();
 
     return (
         <main className='favorites-page'>
-            <Header />
+            <Header onHome={onHome} />
 
             <section className='favorites-layout'>
                 <section className='favorite-page-content' aria-labelledby='favorites-title'>

webdev-prosjekt1/src/components/TrackDetailPage.tsx

@@ -9,6 +9,7 @@ import { PreviewPlayer } from './PreviewPlayer';
 type TrackDetailPageProps = {
 	song: Track;
 	onAlbumClick: (album: Album) => void;
+	onHome: () => void;
 };
 
 export type DetailSelectHandler = (song: Track) => void;
@@ -21,7 +22,7 @@ const formatDuration = (durationMs: number) => {
 	return `${minutes}:${seconds}`;
 };
 
-export const TrackDetailPage = ({ song, onAlbumClick }: TrackDetailPageProps) => {
+export const TrackDetailPage = ({ song, onAlbumClick, onHome }: TrackDetailPageProps) => {
 	const firstArtistName = song.artists[0].name;
 	const artistNames = song.artists.map((artist) => artist.name).join(', ');
 	const albumImage = song.album.images[0]?.url;
@@ -35,7 +36,7 @@ export const TrackDetailPage = ({ song, onAlbumClick }: TrackDetailPageProps) =>
 
 	return (
 		<main className='track-detail-page'>
-			<Header />
+			<Header onHome={onHome} />
 
 			<section className='detail-content' aria-labelledby='detail-title'>
 				<figure className='detail-art'>