Improved torrent UI

Cargo.lock

@@ -1397,7 +1397,7 @@ checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c"
 
 [[package]]
 name = "furumusic"
-version = "0.1.9"
+version = "0.1.12"
 dependencies = [
  "anyhow",
  "async-trait",

Cargo.toml

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

src/config.rs

@@ -316,11 +316,17 @@ impl_env_overrides!(
 );
 
 impl AppConfig {
+    fn normalize_host_paths(&mut self) {
+        self.agent_inbox_dir = normalize_host_path(&self.agent_inbox_dir);
+        self.agent_storage_dir = normalize_host_path(&self.agent_storage_dir);
+    }
+
     /// Build config: start from defaults, then overlay env vars.
     /// Used at startup before the DB is available (to get `database_url`).
     pub fn load() -> Self {
         let mut cfg = Self::default();
         cfg.apply_env_overrides();
+        cfg.normalize_host_paths();
         cfg
     }
 
@@ -331,6 +337,7 @@ impl AppConfig {
         let mut sources = ConfigSources::default();
         cfg.apply_db_overrides(db, &mut sources).await;
         cfg.apply_env_overrides_tracked(&mut sources);
+        cfg.normalize_host_paths();
         (cfg, sources)
     }
 
@@ -392,6 +399,44 @@ impl AppConfig {
     }
 }
 
+fn normalize_host_path(value: &str) -> String {
+    let trimmed = value.trim();
+    if trimmed.is_empty() {
+        return String::new();
+    }
+
+    normalize_windows_user_path(trimmed).unwrap_or_else(|| trimmed.to_owned())
+}
+
+#[cfg(not(windows))]
+fn normalize_windows_user_path(value: &str) -> Option<String> {
+    let normalized = value.replace('\\', "/");
+    let mut parts = normalized.split('/').filter(|part| !part.is_empty());
+    let drive = parts.next()?;
+    if drive.len() != 2 || !drive.ends_with(':') {
+        return None;
+    }
+    if !parts.next()?.eq_ignore_ascii_case("Users") {
+        return None;
+    }
+    let user = parts.next()?;
+    if user.is_empty() {
+        return None;
+    }
+
+    let mut out = format!("/Users/{user}");
+    for part in parts {
+        out.push('/');
+        out.push_str(part);
+    }
+    Some(out)
+}
+
+#[cfg(windows)]
+fn normalize_windows_user_path(_value: &str) -> Option<String> {
+    None
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -403,6 +448,24 @@ mod tests {
         assert_eq!(cfg.log_level, "info");
     }
 
+    #[cfg(not(windows))]
+    #[test]
+    fn normalizes_windows_user_path_on_unix() {
+        assert_eq!(
+            normalize_host_path(r"C:\Users\ab\repos\furumusic\media\uploads"),
+            "/Users/ab/repos/furumusic/media/uploads"
+        );
+    }
+
+    #[cfg(not(windows))]
+    #[test]
+    fn leaves_unix_path_unchanged() {
+        assert_eq!(
+            normalize_host_path("/Users/ab/repos/furumusic/media/uploads"),
+            "/Users/ab/repos/furumusic/media/uploads"
+        );
+    }
+
     // SAFETY: tests run with --test-threads=1 so no concurrent env access.
     unsafe fn set(k: &str, v: &str) {
         unsafe { std::env::set_var(k, v) };

src/i18n/phrases.rs

@@ -264,4 +264,146 @@ translations! {
     settings_agent_completion_tokens: "Completion tokens"       , "Токенов на ответ";
     settings_agent_tokens_per_sec: "Tokens/sec"                 , "Токенов/сек";
     settings_agent_status_loading: "Checking connection"         , "Проверка подключения";
+
+    // Player UI
+    player_library:          "Library"                         , "Библиотека";
+    player_artists:          "Artists"                         , "Артисты";
+    player_releases:         "Releases"                        , "Релизы";
+    player_tracks:           "Tracks"                          , "Треки";
+    player_title:            "Title"                           , "Название";
+    player_duration:         "Duration"                        , "Длительность";
+    player_following:        "Following"                       , "Подписки";
+    player_follow:           "Follow"                          , "Подписаться";
+    player_followed:         "Following"                       , "Вы подписаны";
+    player_unfollow_artist:  "Unfollow artist"                 , "Отписаться от артиста";
+    player_follow_artist:    "Follow artist"                   , "Подписаться на артиста";
+    player_no_followed_artists: "No followed artists"           , "Нет подписок на артистов";
+    player_playlists:        "Playlists"                       , "Плейлисты";
+    player_published_playlists: "Published Playlists"           , "Опубликованные плейлисты";
+    player_public:           "Public"                          , "Публичный";
+    player_published:        "Published"                       , "Опубликован";
+    player_by:               "by"                              , "от";
+    player_tracks_count:     "tracks"                          , "треков";
+    player_files_count:      "files"                           , "файлов";
+    player_releases_count:   "releases"                        , "релизов";
+    player_plays_count:      "plays"                           , "прослушиваний";
+    player_likes_count:      "likes"                           , "лайков";
+    player_likes_playlist:   "Likes"                           , "Лайки";
+    player_listened:         "listened"                        , "прослушано";
+    player_search_placeholder: "Search artists, releases, tracks..." , "Поиск артистов, релизов, треков...";
+    player_no_results:       "No results found"                , "Ничего не найдено";
+    player_new_playlist:     "New Playlist"                    , "Новый плейлист";
+    player_rename_playlist:  "Rename Playlist"                 , "Переименовать плейлист";
+    player_playlist_name:    "Playlist name"                   , "Название плейлиста";
+    player_add_to_playlist:  "Add to Playlist"                 , "Добавить в плейлист";
+    player_cancel:           "Cancel"                          , "Отмена";
+    player_create:           "Create"                          , "Создать";
+    player_save:             "Save"                            , "Сохранить";
+    player_delete:           "Delete"                          , "Удалить";
+    player_delete_playlist_confirm: "Delete this playlist?"     , "Удалить этот плейлист?";
+    player_rename:           "Rename"                          , "Переименовать";
+    player_close:            "Close"                           , "Закрыть";
+    player_log_out:          "Log out"                         , "Выйти";
+    player_admin_panel:      "Admin Panel"                     , "Админка";
+    player_info:             "Info"                            , "Информация";
+    player_no_details:       "No details available."           , "Нет подробностей.";
+    player_release_info:     "Release info"                    , "Информация о релизе";
+    player_track_info:       "Track info"                      , "Информация о треке";
+    player_type:             "Type"                            , "Тип";
+    player_year:             "Year"                            , "Год";
+    player_uploaders:        "Uploaders"                       , "Загрузили";
+    player_unknown:          "unknown"                         , "неизвестно";
+    player_unknown_size:     "unknown size"                    , "размер неизвестен";
+    player_unknown_release:  "Unknown release"                 , "Неизвестный релиз";
+    player_unknown_track:    "Unknown track"                   , "Неизвестный трек";
+    player_unknown_audio:    "unknown audio details"           , "детали аудио неизвестны";
+    player_release_year:     "Release year"                    , "Год релиза";
+    player_audio:            "Audio"                           , "Аудио";
+    player_size:             "Size"                            , "Размер";
+    player_uploader:         "Uploader"                        , "Загрузил";
+    player_play:             "Play"                            , "Играть";
+    player_like:             "Like"                            , "Лайк";
+    player_add_to_queue:     "Add to queue"                    , "Добавить в очередь";
+    player_add_to_end_queue: "Add to end of queue"             , "Добавить в конец очереди";
+    player_play_next:        "Play next"                       , "Играть следующим";
+    player_queue:            "Queue"                           , "Очередь";
+    player_next:             "Next"                            , "Далее";
+    player_previous:         "Previous"                        , "Назад";
+    player_clear:            "Clear"                           , "Очистить";
+    player_remove:           "Remove"                          , "Удалить";
+    player_queue_empty:      "Queue is empty"                  , "Очередь пуста";
+    player_shuffle:          "Shuffle"                         , "Перемешать";
+    player_repeat:           "Repeat"                          , "Повтор";
+    player_volume:           "Volume"                          , "Громкость";
+    player_appears_on:       "Appears on"                      , "Участвует в";
+    player_albums:           "Albums"                          , "Альбомы";
+    player_eps:              "EPs"                             , "EP";
+    player_singles:          "Singles"                         , "Синглы";
+    player_compilations:     "Compilations"                    , "Сборники";
+    player_mixtapes:         "Mixtapes"                        , "Микстейпы";
+    player_live_releases:    "Live releases"                   , "Концертные релизы";
+    player_soundtracks:      "Soundtracks"                     , "Саундтреки";
+
+    // Player torrent/history UI
+    player_torrent_manager:  "Torrent manager"                 , "Торрент-менеджер";
+    player_import_torrent:   "Import torrent"                  , "Импортировать торрент";
+    player_client_idle:      "Client idle"                     , "Клиент простаивает";
+    player_active:           "active"                          , "активно";
+    player_ai_idle:          "AI idle"                         , "ИИ простаивает";
+    player_ai_prefix:        "AI"                              , "ИИ";
+    player_processing:       "processing"                      , "обрабатывается";
+    player_queued:           "queued"                          , "в очереди";
+    player_saved:            "saved"                           , "сохранено";
+    player_saved_torrents:   "Saved torrents"                  , "Сохранённые торренты";
+    player_refresh:          "Refresh"                         , "Обновить";
+    player_no_saved_torrents: "No saved torrents"              , "Сохранённых торрентов нет";
+    player_torrent_file:     "Torrent file"                    , "Torrent-файл";
+    player_magnet_link:      "Magnet link"                     , "Magnet-ссылка";
+    player_preview_content:  "Preview content"                 , "Предпросмотр";
+    player_download_selected: "Download selected"              , "Скачать выбранное";
+    player_pause_download:   "Pause download"                  , "Поставить на паузу";
+    player_expand_all:       "Expand all"                      , "Развернуть всё";
+    player_collapse:         "Collapse"                        , "Свернуть";
+    player_selected:         "selected"                        , "выбрано";
+    player_preview:          "Preview"                         , "Предпросмотр";
+    player_downloading:      "Downloading"                     , "Скачивается";
+    player_moving:           "Moving"                          , "Перемещается";
+    player_completed:        "Completed"                       , "Готово";
+    player_failed:           "Failed"                          , "Ошибка";
+    player_paused:           "Paused"                          , "Пауза";
+    player_no_torrent_selected: "No torrent selected"          , "Торрент не выбран";
+    player_down:             "down"                            , "вниз";
+    player_up:               "up"                              , "вверх";
+    player_peers:            "peers"                           , "пиры";
+    player_live:             "live"                            , "активных";
+    player_seen:             "seen"                            , "видели";
+    player_eta:              "eta"                             , "осталось";
+    player_loading_history:  "Loading history..."              , "Загрузка истории...";
+    player_failed_load_history: "Failed to load history"        , "Не удалось загрузить историю";
+    player_total_plays:      "total plays"                     , "прослушиваний всего";
+    player_play_history:     "Play history"                    , "История прослушиваний";
+    player_no_plays_yet:     "No plays yet"                    , "Прослушиваний пока нет";
+    player_page:             "Page"                            , "Страница";
+    player_of:               "of"                              , "из";
+    player_choose_torrent:   "Choose a .torrent file or paste a magnet link." , "Выберите .torrent файл или вставьте magnet-ссылку.";
+    player_reading_torrent:  "Reading torrent file..."         , "Читаю torrent-файл...";
+    player_resolving_magnet: "Resolving magnet metadata. This can take a while..." , "Получаю метаданные magnet-ссылки. Это может занять время...";
+    player_preview_failed:   "Preview failed"                  , "Предпросмотр не удался";
+    player_all_files_selected: "All files are selected by default. Clear or adjust the tree before download." , "Все файлы выбраны по умолчанию. Перед скачиванием можно очистить или изменить выбор.";
+    player_opening_saved_torrent: "Opening saved torrent..."   , "Открываю сохранённый торрент...";
+    player_saved_torrent_opened: "Saved torrent opened. Adjust files or resume download." , "Сохранённый торрент открыт. Можно изменить файлы или продолжить скачивание.";
+    player_remove_torrent_confirm: "Remove this torrent from the client list? Downloaded files will stay on disk." , "Удалить этот торрент из списка клиента? Скачанные файлы останутся на диске.";
+    player_torrent_removed:  "Torrent removed from the client list." , "Торрент удалён из списка клиента.";
+    player_select_one_file:  "Select at least one file."       , "Выберите хотя бы один файл.";
+    player_starting_download: "Starting download..."           , "Запускаю скачивание...";
+    player_download_started: "Download started. Files will move to inbox when complete." , "Скачивание началось. После завершения файлы будут перенесены во входящие.";
+    player_pausing_download: "Pausing download..."             , "Ставлю скачивание на паузу...";
+    player_download_paused:  "Download paused. Start again when you are ready." , "Скачивание на паузе. Можно продолжить позже.";
+    player_status_failed:    "Status failed"                   , "Не удалось получить статус";
+    player_start_failed:     "Start failed"                    , "Не удалось запустить";
+    player_pause_failed:     "Pause failed"                    , "Не удалось поставить на паузу";
+    player_load_torrents_failed: "Could not load torrents"     , "Не удалось загрузить торренты";
+    player_open_torrent_failed: "Could not open torrent"       , "Не удалось открыть торрент";
+    player_delete_torrent_failed: "Could not delete torrent"   , "Не удалось удалить торрент";
+    player_load_ai_queue_failed: "Could not load AI queue"     , "Не удалось загрузить очередь ИИ";
 }

src/music/mod.rs

@@ -1578,6 +1578,65 @@ pub mod db_migrations {
             &[Operation::custom(add_media_file_uploader).build()];
     }
 
+    // -- M0031: persistent torrent import sessions ---------------------------
+
+    #[cot::db::migrations::migration_op]
+    async fn create_torrent_session(ctx: migrations::MigrationContext<'_>) -> cot::db::Result<()> {
+        ctx.db
+            .raw(
+                "CREATE TABLE IF NOT EXISTS furumusic__torrent_session (
+                    id VARCHAR(36) PRIMARY KEY,
+                    user_id BIGINT NOT NULL,
+                    name TEXT NOT NULL,
+                    info_hash VARCHAR(80) NOT NULL,
+                    source_kind VARCHAR(32) NOT NULL,
+                    source_label TEXT,
+                    torrent_bytes BYTEA NOT NULL,
+                    files_json TEXT NOT NULL,
+                    selected_files_json TEXT NOT NULL DEFAULT '[]',
+                    status VARCHAR(32) NOT NULL,
+                    total_size BIGINT NOT NULL DEFAULT 0,
+                    selected_size BIGINT NOT NULL DEFAULT 0,
+                    downloaded_bytes BIGINT NOT NULL DEFAULT 0,
+                    uploaded_bytes BIGINT NOT NULL DEFAULT 0,
+                    progress_percent DOUBLE PRECISION NOT NULL DEFAULT 0,
+                    error TEXT,
+                    created_at VARCHAR(32) NOT NULL,
+                    updated_at VARCHAR(32) NOT NULL,
+                    completed_at VARCHAR(32)
+                )",
+            )
+            .await?;
+        ctx.db
+            .raw(
+                "CREATE INDEX IF NOT EXISTS idx_torrent_session_user_updated
+                   ON furumusic__torrent_session (user_id, updated_at DESC)",
+            )
+            .await?;
+        ctx.db
+            .raw(
+                "CREATE INDEX IF NOT EXISTS idx_torrent_session_user_status
+                   ON furumusic__torrent_session (user_id, status)",
+            )
+            .await?;
+        Ok(())
+    }
+
+    #[derive(Debug, Copy, Clone)]
+    pub struct M0031CreateTorrentSession;
+
+    impl migrations::Migration for M0031CreateTorrentSession {
+        const APP_NAME: &'static str = "furumusic";
+        const MIGRATION_NAME: &'static str = "m_0031_create_torrent_session";
+        const DEPENDENCIES: &'static [migrations::MigrationDependency] =
+            &[migrations::MigrationDependency::migration(
+                "furumusic",
+                "m_0030_add_media_file_uploader",
+            )];
+        const OPERATIONS: &'static [Operation] =
+            &[Operation::custom(create_torrent_session).build()];
+    }
+
     pub const MIGRATIONS: &[&SyncDynMigration] = &[
         &M0006CreateMediaFile,
         &M0007CreateArtist,
@@ -1599,5 +1658,6 @@ pub mod db_migrations {
         &M0028AddModelNameColumns,
         &M0029AddPlaybackVolume,
         &M0030AddMediaFileUploader,
+        &M0031CreateTorrentSession,
     ];
 }

src/player/dto.rs

@@ -55,6 +55,7 @@ pub(super) struct TrackItem {
     pub(super) duration_seconds: f64,
     pub(super) artists: Vec<ArtistRef>,
     pub(super) featured_artists: Vec<ArtistRef>,
+    pub(super) release_year: Option<i32>,
     pub(super) cover_url: Option<String>,
     pub(super) stream_url: String,
     pub(super) uploader_name: String,
@@ -71,6 +72,7 @@ pub(super) struct ArtistAppearanceTrack {
     pub(super) title: String,
     pub(super) release_id: i64,
     pub(super) release_title: String,
+    pub(super) release_year: Option<i32>,
     pub(super) duration_seconds: f64,
     pub(super) artists: Vec<ArtistRef>,
     pub(super) featured_artists: Vec<ArtistRef>,
@@ -160,6 +162,12 @@ pub(super) struct UserProfile {
     pub(super) stats: UserStats,
 }
 
+#[derive(Debug, Serialize, JsonSchema)]
+pub(super) struct AgentQueueStatus {
+    pub(super) queued_count: i64,
+    pub(super) processing_count: i64,
+}
+
 #[derive(Debug, Serialize, JsonSchema)]
 pub(super) struct PlayHistoryItem {
     pub(super) id: i64,

src/player/mod.rs

@@ -105,6 +105,36 @@ async fn me_handler(
     .into_response()
 }
 
+// ---------------------------------------------------------------------------
+// GET /api/player/agent-queue
+// ---------------------------------------------------------------------------
+
+async fn agent_queue_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 (queued_count, processing_count): (i64, i64) = sqlx::query_as(
+        r#"SELECT
+              COUNT(*) FILTER (WHERE status = 'queued') AS queued_count,
+              COUNT(*) FILTER (WHERE status = 'processing') AS processing_count
+           FROM furumusic__pending_review"#,
+    )
+    .fetch_one(pool)
+    .await
+    .map_err(|e| cot::Error::internal(e.to_string()))?;
+
+    Json(AgentQueueStatus {
+        queued_count,
+        processing_count,
+    })
+    .into_response()
+}
+
 // ---------------------------------------------------------------------------
 // GET /api/player/artists?page=N&limit=N
 // ---------------------------------------------------------------------------
@@ -265,6 +295,7 @@ async fn artist_detail_handler(
                   t.title::text AS title,
                   r.id AS release_id,
                   r.title::text AS release_title,
+                  r.year AS release_year,
                   t.duration_seconds,
                   t.cover_file_id,
                   r.cover_file_id AS release_cover_file_id,
@@ -338,6 +369,7 @@ async fn artist_detail_handler(
                 title: t.title,
                 release_id: t.release_id,
                 release_title: t.release_title,
+                release_year: t.release_year,
                 duration_seconds: t.duration_seconds,
                 artists: featured_main_artists.remove(&tid).unwrap_or_default(),
                 featured_artists: featured_feat_artists.remove(&tid).unwrap_or_default(),
@@ -412,6 +444,7 @@ 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.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
                   mf.audio_bitrate,
@@ -484,6 +517,7 @@ 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_year: t.release_year,
                 cover_url: track_cover_url(t.cover_file_id, t.release_cover_file_id),
                 stream_url: format!("/api/player/stream/{tid}"),
                 uploader_name: t.uploader_name,
@@ -640,6 +674,7 @@ 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.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
                   mf.audio_bitrate,
@@ -732,6 +767,7 @@ 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_year: t.release_year,
                 cover_url: track_cover_url(t.cover_file_id, t.release_cover_file_id),
                 stream_url: format!("/api/player/stream/{tid}"),
                 uploader_name: t.uploader_name,
@@ -754,6 +790,7 @@ 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.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
                   mf.audio_bitrate,
@@ -1221,6 +1258,7 @@ 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.year AS release_year,
                       COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                       mf.audio_format,
                       mf.audio_bitrate,
@@ -1290,11 +1328,12 @@ 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, uploader_name, audio_format, audio_bitrate,
+                      release_cover_file_id, release_year, uploader_name, audio_format, audio_bitrate,
                       audio_sample_rate, audio_bit_depth, file_size_bytes 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.year AS release_year,
                        COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                        mf.audio_format,
                        mf.audio_bitrate,
@@ -1313,7 +1352,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,
+                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,
                          mf.uploader_name, mf.audio_format, mf.audio_bitrate, mf.audio_sample_rate, mf.audio_bit_depth, mf.file_size_bytes
                 ORDER BY similarity DESC
                 LIMIT $2
@@ -1409,6 +1448,7 @@ 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_year: t.release_year,
                 cover_url: track_cover_url(t.cover_file_id, t.release_cover_file_id),
                 stream_url: format!("/api/player/stream/{tid}"),
                 uploader_name: t.uploader_name,
@@ -1975,6 +2015,7 @@ 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.year as release_year,
                   COALESCE(mf.uploader_name, 'UFO')::text AS uploader_name,
                   mf.audio_format,
                   mf.audio_bitrate,
@@ -2046,6 +2087,7 @@ 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_year: t.release_year,
                 cover_url: track_cover_url(t.cover_file_id, t.release_cover_file_id),
                 stream_url: format!("/api/player/stream/{tid}"),
                 uploader_name: t.uploader_name,
@@ -2122,30 +2164,196 @@ impl App for PlayerApp {
                 },
                 "player_me",
             ),
+            Route::with_handler_and_name(
+                "/agent-queue",
+                {
+                    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;
+                            agent_queue_handler(session, db, pg_pool).await
+                        }
+                    })
+                },
+                "player_agent_queue",
+            ),
             // -- Torrent import widget --
             Route::with_handler_and_name(
-                "/torrents/preview",
+                "/torrents",
                 {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
                     let torrent_service = Arc::clone(&torrent_service);
                     let scheduler_handle = Arc::clone(&self.scheduler_handle);
-                    post(
-                        move |session: Session, db: Database, json: Json<TorrentPreviewRequest>| {
+                    get(move |session: Session, db: Database| {
+                        let pool = Arc::clone(&pool);
+                        let pool_config = Arc::clone(&pool_config);
+                        let torrent_service = Arc::clone(&torrent_service);
+                        let scheduler_handle = Arc::clone(&scheduler_handle);
+                        async move {
+                            let Some(user) = auth::get_session_user(&session, &db).await else {
+                                return Ok(json_error(
+                                    StatusCode::UNAUTHORIZED,
+                                    "not authenticated",
+                                ));
+                            };
+                            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;
+                            let service = torrent_service
+                                .get_or_init(|| async {
+                                    Arc::new(TorrentService::new(Arc::clone(&scheduler_handle)))
+                                })
+                                .await;
+                            match service.list(pg_pool, user.id).await {
+                                Ok(items) => Json(items).into_response(),
+                                Err(err) => {
+                                    Ok(json_error(StatusCode::BAD_REQUEST, &err.to_string()))
+                                }
+                            }
+                        }
+                    })
+                },
+                "player_torrent_list",
+            ),
+            Route::with_handler_and_name(
+                "/torrents/session/{id}",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    let torrent_service = Arc::clone(&torrent_service);
+                    let scheduler_handle = Arc::clone(&self.scheduler_handle);
+                    get({
+                        let pool = Arc::clone(&pool);
+                        let pool_config = Arc::clone(&pool_config);
+                        let torrent_service = Arc::clone(&torrent_service);
+                        let scheduler_handle = Arc::clone(&scheduler_handle);
+                        move |session: Session, db: Database, path: Path<PathStringId>| {
+                            let pool = Arc::clone(&pool);
+                            let pool_config = Arc::clone(&pool_config);
                             let torrent_service = Arc::clone(&torrent_service);
                             let scheduler_handle = Arc::clone(&scheduler_handle);
                             async move {
-                                let Some(_user) = auth::get_session_user(&session, &db).await
-                                else {
+                                let Some(user) = auth::get_session_user(&session, &db).await else {
                                     return Ok(json_error(
                                         StatusCode::UNAUTHORIZED,
                                         "not authenticated",
                                     ));
                                 };
+                                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;
+                                let service = torrent_service
+                                    .get_or_init(|| async {
+                                        Arc::new(TorrentService::new(Arc::clone(
+                                            &scheduler_handle,
+                                        )))
+                                    })
+                                    .await;
+                                match service.details(pg_pool, user.id, &path.0.id).await {
+                                    Ok(details) => Json(details).into_response(),
+                                    Err(err) => {
+                                        Ok(json_error(StatusCode::NOT_FOUND, &err.to_string()))
+                                    }
+                                }
+                            }
+                        }
+                    })
+                    .delete(move |session: Session, db: Database, path: Path<PathStringId>| {
+                        let pool = Arc::clone(&pool);
+                        let pool_config = Arc::clone(&pool_config);
+                        let torrent_service = Arc::clone(&torrent_service);
+                        let scheduler_handle = Arc::clone(&scheduler_handle);
+                        async move {
+                            let Some(user) = auth::get_session_user(&session, &db).await else {
+                                return Ok(json_error(
+                                    StatusCode::UNAUTHORIZED,
+                                    "not authenticated",
+                                ));
+                            };
+                            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;
+                            let service = torrent_service
+                                .get_or_init(|| async {
+                                    Arc::new(TorrentService::new(Arc::clone(&scheduler_handle)))
+                                })
+                                .await;
+                            match service.remove(pg_pool, user.id, &path.0.id).await {
+                                Ok(()) => Json(serde_json::json!({ "ok": true })).into_response(),
+                                Err(err) => {
+                                    Ok(json_error(StatusCode::NOT_FOUND, &err.to_string()))
+                                }
+                            }
+                        }
+                    })
+                },
+                "player_torrent_detail",
+            ),
+            Route::with_handler_and_name(
+                "/torrents/preview",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    let torrent_service = Arc::clone(&torrent_service);
+                    let scheduler_handle = Arc::clone(&self.scheduler_handle);
+                    post(
+                        move |session: Session, db: Database, json: Json<TorrentPreviewRequest>| {
+                            let pool = Arc::clone(&pool);
+                            let pool_config = Arc::clone(&pool_config);
+                            let torrent_service = Arc::clone(&torrent_service);
+                            let scheduler_handle = Arc::clone(&scheduler_handle);
+                            async move {
+                                let Some(user) = auth::get_session_user(&session, &db).await else {
+                                    return Ok(json_error(
+                                        StatusCode::UNAUTHORIZED,
+                                        "not authenticated",
+                                    ));
+                                };
+                                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;
                                 let service = torrent_service
                                     .get_or_init(|| async {
                                         Arc::new(TorrentService::new(Arc::clone(&scheduler_handle)))
                                     })
                                     .await;
-                                match service.preview(json.0).await {
+                                match service.preview(pg_pool, user.id, json.0).await {
                                     Ok(preview) => Json(preview).into_response(),
                                     Err(err) => {
                                         Ok(json_error(StatusCode::BAD_REQUEST, &err.to_string()))
@@ -2160,6 +2368,8 @@ impl App for PlayerApp {
             Route::with_handler_and_name(
                 "/torrents/{id}/start",
                 {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
                     let torrent_service = Arc::clone(&torrent_service);
                     let scheduler_handle = Arc::clone(&self.scheduler_handle);
                     post(
@@ -2167,6 +2377,8 @@ impl App for PlayerApp {
                               db: Database,
                               path: Path<PathStringId>,
                               json: Json<TorrentStartRequest>| {
+                            let pool = Arc::clone(&pool);
+                            let pool_config = Arc::clone(&pool_config);
                             let torrent_service = Arc::clone(&torrent_service);
                             let scheduler_handle = Arc::clone(&scheduler_handle);
                             async move {
@@ -2176,6 +2388,15 @@ impl App for PlayerApp {
                                         "not authenticated",
                                     ));
                                 };
+                                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;
                                 let (live_config, _) = AppConfig::load_with_db(&db).await;
                                 let service = torrent_service
                                     .get_or_init(|| async {
@@ -2184,6 +2405,7 @@ impl App for PlayerApp {
                                     .await;
                                 match service
                                     .start(
+                                        pg_pool,
                                         &path.0.id,
                                         json.0.selected_files,
                                         live_config.agent_inbox_dir,
@@ -2202,29 +2424,85 @@ impl App for PlayerApp {
                 },
                 "player_torrent_start",
             ),
+            Route::with_handler_and_name(
+                "/torrents/{id}/pause",
+                {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
+                    let torrent_service = Arc::clone(&torrent_service);
+                    let scheduler_handle = Arc::clone(&self.scheduler_handle);
+                    post(move |session: Session, db: Database, path: Path<PathStringId>| {
+                        let pool = Arc::clone(&pool);
+                        let pool_config = Arc::clone(&pool_config);
+                        let torrent_service = Arc::clone(&torrent_service);
+                        let scheduler_handle = Arc::clone(&scheduler_handle);
+                        async move {
+                            let Some(user) = auth::get_session_user(&session, &db).await else {
+                                return Ok(json_error(
+                                    StatusCode::UNAUTHORIZED,
+                                    "not authenticated",
+                                ));
+                            };
+                            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;
+                            let service = torrent_service
+                                .get_or_init(|| async {
+                                    Arc::new(TorrentService::new(Arc::clone(&scheduler_handle)))
+                                })
+                                .await;
+                            match service.pause(pg_pool, user.id, &path.0.id).await {
+                                Ok(job) => Json(job).into_response(),
+                                Err(err) => {
+                                    Ok(json_error(StatusCode::BAD_REQUEST, &err.to_string()))
+                                }
+                            }
+                        }
+                    })
+                },
+                "player_torrent_pause",
+            ),
             Route::with_handler_and_name(
                 "/torrents/{id}/status",
                 {
+                    let pool = Arc::clone(&pool);
+                    let pool_config = Arc::clone(&pool_config);
                     let torrent_service = Arc::clone(&torrent_service);
                     let scheduler_handle = Arc::clone(&self.scheduler_handle);
                     get(
                         move |session: Session, db: Database, path: Path<PathStringId>| {
+                            let pool = Arc::clone(&pool);
+                            let pool_config = Arc::clone(&pool_config);
                             let torrent_service = Arc::clone(&torrent_service);
                             let scheduler_handle = Arc::clone(&scheduler_handle);
                             async move {
-                                let Some(_user) = auth::get_session_user(&session, &db).await
-                                else {
+                                let Some(user) = auth::get_session_user(&session, &db).await else {
                                     return Ok(json_error(
                                         StatusCode::UNAUTHORIZED,
                                         "not authenticated",
                                     ));
                                 };
+                                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;
                                 let service = torrent_service
                                     .get_or_init(|| async {
                                         Arc::new(TorrentService::new(Arc::clone(&scheduler_handle)))
                                     })
                                     .await;
-                                match service.status(&path.0.id).await {
+                                match service.status(pg_pool, user.id, &path.0.id).await {
                                     Ok(job) => Json(job).into_response(),
                                     Err(err) => {
                                         Ok(json_error(StatusCode::NOT_FOUND, &err.to_string()))

src/player/rows.rs

@@ -37,6 +37,7 @@ 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_year: Option<i32>,
     pub(super) uploader_name: String,
     pub(super) audio_format: Option<String>,
     pub(super) audio_bitrate: Option<i32>,
@@ -102,6 +103,7 @@ 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_year: Option<i32>,
     pub(super) uploader_name: String,
     pub(super) audio_format: Option<String>,
     pub(super) audio_bitrate: Option<i32>,
@@ -116,6 +118,7 @@ pub(super) struct AppearanceTrackRow {
     pub(super) title: String,
     pub(super) release_id: i64,
     pub(super) release_title: String,
+    pub(super) release_year: Option<i32>,
     pub(super) duration_seconds: f64,
     pub(super) cover_file_id: Option<i64>,
     pub(super) release_cover_file_id: Option<i64>,
@@ -155,6 +158,7 @@ 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_year: Option<i32>,
     pub(super) uploader_name: String,
     pub(super) audio_format: Option<String>,
     pub(super) audio_bitrate: Option<i32>,

src/torrents.rs

@@ -9,14 +9,16 @@ use librqbit::{
     AddTorrent, AddTorrentOptions, AddTorrentResponse, ManagedTorrent, Session, SessionOptions,
 };
 use serde::{Deserialize, Serialize};
+use sqlx::{FromRow, PgPool};
 use tokio::sync::{Mutex, OnceCell};
 use uuid::Uuid;
 
 use crate::scheduler::SchedulerHandle;
 
 const METADATA_TIMEOUT: Duration = Duration::from_secs(90);
+const TORRENT_LIST_LIMIT: i64 = 100;
 
-#[derive(Debug, Clone, Serialize)]
+#[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct TorrentFileDto {
     pub index: usize,
     pub name: String,
@@ -40,11 +42,29 @@ pub struct TorrentJobDto {
     pub name: String,
     pub info_hash: String,
     pub status: String,
+    pub client_state: Option<String>,
     pub total_size: u64,
     pub selected_size: u64,
     pub downloaded_bytes: u64,
+    pub uploaded_bytes: u64,
     pub progress_percent: f64,
+    pub download_speed_mbps: Option<f64>,
+    pub upload_speed_mbps: Option<f64>,
+    pub peers_live: Option<usize>,
+    pub peers_seen: Option<usize>,
+    pub eta: Option<String>,
+    pub active: bool,
     pub error: Option<String>,
+    pub created_at: Option<String>,
+    pub updated_at: Option<String>,
+    pub completed_at: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize)]
+pub struct TorrentSessionDto {
+    pub job: TorrentJobDto,
+    pub preview: TorrentPreviewDto,
+    pub selected_files: Vec<usize>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -54,11 +74,21 @@ pub enum TorrentPreviewKind {
     TorrentFile,
 }
 
+impl TorrentPreviewKind {
+    fn as_str(&self) -> &'static str {
+        match self {
+            Self::Magnet => "magnet",
+            Self::TorrentFile => "torrent_file",
+        }
+    }
+}
+
 #[derive(Debug, Deserialize)]
 pub struct TorrentPreviewRequest {
     pub kind: TorrentPreviewKind,
     pub magnet: Option<String>,
     pub torrent_base64: Option<String>,
+    pub source_label: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -73,6 +103,7 @@ enum TorrentJobStatus {
     Moving,
     Complete,
     Failed,
+    Paused,
 }
 
 impl TorrentJobStatus {
@@ -83,21 +114,170 @@ impl TorrentJobStatus {
             Self::Moving => "moving",
             Self::Complete => "complete",
             Self::Failed => "failed",
+            Self::Paused => "paused",
+        }
+    }
+
+    fn from_str(value: &str) -> Self {
+        match value {
+            "downloading" => Self::Downloading,
+            "moving" => Self::Moving,
+            "complete" => Self::Complete,
+            "failed" => Self::Failed,
+            "paused" => Self::Paused,
+            _ => Self::Preview,
         }
     }
 }
 
 struct TorrentJob {
     id: String,
+    user_id: i64,
     name: String,
     info_hash: String,
+    source_kind: String,
+    source_label: Option<String>,
     torrent_bytes: Vec<u8>,
     files: Vec<TorrentFileDto>,
     status: TorrentJobStatus,
     output_dir: PathBuf,
     selected_files: Vec<usize>,
     handle: Option<Arc<ManagedTorrent>>,
+    downloaded_bytes: u64,
+    uploaded_bytes: u64,
+    progress_percent: f64,
     error: Option<String>,
+    created_at: String,
+    updated_at: String,
+    completed_at: Option<String>,
+}
+
+#[derive(Debug, FromRow)]
+struct TorrentSessionRow {
+    id: String,
+    user_id: i64,
+    name: String,
+    info_hash: String,
+    source_kind: String,
+    source_label: Option<String>,
+    torrent_bytes: Vec<u8>,
+    files_json: String,
+    selected_files_json: String,
+    status: String,
+    total_size: i64,
+    selected_size: i64,
+    downloaded_bytes: i64,
+    uploaded_bytes: i64,
+    progress_percent: f64,
+    error: Option<String>,
+    created_at: String,
+    updated_at: String,
+    completed_at: Option<String>,
+}
+
+impl TorrentSessionRow {
+    fn files(&self) -> anyhow::Result<Vec<TorrentFileDto>> {
+        serde_json::from_str(&self.files_json).context("invalid torrent file list")
+    }
+
+    fn selected_files(&self) -> Vec<usize> {
+        serde_json::from_str(&self.selected_files_json).unwrap_or_default()
+    }
+
+    fn dto(&self, handle: Option<&Arc<ManagedTorrent>>) -> TorrentJobDto {
+        let active = handle.is_some();
+        let status = if active {
+            self.status.as_str()
+        } else if self.status == "downloading" || self.status == "moving" {
+            "paused"
+        } else {
+            self.status.as_str()
+        };
+        let stats = handle.map(|h| h.stats());
+        let downloaded_bytes = stats
+            .as_ref()
+            .map(|s| s.progress_bytes)
+            .unwrap_or_else(|| i64_to_u64(self.downloaded_bytes));
+        let uploaded_bytes = stats
+            .as_ref()
+            .map(|s| s.uploaded_bytes)
+            .unwrap_or_else(|| i64_to_u64(self.uploaded_bytes));
+        let total_bytes = stats
+            .as_ref()
+            .map(|s| s.total_bytes)
+            .filter(|v| *v > 0)
+            .unwrap_or_else(|| i64_to_u64(self.selected_size));
+        let progress_percent = progress_percent(downloaded_bytes, total_bytes)
+            .unwrap_or(self.progress_percent)
+            .clamp(0.0, 100.0);
+        let progress_percent = if status == "complete" {
+            100.0
+        } else {
+            progress_percent
+        };
+        let live = stats.as_ref().and_then(|s| s.live.as_ref());
+        let peer_stats = live.map(|l| &l.snapshot.peer_stats);
+
+        TorrentJobDto {
+            id: self.id.clone(),
+            name: self.name.clone(),
+            info_hash: self.info_hash.clone(),
+            status: status.to_string(),
+            client_state: stats.as_ref().map(|s| s.state.to_string()),
+            total_size: i64_to_u64(self.total_size),
+            selected_size: i64_to_u64(self.selected_size),
+            downloaded_bytes,
+            uploaded_bytes,
+            progress_percent,
+            download_speed_mbps: live.map(|l| l.download_speed.mbps),
+            upload_speed_mbps: live.map(|l| l.upload_speed.mbps),
+            peers_live: peer_stats.map(|p| p.live),
+            peers_seen: peer_stats.map(|p| p.seen),
+            eta: live.and_then(|l| l.time_remaining.as_ref().map(|eta| eta.to_string())),
+            active,
+            error: self.error.clone(),
+            created_at: Some(self.created_at.clone()),
+            updated_at: Some(self.updated_at.clone()),
+            completed_at: self.completed_at.clone(),
+        }
+    }
+
+    fn preview(&self) -> anyhow::Result<TorrentPreviewDto> {
+        Ok(TorrentPreviewDto {
+            id: self.id.clone(),
+            name: self.name.clone(),
+            info_hash: self.info_hash.clone(),
+            total_size: i64_to_u64(self.total_size),
+            files: self.files()?,
+        })
+    }
+
+    fn into_job(self, temp_root: &Path) -> anyhow::Result<TorrentJob> {
+        let id = self.id.clone();
+        let files = self.files()?;
+        let selected_files = self.selected_files();
+        Ok(TorrentJob {
+            id: id.clone(),
+            user_id: self.user_id,
+            name: self.name,
+            info_hash: self.info_hash,
+            source_kind: self.source_kind,
+            source_label: self.source_label,
+            torrent_bytes: self.torrent_bytes,
+            files,
+            status: TorrentJobStatus::from_str(&self.status),
+            output_dir: temp_root.join(&id).join("download"),
+            selected_files,
+            handle: None,
+            downloaded_bytes: i64_to_u64(self.downloaded_bytes),
+            uploaded_bytes: i64_to_u64(self.uploaded_bytes),
+            progress_percent: self.progress_percent,
+            error: self.error,
+            created_at: self.created_at,
+            updated_at: self.updated_at,
+            completed_at: self.completed_at,
+        })
+    }
 }
 
 impl TorrentJob {
@@ -106,65 +286,76 @@ impl TorrentJob {
     }
 
     fn selected_size(&self) -> u64 {
-        if self.selected_files.is_empty() {
-            return 0;
+        selected_size(&self.files, &self.selected_files)
+    }
+
+    fn preview(&self) -> TorrentPreviewDto {
+        TorrentPreviewDto {
+            id: self.id.clone(),
+            name: self.name.clone(),
+            info_hash: self.info_hash.clone(),
+            total_size: self.total_size(),
+            files: self.files.clone(),
         }
-        self.files
-            .iter()
-            .filter(|f| self.selected_files.contains(&f.index))
-            .map(|f| f.length)
-            .sum()
+    }
+
+    fn refresh_progress(&mut self) {
+        let Some(handle) = &self.handle else {
+            return;
+        };
+        let stats = handle.stats();
+        self.downloaded_bytes = stats.progress_bytes;
+        self.uploaded_bytes = stats.uploaded_bytes;
+        self.progress_percent = progress_percent(stats.progress_bytes, stats.total_bytes)
+            .unwrap_or(self.progress_percent)
+            .clamp(0.0, 100.0);
     }
 
     fn dto(&self) -> TorrentJobDto {
         let stats = self.handle.as_ref().map(|h| h.stats());
-        let downloaded_bytes = stats.as_ref().map(|s| s.progress_bytes).unwrap_or(0);
+        let downloaded_bytes = stats
+            .as_ref()
+            .map(|s| s.progress_bytes)
+            .unwrap_or(self.downloaded_bytes);
+        let uploaded_bytes = stats
+            .as_ref()
+            .map(|s| s.uploaded_bytes)
+            .unwrap_or(self.uploaded_bytes);
         let total_bytes = stats
             .as_ref()
             .map(|s| s.total_bytes)
             .filter(|v| *v > 0)
             .unwrap_or_else(|| self.selected_size());
-        let progress_percent = if total_bytes == 0 {
-            0.0
-        } else {
-            downloaded_bytes as f64 / total_bytes as f64 * 100.0
-        };
+        let live = stats.as_ref().and_then(|s| s.live.as_ref());
+        let peer_stats = live.map(|l| &l.snapshot.peer_stats);
 
-        Self::dto_from_parts(
-            &self.id,
-            &self.name,
-            &self.info_hash,
-            self.status,
-            self.total_size(),
-            self.selected_size(),
-            downloaded_bytes,
-            progress_percent,
-            self.error.clone(),
-        )
-    }
-
-    #[allow(clippy::too_many_arguments)]
-    fn dto_from_parts(
-        id: &str,
-        name: &str,
-        info_hash: &str,
-        status: TorrentJobStatus,
-        total_size: u64,
-        selected_size: u64,
-        downloaded_bytes: u64,
-        progress_percent: f64,
-        error: Option<String>,
-    ) -> TorrentJobDto {
         TorrentJobDto {
-            id: id.to_string(),
-            name: name.to_string(),
-            info_hash: info_hash.to_string(),
-            status: status.as_str().to_string(),
-            total_size,
-            selected_size,
+            id: self.id.clone(),
+            name: self.name.clone(),
+            info_hash: self.info_hash.clone(),
+            status: self.status.as_str().to_string(),
+            client_state: stats.as_ref().map(|s| s.state.to_string()),
+            total_size: self.total_size(),
+            selected_size: self.selected_size(),
             downloaded_bytes,
-            progress_percent: progress_percent.clamp(0.0, 100.0),
-            error,
+            uploaded_bytes,
+            progress_percent: if self.status == TorrentJobStatus::Complete {
+                100.0
+            } else {
+                progress_percent(downloaded_bytes, total_bytes)
+                .unwrap_or(self.progress_percent)
+                    .clamp(0.0, 100.0)
+            },
+            download_speed_mbps: live.map(|l| l.download_speed.mbps),
+            upload_speed_mbps: live.map(|l| l.upload_speed.mbps),
+            peers_live: peer_stats.map(|p| p.live),
+            peers_seen: peer_stats.map(|p| p.seen),
+            eta: live.and_then(|l| l.time_remaining.as_ref().map(|eta| eta.to_string())),
+            active: self.handle.is_some(),
+            error: self.error.clone(),
+            created_at: Some(self.created_at.clone()),
+            updated_at: Some(self.updated_at.clone()),
+            completed_at: self.completed_at.clone(),
         }
     }
 }
@@ -205,15 +396,75 @@ impl TorrentService {
             .cloned()
     }
 
+    pub async fn list(&self, pool: &PgPool, user_id: i64) -> anyhow::Result<Vec<TorrentJobDto>> {
+        let rows = sqlx::query_as::<_, TorrentSessionRow>(
+            r#"SELECT id, user_id, name, info_hash, source_kind, source_label, torrent_bytes,
+                      files_json, selected_files_json, status, total_size, selected_size,
+                      downloaded_bytes, uploaded_bytes, progress_percent, error,
+                      created_at, updated_at, completed_at
+                 FROM furumusic__torrent_session
+                WHERE user_id = $1
+                ORDER BY updated_at DESC, created_at DESC
+                LIMIT $2"#,
+        )
+        .bind(user_id)
+        .bind(TORRENT_LIST_LIMIT)
+        .fetch_all(pool)
+        .await?;
+
+        let handles = {
+            let jobs = self.jobs.lock().await;
+            jobs.iter()
+                .filter_map(|(id, job)| job.handle.as_ref().map(|h| (id.clone(), Arc::clone(h))))
+                .collect::<HashMap<_, _>>()
+        };
+
+        Ok(rows
+            .iter()
+            .map(|row| row.dto(handles.get(&row.id)))
+            .collect())
+    }
+
+    pub async fn details(
+        &self,
+        pool: &PgPool,
+        user_id: i64,
+        id: &str,
+    ) -> anyhow::Result<TorrentSessionDto> {
+        if let Some(session) = self.memory_details(user_id, id).await {
+            return Ok(session);
+        }
+
+        let row = load_row(pool, user_id, id).await?;
+        let selected_files = row.selected_files();
+        let job = row.dto(None);
+        let preview = row.preview()?;
+        Ok(TorrentSessionDto {
+            job,
+            preview,
+            selected_files,
+        })
+    }
+
     pub async fn preview(
         &self,
+        pool: &PgPool,
+        user_id: i64,
         request: TorrentPreviewRequest,
-    ) -> anyhow::Result<TorrentPreviewDto> {
+    ) -> anyhow::Result<TorrentSessionDto> {
         let session = self.session().await?;
         let id = Uuid::new_v4().to_string();
         let output_dir = self.temp_root.join(&id).join("download");
         tokio::fs::create_dir_all(&output_dir).await?;
 
+        let source_kind = request.kind.as_str().to_string();
+        let source_label = request
+            .source_label
+            .as_deref()
+            .map(str::trim)
+            .filter(|s| !s.is_empty())
+            .map(str::to_owned);
+
         let add = match request.kind {
             TorrentPreviewKind::Magnet => {
                 let magnet = request
@@ -269,50 +520,101 @@ impl TorrentService {
                 .filename
                 .to_string()
                 .unwrap_or_else(|_| "<invalid filename>".to_string());
-            let selected = is_audio_path(&name);
             files.push(TorrentFileDto {
                 index,
                 name,
                 components: details.filename.to_vec().unwrap_or_default(),
                 length: details.len,
-                selected,
+                selected: true,
             });
         }
 
-        let total_size = files.iter().map(|f| f.length).sum();
-        let dto = TorrentPreviewDto {
-            id: id.clone(),
-            name: name.clone(),
-            info_hash: list.info_hash.as_string(),
-            total_size,
-            files: files.clone(),
-        };
-
+        let selected_files = files.iter().map(|f| f.index).collect::<Vec<_>>();
+        let now = now_string();
         let job = TorrentJob {
             id: id.clone(),
+            user_id,
             name,
-            info_hash: dto.info_hash.clone(),
+            info_hash: list.info_hash.as_string(),
+            source_kind,
+            source_label,
             torrent_bytes: list.torrent_bytes.to_vec(),
             files,
             status: TorrentJobStatus::Preview,
             output_dir,
-            selected_files: Vec::new(),
+            selected_files,
             handle: None,
+            downloaded_bytes: 0,
+            uploaded_bytes: 0,
+            progress_percent: 0.0,
             error: None,
+            created_at: now.clone(),
+            updated_at: now,
+            completed_at: None,
+        };
+        insert_job(pool, &job).await?;
+
+        let dto = TorrentSessionDto {
+            job: job.dto(),
+            preview: job.preview(),
+            selected_files: job.selected_files.clone(),
         };
         self.jobs.lock().await.insert(id, job);
 
         Ok(dto)
     }
 
-    pub async fn status(&self, id: &str) -> anyhow::Result<TorrentJobDto> {
-        let jobs = self.jobs.lock().await;
-        let job = jobs.get(id).context("torrent job not found")?;
-        Ok(job.dto())
+    pub async fn status(
+        &self,
+        pool: &PgPool,
+        user_id: i64,
+        id: &str,
+    ) -> anyhow::Result<TorrentJobDto> {
+        let dto = {
+            let mut jobs = self.jobs.lock().await;
+            jobs.get_mut(id)
+                .filter(|job| job.user_id == user_id)
+                .map(|job| {
+                    job.refresh_progress();
+                    job.dto()
+                })
+        };
+
+        if let Some(dto) = dto {
+            persist_progress(pool, &dto).await?;
+            return Ok(dto);
+        }
+
+        let row = load_row(pool, user_id, id).await?;
+        Ok(row.dto(None))
+    }
+
+    pub async fn remove(&self, pool: &PgPool, user_id: i64, id: &str) -> anyhow::Result<()> {
+        let removed = {
+            let mut jobs = self.jobs.lock().await;
+            jobs.remove(id).and_then(|job| job.handle)
+        };
+        if let Some(handle) = removed {
+            self.stop_torrent(&handle).await;
+        }
+
+        let result = sqlx::query(
+            "DELETE FROM furumusic__torrent_session WHERE id = $1 AND user_id = $2",
+        )
+        .bind(id)
+        .bind(user_id)
+        .execute(pool)
+        .await?;
+
+        if result.rows_affected() == 0 {
+            bail!("torrent session not found");
+        }
+        Ok(())
     }
 
     pub async fn start(
         self: &Arc<Self>,
+        pool: &PgPool,
         id: &str,
         selected_files: Vec<usize>,
         inbox_dir: String,
@@ -326,21 +628,34 @@ impl TorrentService {
         }
         let inbox_dir = validate_inbox_dir(&inbox_dir)?;
 
+        self.ensure_memory_job(pool, uploader_user_id, id).await?;
+
         let (torrent_bytes, output_dir) = {
             let mut jobs = self.jobs.lock().await;
             let job = jobs.get_mut(id).context("torrent job not found")?;
-            if job.status != TorrentJobStatus::Preview && job.status != TorrentJobStatus::Failed {
-                bail!("torrent job is already started");
+            if job.user_id != uploader_user_id {
+                bail!("torrent job not found");
+            }
+            if job.handle.is_some() && matches!(job.status, TorrentJobStatus::Downloading | TorrentJobStatus::Moving) {
+                bail!("torrent job is already running");
             }
             validate_selection(&job.files, &selected_files)?;
             job.status = TorrentJobStatus::Downloading;
             job.selected_files = selected_files.clone();
+            job.downloaded_bytes = 0;
+            job.uploaded_bytes = 0;
+            job.progress_percent = 0.0;
             job.error = None;
+            job.completed_at = None;
+            job.updated_at = now_string();
             (job.torrent_bytes.clone(), job.output_dir.clone())
         };
 
+        tokio::fs::create_dir_all(&output_dir).await?;
+        mark_job_started(pool, id, &selected_files, &self.memory_job_dto(id).await?).await?;
+
         let session = self.session().await?;
-        let response = session
+        let response = match session
             .add_torrent(
                 AddTorrent::from_bytes(torrent_bytes),
                 Some(AddTorrentOptions {
@@ -350,11 +665,23 @@ impl TorrentService {
                     ..Default::default()
                 }),
             )
-            .await?;
+            .await
+        {
+            Ok(response) => response,
+            Err(err) => {
+                self.fail_job(pool, id, err.to_string()).await;
+                return Err(err.into());
+            }
+        };
 
-        let handle = response
-            .into_handle()
-            .context("torrent did not return a download handle")?;
+        let handle = match response.into_handle() {
+            Some(handle) => handle,
+            None => {
+                let err = anyhow::anyhow!("torrent did not return a download handle");
+                self.fail_job(pool, id, err.to_string()).await;
+                return Err(err);
+            }
+        };
 
         let dto = {
             let mut jobs = self.jobs.lock().await;
@@ -362,32 +689,122 @@ impl TorrentService {
             job.handle = Some(handle.clone());
             job.dto()
         };
+        persist_progress(pool, &dto).await?;
 
         let service = Arc::clone(self);
+        let pool = pool.clone();
         let id = id.to_string();
         tokio::spawn(async move {
             if let Err(err) = handle.wait_until_completed().await {
+                if service.is_paused(&id).await {
+                    return;
+                }
                 service.stop_torrent(&handle).await;
-                service.fail_job(&id, err.to_string()).await;
+                service.fail_job(&pool, &id, err.to_string()).await;
                 return;
             }
             service.stop_torrent(&handle).await;
             if let Err(err) = service
-                .finalize_completed(&id, &inbox_dir, uploader_user_id)
+                .finalize_completed(&pool, &id, &inbox_dir, uploader_user_id)
                 .await
             {
-                service.fail_job(&id, err.to_string()).await;
+                service.fail_job(&pool, &id, err.to_string()).await;
             }
         });
 
         Ok(dto)
     }
 
-    async fn fail_job(&self, id: &str, error: String) {
-        let mut jobs = self.jobs.lock().await;
-        if let Some(job) = jobs.get_mut(id) {
-            job.status = TorrentJobStatus::Failed;
-            job.error = Some(error);
+    pub async fn pause(
+        &self,
+        pool: &PgPool,
+        user_id: i64,
+        id: &str,
+    ) -> anyhow::Result<TorrentJobDto> {
+        self.ensure_memory_job(pool, user_id, id).await?;
+
+        let (dto, handle) = {
+            let mut jobs = self.jobs.lock().await;
+            let job = jobs.get_mut(id).context("torrent job not found")?;
+            if job.user_id != user_id {
+                bail!("torrent job not found");
+            }
+            job.refresh_progress();
+            job.status = TorrentJobStatus::Paused;
+            job.updated_at = now_string();
+            let handle = job.handle.take();
+            (job.dto(), handle)
+        };
+
+        persist_progress(pool, &dto).await?;
+        if let Some(handle) = handle {
+            self.stop_torrent(&handle).await;
+        }
+        Ok(dto)
+    }
+
+    async fn memory_details(&self, user_id: i64, id: &str) -> Option<TorrentSessionDto> {
+        let jobs = self.jobs.lock().await;
+        let job = jobs.get(id)?;
+        if job.user_id != user_id {
+            return None;
+        }
+        Some(TorrentSessionDto {
+            job: job.dto(),
+            preview: job.preview(),
+            selected_files: job.selected_files.clone(),
+        })
+    }
+
+    async fn ensure_memory_job(&self, pool: &PgPool, user_id: i64, id: &str) -> anyhow::Result<()> {
+        if self.jobs.lock().await.contains_key(id) {
+            return Ok(());
+        }
+
+        let row = load_row(pool, user_id, id).await?;
+        let job = row.into_job(&self.temp_root)?;
+        self.jobs.lock().await.insert(id.to_string(), job);
+        Ok(())
+    }
+
+    async fn memory_job_dto(&self, id: &str) -> anyhow::Result<TorrentJobDto> {
+        let jobs = self.jobs.lock().await;
+        let job = jobs.get(id).context("torrent job not found")?;
+        Ok(job.dto())
+    }
+
+    async fn is_paused(&self, id: &str) -> bool {
+        let jobs = self.jobs.lock().await;
+        jobs.get(id)
+            .map(|job| job.status == TorrentJobStatus::Paused)
+            .unwrap_or(false)
+    }
+
+    async fn fail_job(&self, pool: &PgPool, id: &str, error: String) {
+        let dto = {
+            let mut jobs = self.jobs.lock().await;
+            jobs.get_mut(id).map(|job| {
+                job.refresh_progress();
+                job.status = TorrentJobStatus::Failed;
+                job.error = Some(error.clone());
+                job.handle = None;
+                job.updated_at = now_string();
+                job.dto()
+            })
+        };
+        if let Some(dto) = dto {
+            let _ = persist_progress(pool, &dto).await;
+        } else {
+            let _ = sqlx::query(
+                "UPDATE furumusic__torrent_session
+                    SET status = 'failed', error = $2, updated_at = $3
+                  WHERE id = $1",
+            )
+            .bind(id)
+            .bind(error)
+            .bind(now_string())
+            .execute(pool)
+            .await;
         }
     }
 
@@ -406,6 +823,7 @@ impl TorrentService {
 
     async fn finalize_completed(
         &self,
+        pool: &PgPool,
         id: &str,
         inbox_dir: &Path,
         uploader_user_id: i64,
@@ -413,7 +831,9 @@ impl TorrentService {
         let (name, files, selected_files, output_dir) = {
             let mut jobs = self.jobs.lock().await;
             let job = jobs.get_mut(id).context("torrent job not found")?;
+            job.refresh_progress();
             job.status = TorrentJobStatus::Moving;
+            job.updated_at = now_string();
             (
                 job.name.clone(),
                 job.files.clone(),
@@ -422,6 +842,9 @@ impl TorrentService {
             )
         };
 
+        let moving_dto = self.memory_job_dto(id).await?;
+        persist_progress(pool, &moving_dto).await?;
+
         let destination_root = inbox_dir
             .join("user_uploads")
             .join(uploader_user_id.to_string())
@@ -443,11 +866,20 @@ impl TorrentService {
         let job_root = self.temp_root.join(id);
         let _ = tokio::fs::remove_dir_all(job_root).await;
 
-        {
+        let completed_dto = {
             let mut jobs = self.jobs.lock().await;
             let job = jobs.get_mut(id).context("torrent job not found")?;
+            job.refresh_progress();
             job.status = TorrentJobStatus::Complete;
-        }
+            job.downloaded_bytes = job.selected_size();
+            job.progress_percent = 100.0;
+            job.completed_at = Some(now_string());
+            job.updated_at = now_string();
+            let dto = job.dto();
+            job.handle = None;
+            dto
+        };
+        persist_progress(pool, &completed_dto).await?;
 
         if let Some(handle) = self.scheduler_handle.get() {
             let handle = Arc::clone(handle);
@@ -462,6 +894,108 @@ impl TorrentService {
     }
 }
 
+async fn load_row(pool: &PgPool, user_id: i64, id: &str) -> anyhow::Result<TorrentSessionRow> {
+    sqlx::query_as::<_, TorrentSessionRow>(
+        r#"SELECT id, user_id, name, info_hash, source_kind, source_label, torrent_bytes,
+                  files_json, selected_files_json, status, total_size, selected_size,
+                  downloaded_bytes, uploaded_bytes, progress_percent, error,
+                  created_at, updated_at, completed_at
+             FROM furumusic__torrent_session
+            WHERE id = $1 AND user_id = $2"#,
+    )
+    .bind(id)
+    .bind(user_id)
+    .fetch_optional(pool)
+    .await?
+    .context("torrent session not found")
+}
+
+async fn insert_job(pool: &PgPool, job: &TorrentJob) -> anyhow::Result<()> {
+    sqlx::query(
+        r#"INSERT INTO furumusic__torrent_session
+              (id, user_id, name, info_hash, source_kind, source_label, torrent_bytes,
+               files_json, selected_files_json, status, total_size, selected_size,
+               downloaded_bytes, uploaded_bytes, progress_percent, error,
+               created_at, updated_at, completed_at)
+           VALUES ($1, $2, $3, $4, $5, $6, $7,
+                   $8, $9, $10, $11, $12,
+                   0, 0, 0, NULL,
+                   $13, $14, NULL)"#,
+    )
+    .bind(&job.id)
+    .bind(job.user_id)
+    .bind(&job.name)
+    .bind(&job.info_hash)
+    .bind(&job.source_kind)
+    .bind(&job.source_label)
+    .bind(&job.torrent_bytes)
+    .bind(serde_json::to_string(&job.files)?)
+    .bind(serde_json::to_string(&job.selected_files)?)
+    .bind(job.status.as_str())
+    .bind(u64_to_i64(job.total_size()))
+    .bind(u64_to_i64(job.selected_size()))
+    .bind(&job.created_at)
+    .bind(&job.updated_at)
+    .execute(pool)
+    .await?;
+    Ok(())
+}
+
+async fn mark_job_started(
+    pool: &PgPool,
+    id: &str,
+    selected_files: &[usize],
+    dto: &TorrentJobDto,
+) -> anyhow::Result<()> {
+    sqlx::query(
+        r#"UPDATE furumusic__torrent_session
+              SET selected_files_json = $2,
+                  status = 'downloading',
+                  selected_size = $3,
+                  downloaded_bytes = 0,
+                  uploaded_bytes = 0,
+                  progress_percent = 0,
+                  error = NULL,
+                  updated_at = $4,
+                  completed_at = NULL
+            WHERE id = $1"#,
+    )
+    .bind(id)
+    .bind(serde_json::to_string(selected_files)?)
+    .bind(u64_to_i64(dto.selected_size))
+    .bind(now_string())
+    .execute(pool)
+    .await?;
+    Ok(())
+}
+
+async fn persist_progress(pool: &PgPool, dto: &TorrentJobDto) -> anyhow::Result<()> {
+    sqlx::query(
+        r#"UPDATE furumusic__torrent_session
+              SET status = $2,
+                  selected_size = $3,
+                  downloaded_bytes = $4,
+                  uploaded_bytes = $5,
+                  progress_percent = $6,
+                  error = $7,
+                  updated_at = $8,
+                  completed_at = $9
+            WHERE id = $1"#,
+    )
+    .bind(&dto.id)
+    .bind(&dto.status)
+    .bind(u64_to_i64(dto.selected_size))
+    .bind(u64_to_i64(dto.downloaded_bytes))
+    .bind(u64_to_i64(dto.uploaded_bytes))
+    .bind(dto.progress_percent)
+    .bind(&dto.error)
+    .bind(now_string())
+    .bind(&dto.completed_at)
+    .execute(pool)
+    .await?;
+    Ok(())
+}
+
 fn validate_selection(files: &[TorrentFileDto], selected_files: &[usize]) -> anyhow::Result<()> {
     for index in selected_files {
         if !files.iter().any(|file| file.index == *index) {
@@ -483,26 +1017,35 @@ fn validate_inbox_dir(inbox_dir: &str) -> anyhow::Result<PathBuf> {
     Ok(path)
 }
 
-fn is_audio_path(path: &str) -> bool {
-    let Some(ext) = Path::new(path).extension().and_then(|e| e.to_str()) else {
-        return false;
-    };
-    matches!(
-        ext.to_ascii_lowercase().as_str(),
-        "mp3"
-            | "flac"
-            | "ogg"
-            | "opus"
-            | "aac"
-            | "m4a"
-            | "wav"
-            | "ape"
-            | "wv"
-            | "wma"
-            | "tta"
-            | "aiff"
-            | "aif"
-    )
+fn selected_size(files: &[TorrentFileDto], selected_files: &[usize]) -> u64 {
+    if selected_files.is_empty() {
+        return 0;
+    }
+    files
+        .iter()
+        .filter(|f| selected_files.contains(&f.index))
+        .map(|f| f.length)
+        .sum()
+}
+
+fn progress_percent(downloaded: u64, total: u64) -> Option<f64> {
+    if total == 0 {
+        None
+    } else {
+        Some(downloaded as f64 / total as f64 * 100.0)
+    }
+}
+
+fn now_string() -> String {
+    chrono::Utc::now().format("%Y-%m-%dT%H:%M:%SZ").to_string()
+}
+
+fn u64_to_i64(value: u64) -> i64 {
+    value.min(i64::MAX as u64) as i64
+}
+
+fn i64_to_u64(value: i64) -> u64 {
+    value.max(0) as u64
 }
 
 fn sanitize_path_component(value: &str) -> String {

templates/player/modals.html

@@ -0,0 +1,274 @@
+    <!-- Info Modal -->
+    <template x-if="$store.info.modal">
+        <div class="modal-overlay" @click.self="$store.info.close()">
+            <div class="modal-box info-modal">
+                <div class="info-modal-head">
+                    <h3 x-text="$store.info.modal.title"></h3>
+                    <button class="mobile-list-action" @click="$store.info.close()" title="{{ t.player_close }}">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <line x1="18" y1="6" x2="6" y2="18"/>
+                            <line x1="6" y1="6" x2="18" y2="18"/>
+                        </svg>
+                    </button>
+                </div>
+                <pre class="info-modal-body" x-text="$store.info.modal.body"></pre>
+            </div>
+        </div>
+    </template>
+
+    <!-- Create / Rename Playlist Modal -->
+    <template x-if="$store.playlists.modal">
+        <div class="modal-overlay" @click.self="$store.playlists.modal = null">
+            <div class="modal-box">
+                <h3 x-text="$store.playlists.modal.mode === 'create' ? '{{ t.player_new_playlist }}' : '{{ t.player_rename_playlist }}'"></h3>
+                <input type="text" x-model="$store.playlists.modal.title" placeholder="{{ t.player_playlist_name }}"
+                       @keydown.enter="$store.playlists.submitModal()" x-init="$nextTick(() => $el.focus())">
+                <div class="modal-footer">
+                    <button class="modal-btn modal-btn-ghost" @click="$store.playlists.modal = null">{{ t.player_cancel }}</button>
+                    <button class="modal-btn modal-btn-primary" @click="$store.playlists.submitModal()"
+                            x-text="$store.playlists.modal.mode === 'create' ? '{{ t.player_create }}' : '{{ t.player_save }}'"></button>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <!-- Add to Playlist Modal -->
+    <template x-if="$store.playlists.picker">
+        <div class="modal-overlay" @click.self="$store.playlists.picker = null">
+            <div class="modal-box">
+                <h3>{{ t.player_add_to_playlist }}</h3>
+                <div class="modal-playlist-list">
+                    <template x-for="pl in $store.playlists.list.filter(p => p.kind === 'user' && p.is_own)" :key="pl.id">
+                        <div class="modal-playlist-item" @click="$store.playlists.addToPicked(pl.id)">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+                            <span x-text="pl.title"></span>
+                        </div>
+                    </template>
+                </div>
+                <div class="modal-footer">
+                    <button class="modal-btn modal-btn-ghost" @click="$store.playlists.picker = null">{{ t.player_cancel }}</button>
+                    <button class="modal-btn modal-btn-primary" @click="$store.playlists.picker = null; $store.playlists.showCreate()">{{ t.player_new_playlist }}</button>
+                </div>
+            </div>
+        </div>
+    </template>
+
+    <!-- Torrent Import Modal -->
+    <template x-if="$store.torrents.modal">
+        <div class="modal-overlay" @click.self="$store.torrents.close()">
+            <div class="modal-box torrent-modal">
+                <div class="torrent-modal-head">
+                    <div>
+                        <h3>{{ t.player_torrent_manager }}</h3>
+                        <p class="torrent-message" style="margin:4px 0 0"
+                           :class="{ error: $store.torrents.error }"
+                           x-text="$store.torrents.message"></p>
+                    </div>
+                    <div class="torrent-client-status">
+                        <span class="torrent-status-pill"
+                              :class="{ active: $store.torrents.activeCount() > 0 }"
+                              x-text="$store.torrents.clientSummary()"></span>
+                        <span class="torrent-status-pill torrent-agent-pill"
+                              :class="{ active: $store.torrents.agentBusy() }">
+                            <span class="torrent-agent-dot"></span>
+                            <span x-text="$store.torrents.agentSummary()"></span>
+                        </span>
+                        <span class="torrent-status-pill"
+                              x-text="$store.torrents.sessions.length + ' saved'"></span>
+                    </div>
+                </div>
+
+                <div class="torrent-manager-layout">
+                    <aside class="torrent-manager-sidebar">
+                        <div class="torrent-manager-title">
+                            <span>{{ t.player_saved_torrents }}</span>
+                            <button class="modal-btn modal-btn-ghost" style="padding:4px 8px"
+                                    @click="$store.torrents.loadSessions()"
+                                    :disabled="$store.torrents.loading">{{ t.player_refresh }}</button>
+                        </div>
+                        <div class="torrent-session-list">
+                            <template x-if="!$store.torrents.loadingSessions && $store.torrents.sessions.length === 0">
+                                <div class="empty-state" style="padding:28px 12px">
+                                    <p>{{ t.player_no_saved_torrents }}</p>
+                                </div>
+                            </template>
+                            <template x-for="job in $store.torrents.sessions" :key="job.id">
+                                <div class="torrent-session-row"
+                                     :class="{ active: $store.torrents.previewData && $store.torrents.previewData.id === job.id }"
+                                     @click="$store.torrents.openSession(job.id)">
+                                    <div class="torrent-session-main">
+                                        <div class="torrent-session-topline">
+                                            <div class="torrent-session-name" x-text="job.name"></div>
+                                            <span class="torrent-status-badge"
+                                                  :class="$store.torrents.statusBadgeClass(job)"
+                                                  x-text="$store.torrents.statusLabel(job)"></span>
+                                        </div>
+                                        <div class="torrent-session-meta" x-text="$store.torrents.sessionMeta(job)"></div>
+                                        <div class="torrent-session-progress">
+                                            <div class="torrent-session-progress-bar"
+                                                 :style="'width:' + $store.torrents.progressValue(job) + '%'"></div>
+                                        </div>
+                                    </div>
+                                    <button class="torrent-session-remove"
+                                            @click.stop="$store.torrents.removeSession(job.id)">{{ t.player_delete }}</button>
+                                </div>
+                            </template>
+                        </div>
+                    </aside>
+
+                    <section class="torrent-workspace">
+                        <div class="torrent-modal-grid">
+                            <div>
+                                <label for="torrent-file-input">{{ t.player_torrent_file }}</label>
+                                <input id="torrent-file-input" type="file" accept=".torrent,application/x-bittorrent"
+                                       @change="$store.torrents.file = $event.target.files[0] || null">
+                            </div>
+                            <div>
+                                <label for="torrent-magnet-input">{{ t.player_magnet_link }}</label>
+                                <input id="torrent-magnet-input" type="text"
+                                       x-model="$store.torrents.magnet"
+                                       placeholder="magnet:?xt=urn:btih:...">
+                            </div>
+                        </div>
+                        <div class="torrent-actions">
+                            <button class="modal-btn modal-btn-primary" @click="$store.torrents.preview()" :disabled="$store.torrents.loading">
+                                {{ t.player_preview_content }}
+                            </button>
+                            <button class="modal-btn modal-btn-ghost" @click="$store.torrents.clearSelection()" :disabled="!$store.torrents.previewData">{{ t.player_clear }}</button>
+                        </div>
+
+                        <template x-if="$store.torrents.currentJob">
+                            <div class="torrent-progress-card">
+                                <div class="torrent-progress-head">
+                                    <span x-text="$store.torrents.statusText($store.torrents.currentJob)"></span>
+                                    <span x-text="$store.torrents.progressValue($store.torrents.currentJob).toFixed(1) + '%'"></span>
+                                </div>
+                                <div class="torrent-progress-track">
+                                    <div class="torrent-progress-bar"
+                                         :style="'width:' + $store.torrents.progressValue($store.torrents.currentJob) + '%'"></div>
+                                </div>
+                                <div class="torrent-progress-details">
+                                    <span x-text="$store.torrents.bytes($store.torrents.currentJob.downloaded_bytes) + ' / ' + $store.torrents.bytes($store.torrents.currentJob.selected_size || $store.torrents.currentJob.total_size)"></span>
+                                    <span x-text="$store.torrents.speedText($store.torrents.currentJob)"></span>
+                                    <span x-text="$store.torrents.peerText($store.torrents.currentJob)"></span>
+                                </div>
+                            </div>
+                        </template>
+                <template x-if="$store.torrents.previewData">
+                    <div class="torrent-preview-panel">
+                        <div class="torrent-preview-head">
+                            <div style="min-width:0">
+                                <div class="torrent-preview-title" x-text="$store.torrents.previewData.name"></div>
+                                <div class="torrent-preview-meta"
+                                     x-text="$store.torrents.previewData.files.length + ' {{ t.player_files_count }} - ' + $store.torrents.bytes($store.torrents.previewData.total_size)"></div>
+                            </div>
+                            <button class="modal-btn"
+                                    :class="$store.torrents.isCurrentDownloading() ? 'modal-btn-pause' : 'modal-btn-primary'"
+                                    @click="$store.torrents.isCurrentDownloading() ? $store.torrents.pause() : $store.torrents.start()"
+                                    :disabled="$store.torrents.loading">
+                                <span x-text="$store.torrents.isCurrentDownloading() ? '{{ t.player_pause_download }}' : '{{ t.player_download_selected }}'"></span>
+                            </button>
+                        </div>
+                        <div class="torrent-tree-toolbar">
+                            <div class="torrent-selected-summary"
+                                 x-text="$store.torrents.selected.size + ' {{ t.player_selected }} - ' + $store.torrents.bytes($store.torrents.selectedBytes())"></div>
+                            <div class="torrent-actions" style="margin-top:0">
+                                <button class="modal-btn modal-btn-ghost" @click="$store.torrents.expandAll(true)">{{ t.player_expand_all }}</button>
+                                <button class="modal-btn modal-btn-ghost" @click="$store.torrents.expandAll(false)">{{ t.player_collapse }}</button>
+                            </div>
+                        </div>
+                        <div class="torrent-file-tree">
+                            <template x-for="node in $store.torrents.visibleNodes()" :key="node.key">
+                                <div class="torrent-tree-row" :style="'--indent:' + $store.torrents.rowIndent(node) + 'px'">
+                                    <button class="torrent-tree-toggle"
+                                            :class="{ expanded: $store.torrents.expanded.has(node.key) }"
+                                            @click="$store.torrents.toggleExpand(node)"
+                                            :style="node.type === 'folder' ? '' : 'visibility:hidden'">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <polyline points="9 18 15 12 9 6"/>
+                                        </svg>
+                                    </button>
+                                    <button class="torrent-tree-check"
+                                            :class="$store.torrents.nodeCheckClass(node)"
+                                            @click="$store.torrents.toggleNode(node)">
+                                        <template x-if="$store.torrents.nodeState(node) === 'checked'">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                                                <polyline points="20 6 9 17 4 12"/>
+                                            </svg>
+                                        </template>
+                                        <template x-if="$store.torrents.nodeState(node) === 'partial'">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                                                <line x1="5" y1="12" x2="19" y2="12"/>
+                                            </svg>
+                                        </template>
+                                    </button>
+                                    <div class="torrent-tree-label" :title="node.name">
+                                        <template x-if="node.type === 'folder'">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M3 7a2 2 0 012-2h5l2 2h7a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
+                                            </svg>
+                                        </template>
+                                        <template x-if="node.type === 'file'">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
+                                                <polyline points="14 2 14 8 20 8"/>
+                                            </svg>
+                                        </template>
+                                        <span class="torrent-file-name" x-text="node.name"></span>
+                                    </div>
+                                    <span class="torrent-file-size" x-text="$store.torrents.bytes(node.size)"></span>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </template>
+                    </section>
+                </div>
+            </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>{{ t.player_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>{{ t.player_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 || '{{ t.player_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">
+                        {{ t.player_previous }}
+                    </button>
+                    <span class="history-release"
+                          x-text="'{{ t.player_page }} ' + $store.history.page + ' {{ t.player_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()">
+                        {{ t.player_next }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </template>
+</div>

templates/player/shell.html

@@ -0,0 +1,983 @@
+<div class="app-layout"
+     x-data
+     @keydown.window.space="if (!['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) { $event.preventDefault(); $store.player.toggle(); }"
+     @keydown.window.arrow-left="if (!['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) { $event.preventDefault(); $store.player.seekRelative(-5); }"
+     @keydown.window.arrow-right="if (!['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) { $event.preventDefault(); $store.player.seekRelative(5); }"
+     @keydown.window="if ((e=$event).ctrlKey && e.key==='k') { e.preventDefault(); document.getElementById('search-input')?.focus(); } else if (e.key==='/' && !['INPUT','TEXTAREA','SELECT'].includes(document.activeElement?.tagName)) { e.preventDefault(); document.getElementById('search-input')?.focus(); }"
+     >
+
+    <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="{{ t.player_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">
+                    <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">{{ t.player_plays_count }}</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">{{ t.player_likes_count }}</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">{{ t.player_listened }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="sidebar-header">
+                <h2>{{ t.player_library }}</h2>
+            </div>
+            <div class="sidebar-nav">
+                <div class="sidebar-nav-item"
+                     :class="{ active: $store.library.view === 'artists' }"
+                     @click="$store.library.goArtists()">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
+                    {{ t.player_artists }}
+                </div>
+            </div>
+            <div class="sidebar-section">
+                <div class="sidebar-section-title">
+                    {{ t.player_following }}
+                    <span x-show="$store.follows.artists.length > 0"
+                          x-text="'(' + $store.follows.artists.length + ')'"></span>
+                </div>
+                <template x-if="$store.follows.artists.length === 0">
+                    <div class="following-empty">{{ t.player_no_followed_artists }}</div>
+                </template>
+                <div class="following-list" x-show="$store.follows.artists.length > 0" x-cloak>
+                    <template x-for="artist in $store.follows.artists" :key="artist.id">
+                        <div class="following-artist"
+                             :class="{ active: $store.library.currentArtist && $store.library.currentArtist.id === artist.id }"
+                             @click="$store.library.openArtist(artist.id)">
+                            <div class="following-avatar">
+                                <template x-if="artist.image_url">
+                                    <img :src="artist.image_url" :alt="artist.name" loading="lazy">
+                                </template>
+                                <template x-if="!artist.image_url">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
+                                </template>
+                            </div>
+                            <div class="following-name" x-text="artist.name"></div>
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div class="playlist-list">
+                <template x-for="pl in $store.playlists.regularList()" :key="pl.id">
+                    <div class="playlist-item-row">
+                        <div class="playlist-item" @click="$store.library.openPlaylist(pl.id)">
+                            <template x-if="pl.kind === 'likes'">
+                                <span style="display:flex;align-items:center;gap:6px">
+                                    <svg viewBox="0 0 24 24" fill="var(--accent)" stroke="none" width="14" height="14"><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>
+                                    <span x-text="$store.playlists.displayTitle(pl)"></span>
+                                </span>
+                            </template>
+                            <template x-if="pl.kind !== 'likes'">
+                                <span x-text="$store.playlists.displayTitle(pl)"></span>
+                            </template>
+                            <span class="playlist-count" x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
+                        </div>
+                        <template x-if="pl.is_own && pl.kind === 'user'">
+                            <div class="playlist-item-actions">
+                                <button class="playlist-action-btn" @click.stop="$store.playlists.startRename(pl)" title="{{ t.player_rename }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                                </button>
+                                <button class="playlist-action-btn" @click.stop="$store.playlists.deletePlaylist(pl.id)" title="{{ t.player_delete }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+                                </button>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+                <button class="sidebar-create-btn" @click="$store.playlists.showCreate()">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                    {{ t.player_new_playlist }}
+                </button>
+                <template x-if="$store.playlists.publishedList().length > 0">
+                    <div class="playlist-public-section">
+                        <div class="sidebar-section-title playlist-subtitle">{{ t.player_published_playlists }}</div>
+                        <template x-for="pl in $store.playlists.publishedList()" :key="'published-' + pl.id">
+                            <div class="playlist-item-row">
+                                <div class="playlist-item playlist-item-public" @click="$store.library.openPlaylist(pl.id)">
+                                    <div class="playlist-title-line">
+                                        <span class="playlist-title-text" x-text="$store.playlists.displayTitle(pl)"></span>
+                                        <span class="playlist-public-badge">{{ t.player_public }}</span>
+                                    </div>
+                                    <div class="playlist-meta-line">
+                                        <span class="playlist-owner" x-show="pl.owner_name" x-text="'{{ t.player_by }} ' + pl.owner_name"></span>
+                                        <span x-show="pl.owner_name">&middot;</span>
+                                        <span x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+            </div>
+            <div class="sidebar-bottom">
+                <a href="/admin/">{{ t.player_admin_panel }}</a>
+            </div>
+        </div>
+
+        <template x-if="$store.mobile.libraryOpen">
+            <div class="mobile-library-backdrop" @click.self="$store.mobile.closeLibrary()" x-cloak>
+                <aside class="mobile-library-drawer">
+                    <div class="mobile-drawer-head">
+                        <div>
+                            <div class="mobile-drawer-title">{{ t.player_library }}</div>
+                            <div class="playlist-count">{{ t.player_playlists }} / {{ t.player_following }}</div>
+                        </div>
+                        <button class="mobile-list-action" @click="$store.mobile.closeLibrary()" title="{{ t.player_close }}">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <line x1="18" y1="6" x2="6" y2="18"/>
+                                <line x1="6" y1="6" x2="18" y2="18"/>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="mobile-drawer-body">
+                        <div class="mobile-drawer-section">
+                            <div class="sidebar-nav-item"
+                                 :class="{ active: $store.library.view === 'artists' }"
+                                 @click="$store.library.goArtists(); $store.mobile.closeLibrary()">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
+                                {{ t.player_artists }}
+                            </div>
+                        </div>
+
+                        <div class="mobile-drawer-section">
+                            <div class="sidebar-section-title">
+                                {{ t.player_following }}
+                                <span x-show="$store.follows.artists.length > 0"
+                                      x-text="'(' + $store.follows.artists.length + ')'"></span>
+                            </div>
+                            <template x-if="$store.follows.artists.length === 0">
+                                <div class="following-empty">{{ t.player_no_followed_artists }}</div>
+                            </template>
+                            <div class="following-list" x-show="$store.follows.artists.length > 0" x-cloak>
+                                <template x-for="artist in $store.follows.artists" :key="'mobile-follow-' + artist.id">
+                                    <div class="mobile-list-row">
+                                        <div class="following-artist"
+                                             :class="{ active: $store.library.currentArtist && $store.library.currentArtist.id === artist.id }"
+                                             @click="$store.library.openArtist(artist.id); $store.mobile.closeLibrary()">
+                                            <div class="following-avatar">
+                                                <template x-if="artist.image_url">
+                                                    <img :src="artist.image_url" :alt="artist.name" loading="lazy">
+                                                </template>
+                                                <template x-if="!artist.image_url">
+                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
+                                                </template>
+                                            </div>
+                                            <div class="following-name" x-text="artist.name"></div>
+                                        </div>
+                                        <button class="mobile-list-action"
+                                                @click.stop="$store.follows.toggle(artist.id)"
+                                                title="{{ t.player_unfollow_artist }}">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
+                                                <circle cx="9" cy="7" r="4"/>
+                                                <line x1="17" y1="11" x2="23" y2="11"/>
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+
+                        <div class="mobile-drawer-section">
+                            <div class="sidebar-section-title">{{ t.player_playlists }}</div>
+                            <template x-for="pl in $store.playlists.regularList()" :key="'mobile-playlist-' + pl.id">
+                                <div class="playlist-item-row">
+                                    <div class="playlist-item" @click="$store.library.openPlaylist(pl.id); $store.mobile.closeLibrary()">
+                                        <template x-if="pl.kind === 'likes'">
+                                            <span style="display:flex;align-items:center;gap:6px">
+                                                <svg viewBox="0 0 24 24" fill="var(--accent)" stroke="none" width="14" height="14"><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>
+                                                <span x-text="$store.playlists.displayTitle(pl)"></span>
+                                            </span>
+                                        </template>
+                                        <template x-if="pl.kind !== 'likes'">
+                                            <span x-text="$store.playlists.displayTitle(pl)"></span>
+                                        </template>
+                                        <span class="playlist-count" x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
+                                    </div>
+                                    <template x-if="pl.is_own && pl.kind === 'user'">
+                                        <div class="playlist-item-actions">
+                                            <button class="playlist-action-btn" @click.stop="$store.mobile.closeLibrary(); $store.playlists.startRename(pl)" title="{{ t.player_rename }}">
+                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                                            </button>
+                                            <button class="playlist-action-btn" @click.stop="$store.playlists.deletePlaylist(pl.id)" title="{{ t.player_delete }}">
+                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
+                                            </button>
+                                        </div>
+                                    </template>
+                                </div>
+                            </template>
+                            <button class="sidebar-create-btn" @click="$store.mobile.closeLibrary(); $store.playlists.showCreate()">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                                {{ t.player_new_playlist }}
+                            </button>
+                            <template x-if="$store.playlists.publishedList().length > 0">
+                                <div class="playlist-public-section">
+                                    <div class="sidebar-section-title playlist-subtitle">{{ t.player_published_playlists }}</div>
+                                    <template x-for="pl in $store.playlists.publishedList()" :key="'mobile-published-' + pl.id">
+                                        <div class="playlist-item-row">
+                                            <div class="playlist-item playlist-item-public" @click="$store.library.openPlaylist(pl.id); $store.mobile.closeLibrary()">
+                                                <div class="playlist-title-line">
+                                                    <span class="playlist-title-text" x-text="$store.playlists.displayTitle(pl)"></span>
+                                                    <span class="playlist-public-badge">{{ t.player_public }}</span>
+                                                </div>
+                                                <div class="playlist-meta-line">
+                                                    <span class="playlist-owner" x-show="pl.owner_name" x-text="'{{ t.player_by }} ' + pl.owner_name"></span>
+                                                    <span x-show="pl.owner_name">&middot;</span>
+                                                    <span x-text="pl.track_count + ' {{ t.player_tracks_count }}'"></span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </aside>
+            </div>
+        </template>
+
+        <!-- Center Content -->
+        <div class="center-content" id="center-scroll">
+            <!-- Search / account bar -->
+            <div class="content-topbar" @click.outside="$store.user.menuOpen = false">
+                <button class="mobile-library-btn"
+                        @click="$store.user.menuOpen = false; $store.mobile.toggleLibrary()"
+                        title="{{ t.player_library }}">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M4 19.5A2.5 2.5 0 016.5 17H20"/>
+                        <path d="M4 4.5A2.5 2.5 0 016.5 2H20v20H6.5A2.5 2.5 0 014 19.5z"/>
+                    </svg>
+                </button>
+                <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="{{ t.player_search_placeholder }}"
+                           x-model="$store.library.searchQuery"
+                           @input.debounce.300ms="$store.library.search($store.library.searchQuery)"
+                           @keydown.escape="$store.library.clearSearch(); $el.blur()">
+                    <template x-if="$store.library.searchQuery">
+                        <button class="search-clear" @click="$store.library.clearSearch()">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                        </button>
+                    </template>
+                    <template x-if="!$store.library.searchQuery">
+                        <span class="search-shortcut">Ctrl+K</span>
+                    </template>
+                </div>
+                <button class="torrent-import-btn"
+                        @click="$store.torrents.open()"
+                        title="{{ t.player_import_torrent }}">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
+                        <polyline points="7 10 12 15 17 10"/>
+                        <line x1="12" y1="15" x2="12" y2="3"/>
+                    </svg>
+                </button>
+                <button class="mobile-account-chip"
+                        x-show="$store.user.profile"
+                        x-cloak
+                        @click="$store.mobile.closeLibrary(); $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">{{ t.player_plays_count }}</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">{{ t.player_likes_count }}</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">{{ t.player_listened }}</span>
+                        </div>
+                    </div>
+                    <button class="modal-btn modal-btn-primary mobile-account-logout"
+                            @click="$store.user.logout()">
+                        {{ t.player_log_out }}
+                    </button>
+                </div>
+            </div>
+
+            <!-- Search Results -->
+            <template x-if="$store.library.view === 'search'">
+                <div>
+                    <template x-if="$store.library.searchLoading">
+                        <div class="loading-spinner"><div class="spinner"></div></div>
+                    </template>
+                    <template x-if="!$store.library.searchLoading && $store.library.searchResults">
+                        <div>
+                            <template x-if="$store.library.searchResults.artists.length === 0 && $store.library.searchResults.releases.length === 0 && $store.library.searchResults.tracks.length === 0">
+                                <div class="empty-state">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                                    <p>{{ t.player_no_results }}</p>
+                                </div>
+                            </template>
+                            <!-- Artists section -->
+                            <template x-if="$store.library.searchResults.artists.length > 0">
+                                <div class="search-section">
+                                    <h2 class="search-section-title">{{ t.player_artists }}</h2>
+                                    <div class="search-artists-row">
+                                        <template x-for="artist in $store.library.searchResults.artists" :key="artist.id">
+                                            <div class="search-artist-card" @click="$store.library.openArtist(artist.id)">
+                                                <div class="search-artist-img">
+                                                    <template x-if="artist.image_url">
+                                                        <img :src="artist.image_url" :alt="artist.name" loading="lazy">
+                                                    </template>
+                                                    <template x-if="!artist.image_url">
+                                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
+                                                    </template>
+                                                    <button class="artist-follow-card-btn"
+                                                            :class="{ followed: $store.follows.has(artist.id) }"
+                                                            @click.stop="$store.follows.toggle(artist.id)"
+                                                            :title="$store.follows.has(artist.id) ? '{{ t.player_unfollow_artist }}' : '{{ t.player_follow_artist }}'">
+                                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                            <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
+                                                            <circle cx="9" cy="7" r="4"/>
+                                                            <path x-show="!$store.follows.has(artist.id)" d="M19 8v6M16 11h6"/>
+                                                            <path x-show="$store.follows.has(artist.id)" d="M16 11l2 2 4-5"/>
+                                                        </svg>
+                                                    </button>
+                                                </div>
+                                                <div class="search-artist-name" x-text="artist.name"></div>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </div>
+                            </template>
+                            <!-- Releases section -->
+                            <template x-if="$store.library.searchResults.releases.length > 0">
+                                <div class="search-section">
+                                    <h2 class="search-section-title">{{ t.player_releases }}</h2>
+                                    <div class="search-releases-row">
+                                        <template x-for="release in $store.library.searchResults.releases" :key="release.id">
+                                            <div class="search-release-card" @click="$store.library.openRelease(release.id)" style="position:relative">
+                                                <div class="search-release-cover" style="position:relative">
+                                                    <template x-if="release.cover_url">
+                                                        <img :src="release.cover_url" :alt="release.title" loading="lazy">
+                                                    </template>
+                                                    <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 }}">
+                                                        <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>
+                                                <div class="card-title" x-text="release.title"></div>
+                                                <div class="card-subtitle">
+                                                    <span x-text="release.year || ''"></span>
+                                                    <span x-text="release.release_type"></span>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </div>
+                            </template>
+                            <!-- Tracks section -->
+                            <template x-if="$store.library.searchResults.tracks.length > 0">
+                                <div class="search-section">
+                                    <h2 class="search-section-title">{{ t.player_tracks }}</h2>
+                                    <div class="track-list-header">
+                                        <span>#</span>
+                                        <span>{{ t.player_title }}</span>
+                                        <span></span>
+                                        <span></span>
+                                        <span style="text-align:right">{{ t.player_duration }}</span>
+                                    </div>
+                                    <template x-for="(track, idx) in $store.library.searchResults.tracks" :key="track.id">
+                                        <div class="track-row"
+                                             :class="{ playing: $store.player.currentTrack && $store.player.currentTrack.id === track.id }"
+                                             @dblclick="$store.library.playSearchTrack(idx)">
+                                            <span class="track-num" x-text="idx + 1"></span>
+                                            <div class="track-info">
+                                                <div class="track-title" x-text="track.title"></div>
+                                                <div class="track-artists-inline">
+                                                    <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks(track)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
+                                                        <span>
+                                                            <template x-if="artistIdx > 0"><span>, </span></template>
+                                                            <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
+                                                        </span>
+                                                    </template>
+                                                </div>
+                                            </div>
+                                            <span></span>
+                                            <div class="track-actions">
+                                                <button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_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="track-action-btn play-btn" @click.stop="$store.library.playSearchTrack(idx)" title="{{ t.player_play }}">
+                                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                                                </button>
+                                                <button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
+                                                    <svg viewBox="0 0 24 24" :fill="$store.likes.has(track.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>
+                                                <button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
+                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
+                                                </button>
+                                                <button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
+                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                                                </button>
+                                                <button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
+                                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+                                                </button>
+                                            </div>
+                                            <span class="track-duration" x-text="formatTime(track.duration_seconds)"></span>
+                                        </div>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </template>
+
+            <!-- Artists Grid -->
+            <template x-if="$store.library.view === 'artists'">
+                <div>
+                    <h1 class="section-title">{{ t.player_artists }}</h1>
+                    <div class="card-grid">
+                        <template x-for="artist in $store.library.artists" :key="artist.id">
+                            <div class="card" @click="$store.library.openArtist(artist.id)">
+                                <div class="card-img">
+                                    <template x-if="artist.image_url">
+                                        <img :src="artist.image_url" :alt="artist.name" loading="lazy">
+                                    </template>
+                                    <template x-if="!artist.image_url">
+                                        <span class="placeholder-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg></span>
+                                    </template>
+                                    <button class="artist-follow-card-btn"
+                                            :class="{ followed: $store.follows.has(artist.id) }"
+                                            @click.stop="$store.follows.toggle(artist.id)"
+                                            :title="$store.follows.has(artist.id) ? '{{ t.player_unfollow_artist }}' : '{{ t.player_follow_artist }}'">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
+                                            <circle cx="9" cy="7" r="4"/>
+                                            <path x-show="!$store.follows.has(artist.id)" d="M19 8v6M16 11h6"/>
+                                            <path x-show="$store.follows.has(artist.id)" d="M16 11l2 2 4-5"/>
+                                        </svg>
+                                    </button>
+                                </div>
+                                <div class="card-title" x-text="artist.name"></div>
+                                <div class="card-subtitle" x-text="artist.release_count + ' {{ t.player_releases_count }} · ' + artist.track_count + ' {{ t.player_tracks_count }}'"></div>
+                            </div>
+                        </template>
+                    </div>
+                    <template x-if="$store.library.loading">
+                        <div class="loading-spinner"><div class="spinner"></div></div>
+                    </template>
+                    <div id="artist-sentinel" style="height:1px"></div>
+                </div>
+            </template>
+
+            <!-- Artist Detail -->
+            <template x-if="$store.library.view === 'artist_detail' && $store.library.currentArtist">
+                <div>
+                    <div class="breadcrumb">
+                        <a @click="$store.library.goArtists()">{{ t.player_artists }}</a>
+                        <span>/</span>
+                        <span x-text="$store.library.currentArtist.name"></span>
+                    </div>
+                    <div class="artist-header">
+                        <div class="artist-img">
+                            <template x-if="$store.library.currentArtist.image_url">
+                                <img :src="$store.library.currentArtist.image_url" :alt="$store.library.currentArtist.name">
+                            </template>
+                            <template x-if="!$store.library.currentArtist.image_url">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M20 21a8 8 0 10-16 0"/></svg>
+                            </template>
+                        </div>
+                        <div>
+                            <div class="artist-name" x-text="$store.library.currentArtist.name"></div>
+                            <div class="artist-stats">
+                                <span x-text="$store.library.currentArtist.releases.length + ' {{ t.player_releases_count }}'"></span>
+                                <span>•</span>
+                                <span x-text="$store.library.currentArtist.total_track_count + ' {{ t.player_tracks_count }}'"></span>
+                                <span>•</span>
+                                <span x-text="$store.library.currentArtist.total_play_count + ' {{ t.player_plays_count }}'"></span>
+                            </div>
+                            <div class="release-actions">
+                                <button class="release-action-btn secondary"
+                                        :class="{ followed: $store.follows.has($store.library.currentArtist.id) }"
+                                        @click="$store.follows.toggle($store.library.currentArtist.id)"
+                                        :title="$store.follows.has($store.library.currentArtist.id) ? '{{ t.player_unfollow_artist }}' : '{{ t.player_follow_artist }}'">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2"/>
+                                        <circle cx="9" cy="7" r="4"/>
+                                        <path x-show="!$store.follows.has($store.library.currentArtist.id)" d="M19 8v6M16 11h6"/>
+                                        <path x-show="$store.follows.has($store.library.currentArtist.id)" d="M16 11l2 2 4-5"/>
+                                    </svg>
+                                    <span x-text="$store.follows.has($store.library.currentArtist.id) ? '{{ t.player_followed }}' : '{{ t.player_follow }}'"></span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <template x-for="group in $store.library.artistReleaseGroups()" :key="group.type">
+                        <section class="artist-release-group">
+                            <h2 class="artist-release-group-title" x-text="group.label"></h2>
+                            <div class="card-grid">
+                                <template x-for="release in group.releases" :key="release.id">
+                                    <div class="card" @click="$store.library.openRelease(release.id)">
+                                        <div class="card-img">
+                                            <template x-if="release.cover_url">
+                                                <img :src="release.cover_url" :alt="release.title" loading="lazy">
+                                            </template>
+                                            <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 }}">
+                                                <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 }}">
+                                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                                            </button>
+                                            <button class="card-play-btn" @click.stop="$store.library.playRelease(release.id)">
+                                                <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                                            </button>
+                                        </div>
+                                        <div class="card-title" x-text="release.title"></div>
+                                        <div class="card-subtitle">
+                                            <span x-text="release.year || ''"></span>
+                                            <span x-text="release.track_count + ' {{ t.player_tracks_count }}'"></span>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </section>
+                    </template>
+                    <template x-if="$store.library.currentArtist.featured_tracks && $store.library.currentArtist.featured_tracks.length > 0">
+                        <section class="artist-release-group">
+                            <h2 class="artist-release-group-title">{{ t.player_appears_on }}</h2>
+                            <div class="track-list-header">
+                                <span>#</span>
+                                <span>{{ t.player_title }}</span>
+                                <span></span>
+                                <span></span>
+                                <span style="text-align:right">{{ t.player_duration }}</span>
+                            </div>
+                            <template x-for="(track, idx) in $store.library.currentArtist.featured_tracks" :key="track.id">
+                                <div class="track-row"
+                                     :class="{ playing: $store.player.currentTrack && $store.player.currentTrack.id === track.id }"
+                                     @dblclick="$store.queue.playRelease($store.library.currentArtist.featured_tracks, idx)">
+                                    <span class="track-num" x-text="idx + 1"></span>
+                                    <div class="track-info">
+                                        <div class="track-title">
+                                            <span x-text="track.title"></span>
+                                            <span style="color:var(--text-subdued)"> · </span>
+                                            <a class="artist-link" @click.stop="$store.library.openRelease(track.release_id)" x-text="track.release_title"></a>
+                                        </div>
+                                        <div class="track-artists-inline">
+                                            <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks(track)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
+                                                <span>
+                                                    <template x-if="artistIdx > 0"><span>, </span></template>
+                                                    <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
+                                                </span>
+                                            </template>
+                                        </div>
+                                    </div>
+                                    <span></span>
+                                    <div class="track-actions">
+                                        <button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_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="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentArtist.featured_tracks, idx)" title="{{ t.player_play }}">
+                                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                                        </button>
+                                        <button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
+                                            <svg viewBox="0 0 24 24" :fill="$store.likes.has(track.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>
+                                        <button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
+                                        </button>
+                                        <button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                                        </button>
+                                        <button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
+                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+                                        </button>
+                                    </div>
+                                    <span class="track-duration" x-text="formatTime(track.duration_seconds)"></span>
+                                </div>
+                            </template>
+                        </section>
+                    </template>
+                </div>
+            </template>
+
+            <!-- Release Detail -->
+            <template x-if="$store.library.view === 'release_detail' && $store.library.currentRelease">
+                <div>
+                    <div class="breadcrumb">
+                        <a @click="$store.library.goArtists()">{{ t.player_artists }}</a>
+                        <span>/</span>
+                        <template x-if="$store.library.currentRelease.artists.length > 0">
+                            <a @click="$store.library.openArtist($store.library.currentRelease.artists[0].id)" x-text="$store.library.currentRelease.artists[0].name"></a>
+                        </template>
+                        <span>/</span>
+                        <span x-text="$store.library.currentRelease.title"></span>
+                    </div>
+                    <div class="release-header">
+                        <div class="release-cover">
+                            <template x-if="$store.library.currentRelease.cover_url">
+                                <img :src="$store.library.currentRelease.cover_url" :alt="$store.library.currentRelease.title">
+                            </template>
+                            <template x-if="!$store.library.currentRelease.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>
+                        </div>
+                        <div class="release-meta">
+                            <div class="release-type" x-text="$store.library.currentRelease.release_type"></div>
+                            <div class="release-title-row">
+                                <div class="release-title" x-text="$store.library.currentRelease.title"></div>
+                                <button class="like-btn like-btn-lg release-title-like"
+                                        :class="{ liked: $store.likes.isReleaseLiked($store.library.currentRelease) }"
+                                        @click.stop="$store.likes.toggleRelease($store.library.currentRelease.id)"
+                                        title="{{ t.player_like }}">
+                                    <svg viewBox="0 0 24 24" :fill="$store.likes.isReleaseLiked($store.library.currentRelease) ? '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="release-artists">
+                                <template x-for="(artist, artistIdx) in $store.library.currentRelease.artists" :key="artist.id">
+                                    <span>
+                                        <template x-if="artistIdx > 0"><span>, </span></template>
+                                        <a class="artist-link" @click="$store.library.openArtist(artist.id)" x-text="artist.name"></a>
+                                    </span>
+                                </template>
+                            </div>
+                            <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))"
+                                        :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>
+                                    {{ t.player_info }}
+                                </button>
+                                <button class="release-action-btn primary" @click="$store.queue.playRelease($store.library.currentRelease.tracks, 0)">
+                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                                    {{ t.player_play }}
+                                </button>
+                                <button class="release-action-btn secondary" @click="$store.queue.addToEnd($store.library.currentRelease.tracks)" title="{{ t.player_add_to_end_queue }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                                    {{ t.player_queue }}
+                                </button>
+                                <button class="release-action-btn secondary" @click="$store.queue.addNextInQueue($store.library.currentRelease.tracks)" title="{{ t.player_play_next }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
+                                    {{ t.player_next }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Track list -->
+                    <div class="track-list-header">
+                        <span>#</span>
+                        <span>{{ t.player_title }}</span>
+                        <span></span>
+                        <span></span>
+                        <span style="text-align:right">{{ t.player_duration }}</span>
+                    </div>
+                    <template x-for="(track, idx) in $store.library.currentRelease.tracks" :key="track.id">
+                        <div class="track-row"
+                             :class="{ playing: $store.player.currentTrack && $store.player.currentTrack.id === track.id }"
+                             @dblclick="$store.queue.playRelease($store.library.currentRelease.tracks, idx)">
+                            <span class="track-num" x-text="track.track_number || (idx + 1)"></span>
+                            <div class="track-info">
+                                <div class="track-title" x-text="track.title"></div>
+                                <div class="track-artists-inline">
+                                    <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks(track)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
+                                        <span>
+                                            <template x-if="artistIdx > 0"><span>, </span></template>
+                                            <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
+                                        </span>
+                                    </template>
+                                </div>
+                            </div>
+                            <span></span>
+                            <div class="track-actions">
+                                <button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_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="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentRelease.tracks, idx)" title="{{ t.player_play }}">
+                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                                </button>
+                                <button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
+                                    <svg viewBox="0 0 24 24" :fill="$store.likes.has(track.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>
+                                <button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
+                                </button>
+                                <button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                                </button>
+                                <button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+                                </button>
+                            </div>
+                            <span class="track-duration" x-text="formatTime(track.duration_seconds)"></span>
+                        </div>
+                    </template>
+                </div>
+            </template>
+
+            <!-- Playlist Detail -->
+            <template x-if="$store.library.view === 'playlist_detail' && $store.library.currentPlaylist">
+                <div>
+                    <div class="breadcrumb">
+                        <a @click="$store.library.goArtists()">{{ t.player_library }}</a>
+                        <span>/</span>
+                        <span x-text="$store.playlists.displayTitle($store.library.currentPlaylist)"></span>
+                    </div>
+                    <h1 class="section-title" x-text="$store.playlists.displayTitle($store.library.currentPlaylist)"></h1>
+                    <div class="playlist-detail-meta"
+                         x-show="$store.library.currentPlaylist.owner_name || $store.library.currentPlaylist.is_public">
+                        <span x-show="$store.library.currentPlaylist.owner_name"
+                              x-text="'{{ t.player_by }} ' + $store.library.currentPlaylist.owner_name"></span>
+                        <span x-show="$store.library.currentPlaylist.owner_name && $store.library.currentPlaylist.is_public">&middot;</span>
+                        <span class="playlist-public-badge"
+                              x-show="$store.library.currentPlaylist.is_public">{{ t.player_published }}</span>
+                    </div>
+                    <template x-if="$store.library.currentPlaylist.description">
+                        <p style="color:var(--text-subdued);margin-bottom:16px" x-text="$store.library.currentPlaylist.description"></p>
+                    </template>
+                    <div class="track-list-header">
+                        <span>#</span>
+                        <span>{{ t.player_title }}</span>
+                        <span></span>
+                        <span></span>
+                        <span style="text-align:right">{{ t.player_duration }}</span>
+                    </div>
+                    <template x-for="(track, idx) in $store.library.currentPlaylist.tracks" :key="track.id">
+                        <div class="track-row"
+                             :class="{ playing: $store.player.currentTrack && $store.player.currentTrack.id === track.id }"
+                             @dblclick="$store.queue.playRelease($store.library.currentPlaylist.tracks, idx)">
+                            <span class="track-num" x-text="idx + 1"></span>
+                            <div class="track-info">
+                                <div class="track-title" x-text="track.title"></div>
+                                <div class="track-artists-inline">
+                                    <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks(track)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
+                                        <span>
+                                            <template x-if="artistIdx > 0"><span>, </span></template>
+                                            <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
+                                        </span>
+                                    </template>
+                                </div>
+                            </div>
+                            <span></span>
+                            <div class="track-actions">
+                                <button class="track-action-btn info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_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="track-action-btn play-btn" @click.stop="$store.queue.playRelease($store.library.currentPlaylist.tracks, idx)" title="{{ t.player_play }}">
+                                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                                </button>
+                                <button class="like-btn" :class="{ liked: $store.likes.has(track.id) }" @click.stop="$store.likes.toggle(track.id)" title="{{ t.player_like }}">
+                                    <svg viewBox="0 0 24 24" :fill="$store.likes.has(track.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>
+                                <button class="track-action-btn" @click.stop="$store.queue.addNextInQueue([track])" title="{{ t.player_play_next }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 6h14M5 12h8M5 18h14"/><path d="M17 10l4 3-4 3" fill="currentColor" stroke="none"/></svg>
+                                </button>
+                                <button class="track-action-btn" @click.stop="$store.queue.addToEnd([track])" title="{{ t.player_add_to_queue }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+                                </button>
+                                <button class="track-action-btn" @click.stop="$store.playlists.showPicker([track.id])" title="{{ t.player_add_to_playlist }}">
+                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+                                </button>
+                            </div>
+                            <span class="track-duration" x-text="formatTime(track.duration_seconds)"></span>
+                        </div>
+                    </template>
+                </div>
+            </template>
+        </div>
+
+        <!-- Queue Panel -->
+        <div class="queue-backdrop"
+             x-show="$store.queue.visible"
+             x-cloak
+             @click="$store.queue.visible = false"></div>
+        <div class="queue-panel" :class="{ hidden: !$store.queue.visible }">
+            <div class="queue-header">
+                <h3>{{ t.player_queue }}</h3>
+                <button class="queue-clear-btn" @click="$store.queue.clear()">{{ t.player_clear }}</button>
+            </div>
+            <div class="queue-tracks">
+                <template x-if="$store.queue.tracks.length === 0">
+                    <div class="empty-state">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+                        <p>{{ t.player_queue_empty }}</p>
+                    </div>
+                </template>
+                <template x-for="(track, idx) in $store.queue.tracks" :key="idx + '-' + track.id">
+                    <div class="queue-track"
+                         :class="{ active: idx === $store.queue.currentIndex, dragging: $store.queue._dragIdx === idx }"
+                         @click="$store.queue.playFromIndex(idx)"
+                         draggable="true"
+                         @dragstart="$store.queue._dragIdx = idx; $event.dataTransfer.effectAllowed = 'move'"
+                         @dragend="$store.queue._dragIdx = null; document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'))"
+                         @dragover.prevent="$event.dataTransfer.dropEffect = 'move'; $event.currentTarget.classList.add('drag-over')"
+                         @dragleave="$event.currentTarget.classList.remove('drag-over')"
+                         @drop.prevent="$event.currentTarget.classList.remove('drag-over'); if ($store.queue._dragIdx !== null) { $store.queue.moveTrack($store.queue._dragIdx, idx); $store.queue._dragIdx = null; }">
+                        <div class="queue-drag-handle" @mousedown.stop>
+                            <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/></svg>
+                        </div>
+                        <div class="queue-track-cover">
+                            <template x-if="track.cover_url">
+                                <img :src="track.cover_url" :alt="track.title" loading="lazy">
+                            </template>
+                            <template x-if="!track.cover_url">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+                            </template>
+                        </div>
+                        <div class="queue-track-info">
+                            <div class="queue-track-title" x-text="track.title"></div>
+                            <div class="queue-track-artist">
+                                <template x-for="(artist, artistIdx) in $store.library.trackArtistLinks(track)" :key="artist.label + '-' + artist.id + '-' + artistIdx">
+                                    <span>
+                                        <template x-if="artistIdx > 0"><span>, </span></template>
+                                        <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
+                                    </span>
+                                </template>
+                            </div>
+                        </div>
+                        <div class="queue-track-actions">
+                            <button class="queue-track-remove info-btn" @click.stop="$store.info.open('{{ t.player_track_info }}', $store.library.trackInfo(track))" :title="$store.library.trackInfo(track)" aria-label="{{ t.player_track_info }}">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14"><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="queue-track-remove" @click.stop="$store.queue.remove(idx)" title="{{ t.player_remove }}">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                            </button>
+                        </div>
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+
+    <!-- Player Bar -->
+    <div class="player-bar">
+        <div class="player-now-playing">
+            <template x-if="$store.player.currentTrack">
+                <div style="display:flex;align-items:center;gap:12px;overflow:hidden">
+                    <div class="player-cover">
+                        <template x-if="$store.player.currentTrack.cover_url">
+                            <img :src="$store.player.currentTrack.cover_url" :alt="$store.player.currentTrack.title">
+                        </template>
+                        <template x-if="!$store.player.currentTrack.cover_url">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
+                        </template>
+                    </div>
+                    <div class="player-track-info">
+                        <div class="player-track-title" x-text="$store.player.currentTrack.title"></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>
+                                    <template x-if="artistIdx > 0"><span>, </span></template>
+                                    <a class="artist-link" @click.stop="$store.library.openArtist(artist.id)" x-text="artist.label"></a>
+                                </span>
+                            </template>
+                            <template x-if="$store.player.currentTrack.release_year">
+                                <span class="player-release-year" x-text="' · ' + $store.player.currentTrack.release_year"></span>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+
+        <div class="player-controls">
+            <div class="player-buttons">
+                <button class="player-btn" :class="{ active: $store.player.shuffle }" @click="$store.player.toggleShuffle()" title="{{ t.player_shuffle }}">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg>
+                </button>
+                <button class="player-btn" @click="$store.player.prev()" title="{{ t.player_previous }}">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+                </button>
+                <button class="player-btn player-btn-play" @click="$store.player.toggle()">
+                    <template x-if="!$store.player.isPlaying">
+                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+                    </template>
+                    <template x-if="$store.player.isPlaying">
+                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>
+                    </template>
+                </button>
+                <button class="player-btn" @click="$store.player.next()" title="{{ t.player_next }}">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+                </button>
+                <button class="player-btn" :class="{ active: $store.player.repeatMode !== 'off' }" @click="$store.player.cycleRepeat()" title="{{ t.player_repeat }}">
+                    <template x-if="$store.player.repeatMode !== 'one'">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg>
+                    </template>
+                    <template x-if="$store.player.repeatMode === 'one'">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/><text x="12" y="14" font-size="8" fill="currentColor" text-anchor="middle" font-weight="bold">1</text></svg>
+                    </template>
+                </button>
+            </div>
+            <div class="player-timeline">
+                <span class="player-time" x-text="formatTime($store.player.currentTime)"></span>
+                <div class="progress-bar" @click="$store.player.seekFromClick($event)">
+                    <div class="progress-bar-fill" :style="'width:' + $store.player.progress + '%'">
+                        <div class="progress-bar-thumb"></div>
+                    </div>
+                </div>
+                <span class="player-time" x-text="formatTime($store.player.duration)"></span>
+            </div>
+            <div class="player-version-chip">v{{ t.app_version() }}</div>
+        </div>
+
+        <div class="player-right">
+            <div class="volume-control">
+                <button class="volume-btn" @click="$store.player.toggleMute()">
+                    <template x-if="$store.player.volume === 0">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
+                    </template>
+                    <template x-if="$store.player.volume > 0 && $store.player.volume < 0.5">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
+                    </template>
+                    <template x-if="$store.player.volume >= 0.5">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"/></svg>
+                    </template>
+                </button>
+                <div class="volume-slider"
+                     @pointerdown.prevent="$store.player.startVolumeDrag($event)"
+                     aria-label="{{ t.player_volume }}">
+                    <div class="volume-slider-fill" :style="'width:' + ($store.player.volume * 100) + '%'">
+                        <div class="volume-slider-thumb"></div>
+                    </div>
+                </div>
+            </div>
+            <button class="queue-toggle-btn" :class="{ active: $store.queue.visible }" @click="$store.queue.visible = !$store.queue.visible" title="{{ t.player_queue }}">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+            </button>
+        </div>
+    </div>