From 7dbaa56b81cb187abc255f1783b00a676bfbadbc Mon Sep 17 00:00:00 2001
From: nin0 <personal@nin0.dev>
Date: Mon, 21 Apr 2025 15:23:16 -0400
Subject: [PATCH] loved tracks

---
 src/assets/svg/heart.svg                      |  1 +
 src/components/windows/main/SpotifyCard.astro | 15 ++++++++++++++-
 src/types/lastfm.ts                           |  5 ++++-
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/svg/heart.svg

diff --git a/src/assets/svg/heart.svg b/src/assets/svg/heart.svg
new file mode 100644
index 0000000..bf4596c
--- /dev/null
+++ b/src/assets/svg/heart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-147q-14 0-28.5-5T426-168l-69-63q-106-97-191.5-192.5T80-634q0-94 63-157t157-63q53 0 100 22.5t80 61.5q33-39 80-61.5T660-854q94 0 157 63t63 157q0 115-85 211T602-230l-68 62q-11 11-25.5 16t-28.5 5Z"/></svg>
\ No newline at end of file
diff --git a/src/components/windows/main/SpotifyCard.astro b/src/components/windows/main/SpotifyCard.astro
index 2b8081b..672e43a 100644
--- a/src/components/windows/main/SpotifyCard.astro
+++ b/src/components/windows/main/SpotifyCard.astro
@@ -1,5 +1,6 @@
 ---
 import LastFMIcon from "@assets/svg/fm.svg";
+import HeartIcon from "@assets/svg/heart.svg";
 ---
 
 <div class="spotify-card-wrapper-shadow">
@@ -20,6 +21,7 @@ import LastFMIcon from "@assets/svg/fm.svg";
 
 			<div class="spotify-card-art-shadow">
 				<div class="spotify-card-art"></div>
+				<HeartIcon id="loved-icon" />
 			</div>
 			<div class="spotfiy-card-track-info">
 				<div class="spotify-card-track-name"></div>
@@ -80,6 +82,16 @@ import LastFMIcon from "@assets/svg/fm.svg";
 
 	.spotify-card-art-shadow {
 		filter: drop-shadow(0 0 5px #00000040);
+
+		#loved-icon {
+			display: var(--loved);
+			position: absolute;
+			bottom: -6px;
+			right: -6px;
+
+			fill: var(--red);
+			filter: drop-shadow(0 0 5px #0000006d);
+		}
 	}
 
 	.spotify-card-art-wrapper {
@@ -191,7 +203,8 @@ import LastFMIcon from "@assets/svg/fm.svg";
 					"--album-art": `url("${track.albumArt}")`,
 					"--album-color": await average(track.albumArt, {
 						format: "hex"
-					})
+					}),
+					"--loved": track.loved ? "block" : "none"
 				},
 				spotifyCardWrapper.style
 			);
diff --git a/src/types/lastfm.ts b/src/types/lastfm.ts
index 1b4d2cf..b25fe56 100644
--- a/src/types/lastfm.ts
+++ b/src/types/lastfm.ts
@@ -11,6 +11,7 @@ export interface FMRawTrack {
 		size: string;
 		"#text": string;
 	}>;
+	loved: string;
 	"@attr"?: {
 		nowplaying?: string;
 	};
@@ -22,6 +23,7 @@ export interface FMTrack {
 	album: string;
 	url: string;
 	albumArt: string;
+	loved: boolean;
 }
 
 export interface FMResponse {
@@ -36,6 +38,7 @@ export function transformRawTrack(raw: FMRawTrack): FMTrack {
 		artist: raw.artist.name,
 		album: raw.album["#text"],
 		url: raw.url,
-		albumArt: raw.image[1]["#text"]
+		albumArt: raw.image[1]["#text"],
+		loved: raw.loved === "1"
 	};
 }