typed lastfm things

src/components/windows/main/SpotifyCard.astro

@@ -2,6 +2,7 @@
 import LastFMIcon from "@assets/svg/fm.svg"
 ---
 <div class="spotify-card-wrapper-shadow">
+	<h4>I'm listening to</h4>
 	<div class="spotify-card-wrapper">
 		<div class="spotify-card">
 			<svg aria-hidden="true" class="blur">
@@ -29,6 +30,11 @@ import LastFMIcon from "@assets/svg/fm.svg"
 	</div>
 </div>
 <style>
+	h4 {
+		color: var(--subtext0);
+		margin-bottom: 10px;
+	}
+
 	.blur {
 		display: none;
 	}
@@ -132,24 +138,29 @@ import LastFMIcon from "@assets/svg/fm.svg"
 <script>
 	import { mergeStyles } from "utils/mergeStyles";
 	import { average } from "color.js";
-	import { LASTFM_KEY, LASTFM_API } from "utils/constants";
+	import { LASTFM_KEY, LASTFM_API, LASTFM_USER } from "utils/constants";
+	import {
+		type FMResponse,
+		type FMRawTrack,
+		type FMTrack,
+		transformRawTrack
+	} from "types/lastfm";
 	const spotifyCardWrapper: HTMLElement = document.querySelector(".spotify-card-wrapper-shadow");
 
 	async function getLastFmTracks() {
 		const params = new URLSearchParams({
 			method: "user.getrecenttracks",
 			api_key: LASTFM_KEY,
-			user: "nin0dev",
+			user: LASTFM_USER,
 			limit: "50",
 			format: "json",
 			extended: "true"
 		});
 
-		const response = await(
+		const response: FMResponse = await(
 			await fetch(`${LASTFM_API}${params}`)
 		).json();
-
-		// TODO: make lastfm stuff typed
+		
 		if (
 			response.recenttracks.track.some(t => {
 				try {
@@ -159,20 +170,19 @@ import LastFMIcon from "@assets/svg/fm.svg"
 				}
 			})
 		) {
-			const track = response.recenttracks.track[0];
+			const rawTrack: FMRawTrack = response.recenttracks.track[0];
+			const track: FMTrack = transformRawTrack(rawTrack);
 
 			mergeStyles({
 				"display": "block",
-				"--album-art": `url("${track.image[1]["#text"]}")`,
 				"--track": `'${track.name}'`,
-				"--album": `'${track.album["#text"]}'`,
+				"--artist": `'${track.artist}'`,
+				"--album": `'${track.album}'`,
+				"--album-art": `url("${track.albumArt}")`,
 				"--album-color": await average(
-						`${track.image[1]["#text"]}`,
-							{
-								format: "hex"
-							}
-						),
-				"--artist": `'${track.artist.name}'`
+					track.albumArt,
+					{ format: "hex" }
+				)
 			}, spotifyCardWrapper.style);
 
 			(document.querySelector(".lastfm-link") as HTMLLinkElement).href = track.url;