Fixed UI

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "furumusic"
-version = "0.1.4"
+version = "0.1.5"
 edition = "2024"
 description = "Reusable web-app boilerplate: auth, OIDC/SSO, admin panel, user management, i18n, PostgreSQL"
 

src/player/mod.rs

@@ -155,6 +155,25 @@ struct UserProfile {
     stats: UserStats,
 }
 
+#[derive(Debug, Serialize, JsonSchema)]
+struct PlayHistoryItem {
+    id: i64,
+    track_id: i64,
+    track_title: String,
+    release_title: Option<String>,
+    played_at: String,
+    duration_listened: Option<i32>,
+    completed: bool,
+}
+
+#[derive(Debug, Serialize, JsonSchema)]
+struct PlayHistoryPage {
+    items: Vec<PlayHistoryItem>,
+    total: i64,
+    page: i32,
+    per_page: i32,
+}
+
 #[derive(Debug, Deserialize)]
 struct HistoryEntry {
     track_id: i64,
@@ -162,6 +181,12 @@ struct HistoryEntry {
     completed: bool,
 }
 
+#[derive(Debug, Deserialize)]
+struct HistoryQuery {
+    page: Option<i32>,
+    limit: Option<i32>,
+}
+
 #[derive(Debug, Deserialize)]
 struct TracksByIdsRequest {
     ids: Vec<i64>,
@@ -362,6 +387,17 @@ struct SearchTrackRow {
     release_cover_file_id: Option<i64>,
 }
 
+#[derive(sqlx::FromRow)]
+struct PlayHistoryRow {
+    id: i64,
+    track_id: i64,
+    track_title: String,
+    release_title: Option<String>,
+    played_at: String,
+    duration_listened: Option<i32>,
+    completed: bool,
+}
+
 #[derive(sqlx::FromRow)]
 struct ReleaseInfoRow {
     id: i64,
@@ -471,7 +507,7 @@ async fn artists_handler(
            FROM furumusic__artist a
            JOIN furumusic__release_artist ra ON ra.artist_id = a.id
            JOIN furumusic__release r ON r.id = ra.release_id
-           WHERE a.is_hidden = false AND r.is_hidden = false"#,
+           WHERE a.is_hidden = false AND r.is_hidden = false AND ra.position = 0"#,
     )
     .fetch_one(pool)
     .await
@@ -489,6 +525,7 @@ async fn artists_handler(
                FROM furumusic__release_artist ra
                JOIN furumusic__release r ON r.id = ra.release_id AND r.is_hidden = false
                LEFT JOIN furumusic__track t ON t.release_id = r.id AND t.is_hidden = false
+               WHERE ra.position = 0
                GROUP BY ra.artist_id
            ) s ON s.artist_id = a.id
            WHERE a.is_hidden = false
@@ -1238,6 +1275,69 @@ async fn put_state_handler(
 // POST /api/player/history
 // ---------------------------------------------------------------------------
 
+async fn history_list_handler(
+    session: Session,
+    db: Database,
+    pool: &sqlx::PgPool,
+    query: cot::request::extractors::UrlQuery<HistoryQuery>,
+) -> cot::Result<cot::response::Response> {
+    let Some(user) = auth::get_session_user(&session, &db).await else {
+        return Ok(json_error(StatusCode::UNAUTHORIZED, "not authenticated"));
+    };
+
+    let page = query.0.page.unwrap_or(1).max(1);
+    let per_page = query.0.limit.unwrap_or(20).clamp(1, 100);
+    let offset = (page - 1) as i64 * per_page as i64;
+
+    let total: i64 =
+        sqlx::query_scalar("SELECT COUNT(*) FROM furumusic__play_history WHERE user_id = $1")
+            .bind(user.id)
+            .fetch_one(pool)
+            .await
+            .map_err(|e| cot::Error::internal(e.to_string()))?;
+
+    let rows = sqlx::query_as::<_, PlayHistoryRow>(
+        r#"SELECT ph.id,
+                  ph.track_id,
+                  t.title::text AS track_title,
+                  r.title::text AS release_title,
+                  ph.played_at::text AS played_at,
+                  ph.duration_listened,
+                  ph.completed
+           FROM furumusic__play_history ph
+           JOIN furumusic__track t ON t.id = ph.track_id
+           LEFT JOIN furumusic__release r ON r.id = t.release_id
+           WHERE ph.user_id = $1
+           ORDER BY ph.played_at DESC, ph.id DESC
+           LIMIT $2 OFFSET $3"#,
+    )
+    .bind(user.id)
+    .bind(per_page as i64)
+    .bind(offset)
+    .fetch_all(pool)
+    .await
+    .map_err(|e| cot::Error::internal(e.to_string()))?;
+
+    Json(PlayHistoryPage {
+        items: rows
+            .into_iter()
+            .map(|row| PlayHistoryItem {
+                id: row.id,
+                track_id: row.track_id,
+                track_title: row.track_title,
+                release_title: row.release_title,
+                played_at: row.played_at,
+                duration_listened: row.duration_listened,
+                completed: row.completed,
+            })
+            .collect(),
+        total,
+        page,
+        per_page,
+    })
+    .into_response()
+}
+
 async fn history_handler(
     session: Session,
     db: Database,
@@ -2625,7 +2725,29 @@ impl App for PlayerApp {
             // -- Play history --
             Route::with_handler_and_name(
                 "/history",
-                cot::router::method::post({
+                get({
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    move |session: Session,
+                          db: Database,
+                          query: cot::request::extractors::UrlQuery<HistoryQuery>| {
+                        let pool = Arc::clone(&pool);
+                        let pool_config = Arc::clone(&pool_config);
+                        async move {
+                            let pg_pool = pool
+                                .get_or_init(|| async {
+                                    sqlx::postgres::PgPoolOptions::new()
+                                        .max_connections(5)
+                                        .connect(&pool_config.database_url)
+                                        .await
+                                        .expect("player pool")
+                                })
+                                .await;
+                            history_list_handler(session, db, pg_pool, query).await
+                        }
+                    }
+                })
+                .post({
                     let pool = Arc::clone(&pool);
                     let pool_config = Arc::clone(&pool_config);
                     move |session: Session, db: Database, json: Json<HistoryEntry>| {

templates/player.html

@@ -142,6 +142,17 @@ body {
     background: var(--bg-primary);
 }
 
+button.user-stat {
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+}
+
+button.user-stat:hover {
+    background: var(--bg-hover);
+}
+
 .user-stat-value {
     display: block;
     font-size: 13px;
@@ -980,6 +991,29 @@ body {
     background: var(--bg-hover);
 }
 
+.mobile-account-popover {
+    position: absolute;
+    right: 16px;
+    top: 66px;
+    z-index: 80;
+    width: min(286px, calc(100vw - 32px));
+    padding: 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--bg-elevated);
+    box-shadow: 0 16px 36px rgba(0,0,0,0.42);
+}
+
+.mobile-account-popover .user-widget-main {
+    grid-template-columns: 36px minmax(0, 1fr);
+}
+
+.mobile-account-logout {
+    width: 100%;
+    margin-top: 12px;
+    justify-content: center;
+}
+
 .torrent-import-btn {
     display: flex;
     align-items: center;
@@ -1284,6 +1318,60 @@ body {
     overflow: hidden;
 }
 
+.history-modal {
+    width: min(620px, calc(100vw - 32px));
+    max-width: 620px;
+}
+
+.history-list {
+    margin-top: 12px;
+    overflow-y: auto;
+    max-height: min(54vh, 460px);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+}
+
+.history-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 8px 12px;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.history-row:last-child { border-bottom: 0; }
+
+.history-title {
+    min-width: 0;
+    color: var(--text-primary);
+    font-size: 13px;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.history-release,
+.history-date,
+.history-duration {
+    color: var(--text-subdued);
+    font-size: 12px;
+}
+
+.history-date,
+.history-duration {
+    text-align: right;
+    white-space: nowrap;
+}
+
+.history-pager {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    margin-top: 12px;
+}
+
 .torrent-modal-grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -1774,6 +1862,11 @@ body {
         display: none;
     }
 
+    .mobile-account-popover {
+        right: 8px;
+        top: 64px;
+    }
+
     .card-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 12px;
@@ -2017,17 +2110,17 @@ body {
                     </button>
                 </div>
                 <div class="user-stats">
-                    <div class="user-stat">
+                    <button class="user-stat" @click="$store.history.open()">
                         <span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.plays)"></span>
                         <span class="user-stat-label">plays</span>
-                    </div>
+                    </button>
                     <div class="user-stat">
                         <span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.liked_tracks)"></span>
                         <span class="user-stat-label">likes</span>
                     </div>
                     <div class="user-stat">
-                        <span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.listened_minutes)"></span>
-                        <span class="user-stat-label">min</span>
+                        <span class="user-stat-value" x-text="$store.user.duration($store.user.profile?.stats?.listened_minutes)"></span>
+                        <span class="user-stat-label">listened</span>
                     </div>
                 </div>
             </div>
@@ -2082,7 +2175,7 @@ body {
         <!-- Center Content -->
         <div class="center-content" id="center-scroll">
             <!-- Search / account bar -->
-            <div class="content-topbar">
+            <div class="content-topbar" @click.outside="$store.user.menuOpen = false">
                 <div class="search-bar">
                     <span class="search-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></span>
                     <input id="search-input" type="text" placeholder="Search artists, releases, tracks..."
@@ -2111,11 +2204,40 @@ body {
                 <button class="mobile-account-chip"
                         x-show="$store.user.profile"
                         x-cloak
-                        @click="$store.user.logout()"
-                        :title="'Log out ' + ($store.user.profile?.name || '')">
+                        @click="$store.user.menuOpen = !$store.user.menuOpen"
+                        :title="$store.user.profile?.name || 'Account'">
                     <span class="user-avatar" x-text="$store.user.initials()"></span>
                     <span class="mobile-account-name" x-text="$store.user.profile?.name || ''"></span>
                 </button>
+                <div class="mobile-account-popover"
+                     x-show="$store.user.menuOpen && $store.user.profile"
+                     x-cloak>
+                    <div class="user-widget-main">
+                        <span class="user-avatar" x-text="$store.user.initials()"></span>
+                        <div style="min-width:0">
+                            <div class="user-name" x-text="$store.user.profile?.name || ''"></div>
+                            <div class="user-role" x-text="$store.user.profile?.role || ''"></div>
+                        </div>
+                    </div>
+                    <div class="user-stats">
+                        <button class="user-stat" @click="$store.history.open(); $store.user.menuOpen = false">
+                            <span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.plays)"></span>
+                            <span class="user-stat-label">plays</span>
+                        </button>
+                        <div class="user-stat">
+                            <span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.liked_tracks)"></span>
+                            <span class="user-stat-label">likes</span>
+                        </div>
+                        <div class="user-stat">
+                            <span class="user-stat-value" x-text="$store.user.duration($store.user.profile?.stats?.listened_minutes)"></span>
+                            <span class="user-stat-label">listened</span>
+                        </div>
+                    </div>
+                    <button class="modal-btn modal-btn-primary mobile-account-logout"
+                            @click="$store.user.logout()">
+                        Log out
+                    </button>
+                </div>
             </div>
 
             <!-- Search Results -->
@@ -2719,6 +2841,50 @@ body {
             </div>
         </div>
     </template>
+
+    <!-- Play History Modal -->
+    <template x-if="$store.history.modal">
+        <div class="modal-overlay" @click.self="$store.history.close()">
+            <div class="modal-box history-modal">
+                <h3>Play history</h3>
+                <p class="torrent-message" :class="{ error: $store.history.error }"
+                   x-text="$store.history.message"></p>
+                <div class="history-list">
+                    <template x-if="!$store.history.loading && $store.history.items.length === 0">
+                        <div class="empty-state" style="padding:32px 16px">
+                            <p>No plays yet</p>
+                        </div>
+                    </template>
+                    <template x-for="item in $store.history.items" :key="item.id">
+                        <div class="history-row">
+                            <div style="min-width:0">
+                                <div class="history-title" x-text="item.track_title"></div>
+                                <div class="history-release" x-text="item.release_title || 'Unknown release'"></div>
+                            </div>
+                            <div>
+                                <div class="history-date" x-text="$store.history.date(item.played_at)"></div>
+                                <div class="history-duration" x-text="$store.history.duration(item.duration_listened)"></div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+                <div class="history-pager">
+                    <button class="modal-btn modal-btn-ghost"
+                            @click="$store.history.load($store.history.page - 1)"
+                            :disabled="$store.history.loading || $store.history.page <= 1">
+                        Previous
+                    </button>
+                    <span class="history-release"
+                          x-text="'Page ' + $store.history.page + ' of ' + $store.history.totalPages()"></span>
+                    <button class="modal-btn modal-btn-primary"
+                            @click="$store.history.load($store.history.page + 1)"
+                            :disabled="$store.history.loading || $store.history.page >= $store.history.totalPages()">
+                        Next
+                    </button>
+                </div>
+            </div>
+        </div>
+    </template>
 </div>
 
 <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
@@ -2743,6 +2909,7 @@ document.addEventListener('alpine:init', () => {
     // -----------------------------------------------------------------------
     Alpine.store('user', {
         profile: null,
+        menuOpen: false,
 
         init() {
             this.load();
@@ -2767,11 +2934,99 @@ document.addEventListener('alpine:init', () => {
             return new Intl.NumberFormat().format(value || 0);
         },
 
+        duration(minutes) {
+            let value = Number(minutes || 0);
+            const units = [
+                ['y', 525600],
+                ['mo', 43800],
+                ['d', 1440],
+                ['h', 60],
+                ['m', 1],
+            ];
+            const parts = [];
+            for (const [label, size] of units) {
+                if (value >= size) {
+                    const count = Math.floor(value / size);
+                    value -= count * size;
+                    parts.push(count + label);
+                }
+                if (parts.length >= 2) break;
+            }
+            return parts.length ? parts.join(' ') : '0m';
+        },
+
         logout() {
             window.location.href = '/logout';
         },
     });
 
+    // -----------------------------------------------------------------------
+    // Play history store
+    // -----------------------------------------------------------------------
+    Alpine.store('history', {
+        modal: false,
+        items: [],
+        page: 1,
+        perPage: 20,
+        total: 0,
+        loading: false,
+        message: '',
+        error: false,
+
+        open() {
+            this.modal = true;
+            this.load(1);
+        },
+
+        close() {
+            this.modal = false;
+        },
+
+        totalPages() {
+            return Math.max(1, Math.ceil(this.total / this.perPage));
+        },
+
+        async load(page) {
+            page = Math.max(1, page || 1);
+            this.loading = true;
+            this.error = false;
+            this.message = 'Loading history...';
+            try {
+                const res = await fetch(`/api/player/history?page=${page}&limit=${this.perPage}`);
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || 'Failed to load history');
+                this.items = data.items || [];
+                this.page = data.page || page;
+                this.perPage = data.per_page || this.perPage;
+                this.total = data.total || 0;
+                this.message = this.total ? (this.total + ' total plays') : '';
+            } catch (err) {
+                this.error = true;
+                this.message = err.message || String(err);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        date(value) {
+            if (!value) return '';
+            const date = new Date(value);
+            if (Number.isNaN(date.getTime())) return value;
+            return new Intl.DateTimeFormat(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+            }).format(date);
+        },
+
+        duration(seconds) {
+            if (!seconds) return '0:00';
+            return formatTime(Number(seconds));
+        },
+    });
+
     // -----------------------------------------------------------------------
     // Player store
     // -----------------------------------------------------------------------