ADMIN: added releases and artists management form

Cargo.lock

@@ -1418,7 +1418,7 @@ checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c"
 
 [[package]]
 name = "furumusic"
-version = "0.1.18"
+version = "0.1.20"
 dependencies = [
  "anyhow",
  "async-trait",

Cargo.toml

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

src/admin/mod.rs

@@ -428,6 +428,88 @@ impl App for AdminApp {
                 },
                 "admin_v2_library_item",
             ),
+            Route::with_handler_and_name(
+                "/v2/api/library/item/detail",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    get(move |session: Session,
+                              db: Database,
+                              query: UrlQuery<v2::LibraryItemDetailQuery>| {
+                        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("admin pool")
+                                })
+                                .await;
+                            v2::library_item_detail(session, db, pg_pool, query.0).await
+                        }
+                    })
+                },
+                "admin_v2_library_item_detail",
+            ),
+            Route::with_handler_and_name(
+                "/v2/api/library/item/image",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    cot::router::method::post(
+                        move |session: Session,
+                              db: Database,
+                              json: Json<v2::SetLibraryImageRequest>| {
+                            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("admin pool")
+                                    })
+                                    .await;
+                                v2::set_library_item_image(session, db, pg_pool, json).await
+                            }
+                        },
+                    )
+                },
+                "admin_v2_library_item_image",
+            ),
+            Route::with_handler_and_name(
+                "/v2/api/library/item/upload-image",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    cot::router::method::post(
+                        move |session: Session,
+                              db: Database,
+                              json: Json<v2::UploadLibraryImageRequest>| {
+                            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("admin pool")
+                                    })
+                                    .await;
+                                v2::upload_library_item_image(session, db, pg_pool, json).await
+                            }
+                        },
+                    )
+                },
+                "admin_v2_library_item_upload_image",
+            ),
             Route::with_handler_and_name(
                 "/v2/api/library/bulk",
                 {

src/admin/v2.rs

@@ -1,4 +1,4 @@
-use std::collections::HashMap;
+use std::collections::{HashMap, HashSet};
 
 use cot::db::{Database, Model};
 use cot::html::Html;
@@ -67,6 +67,31 @@ pub(super) struct UpdateLibraryItemRequest {
     id: i64,
     title: String,
     hidden: bool,
+    release_type: Option<String>,
+    year: Option<String>,
+    artist_ids: Option<Vec<i64>>,
+}
+
+#[derive(Debug, Deserialize)]
+pub(super) struct LibraryItemDetailQuery {
+    kind: String,
+    id: i64,
+}
+
+#[derive(Debug, Deserialize)]
+pub(super) struct SetLibraryImageRequest {
+    kind: String,
+    id: i64,
+    media_file_id: Option<i64>,
+}
+
+#[derive(Debug, Deserialize)]
+pub(super) struct UploadLibraryImageRequest {
+    kind: String,
+    id: i64,
+    data: String,
+    filename: String,
+    mime_type: String,
 }
 
 #[derive(Debug, Clone, Deserialize, Serialize, JsonSchema)]
@@ -348,6 +373,32 @@ struct LibraryItemDto {
     updated_at: Option<String>,
 }
 
+#[derive(Debug, Serialize, JsonSchema)]
+struct LibraryItemDetailDto {
+    item: LibraryItemDto,
+    title: String,
+    hidden: bool,
+    release_type: Option<String>,
+    year: Option<i32>,
+    current_image_url: Option<String>,
+    selected_artist_ids: Vec<i64>,
+    artists: Vec<ArtistOptionDto>,
+    available_covers: Vec<AvailableCoverDto>,
+}
+
+#[derive(Debug, Serialize, JsonSchema)]
+struct ArtistOptionDto {
+    id: i64,
+    name: String,
+}
+
+#[derive(Debug, Serialize, JsonSchema)]
+struct AvailableCoverDto {
+    media_file_id: i64,
+    release_title: String,
+    cover_url: String,
+}
+
 #[derive(Debug, sqlx::FromRow)]
 struct IdRow {
     id: i64,
@@ -903,6 +954,28 @@ pub async fn library(
     Json(page).into_response()
 }
 
+pub async fn library_item_detail(
+    session: Session,
+    db: Database,
+    pool: &PgPool,
+    query: LibraryItemDetailQuery,
+) -> cot::Result<cot::response::Response> {
+    if let Err(response) = require_admin_json(&session, &db).await {
+        return Ok(response);
+    }
+    let kind = normalize_library_kind(Some(query.kind.as_str()));
+    let Some(item) = fetch_library_item(pool, &kind, query.id)
+        .await
+        .map_err(|e| cot::Error::internal(e.to_string()))?
+    else {
+        return Ok(json_error(StatusCode::NOT_FOUND, "library item not found"));
+    };
+    let detail = load_library_item_detail(pool, &kind, item)
+        .await
+        .map_err(|e| cot::Error::internal(e.to_string()))?;
+    Json(detail).into_response()
+}
+
 pub async fn update_library_item(
     session: Session,
     db: Database,
@@ -936,13 +1009,27 @@ pub async fn update_library_item(
             .await
         }
         "releases" => {
+            let release_type = body
+                .release_type
+                .as_deref()
+                .map(str::trim)
+                .filter(|value| !value.is_empty())
+                .unwrap_or("album");
+            let year = body
+                .year
+                .as_deref()
+                .map(str::trim)
+                .filter(|value| !value.is_empty())
+                .and_then(|value| value.parse::<i32>().ok());
             sqlx::query(
                 "UPDATE furumusic__release \
-                 SET title = $1, title_sort = $2, is_hidden = $3, updated_at = $4 \
+                 SET title = $1, title_sort = $2, release_type = $3, year = $4, is_hidden = $5, updated_at = $6 \
-                 WHERE id = $5",
+                 WHERE id = $7",
             )
             .bind(title)
             .bind(normalize_name(title))
+            .bind(release_type)
+            .bind(year)
             .bind(body.hidden)
             .bind(&now)
             .bind(body.id)
@@ -970,6 +1057,28 @@ pub async fn update_library_item(
     if affected == 0 {
         return Ok(json_error(StatusCode::NOT_FOUND, "library item not found"));
     }
+    if kind == "releases" {
+        if let Some(mut artist_ids) = body.artist_ids {
+            let mut seen_artist_ids = HashSet::new();
+            artist_ids.retain(|id| *id > 0 && seen_artist_ids.insert(*id));
+            sqlx::query("DELETE FROM furumusic__release_artist WHERE release_id = $1")
+                .bind(body.id)
+                .execute(pool)
+                .await
+                .map_err(|e| cot::Error::internal(e.to_string()))?;
+            for (position, artist_id) in artist_ids.iter().enumerate() {
+                sqlx::query(
+                    "INSERT INTO furumusic__release_artist (release_id, artist_id, position) VALUES ($1, $2, $3)",
+                )
+                .bind(body.id)
+                .bind(*artist_id)
+                .bind(position as i32)
+                .execute(pool)
+                .await
+                .map_err(|e| cot::Error::internal(e.to_string()))?;
+            }
+        }
+    }
 
     let Some(item) = fetch_library_item(pool, &kind, body.id)
         .await
@@ -981,6 +1090,128 @@ pub async fn update_library_item(
     Json(item).into_response()
 }
 
+pub async fn set_library_item_image(
+    session: Session,
+    db: Database,
+    pool: &PgPool,
+    Json(body): Json<SetLibraryImageRequest>,
+) -> cot::Result<cot::response::Response> {
+    if let Err(response) = require_admin_json(&session, &db).await {
+        return Ok(response);
+    }
+    let kind = normalize_library_kind(Some(body.kind.as_str()));
+    if kind != "artists" && kind != "releases" {
+        return Ok(json_error(StatusCode::BAD_REQUEST, "unsupported kind"));
+    }
+    if let Some(fid) = body.media_file_id {
+        let exists: Option<i64> = sqlx::query_scalar(
+            "SELECT id FROM furumusic__media_file WHERE id = $1 AND file_type = 'cover_art'",
+        )
+        .bind(fid)
+        .fetch_optional(pool)
+        .await
+        .map_err(|e| cot::Error::internal(e.to_string()))?;
+        if exists.is_none() {
+            return Ok(json_error(StatusCode::NOT_FOUND, "image not found"));
+        }
+    }
+    let now = now_string();
+    let result = if kind == "releases" {
+        sqlx::query(
+            "UPDATE furumusic__release SET cover_file_id = $1, updated_at = $2 WHERE id = $3",
+        )
+        .bind(body.media_file_id)
+        .bind(&now)
+        .bind(body.id)
+        .execute(pool)
+        .await
+    } else {
+        sqlx::query(
+            "UPDATE furumusic__artist SET image_file_id = $1, updated_at = $2 WHERE id = $3",
+        )
+        .bind(body.media_file_id)
+        .bind(&now)
+        .bind(body.id)
+        .execute(pool)
+        .await
+    }
+    .map_err(|e| cot::Error::internal(e.to_string()))?;
+    if result.rows_affected() == 0 {
+        return Ok(json_error(StatusCode::NOT_FOUND, "library item not found"));
+    }
+    Json(serde_json::json!({ "ok": true })).into_response()
+}
+
+pub async fn upload_library_item_image(
+    session: Session,
+    db: Database,
+    pool: &PgPool,
+    Json(body): Json<UploadLibraryImageRequest>,
+) -> cot::Result<cot::response::Response> {
+    if let Err(response) = require_admin_json(&session, &db).await {
+        return Ok(response);
+    }
+    let kind = normalize_library_kind(Some(body.kind.as_str()));
+    if kind != "artists" && kind != "releases" {
+        return Ok(json_error(StatusCode::BAD_REQUEST, "unsupported kind"));
+    }
+    let storage_dir = AppConfig::load_with_db(&db).await.0.agent_storage_dir;
+    if storage_dir.trim().is_empty() {
+        return Err(cot::Error::internal("agent_storage_dir is not configured"));
+    }
+    use base64::Engine;
+    let image_data = base64::engine::general_purpose::STANDARD
+        .decode(body.data.trim())
+        .map_err(|e| cot::Error::internal(format!("invalid base64: {e}")))?;
+    if image_data.is_empty() {
+        return Ok(json_error(StatusCode::BAD_REQUEST, "image is empty"));
+    }
+    let title: Option<String> = if kind == "releases" {
+        sqlx::query_scalar("SELECT title::text FROM furumusic__release WHERE id = $1")
+    } else {
+        sqlx::query_scalar("SELECT name::text FROM furumusic__artist WHERE id = $1")
+    }
+    .bind(body.id)
+    .fetch_optional(pool)
+    .await
+    .map_err(|e| cot::Error::internal(e.to_string()))?;
+    let Some(title) = title else {
+        return Ok(json_error(StatusCode::NOT_FOUND, "library item not found"));
+    };
+    let cover = crate::agent::cover_art::CoverImage {
+        data: image_data,
+        mime_type: body.mime_type,
+        source: crate::agent::cover_art::CoverSource::FolderFile(std::path::PathBuf::from(
+            body.filename,
+        )),
+    };
+    let media_file_id = crate::agent::cover_art::save_cover_to_storage(
+        &db,
+        pool,
+        &storage_dir,
+        &title,
+        if kind == "artists" {
+            "__artist_image__"
+        } else {
+            "__release_cover__"
+        },
+        &cover,
+    )
+    .await
+    .map_err(|e| cot::Error::internal(format!("failed to save image: {e}")))?;
+    set_library_item_image(
+        session,
+        db,
+        pool,
+        Json(SetLibraryImageRequest {
+            kind,
+            id: body.id,
+            media_file_id: Some(media_file_id),
+        }),
+    )
+    .await
+}
+
 pub async fn bulk_library(
     session: Session,
     db: Database,
@@ -1619,6 +1850,103 @@ async fn fetch_library_item(
     Ok(row.map(|row| library_item_dto(kind, row)))
 }
 
+async fn load_library_item_detail(
+    pool: &PgPool,
+    kind: &str,
+    item: LibraryItemDto,
+) -> anyhow::Result<LibraryItemDetailDto> {
+    let mut detail = LibraryItemDetailDto {
+        title: item.title.clone(),
+        hidden: item.is_hidden.unwrap_or(false),
+        release_type: None,
+        year: None,
+        current_image_url: None,
+        selected_artist_ids: Vec::new(),
+        artists: Vec::new(),
+        available_covers: Vec::new(),
+        item,
+    };
+
+    match kind {
+        "artists" => {
+            let image_file_id: Option<i64> =
+                sqlx::query_scalar("SELECT image_file_id FROM furumusic__artist WHERE id = $1")
+                    .bind(detail.item.id)
+                    .fetch_optional(pool)
+                    .await?
+                    .flatten();
+            detail.current_image_url =
+                image_file_id.map(|id| format!("/api/player/cover/{id}/large"));
+            detail.available_covers = artist_available_covers(pool, detail.item.id).await?;
+        }
+        "releases" => {
+            let row: Option<(Option<String>, Option<i32>, Option<i64>)> = sqlx::query_as(
+                "SELECT release_type::text, year, cover_file_id FROM furumusic__release WHERE id = $1",
+            )
+            .bind(detail.item.id)
+            .fetch_optional(pool)
+            .await?;
+            if let Some((release_type, year, cover_file_id)) = row {
+                detail.release_type = release_type;
+                detail.year = year;
+                detail.current_image_url =
+                    cover_file_id.map(|id| format!("/api/player/cover/{id}/large"));
+            }
+            detail.selected_artist_ids = sqlx::query_as::<_, IdRow>(
+                "SELECT artist_id AS id FROM furumusic__release_artist WHERE release_id = $1 ORDER BY position, artist_id",
+            )
+            .bind(detail.item.id)
+            .fetch_all(pool)
+            .await?
+            .into_iter()
+            .map(|row| row.id)
+            .collect();
+            detail.artists = load_artist_options(pool).await?;
+        }
+        _ => {}
+    }
+
+    Ok(detail)
+}
+
+async fn load_artist_options(pool: &PgPool) -> anyhow::Result<Vec<ArtistOptionDto>> {
+    let rows = sqlx::query_as::<_, (i64, String)>(
+        "SELECT id, name::text FROM furumusic__artist ORDER BY name ASC",
+    )
+    .fetch_all(pool)
+    .await?;
+    Ok(rows
+        .into_iter()
+        .map(|(id, name)| ArtistOptionDto { id, name })
+        .collect())
+}
+
+async fn artist_available_covers(
+    pool: &PgPool,
+    artist_id: i64,
+) -> anyhow::Result<Vec<AvailableCoverDto>> {
+    let rows = sqlx::query_as::<_, (i64, String)>(
+        "SELECT DISTINCT r.cover_file_id AS media_file_id, r.title::text AS release_title \
+         FROM furumusic__release r \
+         LEFT JOIN furumusic__release_artist ra ON ra.release_id = r.id \
+         LEFT JOIN furumusic__track t ON t.release_id = r.id \
+         LEFT JOIN furumusic__track_artist ta ON ta.track_id = t.id \
+         WHERE r.cover_file_id IS NOT NULL AND (ra.artist_id = $1 OR ta.artist_id = $1) \
+         ORDER BY r.title::text ASC",
+    )
+    .bind(artist_id)
+    .fetch_all(pool)
+    .await?;
+    Ok(rows
+        .into_iter()
+        .map(|(media_file_id, release_title)| AvailableCoverDto {
+            media_file_id,
+            release_title,
+            cover_url: format!("/api/player/cover/{media_file_id}/medium"),
+        })
+        .collect())
+}
+
 async fn library_ids_by_filter(
     pool: &PgPool,
     kind: &str,

src/i18n/phrases.rs

@@ -268,6 +268,7 @@ translations! {
     // Player UI
     player_library:          "Library"                         , "Библиотека";
     player_artists:          "Artists"                         , "Артисты";
+    player_release:          "Release"                         , "Релиз";
     player_releases:         "Releases"                        , "Релизы";
     player_tracks:           "Tracks"                          , "Треки";
     player_title:            "Title"                           , "Название";

src/player/dto.rs

@@ -55,6 +55,8 @@ pub(super) struct TrackItem {
     pub(super) duration_seconds: f64,
     pub(super) artists: Vec<ArtistRef>,
     pub(super) featured_artists: Vec<ArtistRef>,
+    pub(super) release_id: i64,
+    pub(super) release_title: String,
     pub(super) release_year: Option<i32>,
     pub(super) cover_url: Option<String>,
     pub(super) stream_url: String,

src/player/mod.rs

@@ -465,6 +465,8 @@ async fn release_detail_handler(
         r#"SELECT t.id, t.title::text as title, t.track_number, t.disc_number,
                   t.duration_seconds, t.cover_file_id,
                   r.cover_file_id as release_cover_file_id,
+                  r.id as release_id,
+                  r.title::text as release_title,
                   r.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
@@ -542,6 +544,8 @@ async fn release_detail_handler(
                 duration_seconds: t.duration_seconds,
                 artists: track_main_artists.remove(&tid).unwrap_or_default(),
                 featured_artists: track_feat_artists.remove(&tid).unwrap_or_default(),
+                release_id: t.release_id,
+                release_title: t.release_title,
                 release_year: t.release_year,
                 cover_url: track_cover_variant_url(
                     t.cover_file_id,
@@ -707,6 +711,8 @@ async fn playlist_detail_handler(
         r#"SELECT t.id, t.title::text as title, t.track_number, t.disc_number,
                   t.duration_seconds, t.cover_file_id,
                   r.cover_file_id as release_cover_file_id,
+                  r.id as release_id,
+                  r.title::text as release_title,
                   r.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
@@ -804,6 +810,8 @@ async fn build_track_items(
                 duration_seconds: t.duration_seconds,
                 artists: track_main_artists.remove(&tid).unwrap_or_default(),
                 featured_artists: track_feat_artists.remove(&tid).unwrap_or_default(),
+                release_id: t.release_id,
+                release_title: t.release_title,
                 release_year: t.release_year,
                 cover_url: track_cover_variant_url(
                     t.cover_file_id,
@@ -835,13 +843,19 @@ async fn likes_playlist_handler(
         r#"SELECT t.id, t.title::text as title, t.track_number, t.disc_number,
                   t.duration_seconds, t.cover_file_id,
                   r.cover_file_id as release_cover_file_id,
+                  r.id as release_id,
+                  r.title::text as release_title,
                   r.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
                   mf.audio_bitrate,
                   mf.audio_sample_rate,
                   mf.audio_bit_depth,
-                  mf.file_size_bytes
+                  mf.file_size_bytes,
+                  t.lastfm_listeners,
+                  t.lastfm_playcount,
+                  t.lastfm_rating,
+                  t.lastfm_updated_at
            FROM furumusic__user_liked_track ult
            JOIN furumusic__track t ON t.id = ult.track_id
            JOIN furumusic__release r ON r.id = t.release_id
@@ -1476,6 +1490,8 @@ async fn search_handler(
             r#"SELECT t.id, t.title::text AS title, t.track_number, t.disc_number,
                       t.duration_seconds, t.cover_file_id,
                       rel.cover_file_id AS release_cover_file_id,
+                      rel.id AS release_id,
+                      rel.title::text AS release_title,
                       rel.year AS release_year,
                       COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                       mf.audio_format,
@@ -1550,11 +1566,13 @@ async fn search_handler(
 
         let t = sqlx::query_as::<_, SearchTrackRow>(
             r#"SELECT id, title, track_number, disc_number, duration_seconds, cover_file_id,
-                      release_cover_file_id, release_year, uploader_name, audio_format, audio_bitrate,
+                      release_cover_file_id, release_id, release_title, release_year, uploader_name, audio_format, audio_bitrate,
                       audio_sample_rate, audio_bit_depth, file_size_bytes, lastfm_listeners, lastfm_playcount, lastfm_rating, lastfm_updated_at FROM (
                 SELECT t.id, t.title::text AS title, t.track_number, t.disc_number,
                        t.duration_seconds, t.cover_file_id,
                        rel.cover_file_id AS release_cover_file_id,
+                       rel.id AS release_id,
+                       rel.title::text AS release_title,
                        rel.year AS release_year,
                        COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                        mf.audio_format,
@@ -1580,7 +1598,7 @@ async fn search_handler(
                 ) t
                 JOIN furumusic__release rel ON rel.id = t.release_id
                 LEFT JOIN furumusic__media_file mf ON mf.id = t.audio_file_id
-                GROUP BY t.id, t.title, t.track_number, t.disc_number, t.duration_seconds, t.cover_file_id, rel.cover_file_id, rel.year,
+                GROUP BY t.id, t.title, t.track_number, t.disc_number, t.duration_seconds, t.cover_file_id, rel.cover_file_id, rel.id, rel.title, rel.year,
                          mf.uploader_name, mf.audio_format, mf.audio_bitrate, mf.audio_sample_rate, mf.audio_bit_depth, mf.file_size_bytes,
                          t.lastfm_listeners, t.lastfm_playcount, t.lastfm_rating, t.lastfm_updated_at
                 ORDER BY similarity DESC
@@ -1677,6 +1695,8 @@ async fn search_handler(
                 duration_seconds: t.duration_seconds,
                 artists: track_main_artists.remove(&tid).unwrap_or_default(),
                 featured_artists: track_feat_artists.remove(&tid).unwrap_or_default(),
+                release_id: t.release_id,
+                release_title: t.release_title,
                 release_year: t.release_year,
                 cover_url: track_cover_variant_url(
                     t.cover_file_id,
@@ -2252,6 +2272,8 @@ async fn tracks_by_ids_handler(
         r#"SELECT t.id, t.title::text as title, t.track_number, t.disc_number,
                   t.duration_seconds, t.cover_file_id,
                   r.cover_file_id as release_cover_file_id,
+                  r.id as release_id,
+                  r.title::text as release_title,
                   r.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
@@ -2328,6 +2350,8 @@ async fn tracks_by_ids_handler(
                 duration_seconds: t.duration_seconds,
                 artists: track_main_artists.remove(&tid).unwrap_or_default(),
                 featured_artists: track_feat_artists.remove(&tid).unwrap_or_default(),
+                release_id: t.release_id,
+                release_title: t.release_title,
                 release_year: t.release_year,
                 cover_url: track_cover_variant_url(
                     t.cover_file_id,

src/player/rows.rs

@@ -37,6 +37,8 @@ pub(super) struct TrackRow {
     pub(super) duration_seconds: f64,
     pub(super) cover_file_id: Option<i64>,
     pub(super) release_cover_file_id: Option<i64>,
+    pub(super) release_id: i64,
+    pub(super) release_title: String,
     pub(super) release_year: Option<i32>,
     pub(super) uploader_name: String,
     pub(super) audio_format: Option<String>,
@@ -107,6 +109,8 @@ pub(super) struct PlaylistTrackRow {
     pub(super) duration_seconds: f64,
     pub(super) cover_file_id: Option<i64>,
     pub(super) release_cover_file_id: Option<i64>,
+    pub(super) release_id: i64,
+    pub(super) release_title: String,
     pub(super) release_year: Option<i32>,
     pub(super) uploader_name: String,
     pub(super) audio_format: Option<String>,
@@ -170,6 +174,8 @@ pub(super) struct SearchTrackRow {
     pub(super) duration_seconds: f64,
     pub(super) cover_file_id: Option<i64>,
     pub(super) release_cover_file_id: Option<i64>,
+    pub(super) release_id: i64,
+    pub(super) release_title: String,
     pub(super) release_year: Option<i32>,
     pub(super) uploader_name: String,
     pub(super) audio_format: Option<String>,

templates/admin/v2.html

@@ -870,6 +870,165 @@ tbody tr:hover {
     font-size: 11px;
 }
 
+.image-editor {
+    display: grid;
+    grid-template-columns: 150px minmax(0, 1fr);
+    gap: 14px;
+    margin-bottom: 12px;
+}
+
+.image-preview {
+    width: 150px;
+    aspect-ratio: 1;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-primary);
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    color: var(--text-subdued);
+    font-size: 12px;
+}
+
+.image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.cover-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
+    gap: 8px;
+}
+
+.cover-option {
+    min-width: 0;
+    padding: 6px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+    cursor: pointer;
+}
+
+.cover-option:hover {
+    border-color: rgba(29, 185, 84, 0.55);
+    color: var(--text-primary);
+}
+
+.cover-option img {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    border-radius: 5px;
+    display: block;
+}
+
+.cover-option span {
+    display: block;
+    margin-top: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 10px;
+}
+
+.artist-tags {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+}
+
+.artist-picker {
+    position: relative;
+}
+
+.artist-picker input {
+    width: 100%;
+}
+
+.artist-results {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(100% + 5px);
+    z-index: 5;
+    max-height: 242px;
+    overflow: auto;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-elevated);
+    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
+}
+
+.artist-result {
+    width: 100%;
+    min-height: 34px;
+    padding: 8px 10px;
+    border: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    background: transparent;
+    color: var(--text-secondary);
+    text-align: left;
+    cursor: pointer;
+}
+
+.artist-result:hover,
+.artist-result:focus {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.artist-result:last-child {
+    border-bottom: 0;
+}
+
+.tag button {
+    width: 16px;
+    height: 16px;
+    margin-left: 5px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.14);
+    color: inherit;
+    cursor: pointer;
+    line-height: 1;
+}
+
+.tag button:hover {
+    background: rgba(255, 255, 255, 0.24);
+}
+
+.editor-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+}
+
+.image-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+}
+
+.file-name {
+    max-width: 280px;
+    color: var(--text-subdued);
+    font-size: 11px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.cover-option.active {
+    border-color: rgba(29, 185, 84, 0.8);
+    box-shadow: 0 0 0 1px rgba(29, 185, 84, 0.32);
+}
+
 .muted {
     color: var(--text-subdued);
 }
@@ -1753,14 +1912,55 @@ tbody tr:hover {
                 </button>
             </div>
             <div class="modal-body" x-show="activeLibraryItem">
+                <div class="empty" x-show="editorLoading">Loading editor...</div>
+                <div x-show="!editorLoading">
                     <div class="field">
-                    <label>Title</label>
+                        <label x-text="isArtistEditor() ? 'Artist name' : 'Title'"></label>
                         <input x-model="editorDraft.title" />
                     </div>
+
+                    <div class="editor-grid" x-show="isReleaseEditor()">
                         <div class="field">
-                    <label>Primary Relation Search</label>
+                            <label>Release type</label>
-                    <input placeholder="Start typing to attach artist, release, or playlist" />
+                            <select x-model="editorDraft.release_type">
+                                <option value="album">Album</option>
+                                <option value="single">Single</option>
+                                <option value="ep">EP</option>
+                                <option value="compilation">Compilation</option>
+                                <option value="soundtrack">Soundtrack</option>
+                                <option value="live">Live</option>
+                                <option value="remix">Remix</option>
+                                <option value="unknown">Unknown</option>
+                            </select>
                         </div>
+                        <div class="field">
+                            <label>Year</label>
+                            <input type="number" min="0" max="3000" x-model="editorDraft.year" />
+                        </div>
+                    </div>
+
+                    <div class="field" x-show="isReleaseEditor()">
+                        <label>Release artists</label>
+                        <div class="artist-tags">
+                            <template x-for="artist in selectedEditorArtists()" :key="artist.id">
+                                <span class="tag relation">
+                                    <span x-text="artist.name"></span>
+                                    <button type="button" @click="removeEditorArtist(artist.id)">x</button>
+                                </span>
+                            </template>
+                            <span class="muted" x-show="selectedEditorArtists().length === 0">No artists attached</span>
+                        </div>
+                        <div class="artist-picker">
+                            <input class="search" placeholder="Search artist" x-model="editorArtistToAdd" @keydown.enter.prevent="addEditorArtist()" @keydown.escape="editorArtistToAdd = ''" />
+                            <div class="artist-results" x-show="editorArtistSearchOpen()" x-transition>
+                                <template x-for="artist in filteredEditorArtists()" :key="artist.id">
+                                    <button class="artist-result" type="button" @click="addEditorArtist(artist)" x-text="artist.name"></button>
+                                </template>
+                                <div class="artist-result muted" x-show="filteredEditorArtists().length === 0">No matching artists</div>
+                            </div>
+                        </div>
+                    </div>
+
                     <div class="field">
                         <label>Visibility</label>
                         <select class="search" style="width:100%" x-model="editorDraft.hidden">
@@ -1768,17 +1968,66 @@ tbody tr:hover {
                             <option value="true">Hidden from player</option>
                         </select>
                     </div>
-                <div class="toolbar">
+
-                    <button class="btn primary" @click="saveLibraryItem()">
+                    <div x-show="canEditLibraryImage()">
-                        <i data-lucide="save"></i>
+                        <label class="muted" style="display:block; margin: 2px 0 8px; font-size: 11px; font-weight: 800; text-transform: uppercase;">Image</label>
-                        Save
+                        <div class="image-editor">
+                            <div class="image-preview">
+                                <template x-if="editorDetail && editorDetail.current_image_url">
+                                    <img :src="editorDetail.current_image_url" alt="" />
+                                </template>
+                                <span x-show="!editorDetail || !editorDetail.current_image_url">No image</span>
+                            </div>
+                            <div>
+                                <div class="image-actions">
+                                    <input type="file" accept="image/*" x-ref="libraryImageInput" style="display:none" @change="setEditorImageFile($event)" />
+                                    <button class="btn" type="button" @click="$refs.libraryImageInput.click()">
+                                        <i data-lucide="image-plus"></i>
+                                        Choose image
                                     </button>
-                    <button class="btn danger" @click="deleteLibraryItem(activeLibraryItem)">
+                                    <button class="btn primary" type="button" @click="uploadLibraryImage()" :disabled="!editorImageFile || editorImageUploading">
+                                        <i :data-lucide="editorImageUploading ? 'loader-circle' : 'upload'"></i>
+                                        <span x-text="editorImageUploading ? 'Uploading...' : 'Upload'"></span>
+                                    </button>
+                                    <button class="btn danger" type="button" @click="removeLibraryImage()" :disabled="!editorDetail || !editorDetail.current_image_url || editorImageUploading">
+                                        <i data-lucide="trash-2"></i>
+                                        Remove
+                                    </button>
+                                    <span class="file-name" x-show="editorImageFile" x-text="editorImageFile ? editorImageFile.name : ''"></span>
+                                </div>
+                                <p class="muted" x-show="isReleaseEditor()">Release covers are uploaded manually here.</p>
+                                <p class="muted" x-show="isArtistEditor()">Pick an image from releases where this artist appears, or upload one manually.</p>
+                            </div>
+                        </div>
+
+                        <div x-show="isArtistEditor()">
+                            <div class="field" style="margin-bottom:8px">
+                                <label>Available release images</label>
+                            </div>
+                            <div class="cover-grid" x-show="editorDetail && editorDetail.available_covers && editorDetail.available_covers.length">
+                                <template x-for="cover in editorDetail.available_covers" :key="cover.media_file_id">
+                                    <button class="cover-option" type="button" :class="{active: editorDetail.current_image_url && editorDetail.current_image_url.includes('/cover/' + cover.media_file_id + '/')}" @click="setLibraryImage(cover.media_file_id)">
+                                        <img :src="cover.cover_url" alt="" />
+                                        <span x-text="cover.release_title"></span>
+                                    </button>
+                                </template>
+                            </div>
+                            <div class="empty" x-show="editorDetail && (!editorDetail.available_covers || editorDetail.available_covers.length === 0)">No release images found for this artist</div>
+                        </div>
+                    </div>
+
+                    <div class="toolbar">
+                        <button class="btn primary" @click="saveLibraryItem()" :disabled="!editorCanSave()">
+                            <i :data-lucide="editorSaving ? 'loader-circle' : 'save'"></i>
+                            <span x-text="editorSaving ? 'Saving...' : 'Save'"></span>
+                        </button>
+                        <button class="btn danger" @click="deleteLibraryItem(activeLibraryItem)" :disabled="editorSaving || editorImageUploading">
                             <i data-lucide="trash-2"></i>
                             Delete
                         </button>
                     </div>
                 </div>
+            </div>
         </section>
     </div>
 
@@ -1837,7 +2086,13 @@ function adminV2() {
         librarySelectionScope: 'ids',
         activeLibraryItem: null,
         editorOpen: false,
-        editorDraft: { title: '', hidden: 'false' },
+        editorLoading: false,
+        editorSaving: false,
+        editorImageUploading: false,
+        editorImageFile: null,
+        editorArtistToAdd: '',
+        editorDetail: null,
+        editorDraft: { title: '', hidden: 'false', release_type: 'album', year: '', artist_ids: [] },
         settings: { values: {}, sources: {}, lastfm_api_key_configured: false },
         settingsDraft: {
             auth_password_enabled: false,
@@ -1924,14 +2179,18 @@ function adminV2() {
             const parts = raw.split('/').filter(Boolean);
             const view = parts[0] || 'reviews';
             if (view === 'reviews') {
+                const nextStatus = parts[1] || null;
+                if (this.reviewFilter.status !== nextStatus) this.clearReviewSelection();
                 this.activeView = 'reviews';
-                this.reviewFilter.status = parts[1] || null;
+                this.reviewFilter.status = nextStatus;
             } else if (view === 'jobs') {
                 this.activeView = 'jobs';
                 if (parts[1]) this.activeJobName = decodeURIComponent(parts[1]);
             } else if (view === 'library') {
+                const nextKind = ['artists', 'releases', 'playlists'].includes(parts[1]) ? parts[1] : 'artists';
+                if (this.libraryKind !== nextKind) this.clearLibrarySelection();
                 this.activeView = 'library';
-                this.libraryKind = ['artists', 'releases', 'playlists'].includes(parts[1]) ? parts[1] : 'artists';
+                this.libraryKind = nextKind;
             } else if (view === 'settings') {
                 this.activeView = 'settings';
             } else if (view === 'tools') {
@@ -1971,6 +2230,7 @@ function adminV2() {
         },
 
         openReviews(status = null) {
+            if (this.reviewFilter.status !== status) this.clearReviewSelection();
             this.activeView = 'reviews';
             this.reviewFilter.status = status;
             this.setRoute(status ? `#reviews/${status}` : '#reviews');
@@ -1987,7 +2247,9 @@ function adminV2() {
 
         openLibrary(kind = this.libraryKind) {
             this.activeView = 'library';
-            this.libraryKind = ['artists', 'releases', 'playlists'].includes(kind) ? kind : 'artists';
+            const nextKind = ['artists', 'releases', 'playlists'].includes(kind) ? kind : 'artists';
+            if (this.libraryKind !== nextKind) this.clearLibrarySelection();
+            this.libraryKind = nextKind;
             this.setRoute(`#library/${this.libraryKind}`);
             this.loadLibrary();
         },
@@ -2006,7 +2268,7 @@ function adminV2() {
             params.set('offset', this.reviews.offset || 0);
             try {
                 this.reviews = await this.request(`${this.apiBase}/reviews?${params.toString()}`);
-                this.clearReviewSelection();
+                if (resetOffset) this.clearReviewSelection();
             } catch (error) {
                 this.showToast(error.message);
             } finally {
@@ -2037,7 +2299,7 @@ function adminV2() {
             if (this.librarySearch) params.set('search', this.librarySearch);
             try {
                 this.library = await this.request(`${this.apiBase}/library?${params.toString()}`);
-                this.clearLibrarySelection();
+                if (resetOffset) this.clearLibrarySelection();
             } catch (error) {
                 this.showToast(error.message);
             } finally {
@@ -2228,6 +2490,7 @@ function adminV2() {
                     body: JSON.stringify(payload)
                 });
                 this.showToast(`${result.affected} review row(s) updated`);
+                this.clearReviewSelection();
                 await this.loadReviews(false);
             } catch (error) {
                 this.showToast(error.message);
@@ -2343,9 +2606,184 @@ function adminV2() {
             this.activeLibraryItem = item;
             this.editorDraft = {
                 title: item.title || '',
-                hidden: item.is_hidden ? 'true' : 'false'
+                hidden: item.is_hidden ? 'true' : 'false',
+                release_type: 'album',
+                year: '',
+                artist_ids: []
             };
+            this.editorDetail = null;
+            this.editorImageFile = null;
+            this.editorArtistToAdd = '';
             this.editorOpen = true;
+            this.loadEditorDetail(item);
+        },
+
+        async loadEditorDetail(item) {
+            const key = `${item.kind}:${item.id}`;
+            this.editorLoading = true;
+            try {
+                const params = new URLSearchParams({ kind: item.kind, id: item.id });
+                const detail = await this.request(`${this.apiBase}/library/item/detail?${params.toString()}`);
+                if (!this.activeLibraryItem || `${this.activeLibraryItem.kind}:${this.activeLibraryItem.id}` !== key) return;
+                this.editorDetail = detail;
+                this.editorDraft = {
+                    title: detail.title || '',
+                    hidden: detail.hidden ? 'true' : 'false',
+                    release_type: detail.release_type || 'album',
+                    year: detail.year || '',
+                    artist_ids: Array.isArray(detail.selected_artist_ids) ? detail.selected_artist_ids.slice() : []
+                };
+                this.editorImageFile = null;
+                this.editorArtistToAdd = '';
+            } catch (error) {
+                this.showToast(error.message);
+            } finally {
+                if (this.activeLibraryItem && `${this.activeLibraryItem.kind}:${this.activeLibraryItem.id}` === key) {
+                    this.editorLoading = false;
+                }
+                this.icons();
+            }
+        },
+
+        isArtistEditor() {
+            return this.activeLibraryItem && this.activeLibraryItem.kind === 'artists';
+        },
+
+        isReleaseEditor() {
+            return this.activeLibraryItem && this.activeLibraryItem.kind === 'releases';
+        },
+
+        canEditLibraryImage() {
+            return this.isArtistEditor() || this.isReleaseEditor();
+        },
+
+        editorCanSave() {
+            return Boolean(this.activeLibraryItem && this.editorDetail && !this.editorLoading && !this.editorSaving);
+        },
+
+        selectedEditorArtists() {
+            const selected = this.editorDraft.artist_ids || [];
+            const artists = (this.editorDetail && this.editorDetail.artists) || [];
+            return selected.map(id => {
+                const artist = artists.find(row => Number(row.id) === Number(id));
+                return artist || { id, name: `Artist #${id}` };
+            });
+        },
+
+        editorAvailableArtists() {
+            const selected = new Set((this.editorDraft.artist_ids || []).map(id => Number(id)));
+            const artists = (this.editorDetail && this.editorDetail.artists) || [];
+            return artists.filter(artist => !selected.has(Number(artist.id)));
+        },
+
+        normalizedArtistSearch(value) {
+            return String(value || '').trim().toLowerCase();
+        },
+
+        filteredEditorArtists() {
+            const raw = String(this.editorArtistToAdd || '').trim();
+            const query = this.normalizedArtistSearch(raw);
+            const candidates = this.editorAvailableArtists();
+            if (!query) return candidates.slice(0, 12);
+            return candidates
+                .map(artist => {
+                    const name = this.normalizedArtistSearch(artist.name);
+                    let score = 3;
+                    if (name === query) score = 0;
+                    else if (name.startsWith(query)) score = 1;
+                    else if (name.includes(query)) score = 2;
+                    return { artist, score };
+                })
+                .filter(row => row.score < 3)
+                .sort((a, b) => a.score - b.score || a.artist.name.localeCompare(b.artist.name))
+                .slice(0, 12)
+                .map(row => row.artist);
+        },
+
+        editorArtistSearchOpen() {
+            return this.isReleaseEditor() && String(this.editorArtistToAdd || '').trim().length > 0;
+        },
+
+        addEditorArtist(artist = null) {
+            const raw = String(this.editorArtistToAdd || '').trim();
+            const candidates = this.filteredEditorArtists();
+            artist = artist
+                || candidates.find(row => this.normalizedArtistSearch(row.name) === this.normalizedArtistSearch(raw))
+                || candidates[0];
+            if (artist && !(this.editorDraft.artist_ids || []).map(Number).includes(Number(artist.id))) {
+                this.editorDraft.artist_ids = (this.editorDraft.artist_ids || []).concat([Number(artist.id)]);
+            }
+            this.editorArtistToAdd = '';
+        },
+
+        removeEditorArtist(id) {
+            this.editorDraft.artist_ids = (this.editorDraft.artist_ids || []).filter(value => Number(value) !== Number(id));
+        },
+
+        setEditorImageFile(event) {
+            this.editorImageFile = event.target.files && event.target.files.length ? event.target.files[0] : null;
+        },
+
+        readFileAsDataUrl(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = () => reject(reader.error || new Error('failed to read file'));
+                reader.readAsDataURL(file);
+            });
+        },
+
+        async uploadLibraryImage() {
+            if (!this.activeLibraryItem || !this.editorImageFile || this.editorImageUploading) return;
+            this.editorImageUploading = true;
+            try {
+                const dataUrl = await this.readFileAsDataUrl(this.editorImageFile);
+                const data = String(dataUrl).split(',')[1] || '';
+                await this.request(`${this.apiBase}/library/item/upload-image`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        kind: this.activeLibraryItem.kind,
+                        id: this.activeLibraryItem.id,
+                        filename: this.editorImageFile.name,
+                        mime_type: this.editorImageFile.type || 'application/octet-stream',
+                        data
+                    })
+                });
+                await this.loadEditorDetail(this.activeLibraryItem);
+                this.showToast('Image uploaded');
+            } catch (error) {
+                this.showToast(error.message);
+            } finally {
+                this.editorImageUploading = false;
+                if (this.$refs.libraryImageInput) this.$refs.libraryImageInput.value = '';
+                this.icons();
+            }
+        },
+
+        async setLibraryImage(mediaFileId) {
+            if (!this.activeLibraryItem || this.editorImageUploading) return;
+            this.editorImageUploading = true;
+            try {
+                await this.request(`${this.apiBase}/library/item/image`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        kind: this.activeLibraryItem.kind,
+                        id: this.activeLibraryItem.id,
+                        media_file_id: mediaFileId
+                    })
+                });
+                await this.loadEditorDetail(this.activeLibraryItem);
+                this.showToast(mediaFileId ? 'Image selected' : 'Image removed');
+            } catch (error) {
+                this.showToast(error.message);
+            } finally {
+                this.editorImageUploading = false;
+                this.icons();
+            }
+        },
+
+        removeLibraryImage() {
+            this.setLibraryImage(null);
         },
 
         toggleLibrary(item) {
@@ -2362,14 +2800,18 @@ function adminV2() {
 
         selectedLibraryCount() {
             if (this.librarySelectionScope === 'filter') return this.library.total || 0;
-            return Object.keys(this.selectedLibraryIds).length;
+            return this.currentLibrarySelectionKeys().length;
+        },
+
+        currentLibrarySelectionKeys() {
+            return Object.keys(this.selectedLibraryIds).filter(key => key.startsWith(`${this.libraryKind}:`));
         },
 
         async bulkLibrary(action) {
             const count = this.selectedLibraryCount();
             if (!count) return;
             if (action === 'delete' && !confirm(`Delete ${count} ${this.libraryKind}?`)) return;
-            const ids = Object.keys(this.selectedLibraryIds)
+            const ids = this.currentLibrarySelectionKeys()
                 .map(key => Number(key.split(':')[1]))
                 .filter(Boolean);
             try {
@@ -2384,6 +2826,7 @@ function adminV2() {
                     })
                 });
                 this.showToast(`${result.affected} ${this.libraryKind} updated`);
+                this.clearLibrarySelection();
                 await this.loadLibrary(false);
                 await this.refreshCountsOnly();
             } catch (error) {
@@ -2392,7 +2835,8 @@ function adminV2() {
         },
 
         async saveLibraryItem() {
-            if (!this.activeLibraryItem) return;
+            if (!this.editorCanSave()) return;
+            this.editorSaving = true;
             try {
                 const updated = await this.request(`${this.apiBase}/library/item`, {
                     method: 'POST',
@@ -2400,16 +2844,22 @@ function adminV2() {
                         kind: this.activeLibraryItem.kind,
                         id: this.activeLibraryItem.id,
                         title: this.editorDraft.title,
-                        hidden: this.editorDraft.hidden === 'true'
+                        hidden: this.editorDraft.hidden === 'true',
+                        release_type: this.editorDraft.release_type || null,
+                        year: this.editorDraft.year || '',
+                        artist_ids: this.editorDraft.artist_ids || []
                     })
                 });
                 this.replaceLibraryItem(updated);
                 this.activeLibraryItem = updated;
-                this.editorOpen = false;
+                if (this.editorDetail) this.editorDetail.item = updated;
                 this.showToast('Saved');
                 await this.refreshCountsOnly();
             } catch (error) {
                 this.showToast(error.message);
+            } finally {
+                this.editorSaving = false;
+                this.icons();
             }
         },
 

templates/player/modals.html

@@ -11,7 +11,32 @@
                         </svg>
                     </button>
                 </div>
-                <pre class="info-modal-body" x-text="$store.info.modal.body"></pre>
+                <div class="info-modal-body">
+                    <template x-if="$store.info.modal.rows && $store.info.modal.rows.length">
+                        <table class="info-table">
+                            <tbody>
+                                <template x-for="(row, idx) in $store.info.modal.rows" :key="row.label + '-' + idx">
+                                    <tr>
+                                        <th x-text="row.label"></th>
+                                        <td>
+                                            <template x-if="row.links && row.links.length">
+                                                <div class="info-link-list">
+                                                    <template x-for="link in row.links" :key="link.type + '-' + link.id + '-' + link.label">
+                                                        <button class="info-link" type="button" @click="$store.info.navigate(link)" x-text="link.label"></button>
+                                                    </template>
+                                                </div>
+                                            </template>
+                                            <template x-if="!row.links || !row.links.length">
+                                                <span x-text="row.value"></span>
+                                            </template>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </template>
+                    <pre class="info-modal-plain" x-show="!$store.info.modal.rows || !$store.info.modal.rows.length" x-text="$store.info.modal.body"></pre>
+                </div>
             </div>
         </div>
     </template>

templates/player/scripts.html

@@ -4,11 +4,14 @@ const T = {
     info: "{{ t.player_info }}",
     noDetails: "{{ t.player_no_details }}",
     trackInfoTitle: "{{ t.player_track_info }}",
+    releaseInfoTitle: "{{ t.player_release_info }}",
     loadingHistory: "{{ t.player_loading_history }}",
     failedLoadHistory: "{{ t.player_failed_load_history }}",
     totalPlays: "{{ t.player_total_plays }}",
     unknown: "{{ t.player_unknown }}",
     unknownSize: "{{ t.player_unknown_size }}",
+    title: "{{ t.player_title }}",
+    release: "{{ t.player_release }}",
     unknownRelease: "{{ t.player_unknown_release }}",
     unknownTrack: "{{ t.player_unknown_track }}",
     unknownAudio: "{{ t.player_unknown_audio }}",
@@ -124,14 +127,33 @@ document.addEventListener('alpine:init', () => {
     Alpine.store('info', {
         modal: null,
         open(title, body) {
+            if (Array.isArray(body)) {
+                this.openRows(title, body);
+                return;
+            }
             this.modal = {
                 title: title || T.info,
                 body: body || T.noDetails,
+                rows: null,
+            };
+        },
+        openRows(title, rows) {
+            this.modal = {
+                title: title || T.info,
+                body: '',
+                rows: (rows || []).filter(row => row && ((row.value !== undefined && row.value !== null && row.value !== '') || (row.links && row.links.length))),
             };
         },
         close() {
             this.modal = null;
         },
+        navigate(link) {
+            if (!link || !link.id) return;
+            this.close();
+            const library = Alpine.store('library');
+            if (link.type === 'release') library.openRelease(link.id);
+            if (link.type === 'artist') library.openArtist(link.id);
+        },
     });
 
     // -----------------------------------------------------------------------
@@ -892,7 +914,7 @@ document.addEventListener('alpine:init', () => {
         },
 
         openTrackInfo(track) {
-            Alpine.store('info').open(T.trackInfoTitle, this.trackInfo(track));
+            Alpine.store('info').openRows(T.trackInfoTitle, this.trackInfoRows(track));
         },
 
         uploadersInfo(uploaders) {
@@ -915,6 +937,31 @@ document.addEventListener('alpine:init', () => {
             return lines.join('\n');
         },
 
+        openReleaseInfo(release) {
+            Alpine.store('info').openRows(T.releaseInfoTitle, this.releaseInfoRows(release));
+        },
+
+        infoLinks(items, type) {
+            const seen = new Set();
+            return (items || [])
+                .filter(item => item && item.id && !seen.has(Number(item.id)) && seen.add(Number(item.id)))
+                .map(item => ({ type, id: item.id, label: item.label || item.name || item.title || String(item.id) }));
+        },
+
+        releaseInfoRows(release) {
+            if (!release) return [];
+            const rows = [
+                { label: T.release, value: release.title || T.unknownRelease },
+                { label: T.type, value: release.release_type || T.unknown },
+                { label: T.year, value: release.year || T.unknown },
+                { label: T.tracks, value: release.track_count || release.tracks?.length || 0 },
+                { label: T.uploaders, value: this.uploadersInfo(release.uploaders || []) },
+            ];
+            const artistLinks = this.infoLinks(release.artists || [], 'artist');
+            if (artistLinks.length) rows.splice(1, 0, { label: T.artists, links: artistLinks });
+            return rows;
+        },
+
         trackInfo(track) {
             if (!track) return '';
             const artists = this.trackArtistLinks(track).map(artist => artist.label).join(', ') || T.unknown;
@@ -945,6 +992,40 @@ document.addEventListener('alpine:init', () => {
             return lines.join('\n');
         },
 
+        trackInfoRows(track) {
+            if (!track) return [];
+            const artistLinks = this.infoLinks(this.trackArtistLinks(track), 'artist');
+            const releaseLinks = track.release_id
+                ? [{ type: 'release', id: track.release_id, label: track.release_title || T.unknownRelease }]
+                : [];
+            const audio = [
+                track.audio_format || null,
+                track.audio_bitrate ? `${track.audio_bitrate} kbps` : null,
+                track.audio_sample_rate ? `${track.audio_sample_rate} Hz` : null,
+                track.audio_bit_depth ? `${track.audio_bit_depth}-bit` : null,
+            ].filter(Boolean).join(' · ') || T.unknownAudio;
+            const rows = [
+                { label: T.title, value: track.title || T.unknownTrack },
+                { label: T.release, links: releaseLinks },
+                { label: T.artists, links: artistLinks },
+                { label: T.releaseYear, value: track.release_year || T.unknown },
+                { label: T.duration, value: formatTime(track.duration_seconds) },
+                { label: T.audio, value: audio },
+                { label: T.size, value: this.bytes(track.file_size_bytes) },
+                { label: T.uploader, value: track.uploader_name || 'UFO' },
+            ];
+            if (track.lastfm_rating != null || track.lastfm_listeners != null || track.lastfm_playcount != null) {
+                const rating = Number(track.lastfm_rating || 0);
+                rows.push({ label: T.lastfmRating, value: Number.isFinite(rating) ? Math.round(rating) : T.unknown });
+                rows.push({ label: T.lastfmListeners, value: new Intl.NumberFormat().format(track.lastfm_listeners || 0) });
+                rows.push({ label: T.lastfmPlaycount, value: new Intl.NumberFormat().format(track.lastfm_playcount || 0) });
+                if (track.lastfm_updated_at) rows.push({ label: T.lastfmUpdated, value: track.lastfm_updated_at });
+            } else {
+                rows.push({ label: T.lastfmRating, value: T.lastfmNotLoaded });
+            }
+            return rows;
+        },
+
         async openRelease(id, options = {}) {
             this._beginNavigation('#release/' + id, options);
             this.searchQuery = '';

templates/player/shell.html

@@ -391,7 +391,7 @@
                                                     <template x-if="!release.cover_url">
                                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/></svg>
                                                     </template>
-                                                    <button class="card-info-btn" @click.stop="$store.info.open('{{ t.player_release_info }}', $store.library.releaseInfo(release))" :title="$store.library.releaseInfo(release)" aria-label="{{ t.player_release_info }}">
+                                                    <button class="card-info-btn" @click.stop="$store.library.openReleaseInfo(release)" :title="$store.library.releaseInfo(release)" aria-label="{{ t.player_release_info }}">
                                                         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                                                     </button>
                                                 </div>
@@ -562,7 +562,7 @@
                                             <template x-if="!release.cover_url">
                                                 <span class="placeholder-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="4"/></svg></span>
                                             </template>
-                                            <button class="card-info-btn" @click.stop="$store.info.open('{{ t.player_release_info }}', $store.library.releaseInfo(release))" :title="$store.library.releaseInfo(release)" aria-label="{{ t.player_release_info }}">
+                                            <button class="card-info-btn" @click.stop="$store.library.openReleaseInfo(release)" :title="$store.library.releaseInfo(release)" aria-label="{{ t.player_release_info }}">
                                                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                                             </button>
                                             <button class="card-enqueue-btn" @click.stop="$store.library.enqueueRelease(release.id)" title="{{ t.player_add_to_queue }}">
@@ -690,7 +690,7 @@
                             <div class="release-year" x-text="$store.library.currentRelease.year || ''"></div>
                             <div class="release-actions">
                                 <button class="release-action-btn secondary"
-                                        @click.stop="$store.info.open('{{ t.player_release_info }}', $store.library.releaseInfo($store.library.currentRelease))"
+                                        @click.stop="$store.library.openReleaseInfo($store.library.currentRelease)"
                                         :title="$store.library.releaseInfo($store.library.currentRelease)"
                                         aria-label="{{ t.player_release_info }}">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
@@ -928,7 +928,16 @@
                         </template>
                     </div>
                     <div class="player-track-info">
+                        <div class="player-track-title-row">
                             <div class="player-track-title" x-text="$store.player.currentTrack.title"></div>
+                            <button class="like-btn player-current-like"
+                                    :class="{ liked: $store.likes.has($store.player.currentTrack.id) }"
+                                    @click.stop="$store.likes.toggle($store.player.currentTrack.id)"
+                                    title="{{ t.player_like }}"
+                                    aria-label="{{ t.player_like }}">
+                                <svg viewBox="0 0 24 24" :fill="$store.likes.has($store.player.currentTrack.id) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 000-7.78z"/></svg>
+                            </button>
+                        </div>
                         <div class="player-track-artist">
                             <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks($store.player.currentTrack)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
                                 <span>

templates/player/styles.html

@@ -1079,12 +1079,28 @@ button.user-stat:hover {
     overflow: hidden;
     min-width: 0;
 }
+
+.player-track-title-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+
 .player-track-title {
     font-size: 13px;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+}
+
+.player-current-like {
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    flex: 0 0 auto;
 }
 
 .player-track-artist {
@@ -1763,7 +1779,7 @@ button.user-stat:hover {
 .modal-playlist-item svg { width: 16px; height: 16px; flex-shrink: 0; }
 
 .info-modal {
-    max-width: min(520px, calc(100vw - 24px));
+    max-width: min(620px, calc(100vw - 24px));
 }
 
 .info-modal-head {
@@ -1785,14 +1801,72 @@ button.user-stat:hover {
     border-radius: 8px;
     background: var(--bg-primary);
     color: var(--text-secondary);
-    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
     font-size: 13px;
     line-height: 1.55;
-    white-space: pre-wrap;
     overflow: auto;
     max-height: min(58dvh, 520px);
 }
 
+.info-modal-plain {
+    margin: 0;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    white-space: pre-wrap;
+}
+
+.info-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.info-table th,
+.info-table td {
+    padding: 9px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+    vertical-align: top;
+}
+
+.info-table tr:last-child th,
+.info-table tr:last-child td {
+    border-bottom: 0;
+}
+
+.info-table th {
+    width: 34%;
+    padding-right: 18px;
+    color: var(--text-subdued);
+    font-size: 11px;
+    font-weight: 700;
+    text-align: left;
+    text-transform: uppercase;
+}
+
+.info-table td {
+    color: var(--text-primary);
+}
+
+.info-link-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.info-link {
+    border: 1px solid rgba(29, 185, 84, 0.36);
+    border-radius: 999px;
+    background: rgba(29, 185, 84, 0.1);
+    color: var(--text-primary);
+    cursor: pointer;
+    padding: 3px 8px;
+    font: inherit;
+    line-height: 1.3;
+}
+
+.info-link:hover {
+    border-color: rgba(29, 185, 84, 0.7);
+    background: rgba(29, 185, 84, 0.18);
+    color: var(--accent);
+}
+
 .modal-btn {
     padding: 8px 16px;
     border-radius: 20px;
@@ -2921,6 +2995,22 @@ button.user-stat:hover {
         max-width: 400px;
     }
 
+    .info-table th,
+    .info-table td {
+        display: block;
+        width: 100%;
+        padding-right: 0;
+    }
+
+    .info-table th {
+        padding-bottom: 2px;
+        border-bottom: 0;
+    }
+
+    .info-table td {
+        padding-top: 0;
+    }
+
     .torrent-modal {
         width: 100vw;
         max-width: none;