33 add top 10 and bottom 10 songs of all time to front page

webdev-prosjekt1/src/App.css

@@ -11,7 +11,7 @@ body {
 .app-shell {
 	min-height: 100vh;
 	background: var(--page_background_gradient);
-	overflow: hidden;
+	overflow-x: hidden;
 }
 
 .search-section {
@@ -65,11 +65,86 @@ body {
 	padding: 18px 0 50px;
 
 	display: flex;
-	justify-content: flex-end;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 24px;
 }
 
-.hero-art {
+.top-tracks-section {
+	display: flex;
+	gap: 24px;
+
+	flex: 1;
+	min-width: 0;
+}
+
+.top-tracks-group {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+
+	flex: 1;
+	min-width: 0;
+}
+
+.top-tracks-group .search-result-card {
 	position: relative;
+}
+
+.top-tracks-group .card-list {
+	counter-reset: track-rank;
+}
+
+.top-tracks-group .search-result-card::before {
+	counter-increment: track-rank;
+	content: counter(track-rank);
+
+	position: absolute;
+	top: 4px;
+	left: 4px;
+	z-index: 2;
+
+	display: grid;
+	place-items: center;
+
+	width: 20px;
+	height: 20px;
+
+	border-radius: 50%;
+
+	background: var(--primary_color);
+	color: var(--primary_background_color);
+	box-shadow: 0 1px 4px var(--shadow_black);
+
+	font-size: 0.7rem;
+	font-weight: 700;
+	line-height: 1;
+}
+
+@media (max-width: 1100px) {
+	.hero-section {
+		flex-direction: column;
+	}
+
+	.top-tracks-section {
+		width: 100%;
+	}
+
+	.hero-art {
+		position: relative;
+		top: 0;
+	}
+}
+
+@media (max-width: 700px) {
+	.top-tracks-section {
+		flex-direction: column;
+	}
+}
+
+.hero-art {
+	position: sticky;
+	top: 24px;
 
 	margin: var(--margin);
 
@@ -78,6 +153,8 @@ body {
 
 	display: grid;
 	place-items: center;
+
+	flex-shrink: 0;
 }
 
 .hero-art img {

webdev-prosjekt1/src/App.tsx

@@ -13,7 +13,7 @@ import { AlbumCard } from './components/AlbumCard';
 import { ArtistCard } from './components/ArtistCard';
 import { FilterPopup, EMPTY_FILTERS } from './components/FilterPopup';
 import type { Album, AlbumTrack, Artist, SearchResult, StoredSearch, Track } from './api/types';
-import { fetchTrack, search } from './api/spotify';
+import { fetchTrack, fetchTracks, search, TOP_10_IDS, BOTTOM_10_IDS } from './api/spotify';
 import filterIcon from './assets/filter.png';
 import musicWizImage from './assets/musicwiz.png';
 
@@ -131,6 +131,18 @@ function App() {
 		initialData: storedSearch?.effectiveQuery === effectiveQuery ? storedSearch.results : undefined,
 	});
 
+	const { data: topTracks = [] } = useQuery({
+		queryKey: ['top-10-tracks'],
+		queryFn: () => fetchTracks(TOP_10_IDS),
+		staleTime: Infinity,
+	});
+
+	const { data: bottomTracks = [] } = useQuery({
+		queryKey: ['bottom-10-tracks'],
+		queryFn: () => fetchTracks(BOTTOM_10_IDS),
+		staleTime: Infinity,
+	});
+
 	useEffect(() => {
 		if (!results || !query.trim()) return;
 
@@ -217,23 +229,37 @@ function App() {
 			)}
 			{hasSearched ? (
 				<section className='results-section'>
-					<div className='results-group'>
+					<section className='results-group'>
 						<h2 className='results-heading'>Tracks</h2>
 						<ul className='card-list'>{filteredTracks.map((track) => <TrackCard key={track.id} track={track} onClick={() => handleTrackClick(track)} />)}</ul>
-					</div>
-					<div className='results-group'>
+					</section>
+					<section className='results-group'>
 						<h2 className='results-heading'>Albums</h2>
 						<ul className='card-list'>{filteredAlbums.map((album) => <AlbumCard key={album.id} album={album} onClick={() => handleAlbumClick(album)} />)}</ul>
-					</div>
-					<div className='results-group'>
+					</section>
+					<section className='results-group'>
 						<h2 className='results-heading'>Artists</h2>
 						<ul className='card-list'>{filteredArtists.map((artist) => <ArtistCard key={artist.id} artist={artist} onClick={() => handleArtistClick(artist)} />)}</ul>
-					</div>
+					</section>
 				</section>
 			) : (
 				<section className='hero-section'>
+					<aside className='top-tracks-section'>
+						<section className='top-tracks-group'>
+							<h2 className='results-heading'>Top 10 of all time</h2>
+							<ul className='card-list'>
+								{topTracks.map((track) => <TrackCard key={track.id} track={track} onClick={() => handleTrackClick(track)} />)}
+							</ul>
+						</section>
+						<section className='top-tracks-group'>
+							<h2 className='results-heading'>Bottom 10 of all time</h2>
+							<ul className='card-list'>
+								{bottomTracks.map((track) => <TrackCard key={track.id} track={track} onClick={() => handleTrackClick(track)} />)}
+							</ul>
+						</section>
+					</aside>
 					<figure className='hero-art'>
-						<div className='art-glow' />
+						<span className='art-glow' aria-hidden='true' />
 						<img src={musicWizImage} alt='A musical wizard' />
 					</figure>
 				</section>

webdev-prosjekt1/src/api/spotify.ts

@@ -9,29 +9,29 @@ let accessToken: string | null = null;
 let expiresAt = 0;
 
 export const TOP_10_IDS = [
-    "0AJ62x1CXjJf3VW25CeZXa", // Stairway To Heaven - Led Zeppelin
+    "5CQ30WqJwcep0pYcV4AMNc", // Stairway To Heaven - Led Zeppelin
     "5HNCy40Ni5BZJFw1TKzRsC", // Comfortably Numb - Pink Floyd
-    "32mwlJqE38D1qCoFwVjgpZ", // Bohemian Rhapsody - Queen
+    "2ODUgS9kk95bqVaf9EzyOU", // Bohemian Rhapsody - Queen
     "2WfaOiMkCvy7F5fcp2zZ8L", // Take On Me - a-ha
     "6TSP9oSbXONHk39GHvOSs3", // Telegraph Road - Dire Straits
-    "6plRwenssWRPbd5WIT1OLO", // Africa - TOTO
-    "5hxy15nCnKjhbe7sVjPtLT", // Viva La Vida - Coldplay
-    "2WWjIGZF6snSCqhRdNTPEj", // Beat It - Michael Jackson
+    "2374M0fQpWi3dLnB54qaLX", // Africa - TOTO
+    "1mea3bSkSGXuIRvnydlB5b", // Viva La Vida - Coldplay
+    "3BovdzfaX4jb5KFQwoPfAw", // Beat It - Michael Jackson
     "3dYD57lRAUcMHufyqn9GcI", // Take Me To Church - Hozier
-    "3Ttx1ky0ZYaVjXZWdcmwh5", // Blinding Lights - The Weeknd
+    "0VjIjW4GlUZAMYd2vXMi3b", // Blinding Lights - The Weeknd
 ];
 
 export const BOTTOM_10_IDS = [
     "63M8OHzd0lcVT517Pnon81", // Several Species of Small Furry Animals... - Pink Floyd
     "1musbempyJAw5gfSKZHXP9", // Anxiety - Doechii
     "4l62h4tiuUwn7eD6hxMlVQ", // It's Everyday Bro - Jake Paul ft. Team 10
     "1KEdF3FNF9bKRCxN3KUMbx", // Friday - Rebecca Black
-    "5ZULALImTm80tzUbYQYM9d", // Dance Monkey - Tones And I
+    "2XU0oxnq2qxCpomAAuJY8K", // Dance Monkey - Tones And I
     "5RIVoVdkDLEygELLCniZFr", // Watch Me (Whip / Nae Nae) - Silentó
     "43ZyHQITOjhciSUUNPVRHc", // Gucci Gang - Lil Pump
     "0VNDOpBbUYtSpCFY7HUA3D", // Baby - Justin Bieber ft. Ludacris
-    "5AUE3qJ6sCsgdUaaVK02uq", // Astronaut In The Ocean - Masked Wolf
-    "4t6iAuF1TDNqTis3S99iQa", // Mil etter mil - Jahn Teigen
+    "3Ofmpyhv5UAQ70mENzB277", // Astronaut In The Ocean - Masked Wolf
+    "28j1U8Ojtip5NoAweQclgK", // Mil etter mil - Jahn Teigen
 ];
 
 

webdev-prosjekt1/src/components/FilterPopup.css

@@ -139,6 +139,10 @@
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
+
+	margin: 0;
+	padding: 0;
+	list-style: none;
 }
 
 .genre-chip {

webdev-prosjekt1/src/components/FilterPopup.tsx

@@ -29,11 +29,11 @@ export const FilterPopup = ({ filters, onChange, onClear, onClose }: FilterPopup
 
 	return (
 		<div className='filter-overlay' onClick={onClose}>
-			<div className='filter-popup' onClick={(event) => event.stopPropagation()}>
-				<div className='filter-popup-header'>
+			<section className='filter-popup' onClick={(event) => event.stopPropagation()}>
+				<header className='filter-popup-header'>
 					<h2>Filter</h2>
 					<button type='button' className='filter-close' onClick={onClose} aria-label='Close filters'>×</button>
-				</div>
+				</header>
 
 				<label className='filter-field'>
 					<span>Artist</span>
@@ -80,7 +80,7 @@ export const FilterPopup = ({ filters, onChange, onClear, onClose }: FilterPopup
 
 				<fieldset className='filter-genres'>
 					<legend>Genre</legend>
-					<div className='genre-options'>
+					<menu className='genre-options'>
 						{GENRE_OPTIONS.map((genre) => (
 							<button
 								type='button'
@@ -91,14 +91,14 @@ export const FilterPopup = ({ filters, onChange, onClear, onClose }: FilterPopup
 								{genre}
 							</button>
 						))}
-					</div>
+					</menu>
 				</fieldset>
 
-				<div className='filter-actions'>
+				<footer className='filter-actions'>
 					<button type='button' className='filter-clear' onClick={onClear}>Clear</button>
 					<button type='button' className='filter-apply' onClick={onClose}>Apply</button>
-				</div>
-			</div>
+				</footer>
+			</section>
 		</div>
 	);
 };

webdev-prosjekt1/src/components/Searchbar.tsx

@@ -25,7 +25,7 @@ export const Searchbar = ({ onSearch, initialQuery = '' }: SearchbarProps) => {
 	return (
 		<form className='searchbar' onSubmit={handleSubmit}>
 			<span className='search-icon' aria-hidden='true'>⌕</span>
-			<input type='search' placeholder='Search artists, albums or songs' aria-label='Search music' value={query} onChange={(event) => setQuery(event.target.value)}/>
+			<input type='search' placeholder='Search artists, albums or tracks' aria-label='Search music' value={query} onChange={(event) => setQuery(event.target.value)}/>
 		</form>
 	)
 }