From eb35464cd318457f536ae9713c571fdc684f8ae4 Mon Sep 17 00:00:00 2001
From: Tsiry Sandratraina <tsiry.sndr@rocksky.app>
Date: Sun, 1 Feb 2026 22:35:35 +0300
Subject: [PATCH] Add Recent Scrobbles embed and header option

Introduce RecentScrobblesEmbedPage: renders a table of recent
scrobbles with album art, links to rocksky.app, title/artist and
relative timestamps. Add Header's withoutRange prop (used by the
embed). Use dayjs with the relativeTime plugin for fromNow display and
uuid v4 for row keys. Normalize createdAt to ensure a trailing Z.
---
 apps/embed/src/components/Header/Header.tsx   |  9 ++-
 .../src/embeds/RecentScrobblesEmbedPage.tsx   | 58 +++++++++++++++++++
 2 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/apps/embed/src/components/Header/Header.tsx b/apps/embed/src/components/Header/Header.tsx
index f5a2ca60..ee97c5fb 100644
--- a/apps/embed/src/components/Header/Header.tsx
+++ b/apps/embed/src/components/Header/Header.tsx
@@ -3,6 +3,7 @@ import type { Profile } from "../../types/profile";
 
 export type HeaderProps = {
   profile: Profile;
+  withoutRange?: boolean;
 };
 
 function Header(props: HeaderProps) {
@@ -30,8 +31,12 @@ function Header(props: HeaderProps) {
           >
             <div className="text-[14px] mt-[-6px]">@{props.profile.handle}</div>
           </a>
-          <span className="text-[14px] mt-[-3px] ml-[5px] mr-[5px]">|</span>
-          <span className="text-[13px] mt-[-3px]">{range}</span>
+          {!props.withoutRange && (
+            <>
+              <span className="text-[14px] mt-[-3px] ml-[5px] mr-[5px]">|</span>
+              <span className="text-[13px] mt-[-3px]">{range}</span>
+            </>
+          )}
         </div>
 
         <a
diff --git a/apps/embed/src/embeds/RecentScrobblesEmbedPage.tsx b/apps/embed/src/embeds/RecentScrobblesEmbedPage.tsx
index 0468734a..bfaa7a91 100644
--- a/apps/embed/src/embeds/RecentScrobblesEmbedPage.tsx
+++ b/apps/embed/src/embeds/RecentScrobblesEmbedPage.tsx
@@ -1,5 +1,11 @@
+import { v4 } from "uuid";
+import Header from "../components/Header";
 import type { Profile } from "../types/profile";
 import type { Scrobble } from "../types/scrobble";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
 
 export type RecentScrobblesEmbedPageProps = {
   profile: Profile;
@@ -9,7 +15,59 @@ export type RecentScrobblesEmbedPageProps = {
 export function RecentScrobblesEmbedPage(props: RecentScrobblesEmbedPageProps) {
   return (
     <div className="p-[15px]">
+      <Header profile={props.profile} withoutRange />
       <h2 className="m-[0px]">Recent Listens</h2>
+
+      <div className="w-full overflow-x-auto">
+        <table className="table-borderless table">
+          <tbody>
+            {props.scrobbles.map((scrobble, index) => (
+              <tr key={v4()}>
+                <td>
+                  <div className="flex flex-row items-center">
+                    <a
+                      href={`https://rocksky.app/${scrobble.uri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
+                      target="_blank"
+                      className="flex flex-row items-center no-underline text-inherit"
+                    >
+                      {scrobble.albumArt && (
+                        <img
+                          className="max-w-[60px] max-h-[60px] mr-[20px] rounded-[5px]"
+                          src={scrobble.albumArt!}
+                        />
+                      )}
+                      {!scrobble.albumArt && (
+                        <div className="w-[60px] h-[60px] bg-[var(--color-avatar-background)] flex items-center justify-center mr-[20px]">
+                          <div className="h-[30px] w-[30px]"></div>
+                        </div>
+                      )}
+                      <div>
+                        <div>{scrobble.title}</div>
+                        <a
+                          href={`https://rocksky.app/${scrobble.artistUri?.split("at://")[1]?.replace("app.rocksky.", "")}`}
+                          target="_blank"
+                          className="no-underline text-inherit"
+                        >
+                          <div className="font-rockford-light opacity-60">
+                            {scrobble.albumArtist}
+                          </div>
+                        </a>
+                      </div>
+                    </a>
+                  </div>
+                </td>
+                <td className="font-rockford-light opacity-60">
+                  {dayjs(
+                    scrobble.createdAt.endsWith("Z")
+                      ? scrobble.createdAt
+                      : `${scrobble.createdAt}Z`,
+                  ).fromNow()}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
-- 
2.51.2