From 9170f9fffe9cfde56411cbfbc6ec5caceee41270 Mon Sep 17 00:00:00 2001
From: Standley Gury <standleypg@gmail.com>
Date: Mon, 13 Jul 2026 02:28:19 +0800
Subject: [PATCH] feat: Enhance user stats display with expanded recent songs
 section and improved styling

---
 src/Infrastructure/Services/UserService.cs |  2 +-
 src/UI/App/src/index.css                   | 82 ++++++++++++++++++++++
 src/UI/App/src/pages/UserStats.tsx         | 55 ++++++++-------
 3 files changed, 114 insertions(+), 25 deletions(-)

diff --git a/src/Infrastructure/Services/UserService.cs b/src/Infrastructure/Services/UserService.cs
index 47f5746..f1bb310 100644
--- a/src/Infrastructure/Services/UserService.cs
+++ b/src/Infrastructure/Services/UserService.cs
@@ -40,7 +40,7 @@ public async Task<ICollection<UserStatsDto>> GetAllUsersAsync()
                 DisplayName = u.DisplayName ?? u.Username,
                 RecentSongs = u.PlayHistories
                     .OrderByDescending(ph => ph.PlayedAt)
-                    .Take(10)
+                    .Take(20)
                     .Select(ph => new RecentSongDto
                     {
                         Title = ph.Song.Title,
diff --git a/src/UI/App/src/index.css b/src/UI/App/src/index.css
index 8160dd0..0eb74f3 100644
--- a/src/UI/App/src/index.css
+++ b/src/UI/App/src/index.css
@@ -565,6 +565,88 @@ body {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
+/* ===== Recently Played (expanded user row) ===== */
+
+.table tr.recent-songs-row:hover {
+  background: transparent;
+}
+
+.recent-songs {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 0.75rem;
+  background: rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+
+.recent-songs-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.65rem 1rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.06);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.recent-songs-list {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.recent-song-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.55rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.recent-song-item:last-child {
+  border-bottom: none;
+}
+
+.recent-song-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.recent-song-rank {
+  flex-shrink: 0;
+  width: 1.5rem;
+  text-align: right;
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.recent-song-title {
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.recent-song-item .play-count {
+  flex-shrink: 0;
+  min-width: 3rem;
+  text-align: center;
+}
+
+.recent-song-date {
+  flex-shrink: 0;
+  width: 6.5rem;
+  text-align: right;
+  font-size: 0.8rem;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.5);
+}
+
 /* ===== Radio Admin ===== */
 
 .add-button {
diff --git a/src/UI/App/src/pages/UserStats.tsx b/src/UI/App/src/pages/UserStats.tsx
index 1bd8e33..bd648fa 100644
--- a/src/UI/App/src/pages/UserStats.tsx
+++ b/src/UI/App/src/pages/UserStats.tsx
@@ -149,39 +149,46 @@ export function UserStats() {
                     </td>
                   </tr>
                   {expandedUser === user.username && (
-                    <tr>
+                    <tr className="recent-songs-row">
                       <td colSpan={6}>
                         {user.recentSongs.length === 0 ? (
                           <span className="song-artist">
                             No songs played yet.
                           </span>
                         ) : (
-                          <table className="table">
-                            <thead>
-                              <tr>
-                                <th>Recently Played</th>
-                                <th>Plays</th>
-                                <th>Last Played</th>
-                              </tr>
-                            </thead>
-                            <tbody>
-                              {user.recentSongs.map((song, songIndex) => (
-                                <tr key={songIndex}>
-                                  <td>
-                                    <div className="song-title">
-                                      {cleanTitle(song.title)}
-                                    </div>
-                                  </td>
-                                  <td>
+                          <div className="recent-songs">
+                            <div className="recent-songs-header">
+                              <span>Recently Played</span>
+                              <span>Plays / Last Played</span>
+                            </div>
+                            <div className="recent-songs-list">
+                              {user.recentSongs.map((song, songIndex) => {
+                                const title = cleanTitle(song.title);
+                                return (
+                                  <div
+                                    className="recent-song-item"
+                                    key={songIndex}
+                                  >
+                                    <span className="recent-song-rank">
+                                      {songIndex + 1}
+                                    </span>
+                                    <span
+                                      className="recent-song-title"
+                                      title={title}
+                                    >
+                                      {title}
+                                    </span>
                                     <span className="play-count">
                                       {song.totalPlays}
                                     </span>
-                                  </td>
-                                  <td>{song.playedAt.split('T')[0]}</td>
-                                </tr>
-                              ))}
-                            </tbody>
-                          </table>
+                                    <span className="recent-song-date">
+                                      {song.playedAt.split('T')[0]}
+                                    </span>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
                         )}
                       </td>
                     </tr>