Reworked main page content

Cargo.toml

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

src/player/mod.rs

@@ -138,6 +138,21 @@ struct SearchResults {
     tracks: Vec<TrackItem>,
 }
 
+#[derive(Debug, Serialize, JsonSchema)]
+struct UserStats {
+    liked_tracks: i64,
+    playlists: i64,
+    plays: i64,
+    listened_minutes: i64,
+}
+
+#[derive(Debug, Serialize, JsonSchema)]
+struct UserProfile {
+    name: String,
+    role: String,
+    stats: UserStats,
+}
+
 #[derive(Debug, Deserialize)]
 struct HistoryEntry {
     track_id: i64,
@@ -371,6 +386,61 @@ pub struct PlayerPageTemplate {
     pub t: &'static Translations,
 }
 
+// ---------------------------------------------------------------------------
+// GET /api/player/me
+// ---------------------------------------------------------------------------
+
+async fn me_handler(
+    session: Session,
+    db: Database,
+    pool: &sqlx::PgPool,
+) -> 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 liked_tracks: (i64,) =
+        sqlx::query_as("SELECT COUNT(*) FROM furumusic__user_liked_track WHERE user_id = $1")
+            .bind(user.id)
+            .fetch_one(pool)
+            .await
+            .map_err(|e| cot::Error::internal(e.to_string()))?;
+
+    let playlists: (i64,) =
+        sqlx::query_as("SELECT COUNT(*) FROM furumusic__playlist WHERE owner_id = $1")
+            .bind(user.id)
+            .fetch_one(pool)
+            .await
+            .map_err(|e| cot::Error::internal(e.to_string()))?;
+
+    let plays: (i64,) =
+        sqlx::query_as("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 listened_seconds: Option<i64> = sqlx::query_scalar(
+        "SELECT COALESCE(SUM(duration_listened), 0) FROM furumusic__play_history WHERE user_id = $1",
+    )
+    .bind(user.id)
+    .fetch_one(pool)
+    .await
+    .map_err(|e| cot::Error::internal(e.to_string()))?;
+
+    Json(UserProfile {
+        name: user.name,
+        role: user.role.code().to_string(),
+        stats: UserStats {
+            liked_tracks: liked_tracks.0,
+            playlists: playlists.0,
+            plays: plays.0,
+            listened_minutes: listened_seconds.unwrap_or(0) / 60,
+        },
+    })
+    .into_response()
+}
+
 // ---------------------------------------------------------------------------
 // GET /api/player/artists?page=N&limit=N
 // ---------------------------------------------------------------------------
