better spotify card

package.json

@@ -19,6 +19,7 @@
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "astro": "^5.5.2",
+    "color.js": "^1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       astro:
         specifier: ^5.5.2
         version: 5.5.2(rollup@4.34.9)(typescript@5.8.2)
+      color.js:
+        specifier: ^1.2.0
+        version: 1.2.0
       react:
         specifier: ^19.0.0
         version: 19.0.0
@@ -954,6 +957,9 @@ packages:
   color-string@1.9.1:
     resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
 
+  color.js@1.2.0:
+    resolution: {integrity: sha512-0ajlNgWWOR7EK9N6l2h0YKsZPzMCLQG5bheCoTGpGfhkR8tB5eQNItdua1oFHDTeq9JKgSzQJqo+Gp3V/xW+Lw==}
+
   color@4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -2965,6 +2971,8 @@ snapshots:
       simple-swizzle: 0.2.2
     optional: true
 
+  color.js@1.2.0: {}
+
   color@4.2.3:
     dependencies:
       color-convert: 2.0.1

src/components/windows/mainWindow/Me.tsx

@@ -2,6 +2,11 @@ import "@css/me.css";
 import { initLanyard } from "@js/lanyard/lanyard";
 import { type LanyardPresence } from "../../../js/lanyard/types";
 import { useEffect, useState } from "react";
+import { average } from "color.js";
+
+const lightenColor = (color: string, percent: number) =>
+	`hsl(from ${color} h s ${percent.toString()}%)`;
+const api_key = "3c5623fa1abbd11c49f53ca18e992ead";
 
 export default function Me() {
 	// me-e-eeeee
@@ -12,8 +17,10 @@ export default function Me() {
 				artist: string;
 				album: string;
 				albumArt: string;
+				mainColor: string;
 				loved: boolean;
 				streak: number;
+				spotifyURL?: string;
 		  }
 		| undefined
 	>();
@@ -26,7 +33,7 @@ export default function Me() {
 		async function getLastFmTracks() {
 			const params = new URLSearchParams({
 				method: "user.getrecenttracks",
-				api_key: "3c5623fa1abbd11c49f53ca18e992ead",
+				api_key,
 				user: "nin0dev",
 				limit: "50",
 				format: "json",
@@ -47,11 +54,35 @@ export default function Me() {
 				})
 			) {
 				const currentlyPlayingTrack = res.recenttracks.track[0];
+
+				const trackExtra = (
+					await (
+						await fetch(
+							`https://ws.audioscrobbler.com/2.0/?${new URLSearchParams(
+								{
+									method: "track.getinfo",
+									api_key,
+									format: "json",
+									track: currentlyPlayingTrack.name,
+									artist: currentlyPlayingTrack.artist.name
+								}
+							)}`
+						)
+					).json()
+				).track;
+
 				setCurrentlyPlaying({
 					title: currentlyPlayingTrack.name,
 					artist: currentlyPlayingTrack.artist.name,
 					album: currentlyPlayingTrack.album["#text"],
 					albumArt: currentlyPlayingTrack.image[1]["#text"],
+					// @ts-ignore this library is poorly typed
+					mainColor: await average(
+						currentlyPlayingTrack.image[1]["#text"],
+						{
+							format: "hex"
+						}
+					),
 					loved: currentlyPlayingTrack.loved === "1",
 					streak: (() => {
 						let current = 0;
@@ -60,7 +91,8 @@ export default function Me() {
 								current++;
 							else return current;
 						}
-					})()
+					})(),
+					spotifyURL: 
 				});
 			} else {
 				setCurrentlyPlaying(undefined);
@@ -93,8 +125,22 @@ export default function Me() {
 			</div>
 
 			{currentlyPlaying && (
-				<div className="spotify-card">
+				<div
-					<h3>Listening to</h3>
+					className="spotify-card"
+					style={{
+						borderColor: lightenColor(
+							currentlyPlaying.mainColor,
+							90
+						)
+					}}
+				>
+					<h3
+						style={{
+							color: lightenColor(currentlyPlaying.mainColor, 90)
+						}}
+					>
+						Listening to
+					</h3>
 					<div
 						className="spotify-card-background"
 						style={{
@@ -118,15 +164,40 @@ export default function Me() {
 							}}
 						/>
 						<div>
-							<p style={{ margin: "0", fontWeight: "600" }}>
+							<p
+								style={{
+									margin: "0",
+									fontWeight: "600",
+									color: lightenColor(
+										currentlyPlaying.mainColor,
+										90
+									)
+								}}
+							>
 								{currentlyPlaying.title}
 							</p>
-							<p style={{ margin: "0" }}>
+							<p
-								<span className="prefix">by </span>
+								style={{
+									margin: "0",
+									color: lightenColor(
+										currentlyPlaying.mainColor,
+										85
+									)
+								}}
+								className="secondary-meta"
+							>
 								{currentlyPlaying.artist}
 							</p>
-							<p style={{ margin: "0" }}>
+							<p
-								<span className="prefix">on </span>
+								style={{
+									margin: "0",
+									color: lightenColor(
+										currentlyPlaying.mainColor,
+										85
+									)
+								}}
+								className="secondary-meta"
+							>
 								{currentlyPlaying.album}
 							</p>
 						</div>

src/css/me.css

@@ -21,8 +21,9 @@
 	h3 {
 		margin: 13px 0;
 	}
-	.prefix {
+	.secondary-meta {
-		color: #a6adc8 !important;
+		color: #a6adc8;
+		font-size: 0.85rem;
 	}
 	.spotify-card-background {
 		position: absolute;