feat(0.3.0): dark theme, mute, media keys, current-track + 2nd-look fixes

Closes the gaps from a UI review of v0.2.0.

Added
- Mute toggle: speaker icon is now a button; remembers prior volume.
- MediaSession API: OS media keys / headphone buttons / lock-screen
  widget play/pause the radio. Metadata exposes station + SomaFM + genre.
- Current-track display: polls https://somafm.com/songs/{code}.json every
  30s while playing; shown as `♪ Title — Artist` under the description.
  Best-effort — silently hidden if CORS-blocked / unreachable.

Fixed (2nd-look)
- Dark theme now actually renders. v0.2.0 saved the dropdown but had no
  CSS — add `admin_body_class` filter + `radio-theme-{auto,light,dark}`
  CSS for the player + about-cards. `auto` follows OS prefers-color-scheme.
- Settings-page volume slider: removed inline `oninput`; wired in radio.js
  via `bindSettingsSlider()`. Cleaner under strict CSP.
- Save errors surface as a transient notice instead of being swallowed.
- Gitea changelog URL moved into `RADIO_GITEA_URL` constant.
- Genre badge restyled as an inline pill (was using `margin-left: auto`
  which wrapped poorly on narrow widget widths).

Files
- radio.php (version, constant, strings, body-class filter)
- inc/about.php (use constant, add 0.3.0 history entry)
- inc/settings.php (drop inline oninput)
- inc/admin-page.php + inc/dashboard-widget.php (mute button, track slot)
- assets/css/radio.css (pill, mute, track, dark-theme rules)
- assets/js/radio.js (rewrite: mute, MediaSession, track polling,
  settings slider, save-error surfacing)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

inc/about.php

@@ -48,7 +48,11 @@ function radio_render_about_page() {
                 <h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
                 <ul>
                     <li>
-                        <span class="ver">v0.2.0</span> &mdash; 26 May 2026 <span class="latest">latest</span><br>
+                        <span class="ver">v0.3.0</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
+                        <?php esc_html_e( 'Dark theme actually wired through (auto / light / dark — auto follows OS prefers-color-scheme). Mute toggle on the speaker icon. OS media keys (F8 / headphone buttons / lock-screen) play and pause via MediaSession. Current track polled from SomaFM and shown under the station description while playing. Save errors surface as a brief notice instead of being swallowed. Genre badge restyled as an inline pill.', 'radio' ); ?>
+                    </li>
+                    <li>
+                        <span class="ver">v0.2.0</span> &mdash; 26 May 2026<br>
                         <?php esc_html_e( 'UI rebuilt to WordPress admin standards. Postbox container, native Play/Pause button with text label, picks up your admin colour scheme via var(--wp-admin-theme-color), genre badge moved inline, dashboard widget no longer renders a card-inside-a-card. Functionality identical to v0.1.0 — purely visual polish.', 'radio' ); ?>
                     </li>
                     <li>
@@ -57,7 +61,7 @@ function radio_render_about_page() {
                     </li>
                 </ul>
                 <a class="radio-about-changelog-link"
-                   href="https://git.davidtkeane.com/ranger/a-radio/src/branch/main/CHANGELOG.md"
+                   href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
                    target="_blank" rel="noopener">
                     <?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
                 </a>

inc/admin-page.php

@@ -45,6 +45,7 @@ function radio_render_main_page() {
                         <span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
                         <span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
                         <p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
+                        <p class="radio-player__track" data-radio-track hidden></p>
                     </div>
 
                     <div class="radio-player__controls">
@@ -54,7 +55,9 @@ function radio_render_main_page() {
                         </button>
 
                         <div class="radio-player__volume">
-                            <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
+                            <button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>">
+                                <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
+                            </button>
                             <input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
                             <span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
                         </div>

inc/dashboard-widget.php

@@ -38,6 +38,7 @@ function radio_render_dashboard_widget() {
             <span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
             <span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
             <p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
+            <p class="radio-player__track" data-radio-track hidden></p>
         </div>
 
         <div class="radio-player__controls">
@@ -47,7 +48,9 @@ function radio_render_dashboard_widget() {
             </button>
 
             <div class="radio-player__volume">
-                <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
+                <button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>">
+                    <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
+                </button>
                 <input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
                 <span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
             </div>

inc/settings.php

@@ -82,7 +82,7 @@ function radio_render_settings_page() {
                         <label for="default_volume"><?php esc_html_e( 'Default volume', 'radio' ); ?></label>
                     </th>
                     <td>
-                        <input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" oninput="document.getElementById('default_volume_label').textContent = this.value + '%'">
+                        <input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" aria-describedby="default_volume_label">
                         <span id="default_volume_label"><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
                     </td>
                 </tr>