@@ -1954,6 +2024,31 @@ impl App for PlayerApp {
         let pool: Arc<tokio::sync::OnceCell<sqlx::PgPool>> = Arc::new(tokio::sync::OnceCell::new());
 
         Router::with_urls([
+            // -- Current user profile --
+            Route::with_handler_and_name(
+                "/me",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    get(move |session: Session, db: Database| {
+                        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;
+                            me_handler(session, db, pg_pool).await
+                        }
+                    })
+                },
+                "player_me",
+            ),
             // -- Artists (paginated) --
             Route::with_handler_and_name(
                 "/artists",

templates/player.html

@@ -19,11 +19,18 @@
     --sidebar-width: 240px;
     --queue-width: 300px;
     --border-color: #282828;
+    --safe-bottom: env(safe-area-inset-bottom, 0px);
+    --player-bar-space: calc(var(--player-height) + var(--safe-bottom));
 }
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
-html, body { height: 100%; overflow: hidden; }
+[x-cloak] { display: none !important; }
+
+html, body {
+    height: 100%;
+    overflow: hidden;
+}
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -36,11 +43,14 @@ body {
     display: flex;
     flex-direction: column;
     height: 100vh;
+    height: 100dvh;
+    min-height: 0;
 }
 
 .main-content {
     display: flex;
     flex: 1;
+    min-height: 0;
     overflow: hidden;
 }
 
@@ -55,6 +65,100 @@ body {
     overflow: hidden;
 }
 
+.user-widget {
+    padding: 14px 12px 12px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.user-widget-main {
+    display: grid;
+    grid-template-columns: 36px minmax(0, 1fr) 32px;
+    align-items: center;
+    gap: 10px;
+}
+
+.user-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    font-size: 15px;
+    text-transform: uppercase;
+}
+
+.user-name {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.user-role {
+    margin-top: 2px;
+    font-size: 11px;
+    color: var(--text-subdued);
+    text-transform: uppercase;
+}
+
+.user-logout-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-subdued);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s, color 0.15s;
+}
+
+.user-logout-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.user-logout-btn svg { width: 17px; height: 17px; }
+
+.user-stats {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 6px;
+    margin-top: 12px;
+}
+
+.user-stat {
+    min-width: 0;
+    padding: 7px 6px;
+    border-radius: 6px;
+    background: var(--bg-primary);
+}
+
+.user-stat-value {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: var(--text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.user-stat-label {
+    display: block;
+    margin-top: 2px;
+    font-size: 10px;
+    color: var(--text-subdued);
+}
+
 .sidebar-header {
     padding: 16px;
     display: flex;
@@ -138,9 +242,11 @@ body {
 /* Center Content */
 .center-content {
     flex: 1;
+    min-width: 0;
     overflow-y: auto;
     padding: 24px;
     background: var(--bg-primary);
+    -webkit-overflow-scrolling: touch;
 }
 
 .center-content::-webkit-scrollbar { width: 8px; }
@@ -247,6 +353,7 @@ body {
 .card-subtitle {
     font-size: 12px;
     color: var(--text-subdued);
+    line-height: 1.35;
 }
 
 /* Artist detail header */
@@ -355,6 +462,17 @@ body {
 }
 
 .track-info .track-title { font-size: 14px; font-weight: 500; }
+.track-info {
+    min-width: 0;
+    overflow: hidden;
+}
+.track-info .track-title,
+.track-info .track-artists-inline,
+.track-album {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .track-info .track-artists-inline {
     font-size: 12px;
     color: var(--text-subdued);
@@ -586,14 +704,15 @@ body {
 
 /* Player Bar */
 .player-bar {
-    height: var(--player-height);
+    height: var(--player-bar-space);
     background: var(--bg-secondary);
     border-top: 1px solid var(--border-color);
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
     align-items: center;
-    padding: 0 16px;
+    padding: 0 16px var(--safe-bottom);
     z-index: 10;
+    flex-shrink: 0;
 }
 
 .player-now-playing {
@@ -601,8 +720,11 @@ body {
     align-items: center;
     gap: 12px;
     overflow: hidden;
+    min-width: 0;
 }
 
+.player-now-playing > div { min-width: 0; }
+
 .player-cover {
     width: 56px;
     height: 56px;
@@ -618,7 +740,10 @@ body {
 .player-cover img { width: 100%; height: 100%; object-fit: cover; }
 .player-cover svg { width: 24px; height: 24px; color: var(--text-subdued); }
 
-.player-track-info { overflow: hidden; }
+.player-track-info {
+    overflow: hidden;
+    min-width: 0;
+}
 .player-track-title {
     font-size: 13px;
     font-weight: 500;
@@ -640,6 +765,7 @@ body {
     flex-direction: column;
     align-items: center;
     gap: 4px;
+    min-width: 0;
 }
 
 .player-buttons {
@@ -731,6 +857,7 @@ body {
     align-items: center;
     justify-content: flex-end;
     gap: 8px;
+    min-width: 0;
 }
 
 .volume-control {
@@ -1123,9 +1250,353 @@ body {
 .sidebar-create-btn svg { width: 16px; height: 16px; }
 
 /* Responsive */
+@media (max-width: 1200px) {
+    :root {
+        --sidebar-width: 220px;
+        --queue-width: 280px;
+    }
+
+    .center-content { padding: 20px; }
+    .card-grid {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: 16px;
+    }
+    .artist-header .artist-img,
+    .release-header .release-cover {
+        width: 168px;
+        height: 168px;
+    }
+    .release-meta .release-title { font-size: 32px; }
+}
+
 @media (max-width: 900px) {
+    :root {
+        --player-height: 118px;
+        --player-bar-space: calc(var(--player-height) + var(--safe-bottom));
+    }
+
     .sidebar-left { display: none; }
-    .queue-panel { display: none; }
+
+    .center-content {
+        padding: 16px;
+    }
+
+    .card-grid {
+        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
+        gap: 14px;
+    }
+
+    .card {
+        padding: 10px;
+        border-radius: 7px;
+    }
+
+    .card-title { font-size: 13px; }
+    .card-subtitle { font-size: 11px; }
+    .card-play-btn,
+    .card-enqueue-btn,
+    .track-actions,
+    .playlist-item-actions,
+    .queue-track-actions,
+    .queue-drag-handle {
+        opacity: 1;
+        transform: none;
+    }
+
+    .artist-header,
+    .release-header {
+        align-items: center;
+        gap: 16px;
+    }
+
+    .artist-header .artist-img,
+    .release-header .release-cover {
+        width: 128px;
+        height: 128px;
+    }
+
+    .artist-header .artist-name,
+    .artist-header .artist-name[style] {
+        font-size: 34px !important;
+    }
+
+    .release-meta .release-title { font-size: 28px; }
+
+    .track-list-header,
+    .track-row {
+        grid-template-columns: 32px minmax(0, 1fr) auto 54px;
+        padding: 8px 10px;
+    }
+
+    .track-list-header span:nth-child(3),
+    .track-row > span:nth-child(3) {
+        display: none;
+    }
+
+    .track-actions {
+        justify-content: flex-end;
+    }
+
+    .queue-panel {
+        position: fixed;
+        left: 12px;
+        right: 12px;
+        top: 24dvh;
+        bottom: calc(var(--player-bar-space) + 12px);
+        width: auto;
+        min-width: 0;
+        border: 1px solid var(--border-color);
+        border-radius: 10px;
+        box-shadow: 0 18px 60px rgba(0,0,0,0.55);
+        z-index: 30;
+        display: flex;
+    }
+
+    .queue-panel.hidden {
+        display: none;
+    }
+
+    .queue-track {
+        padding: 10px 8px;
+    }
+
+    .player-bar {
+        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-rows: auto auto;
+        gap: 8px 12px;
+        align-items: center;
+        padding: 10px 12px calc(10px + var(--safe-bottom));
+    }
+
+    .player-now-playing {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .player-cover {
+        width: 44px;
+        height: 44px;
+    }
+
+    .player-controls {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        gap: 6px;
+        width: 100%;
+    }
+
+    .player-buttons {
+        gap: 18px;
+    }
+
+    .player-btn {
+        min-width: 32px;
+        min-height: 32px;
+    }
+
+    .player-btn-play {
+        width: 38px;
+        height: 38px;
+    }
+
+    .player-timeline {
+        max-width: none;
+        gap: 6px;
+    }
+
+    .player-time {
+        min-width: 34px;
+        font-size: 10px;
+    }
+
+    .player-right {
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .volume-control {
+        display: none;
+    }
+
+    .queue-toggle-btn {
+        min-width: 36px;
+        min-height: 36px;
+    }
+}
+
+@media (max-width: 560px) {
+    :root {
+        --player-height: 132px;
+        --player-bar-space: calc(var(--player-height) + var(--safe-bottom));
+    }
+
+    .center-content {
+        padding: 12px;
+    }
+
+    .section-title {
+        font-size: 22px;
+        margin-bottom: 14px;
+    }
+
+    .search-bar {
+        margin-bottom: 14px;
+    }
+
+    .search-bar input {
+        padding-top: 11px;
+        padding-bottom: 11px;
+        font-size: 16px;
+    }
+
+    .search-bar .search-shortcut {
+        display: none;
+    }
+
+    .card-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 12px;
+    }
+
+    .search-artists-row,
+    .search-releases-row {
+        gap: 12px;
+        margin-left: -12px;
+        margin-right: -12px;
+        padding-left: 12px;
+        padding-right: 12px;
+        scroll-padding-left: 12px;
+    }
+
+    .search-artist-card,
+    .search-release-card {
+        width: 132px;
+    }
+
+    .artist-header,
+    .release-header {
+        display: grid;
+        grid-template-columns: 96px minmax(0, 1fr);
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 20px;
+    }
+
+    .artist-header .artist-img,
+    .release-header .release-cover {
+        width: 96px;
+        height: 96px;
+    }
+
+    .artist-header .artist-img svg,
+    .release-header .release-cover svg {
+        width: 44px;
+        height: 44px;
+    }
+
+    .artist-header .artist-name,
+    .artist-header .artist-name[style] {
+        font-size: 26px !important;
+        line-height: 1.12 !important;
+    }
+
+    .artist-stats {
+        font-size: 12px;
+        gap: 5px;
+    }
+
+    .release-meta {
+        min-width: 0;
+    }
+
+    .release-meta .release-title {
+        font-size: 22px;
+        line-height: 1.15;
+        overflow-wrap: anywhere;
+    }
+
+    .release-actions {
+        flex-wrap: wrap;
+    }
+
+    .release-action-btn {
+        padding: 8px 12px;
+    }
+
+    .track-list-header {
+        display: none;
+    }
+
+    .track-row {
+        grid-template-columns: 26px minmax(0, 1fr) auto;
+        gap: 6px;
+        padding: 10px 6px;
+    }
+
+    .track-row > span:nth-child(3),
+    .track-duration {
+        display: none;
+    }
+
+    .track-actions {
+        gap: 0;
+    }
+
+    .track-action-btn,
+    .like-btn {
+        padding: 6px;
+    }
+
+    .track-action-btn svg,
+    .like-btn svg {
+        width: 17px;
+        height: 17px;
+    }
+
+    .modal-overlay {
+        align-items: flex-end;
+        padding: 12px;
+    }
+
+    .modal-box {
+        width: 100%;
+        min-width: 0;
+        max-width: none;
+        max-height: min(76dvh, 560px);
+        border-radius: 10px;
+    }
+
+    .queue-panel {
+        left: 8px;
+        right: 8px;
+        top: 18dvh;
+        bottom: calc(var(--player-bar-space) + 8px);
+    }
+
+    .player-bar {
+        gap: 8px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    .player-track-title { font-size: 12px; }
+    .player-track-artist { font-size: 10px; }
+    .player-buttons { gap: 10px; }
+
+    .player-btn {
+        min-width: 30px;
+        min-height: 30px;
+    }
+
+    .player-btn svg {
+        width: 17px;
+        height: 17px;
+    }
+
+    .player-btn-play {
+        width: 36px;
+        height: 36px;
+    }
 }
 
 /* Scrollbar for queue and sidebar */
@@ -1150,6 +1621,36 @@ body {
     <div class="main-content">
         <!-- Left Sidebar -->
         <div class="sidebar-left">
+            <div class="user-widget" x-show="$store.user.profile" x-cloak>
+                <div class="user-widget-main">
+                    <div class="user-avatar" x-text="$store.user.initials()"></div>
+                    <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>
+                    <button class="user-logout-btn" @click="$store.user.logout()" title="Log out">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
+                            <polyline points="16 17 21 12 16 7"/>
+                            <line x1="21" y1="12" x2="9" y2="12"/>
+                        </svg>
+                    </button>
+                </div>
+                <div class="user-stats">
+                    <div class="user-stat">
+                        <span class="user-stat-value" x-text="$store.user.format($store.user.profile?.stats?.plays)"></span>
+                        <span class="user-stat-label">plays</span>
+                    </div>
+                    <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>
+                    </div>
+                </div>
+            </div>
             <div class="sidebar-header">
                 <h2>Library</h2>
             </div>
@@ -1370,7 +1871,7 @@ body {
                             </template>
                         </div>
                         <div>
-                            <div class="artist-header .artist-name" x-text="$store.library.currentArtist.name" style="font-size:48px;font-weight:900;line-height:1.1"></div>
+                            <div class="artist-name" x-text="$store.library.currentArtist.name"></div>
                             <div class="artist-stats">
                                 <span x-text="$store.library.currentArtist.releases.length + ' releases'"></span>
                                 <span>•</span>
@@ -1742,6 +2243,40 @@ document.addEventListener('alpine:init', () => {
     const audio = new Audio();
     audio.preload = 'auto';
 
+    // -----------------------------------------------------------------------
+    // User store
+    // -----------------------------------------------------------------------
+    Alpine.store('user', {
+        profile: null,
+
+        init() {
+            this.load();
+        },
+
+        async load() {
+            try {
+                const res = await fetch('/api/player/me');
+                if (!res.ok) throw new Error('failed');
+                this.profile = await res.json();
+            } catch {
+                this.profile = null;
+            }
+        },
+
+        initials() {
+            const name = this.profile?.name || '';
+            return name.trim().charAt(0) || '?';
+        },
+
+        format(value) {
+            return new Intl.NumberFormat().format(value || 0);
+        },
+
+        logout() {
+            window.location.href = '/logout';
+        },
+    });
+
     // -----------------------------------------------------------------------
     // Player store
     // -----------------------------------------------------------------------