fix: admin UI styling + add artist/track links (#414)

* fix: admin UI styling + add artist/track links

- Fix badge layout (stack vertically, align right)
- Change matches badge to blue (distinct from pending yellow)
- Add link to artist profile (plyr.fm/u/{handle})
- Add link to track page when track_id is available
- Store track_id in label context for future flags

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

* fix: update test to include track_id parameter

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

---------

Co-authored-by: Claude <[e-mail]>

backend/src/backend/_internal/moderation.py

···
                 await _emit_copyright_label(
                     uri=track.atproto_record_uri,
                     cid=track.atproto_record_cid,
+                    track_id=track_id,
                     track_title=track.title,
                     artist_handle=track.artist.handle if track.artist else None,
                     artist_did=track.artist_did,
···
 async def _emit_copyright_label(
     uri: str,
     cid: str | None,
+    track_id: int | None = None,
     track_title: str | None = None,
     artist_handle: str | None = None,
     artist_did: str | None = None,
···
     args:
         uri: AT URI of the track record
         cid: optional CID of the record
+        track_id: database ID of the track (for admin UI links)
         track_title: title of the track (for admin UI context)
         artist_handle: handle of the artist (for admin UI context)
         artist_did: DID of the artist (for admin UI context)
···
     try:
         # build context for admin UI display
         context: dict[str, Any] | None = None
-        if track_title or artist_handle or matches:
+        if track_id or track_title or artist_handle or matches:
             context = {
+                "track_id": track_id,
                 "track_title": track_title,
                 "artist_handle": artist_handle,
                 "artist_did": artist_did,

backend/tests/test_moderation.py

···
         mock_emit.assert_called_once_with(
             uri="at://did:plc:labelertest/fm.plyr.track/abc123",
             cid="bafyreiabc123",
+            track_id=track.id,
             track_title="Labeler Test Track",
             artist_handle="labeler.bsky.social",
             artist_did="did:plc:labelertest",

moderation/src/admin.rs

···
 /// Context payload for storage.
 #[derive(Debug, Deserialize)]
 pub struct ContextPayload {
+    pub track_id: Option<i64>,
     pub track_title: Option<String>,
     pub artist_handle: Option<String>,
     pub artist_did: Option<String>,
···
     tracing::info!(uri = %request.uri, "storing label context");
 
     let label_ctx = LabelContext {
+        track_id: request.context.track_id,
         track_title: request.context.track_title,
         artist_handle: request.context.artist_handle,
         artist_did: request.context.artist_did,
···
 
     let track_info = if has_context {
         let c = ctx.unwrap();
+        let handle = c.artist_handle.as_deref().unwrap_or("unknown");
+        let title = c.track_title.as_deref().unwrap_or("unknown track");
+
+        // Link to track if we have track_id
+        let title_html = if let Some(track_id) = c.track_id {
+            format!(
+                r#"<a href="https://plyr.fm/track/{}" target="_blank" rel="noopener">{}</a>"#,
+                track_id,
+                html_escape(title)
+            )
+        } else {
+            html_escape(title)
+        };
+
+        // Link to artist if we have handle
+        let artist_link = if handle != "unknown" {
+            format!(
+                r#"<a href="https://plyr.fm/u/{}" target="_blank" rel="noopener">@{}</a>"#,
+                html_escape(handle),
+                html_escape(handle)
+            )
+        } else {
+            format!("@{}", html_escape(handle))
+        };
         format!(
             r#"<h3>{}</h3>
-            <div class="artist">by @{}</div>"#,
-            html_escape(c.track_title.as_deref().unwrap_or("unknown track")),
-            html_escape(c.artist_handle.as_deref().unwrap_or("unknown"))
+            <div class="artist">by {}</div>"#,
+            title_html,
+            artist_link
         )
     } else {
         r#"<div class="no-context">no track info available</div>"#.to_string()

moderation/src/db.rs

···
 
 /// Type alias for context row from database query.
 type ContextRow = (
-    Option<String>,
-    Option<String>,
-    Option<String>,
-    Option<f64>,
-    Option<serde_json::Value>,
-    Option<String>,
-    Option<String>,
+    Option<i64>,    // track_id
+    Option<String>, // track_title
+    Option<String>, // artist_handle
+    Option<String>, // artist_did
+    Option<f64>,    // highest_score
+    Option<serde_json::Value>, // matches
+    Option<String>, // resolution_reason
+    Option<String>, // resolution_notes
 );
 
 /// Type alias for flagged track row from database query.
 type FlaggedRow = (
-    i64,
-    String,
-    String,
-    DateTime<Utc>,
-    Option<String>,
-    Option<String>,
-    Option<String>,
-    Option<f64>,
-    Option<serde_json::Value>,
-    Option<String>,
-    Option<String>,
+    i64,            // seq
+    String,         // uri
+    String,         // val
+    DateTime<Utc>,  // cts
+    Option<i64>,    // track_id
+    Option<String>, // track_title
+    Option<String>, // artist_handle
+    Option<String>, // artist_did
+    Option<f64>,    // highest_score
+    Option<serde_json::Value>, // matches
+    Option<String>, // resolution_reason
+    Option<String>, // resolution_notes
 );
 
 /// Copyright match info stored alongside labels.
···
 /// Context stored alongside a label for display in admin UI.
 #[derive(Debug, Clone, Serialize, Deserialize, Default)]
 pub struct LabelContext {
+    pub track_id: Option<i64>,
     pub track_title: Option<String>,
     pub artist_handle: Option<String>,
     pub artist_did: Option<String>,
···
 
         sqlx::query(
             r#"
-            INSERT INTO label_context (uri, track_title, artist_handle, artist_did, highest_score, matches, resolution_reason, resolution_notes)
-            VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+            INSERT INTO label_context (uri, track_id, track_title, artist_handle, artist_did, highest_score, matches, resolution_reason, resolution_notes)
+            VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
             ON CONFLICT (uri) DO UPDATE SET
+                track_id = COALESCE(EXCLUDED.track_id, label_context.track_id),
                 track_title = COALESCE(EXCLUDED.track_title, label_context.track_title),
                 artist_handle = COALESCE(EXCLUDED.artist_handle, label_context.artist_handle),
                 artist_did = COALESCE(EXCLUDED.artist_did, label_context.artist_did),
···
             "#,
         )
         .bind(uri)
+        .bind(context.track_id)
         .bind(&context.track_title)
         .bind(&context.artist_handle)
         .bind(&context.artist_did)
···
     pub async fn get_context(&self, uri: &str) -> Result<Option<LabelContext>, sqlx::Error> {
         let row: Option<ContextRow> = sqlx::query_as(
                 r#"
-                SELECT track_title, artist_handle, artist_did, highest_score, matches, resolution_reason, resolution_notes
+                SELECT track_id, track_title, artist_handle, artist_did, highest_score, matches, resolution_reason, resolution_notes
                 FROM label_context
                 WHERE uri = $1
                 "#,
···
 
         Ok(row.map(
             |(
+                track_id,
                 track_title,
                 artist_handle,
                 artist_did,
···
                 resolution_notes,
             )| {
                 LabelContext {
+                    track_id,
                     track_title,
                     artist_handle,
                     artist_did,
···
         let rows: Vec<FlaggedRow> = sqlx::query_as(
             r#"
                 SELECT l.seq, l.uri, l.val, l.cts,
-                       c.track_title, c.artist_handle, c.artist_did, c.highest_score, c.matches,
+                       c.track_id, c.track_title, c.artist_handle, c.artist_did, c.highest_score, c.matches,
                        c.resolution_reason, c.resolution_notes
                 FROM labels l
                 LEFT JOIN label_context c ON l.uri = c.uri
···
                     uri,
                     val,
                     cts,
+                    track_id,
                     track_title,
                     artist_handle,
                     artist_did,
···
                     resolution_reason,
                     resolution_notes,
                 )| {
-                    let context = if track_title.is_some()
+                    let context = if track_id.is_some()
+                        || track_title.is_some()
                         || artist_handle.is_some()
                         || resolution_reason.is_some()
                     {
                         Some(LabelContext {
+                            track_id,
                             track_title,
                             artist_handle,
                             artist_did,

moderation/src/handlers.rs

···
 /// Context info for display in admin UI.
 #[derive(Debug, Deserialize)]
 pub struct EmitLabelContext {
+    pub track_id: Option<i64>,
     pub track_title: Option<String>,
     pub artist_handle: Option<String>,
     pub artist_did: Option<String>,
···
     // Store context if provided (for admin UI)
     if let Some(ctx) = request.context {
         let label_ctx = LabelContext {
+            track_id: ctx.track_id,
             track_title: ctx.track_title,
             artist_handle: ctx.artist_handle,
             artist_did: ctx.artist_did,

moderation/static/admin.css

···
     color: var(--text-primary);
 }
 
+.track-info h3 a {
+    color: var(--text-primary);
+    text-decoration: none;
+}
+
+.track-info h3 a:hover {
+    color: var(--accent);
+    text-decoration: underline;
+}
+
 .track-info .artist {
     color: var(--text-secondary);
     font-size: 0.9rem;
 }
 
+.track-info .artist a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+.track-info .artist a:hover {
+    text-decoration: underline;
+}
+
 .track-info .uri {
     font-size: 0.75rem;
     color: var(--text-muted);
···
 
 .flag-badges {
     display: flex;
-    gap: 8px;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
     flex-shrink: 0;
 }
 
···
 }
 
 .badge.matches {
-    background: rgba(251, 191, 36, 0.15);
-    color: #fbbf24;
+    background: rgba(106, 159, 255, 0.15);
+    color: var(--accent);
 }
 
 .badge.env {