Add history delete button and Truckers FM station

radio/urls.py

@@ -10,6 +10,7 @@ urlpatterns = [
     path('radio/remove/<int:pk>/', views.remove_station, name='remove_station'),
     path('radio/favorite/<int:pk>/', views.toggle_favorite, name='toggle_favorite'),
     path('radio/history/', views.history_json, name='history_json'),
+    path('radio/history/<int:pk>/delete/', views.delete_history_entry, name='delete_history_entry'),
     path('radio/play/start/', views.start_play, name='start_play'),
     path('radio/play/stop/', views.stop_play, name='stop_play'),
     path('radio/recommendations/', views.recommendations, name='recommendations'),

radio/views.py

@@ -37,7 +37,7 @@ def index(request):
         )
         history = list(
             request.user.track_history.values(
-                'station_name', 'track', 'played_at', 'scrobbled'
+                'id', 'station_name', 'track', 'played_at', 'scrobbled'
             )[:50]
         )
         # Convert datetime to ISO string for JSON serialisation in template
@@ -383,6 +383,19 @@ def recommendations(request):
 # History JSON
 # ---------------------------------------------------------------------------
 
+@csrf_exempt
+@require_http_methods(['POST'])
+def delete_history_entry(request, pk):
+    if not request.user.is_authenticated:
+        return JsonResponse({'error': 'authentication required'}, status=401)
+    try:
+        entry = TrackHistory.objects.get(pk=pk, user=request.user)
+        entry.delete()
+        return JsonResponse({'ok': True})
+    except TrackHistory.DoesNotExist:
+        return JsonResponse({'error': 'not found'}, status=404)
+
+
 def history_json(request):
     if not request.user.is_authenticated:
         return JsonResponse({'error': 'authentication required'}, status=401)

static/css/app.css

@@ -895,3 +895,14 @@ body.dnd-mode .timer-display {
   font-size: 0.85rem;
   color: var(--fg);
 }
+
+.btn-delete-history {
+  background: none;
+  border: none;
+  color: var(--muted, #888);
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 0 4px;
+  opacity: 0.5;
+}
+.btn-delete-history:hover { opacity: 1; color: #e55; }

static/js/app.js

@@ -257,10 +257,23 @@ function addHistoryRow(stationName, track) {
     <td>${escapeHtml(stationName)}</td>
     <td>${escapeHtml(track)}</td>
     <td></td>
+    <td><button class="btn-delete-history" onclick="deleteHistoryEntry(null, this)" title="Remove">✕</button></td>
   `;
   tbody.insertBefore(tr, tbody.firstChild);
 }
 
+async function deleteHistoryEntry(id, btn) {
+  const tr = btn.closest('tr');
+  if (!id) { tr.remove(); return; }
+  try {
+    const res = await fetch(`/radio/history/${id}/delete/`, {
+      method: 'POST',
+      headers: {'X-CSRFToken': getCsrfToken()},
+    });
+    if (res.ok) tr.remove();
+  } catch (e) {}
+}
+
 // ---------------------------------------------------------------------------
 // Affiliate links
 // ---------------------------------------------------------------------------

templates/radio/player.html

@@ -144,18 +144,20 @@
         <th>Station</th>
         <th>Track</th>
         <th>&#9836;</th>
+        <th></th>
       </tr>
     </thead>
     <tbody id="history-tbody">
       {% for entry in history %}
-      <tr>
+      <tr data-id="{{ entry.id }}">
         <td class="history-time">{{ entry.played_at|slice:":16"|cut:"T" }}</td>
         <td>{{ entry.station_name }}</td>
         <td>{{ entry.track }}</td>
         <td>{% if entry.scrobbled %}<span title="Scrobbled to Last.fm">&#10003;</span>{% endif %}</td>
+        <td><button class="btn-delete-history" onclick="deleteHistoryEntry({{ entry.id }}, this)" title="Remove">✕</button></td>
       </tr>
       {% empty %}
-      <tr id="history-empty-row"><td colspan="4" class="empty-msg">No history yet.</td></tr>
+      <tr id="history-empty-row"><td colspan="5" class="empty-msg">No history yet.</td></tr>
       {% endfor %}
     </tbody>
   </table>