Added the playlist editor

frontend/Cargo.toml

@@ -14,5 +14,5 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
-web-sys = { version = "0.3", features = ["HtmlInputElement", "HtmlSelectElement", "Window"] }
+web-sys = { version = "0.3", features = ["HtmlInputElement", "HtmlSelectElement", "Window", "DragEvent", "DataTransfer"] }
 js-sys = "0.3"

frontend/src/api.rs

@@ -44,6 +44,20 @@ async fn post_empty<T: DeserializeOwned>(url: &str) -> Result<T, ApiError> {
     resp.json().await.map_err(|e| ApiError(e.to_string()))
 }
 
+async fn put_json<T: DeserializeOwned>(url: &str, body: &str) -> Result<T, ApiError> {
+    let resp = Request::put(url)
+        .header("Content-Type", "application/json")
+        .body(body)
+        .map_err(|e| ApiError(e.to_string()))?
+        .send()
+        .await
+        .map_err(|e| ApiError(e.to_string()))?;
+    if !resp.ok() {
+        return Err(ApiError(format!("HTTP {}", resp.status())));
+    }
+    resp.json().await.map_err(|e| ApiError(e.to_string()))
+}
+
 async fn delete(url: &str) -> Result<(), ApiError> {
     let resp = Request::delete(url)
         .send()
@@ -304,6 +318,36 @@ pub fn export_m3u_url(id: i32) -> String {
     format!("{BASE}/playlists/{id}/m3u")
 }
 
+pub async fn add_track_to_playlist(
+    playlist_id: i32,
+    track_id: i32,
+) -> Result<serde_json::Value, ApiError> {
+    let body = serde_json::json!({"track_id": track_id}).to_string();
+    post_json(&format!("{BASE}/playlists/{playlist_id}/tracks"), &body).await
+}
+
+pub async fn remove_track_from_playlist(
+    playlist_id: i32,
+    track_id: i32,
+) -> Result<(), ApiError> {
+    delete(&format!(
+        "{BASE}/playlists/{playlist_id}/tracks/{track_id}"
+    ))
+    .await
+}
+
+pub async fn reorder_playlist_tracks(
+    playlist_id: i32,
+    track_ids: &[i32],
+) -> Result<serde_json::Value, ApiError> {
+    let body = serde_json::json!({"track_ids": track_ids}).to_string();
+    put_json(&format!("{BASE}/playlists/{playlist_id}/tracks"), &body).await
+}
+
+pub async fn search_tracks(query: &str) -> Result<Vec<Track>, ApiError> {
+    get_json(&format!("{BASE}/tracks?q={query}&limit=50")).await
+}
+
 // --- YouTube Auth ---
 
 pub async fn get_ytauth_status() -> Result<YtAuthStatus, ApiError> {

frontend/style.css

@@ -323,6 +323,18 @@ table.tasks-table td { overflow: hidden; text-overflow: ellipsis; }
 .auth-card h1 { font-size: 1.8rem; color: var(--accent); margin-bottom: 0.25rem; }
 .auth-card p { margin-bottom: 1.5rem; }
 
+/* Tab bar */
+.tab-bar { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 2px solid var(--border); }
+.tab-btn { padding: 0.5rem 1rem; background: none; border: none; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; font-size: 0.9rem; }
+.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tab-btn:hover { color: var(--text-primary); }
+
+/* Drag and drop */
+.drag-handle { cursor: grab; user-select: none; color: var(--text-muted); padding-right: 0.5rem; font-size: 1.2rem; }
+tr.drag-over { background: rgba(59, 130, 246, 0.1); }
+tr[draggable="true"] { cursor: grab; }
+tr[draggable="true"]:active { cursor: grabbing; }
+
 /* Sidebar user section */
 .sidebar-user {
     margin-top: auto;