[release] Bump to version 58.8

- Clean up trend templates

.gitea/workflows/build.yml

@@ -1,68 +0,0 @@
-name: build
-
-on:
-  push:
-    branches: ["**"]
-  pull_request:
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    env:
-      VROBBLER_DATABASE_URL: sqlite:///test.db
-      VROBBLER_USDA_API_KEY: ${{ vars.VROBBLER_USDA_API_KEY }}
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.11"
-
-      - name: Cache pip/poetry
-        uses: actions/cache@v4
-        with:
-          path: |
-            ~/.cache/pip
-            ~/.cache/pypoetry
-          key: ${{ runner.os }}-py311-${{ hashFiles('**/poetry.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-py311-
-
-      - name: Install Poetry
-        run: |
-          python -m pip install --upgrade pip
-          pip install poetry
-
-      - name: Install deps
-        run: |
-          cp vrobbler.conf.test vrobbler.conf
-          poetry install --with test
-
-      - name: Pytest with coverage
-        run: |
-          poetry run pytest -n 5 --cov-report term:skip-covered --cov=vrobbler tests
-
-      - name: Notify success (ntfy)
-        if: success()
-        run: |
-          curl -fsS \
-            -H "Title: vrobbler CI success" \
-            -H "Priority: low" \
-            -H "Tags: success,vrobbler" \
-            -H "Actions: view, Changes, ${{ gitea.server_url }}/${{ gitea.repository }}/commit/${{ gitea.sha }}; view, Build, ${{ gitea.server_url }}/${{ gitea.repository }}/actions/runs/${{ gitea.run_id }}" \
-            -d "✅ Build succeeded: ${{ gitea.repository }} @ ${{ gitea.sha }}" \
-            https://ntfy.unbl.ink/drone
-
-      - name: Notify failure (ntfy)
-        if: failure()
-        run: |
-          curl -fsS \
-            -H "Title: vrobbler CI failure" \
-            -H "Priority: high" \
-            -H "Tags: failure,vrobbler" \
-            -H "Actions: view, Changes, ${{ gitea.server_url }}/${{ gitea.repository }}/commit/${{ gitea.sha }}; view, Build, ${{ gitea.server_url }}/${{ gitea.repository }}/actions/runs/${{ gitea.run_id }}" \
-            -d "❌ Build failed: ${{ gitea.repository }} @ ${{ gitea.sha }}" \
-            https://ntfy.unbl.ink/drone

.gitea/workflows/ci.yml

@@ -1,8 +1,14 @@
-name: deploy
+name: ci
 
 on:
   push:
+    branches: ["**"]
     tags: ["*"]
+  pull_request:
+
+concurrency:
+  group: ${{ gitea.workflow }}
+  cancel-in-progress: false
 
 jobs:
   test:
@@ -68,6 +74,7 @@ jobs:
 
   build-and-deploy:
     needs: [test]
+    if: startsWith(gitea.ref, 'refs/tags/')
     runs-on: ubuntu-latest
 
     steps:

PROJECT.org

@@ -605,6 +605,34 @@ independent of the email flow it was originally creatdd for
 
 ** TODO [#B] Is there way to create unique slugs for media instances :media_types:
 
+* Version 58.8 [1/1]
+** DONE [#B] Clean up trend templates :trends:templates:
+:PROPERTIES:
+:ID:       83237e2c-857b-47c9-c86c-32a5e3f1359d
+:END:
+
+* Version 58.7 [2/2]
+** DONE [#B] Split up chart page between tables and maloja :charts:templates:
+:PROPERTIES:
+:ID:       103ab084-2016-cfa4-c677-3c5fdc54cce0
+:END:
+** DONE [#A] Fix CI so we don't double run deploys and builds :ci:
+:PROPERTIES:
+:ID:       1a93e7cb-b883-aae5-2bd5-fcdd6e16f8ab
+:END:
+
+* Version 58.6 [1/1]
+** DONE [#B] Cleanup commands should check for broken images :metadata:cleanup:
+:PROPERTIES:
+:ID:       bacce321-73c7-ae1f-bfa7-c3ee517b5441
+:END:
+
+* Version 58.5 [1/1]
+** DONE [#A] The maloja style charts are messed up :templates:charts:
+:PROPERTIES:
+:ID:       987397a2-7e74-4eb1-87cc-4c8bbe1c7b23
+:END:
+
 * Version 58.4 [2/2]
 ** DONE [#B] Allow people all trends or individual trends :trends:profiles:
 :PROPERTIES:

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "vrobbler"
-version = "58.4"
+version = "58.8"
 description = ""
 authors = ["Colin Powell <colin@unbl.ink>"]
 

vrobbler/apps/books/management/commands/cleanup_book_metadata.py

@@ -18,8 +18,17 @@ MISSING_ALL = [
     "publish_year",
 ]
 
+def _cover_missing_or_broken(book) -> bool:
+    if not bool(book.cover):
+        return True
+    try:
+        return not book.cover.storage.exists(book.cover.name)
+    except Exception:
+        return True
+
+
 MISSING_GROUPS = {
-    "cover": lambda b: not bool(b.cover),
+    "cover": _cover_missing_or_broken,
     "summary": lambda b: not b.summary,
     "isbn": lambda b: not b.isbn_13 and not b.isbn_10,
     "pages": lambda b: b.pages is None,

vrobbler/apps/charts/urls.py

@@ -3,6 +3,7 @@ from charts.views import (
     BirdsChartView,
     ChartDetailView,
     ChartRecordView,
+    MalojaChartsView,
     SpotifyTracksView,
 )
 from django.urls import path
@@ -11,6 +12,7 @@ app_name = "charts"
 
 urlpatterns = [
     path("charts/", ChartRecordView.as_view(), name="charts-home"),
+    path("charts/maloja/", MalojaChartsView.as_view(), name="maloja-charts"),
     path("charts/spotify/", SpotifyTracksView.as_view(), name="spotify-tracks"),
     path("charts/bandcamp/", BandcampTracksView.as_view(), name="bandcamp-tracks"),
     path("charts/birds/", BirdsChartView.as_view(), name="birds-chart"),

vrobbler/apps/charts/views.py

@@ -114,175 +114,13 @@ class ChartRecordView(TemplateView):
         context["current_week"] = current_week
         context["current_day"] = current_day
 
-        context["chart_keys"] = {
+        # Resolve date parameters
-            "today": "Today",
+        if date_param:
-            "week": "This Week",
-            "month": "This Month",
-            "year": "This Year",
-            "all": "All Time",
-        }
-
-        context["maloja_charts"] = {
-            "artist": {
-                "today": list(
-                    self.get_charts_for_period(
-                        user,
-                        "artist",
-                        year=current_year,
-                        month=current_month,
-                        day=current_day,
-                    )
-                ),
-                "week": list(
-                    self.get_charts_for_period(
-                        user,
-                        "artist",
-                        year=current_year,
-                        week=current_week,
-                    )
-                ),
-                "month": list(
-                    self.get_charts_for_period(
-                        user,
-                        "artist",
-                        year=current_year,
-                        month=current_month,
-                    )
-                ),
-                "year": list(
-                    self.get_charts_for_period(user, "artist", year=current_year)
-                ),
-                "all": list(self.get_charts_for_period(user, "artist")),
-            },
-            "album": {
-                "today": list(
-                    self.get_charts_for_period(
-                        user,
-                        "album",
-                        year=current_year,
-                        month=current_month,
-                        day=current_day,
-                    )
-                ),
-                "week": list(
-                    self.get_charts_for_period(
-                        user, "album", year=current_year, week=current_week
-                    )
-                ),
-                "month": list(
-                    self.get_charts_for_period(
-                        user,
-                        "album",
-                        year=current_year,
-                        month=current_month,
-                    )
-                ),
-                "year": list(
-                    self.get_charts_for_period(user, "album", year=current_year)
-                ),
-                "all": list(self.get_charts_for_period(user, "album")),
-            },
-            "tv_series": {
-                "today": list(
-                    self.get_charts_for_period(
-                        user,
-                        "tv_series",
-                        year=current_year,
-                        month=current_month,
-                        day=current_day,
-                    )
-                ),
-                "week": list(
-                    self.get_charts_for_period(
-                        user,
-                        "tv_series",
-                        year=current_year,
-                        week=current_week,
-                    )
-                ),
-                "month": list(
-                    self.get_charts_for_period(
-                        user,
-                        "tv_series",
-                        year=current_year,
-                        month=current_month,
-                    )
-                ),
-                "year": list(
-                    self.get_charts_for_period(user, "tv_series", year=current_year)
-                ),
-                "all": list(self.get_charts_for_period(user, "tv_series")),
-            },
-        }
-
-        if not date_param:
-            context["period"] = "current"
-            context["year"] = current_year
-            context["month"] = current_month
-            context["month_name"] = calendar.month_name[current_month]
-            context["week"] = current_week
-            context["day"] = current_day
-
-            context["charts"] = {
-                "artist": list(
-                    self.get_charts_for_period(
-                        user, "artist", year=current_year, limit=20
-                    )
-                ),
-                "album": list(
-                    self.get_charts_for_period(
-                        user, "album", year=current_year, limit=20
-                    )
-                ),
-                "track": list(
-                    self.get_charts_for_period(
-                        user, "track", year=current_year, limit=20
-                    )
-                ),
-                "tv_series": list(
-                    self.get_charts_for_period(
-                        user, "tv_series", year=current_year, limit=20
-                    )
-                ),
-                "video": list(
-                    self.get_charts_for_period(
-                        user, "video", year=current_year, limit=20
-                    )
-                ),
-                "board_game": list(
-                    self.get_charts_for_period(
-                        user, "board_game", year=current_year, limit=20
-                    )
-                ),
-                "book": list(
-                    self.get_charts_for_period(
-                        user, "book", year=current_year, limit=20
-                    )
-                ),
-                "food": list(
-                    self.get_charts_for_period(
-                        user, "food", year=current_year, limit=20
-                    )
-                ),
-                "podcast": list(
-                    self.get_charts_for_period(
-                        user, "podcast", year=current_year, limit=20
-                    )
-                ),
-                "trail": list(
-                    self.get_charts_for_period(
-                        user, "trail", year=current_year, limit=20
-                    )
-                ),
-            }
-        else:
             parts = date_param.split("-")
             year = int(parts[0])
-
             week = None
             month = None
             day = None
-
             if len(parts) >= 2 and parts[1].startswith("W"):
                 week = int(parts[1].lstrip("W"))
             elif len(parts) >= 2 and parts[1]:
@@ -290,20 +128,17 @@ class ChartRecordView(TemplateView):
                     month = int(parts[1])
                 except ValueError:
                     pass
-
             if len(parts) >= 3:
                 if parts[2].startswith("W"):
                     week = int(parts[2].lstrip("W"))
                 elif not parts[2].startswith("W"):
                     day = int(parts[2])
-
             context["period"] = "historical"
             context["year"] = year
             context["month"] = month
             context["month_name"] = calendar.month_name[month] if month else None
             context["week"] = week
             context["day"] = day
-
             period_str = str(year)
             if month:
                 period_str = f"{calendar.month_name[month]} {period_str}"
@@ -312,109 +147,82 @@ class ChartRecordView(TemplateView):
             if day:
                 period_str = f"{calendar.month_name[month]} {day}, {year}"
             context["period_str"] = period_str
+        else:
+            year = current_year
+            month = current_month
+            week = current_week
+            day = current_day
+            context["period"] = "current"
+            context["year"] = current_year
+            context["month"] = current_month
+            context["month_name"] = calendar.month_name[current_month]
+            context["week"] = current_week
+            context["day"] = current_day
 
-            context["charts"] = {
+        # List-group tables default to week-level when no date param (matches active tab)
-                "artist": list(
+        if not date_param:
-                    self.get_charts_for_period(
+            list_year = current_year
-                        user,
+            list_month = None
-                        "artist",
+            list_week = current_week
-                        year=year,
+            list_day = None
-                        month=month,
+        else:
-                        week=week,
+            list_year = year
-                        day=day,
+            list_month = month
-                    )
+            list_week = week
-                ),
+            list_day = day
-                "album": list(
+
-                    self.get_charts_for_period(
+        context["charts"] = {
-                        user,
+            "artist": list(
-                        "album",
+                self.get_charts_for_period(
-                        year=year,
+                    user, "artist", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                        month=month,
+                )
-                        week=week,
+            ),
-                        day=day,
+            "album": list(
-                    )
+                self.get_charts_for_period(
-                ),
+                    user, "album", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                "track": list(
+                )
-                    self.get_charts_for_period(
+            ),
-                        user,
+            "track": list(
-                        "track",
+                self.get_charts_for_period(
-                        year=year,
+                    user, "track", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                        month=month,
+                )
-                        week=week,
+            ),
-                        day=day,
+            "tv_series": list(
-                    )
+                self.get_charts_for_period(
-                ),
+                    user, "tv_series", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                "tv_series": list(
+                )
-                    self.get_charts_for_period(
+            ),
-                        user,
+            "video": list(
-                        "tv_series",
+                self.get_charts_for_period(
-                        year=year,
+                    user, "video", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                        month=month,
+                )
-                        week=week,
+            ),
-                        day=day,
+            "board_game": list(
-                    )
+                self.get_charts_for_period(
-                ),
+                    user, "board_game", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                "video": list(
+                )
-                    self.get_charts_for_period(
+            ),
-                        user,
+            "book": list(
-                        "video",
+                self.get_charts_for_period(
-                        year=year,
+                    user, "book", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                        month=month,
+                )
-                        week=week,
+            ),
-                        day=day,
+            "food": list(
-                    )
+                self.get_charts_for_period(
-                ),
+                    user, "food", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                "board_game": list(
+                )
-                    self.get_charts_for_period(
+            ),
-                        user,
+            "podcast": list(
-                        "board_game",
+                self.get_charts_for_period(
-                        year=year,
+                    user, "podcast", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                        month=month,
+                )
-                        week=week,
+            ),
-                        day=day,
+            "trail": list(
-                    )
+                self.get_charts_for_period(
-                ),
+                    user, "trail", year=list_year, month=list_month, week=list_week, day=list_day, limit=20
-                "book": list(
+                )
-                    self.get_charts_for_period(
+            ),
-                        user,
+        }
-                        "book",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "food": list(
-                    self.get_charts_for_period(
-                        user,
-                        "food",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "podcast": list(
-                    self.get_charts_for_period(
-                        user,
-                        "podcast",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-                "trail": list(
-                    self.get_charts_for_period(
-                        user,
-                        "trail",
-                        year=year,
-                        month=month,
-                        week=week,
-                        day=day,
-                    )
-                ),
-            }
 
         bird_data = self.get_bird_chart_data(
             user,
@@ -628,6 +436,57 @@ class ChartRecordView(TemplateView):
         }
 
 
+class MalojaChartsView(ChartRecordView):
+    """Three maloja-themed image grid widgets (artists, albums, TV series)
+    with Today/Week/Month/Year/All tabs. Each tab computes its own period
+    from the current date — no query param needed."""
+
+    template_name = "charts/maloja_charts.html"
+
+    def get_context_data(self, **kwargs):
+        context = super(ChartRecordView, self).get_context_data(**kwargs)
+        user = self.request.user
+
+        if not user.is_authenticated:
+            context["maloja_charts"] = {}
+            context["chart_keys"] = {}
+            return context
+
+        now = timezone.now()
+        now = now_user_timezone(user.profile)
+        today = now.date()
+
+        context["chart_keys"] = {
+            "today": "Today",
+            "week": "This Week",
+            "month": "This Month",
+            "year": "This Year",
+            "all": "All Time",
+        }
+
+        tab_params = {
+            "today": {"year": today.year, "month": today.month, "day": today.day},
+            "week": {"year": today.year, "week": today.isocalendar()[1]},
+            "month": {"year": today.year, "month": today.month},
+            "year": {"year": today.year},
+        }
+
+        maloja_charts = {}
+        for media_type in ("artist", "album", "tv_series"):
+            tabs = {}
+            for key in ("today", "week", "month", "year"):
+                tabs[key] = list(
+                    self.get_charts_for_period(user, media_type, **tab_params[key])
+                )
+            tabs["all"] = list(
+                self.get_charts_for_period(user, media_type)
+            )
+            maloja_charts[media_type] = tabs
+
+        context["maloja_charts"] = maloja_charts
+        return context
+
+
 MEDIA_TYPE_LABELS = {
     "artist": ("🎤", "Top Artists"),
     "album": ("💿", "Top Albums"),

vrobbler/apps/music/management/commands/cleanup_music_metadata.py

@@ -0,0 +1,202 @@
+import logging
+
+from django.core.management.base import BaseCommand
+from django.db import models, transaction
+
+logger = logging.getLogger(__name__)
+
+
+class Command(BaseCommand):
+    help = "Enrich artist and album metadata (covers, thumbnails) from MusicBrainz and TheAudioDB"
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            "--force",
+            action="store_true",
+            help="Overwrite existing cover image and metadata",
+        )
+        parser.add_argument(
+            "--dry-run",
+            action="store_true",
+            help="Show what would be done without making changes",
+        )
+        parser.add_argument(
+            "--artists",
+            action="store_true",
+            help="Only process artists",
+        )
+        parser.add_argument(
+            "--albums",
+            action="store_true",
+            help="Only process albums",
+        )
+        parser.add_argument(
+            "--needs-metadata",
+            action="store_true",
+            help="Only process items missing metadata or with broken images",
+        )
+
+    def _has_broken_image(self, obj, field_name: str) -> bool:
+        field = getattr(obj, field_name, None)
+        if not field or not field.name:
+            return False
+        try:
+            return not field.storage.exists(field.name)
+        except Exception:
+            return True
+
+    def handle(self, *args, **options):
+        from music.models import Album, Artist
+
+        force = options["force"]
+        dry_run = options["dry_run"]
+        only_artists = options["artists"]
+        only_albums = options["albums"]
+        needs_metadata = options["needs_metadata"]
+
+        if not only_artists and not only_albums:
+            only_artists = only_albums = True
+
+        updated_total = 0
+        errors_total = 0
+
+        if only_artists:
+            updated_total += self._process_artists(force, dry_run, needs_metadata)
+        errors_total = 0  # reset per section
+
+        if only_albums:
+            updated_total += self._process_albums(force, dry_run, needs_metadata)
+
+        self.stdout.write(
+            self.style.SUCCESS(f"\nDone! {updated_total} items processed")
+        )
+
+    def _get_artists(self, needs_metadata: bool):
+        from music.models import Artist
+
+        qs = Artist.objects.all()
+        if needs_metadata:
+            qs = qs.filter(
+                models.Q(theaudiodb_id__isnull=True)
+                | models.Q(theaudiodb_id="")
+                | models.Q(thumbnail__isnull=True)
+                | models.Q(thumbnail="")
+            )
+
+        broken = []
+        if needs_metadata:
+            broken_qs = Artist.objects.exclude(
+                models.Q(thumbnail__isnull=True) | models.Q(thumbnail=""),
+            )
+            for artist in broken_qs.iterator():
+                if self._has_broken_image(artist, "thumbnail"):
+                    broken.append(artist)
+
+        return list(qs) + broken
+
+    def _get_albums(self, needs_metadata: bool):
+        from music.models import Album
+
+        qs = Album.objects.all()
+        if needs_metadata:
+            qs = qs.filter(
+                models.Q(cover_image__isnull=True)
+                | models.Q(cover_image="")
+                | models.Q(cover_image="default-image-replace-me")
+            )
+
+        broken = []
+        if needs_metadata:
+            broken_qs = Album.objects.exclude(
+                models.Q(cover_image__isnull=True) | models.Q(cover_image=""),
+            )
+            for album in broken_qs.iterator():
+                if self._has_broken_image(album, "cover_image"):
+                    broken.append(album)
+
+        return list(qs) + broken
+
+    def _process_artists(self, force, dry_run, needs_metadata):
+        from music.models import Artist
+
+        artists = self._get_artists(needs_metadata) if needs_metadata else list(Artist.objects.all())
+        total = len(artists)
+        self.stdout.write(f"Processing {total} artists")
+
+        if dry_run:
+            for artist in artists:
+                has_tadb = bool(artist.theaudiodb_id)
+                has_thumb = bool(artist.thumbnail)
+                thumb_broken = self._has_broken_image(artist, "thumbnail")
+                status = f"theaudiodb_id={'✓' if has_tadb else '✗'}"
+                if thumb_broken:
+                    status += ", thumbnail=BROKEN"
+                elif has_thumb:
+                    status += ", thumbnail=✓"
+                else:
+                    status += ", thumbnail=✗"
+                self.stdout.write(f"  [DRY RUN] Would fix {artist.name} ({status})")
+            return 0
+
+        updated = 0
+        errors = 0
+        for artist in artists:
+            try:
+                with transaction.atomic():
+                    artist.fix_metadata(
+                        force_update=force or self._has_broken_image(artist, "thumbnail")
+                    )
+                updated += 1
+                self.stdout.write(f"  [ARTIST {updated}/{total}] {artist.name}")
+            except Exception as e:
+                errors += 1
+                self.stdout.write(
+                    self.style.ERROR(f"  Error updating artist {artist.name}: {e}")
+                )
+
+        self.stdout.write(
+            self.style.SUCCESS(f"\nArtists done! {updated} updated, {errors} errors")
+        )
+        return updated
+
+    def _process_albums(self, force, dry_run, needs_metadata):
+        from music.models import Album
+
+        albums = self._get_albums(needs_metadata) if needs_metadata else list(Album.objects.all())
+        total = len(albums)
+        self.stdout.write(f"Processing {total} albums")
+
+        if dry_run:
+            for album in albums:
+                has_cover = bool(album.cover_image)
+                cover_broken = self._has_broken_image(album, "cover_image")
+                if cover_broken:
+                    status = "cover=BROKEN"
+                elif has_cover:
+                    status = "cover=✓"
+                else:
+                    status = "cover=✗"
+                self.stdout.write(f"  [DRY RUN] Would fix {album.name} ({status})")
+            return 0
+
+        updated = 0
+        errors = 0
+        for album in albums:
+            try:
+                with transaction.atomic():
+                    if self._has_broken_image(album, "cover_image") or force:
+                        album.fetch_artwork(force=True)
+                    else:
+                        album.fix_metadata()
+                updated += 1
+                self.stdout.write(f"  [ALBUM {updated}/{total}] {album.name}")
+            except Exception as e:
+                errors += 1
+                self.stdout.write(
+                    self.style.ERROR(f"  Error updating album {album.name}: {e}")
+                )
+
+        self.stdout.write(
+            self.style.SUCCESS(f"\nAlbums done! {updated} updated, {errors} errors")
+        )
+        return updated

vrobbler/apps/trends/templates/trends/_activity_distribution.html

@@ -1,45 +1,78 @@
 <div class="row">
   <div class="col-12">
     {% if data.distribution %}
+    {{ data.distribution|json_script:"activity-distribution-data" }}
     <p class="text-muted mb-3">
       Total scrobbles{% if current_period_label %} ({{ current_period_label }}){% endif %}: <strong>{{ data.total_count }}</strong>
     </p>
-    <div class="table-responsive">
+    <canvas id="activityDistChart" width="700" style="max-width:100%;"></canvas>
-      <table class="table table-striped table-sm">
+    <script>
-        <thead>
+    (function() {
-          <tr>
+      var el = document.getElementById('activity-distribution-data');
-            <th>Media Type</th>
+      if (!el) return;
-            <th class="text-end">Total</th>
+      var data = JSON.parse(el.textContent);
-            <th class="text-end">Completed</th>
+      if (!data.length) return;
-            <th class="text-end">%</th>
+      var canvas = document.getElementById('activityDistChart');
-            <th>Distribution</th>
+      var ctx = canvas.getContext('2d');
-          </tr>
+      var W = canvas.width;
-        </thead>
+      var rowH = 34;
-        <tbody>
+      var labelW = 140;
-          {% with max=data.distribution.0.count %}
+      var barLeft = labelW + 8;
-          {% for entry in data.distribution %}
+      var barRight = W - 80;
-          <tr>
+      var barMaxW = barRight - barLeft;
-            <td>{{ entry.media_type }}</td>
+      var padTop = 8;
-            <td class="text-end">{{ entry.count }}</td>
+
-            <td class="text-end">{{ entry.completed }}</td>
+      var maxCount = data[0].count;
-            <td class="text-end">{{ entry.pct }}%</td>
+
-            <td style="width: 30%;">
+      // Set canvas height based on data
-              {% if max > 0 %}
+      canvas.height = data.length * rowH + padTop;
-              <div class="progress" style="height: 12px;">
+
-                <div class="progress-bar" role="progressbar"
+      function roundRect(x, y, w, h, r) {
-                     style="width: {{ entry.pct }}%;"
+        ctx.beginPath();
-                     aria-valuenow="{{ entry.count }}"
+        ctx.moveTo(x + r, y);
-                     aria-valuemin="0" aria-valuemax="{{ max }}">
+        ctx.lineTo(x + w - r, y);
-                </div>
+        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-              </div>
+        ctx.lineTo(x + w, y + h - r);
-              {% endif %}
+        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-            </td>
+        ctx.lineTo(x + r, y + h);
-          </tr>
+        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-          {% endfor %}
+        ctx.lineTo(x, y + r);
-          {% endwith %}
+        ctx.quadraticCurveTo(x, y, x + r, y);
-        </tbody>
+        ctx.closePath();
-      </table>
+      }
-    </div>
+
+      data.forEach(function(entry, i) {
+        var y = padTop + i * rowH;
+        var pct = entry.count / maxCount;
+        var barW = pct * barMaxW;
+
+        // Label
+        ctx.fillStyle = '#374151';
+        ctx.font = '13px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(entry.media_type, labelW - 6, y + rowH / 2);
+
+        // Bar background
+        ctx.fillStyle = '#f3f4f6';
+        roundRect(barLeft, y + 4, barMaxW, rowH - 8, 4);
+        ctx.fill();
+
+        // Bar fill — green (top) to red (bottom)
+        var hue = 120 * (1 - i / (data.length - 1 || 1));
+        ctx.fillStyle = 'hsl(' + hue + ', 65%, 50%)';
+        roundRect(barLeft, y + 4, Math.max(barW, 2), rowH - 8, 4);
+        ctx.fill();
+
+        // Count + percentage label on the right
+        ctx.fillStyle = '#374151';
+        ctx.font = 'bold 13px sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(entry.count + ' (' + entry.pct + '%)', barRight + 6, y + rowH / 2);
+      });
+    })();
+    </script>
     {% else %}
     <p class="text-muted">No activity data found.</p>
     {% endif %}

vrobbler/apps/trends/templates/trends/_mood_distribution.html

@@ -1,43 +1,74 @@
 <div class="row">
   <div class="col-12">
     {% if data.moods %}
+    {{ data.moods|json_script:"mood-distribution-data" }}
     <p class="text-muted mb-3">
       Total mood check-ins{% if current_period_label %} ({{ current_period_label }}){% endif %}: <strong>{{ data.total }}</strong>
       &middot; Positive: <strong>{{ data.positive_count }}</strong>
       &middot; Negative: <strong>{{ data.negative_count }}</strong>
     </p>
-    <div class="table-responsive">
+    <canvas id="moodDistChart" width="700" style="max-width:100%;"></canvas>
-      <table class="table table-striped table-sm">
+    <script>
-        <thead>
+    (function() {
-          <tr>
+      var el = document.getElementById('mood-distribution-data');
-            <th>Mood</th>
+      if (!el) return;
-            <th class="text-end">Count</th>
+      var data = JSON.parse(el.textContent);
-            <th>Distribution</th>
+      if (!data.length) return;
-          </tr>
+      var canvas = document.getElementById('moodDistChart');
-        </thead>
+      var ctx = canvas.getContext('2d');
-        <tbody>
+      var rowH = 34;
-          {% with max=data.moods.0.count %}
+      var labelW = 140;
-          {% for entry in data.moods %}
+      var barLeft = labelW + 8;
-          <tr>
+      var barRight = canvas.width - 80;
-            <td>{{ entry.mood }}</td>
+      var barMaxW = barRight - barLeft;
-            <td class="text-end">{{ entry.count }}</td>
+      var padTop = 8;
-            <td style="width: 40%;">
+
-              {% if max > 0 %}
+      canvas.height = data.length * rowH + padTop;
-              <div class="progress" style="height: 12px;">
+
-                <div class="progress-bar" role="progressbar"
+      var maxCount = data[0].count;
-                     style="width: {% widthratio entry.count max 100 %}%;"
+
-                     aria-valuenow="{{ entry.count }}"
+      function roundRect(x, y, w, h, r) {
-                     aria-valuemin="0" aria-valuemax="{{ max }}">
+        ctx.beginPath();
-                </div>
+        ctx.moveTo(x + r, y);
-              </div>
+        ctx.lineTo(x + w - r, y);
-              {% endif %}
+        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-            </td>
+        ctx.lineTo(x + w, y + h - r);
-          </tr>
+        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-          {% endfor %}
+        ctx.lineTo(x + r, y + h);
-          {% endwith %}
+        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-        </tbody>
+        ctx.lineTo(x, y + r);
-      </table>
+        ctx.quadraticCurveTo(x, y, x + r, y);
-    </div>
+        ctx.closePath();
+      }
+
+      data.forEach(function(entry, i) {
+        var y = padTop + i * rowH;
+        var pct = entry.count / maxCount;
+        var barW = pct * barMaxW;
+
+        ctx.fillStyle = '#374151';
+        ctx.font = '13px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(entry.mood, labelW - 6, y + rowH / 2);
+
+        ctx.fillStyle = '#f3f4f6';
+        roundRect(barLeft, y + 4, barMaxW, rowH - 8, 4);
+        ctx.fill();
+
+        var hue = 120 * (1 - i / (data.length - 1 || 1));
+        ctx.fillStyle = 'hsl(' + hue + ', 65%, 50%)';
+        roundRect(barLeft, y + 4, Math.max(barW, 2), rowH - 8, 4);
+        ctx.fill();
+
+        ctx.fillStyle = '#374151';
+        ctx.font = 'bold 13px sans-serif';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.fillText('' + entry.count, barRight + 6, y + rowH / 2);
+      });
+    })();
+    </script>
     {% else %}
     <p class="text-muted">No mood distribution data found.</p>
     {% endif %}

vrobbler/apps/trends/templates/trends/_mood_trajectory.html

@@ -1,37 +1,105 @@
 <div class="row">
   <div class="col-12">
     {% if data.trajectory %}
-    <div class="table-responsive">
+    {{ data.trajectory|json_script:"mood-trajectory-data" }}
-      <table class="table table-striped table-sm">
+    <div class="d-flex flex-column align-items-center">
-        <thead>
+      <canvas id="moodTrajectoryChart" width="700" height="300" style="max-width:100%;"></canvas>
-          <tr>
+      <div class="d-flex gap-4 mt-2 small text-muted">
-            <th>Date</th>
+        <span>← Earlier</span>
-            <th class="text-end">Avg Quality</th>
+        <span>Later →</span>
-            <th class="text-end">Check-ins</th>
+      </div>
-            <th>Mood Bar</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for entry in data.trajectory %}
-          <tr>
-            <td>{{ entry.date }}</td>
-            <td class="text-end">{{ entry.avg_quality }}</td>
-            <td class="text-end">{{ entry.count }}</td>
-            <td style="width: 40%;">
-              <div class="progress" style="height: 16px;">
-                <div class="progress-bar {% if entry.avg_quality >= 5 %}bg-success{% elif entry.avg_quality >= 4 %}bg-info{% elif entry.avg_quality >= 3 %}bg-warning{% else %}bg-danger{% endif %}"
-                     role="progressbar"
-                     style="width: {% widthratio entry.avg_quality 7 100 %}%;"
-                     aria-valuenow="{{ entry.avg_quality }}"
-                     aria-valuemin="1" aria-valuemax="7">
-                </div>
-              </div>
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
     </div>
+    <script>
+    (function() {
+      var el = document.getElementById('mood-trajectory-data');
+      if (!el) return;
+      var data = JSON.parse(el.textContent);
+      if (!data.length) return;
+      var canvas = document.getElementById('moodTrajectoryChart');
+      var ctx = canvas.getContext('2d');
+      var W = canvas.width, H = canvas.height;
+      var pad = { top: 20, right: 20, bottom: 30, left: 40 };
+      var plotW = W - pad.left - pad.right;
+      var plotH = H - pad.top - pad.bottom;
+
+      var yMin = 1, yMax = 7;
+      var yRange = yMax - yMin;
+      var maxCount = data.reduce(function(m, d) { return Math.max(m, d.count); }, 0);
+
+      function xPos(i) {
+        return pad.left + (i / (data.length - 1 || 1)) * plotW;
+      }
+      function yPos(val) {
+        return pad.top + (1 - (val - yMin) / yRange) * plotH;
+      }
+
+      // Background grid
+      ctx.strokeStyle = '#e5e7eb';
+      ctx.lineWidth = 0.5;
+      for (var q = 1; q <= 7; q++) {
+        var y = yPos(q);
+        ctx.beginPath();
+        ctx.moveTo(pad.left, y);
+        ctx.lineTo(W - pad.right, y);
+        ctx.stroke();
+        ctx.fillStyle = '#9ca3af';
+        ctx.font = '11px sans-serif';
+        ctx.textAlign = 'right';
+        ctx.fillText(q.toFixed(1), pad.left - 5, y + 4);
+      }
+
+      // Reference line at neutral (4)
+      var neutralY = yPos(4);
+      ctx.strokeStyle = '#d1d5db';
+      ctx.lineWidth = 1;
+      ctx.setLineDash([4, 4]);
+      ctx.beginPath();
+      ctx.moveTo(pad.left, neutralY);
+      ctx.lineTo(W - pad.right, neutralY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = '#9ca3af';
+      ctx.font = '11px sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText('neutral', W - pad.right + 4, neutralY + 4);
+
+      // Line chart
+      ctx.beginPath();
+      data.forEach(function(d, i) {
+        var x = xPos(i);
+        var y = yPos(d.avg_quality);
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      });
+      ctx.strokeStyle = '#6366f1';
+      ctx.lineWidth = 2.5;
+      ctx.lineJoin = 'round';
+      ctx.stroke();
+
+      // Gradient fill below the line
+      var gradient = ctx.createLinearGradient(0, pad.top, 0, H - pad.bottom);
+      gradient.addColorStop(0, 'rgba(99, 102, 241, 0.25)');
+      gradient.addColorStop(1, 'rgba(99, 102, 241, 0.02)');
+      ctx.lineTo(xPos(data.length - 1), yPos(yMin));
+      ctx.lineTo(xPos(0), yPos(yMin));
+      ctx.closePath();
+      ctx.fillStyle = gradient;
+      ctx.fill();
+
+      // Dots
+      data.forEach(function(d, i) {
+        var x = xPos(i);
+        var y = yPos(d.avg_quality);
+        ctx.beginPath();
+        ctx.arc(x, y, 3.5, 0, 2 * Math.PI);
+        ctx.fillStyle = '#6366f1';
+        ctx.fill();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+      });
+    })();
+    </script>
     {% else %}
     <p class="text-muted">No mood check-in data found.</p>
     {% endif %}

vrobbler/apps/trends/templates/trends/_peak_hours.html

@@ -1,50 +1,90 @@
 <div class="row">
   <div class="col-12">
     {% if data.hours %}
-    <div class="table-responsive">
+    {{ data.hours|json_script:"peak-hours-data" }}
-      <table class="table table-striped table-sm">
+    <div class="d-flex flex-wrap align-items-start justify-content-center gap-4">
-        <thead>
+      <div>
-          <tr>
+        <canvas id="peakHoursChart" width="300" height="300" style="max-width:100%;"></canvas>
-            <th>Hour</th>
+      </div>
-            <th class="text-end">Scrobbles</th>
+      <div class="table-responsive" style="max-height:360px; overflow-y:auto;">
-            <th>Distribution</th>
+        <table class="table table-sm table-borderless mb-0" id="peakHoursLegend">
-          </tr>
+          <thead>
-        </thead>
+            <tr>
-        <tbody>
+              <th style="width:14px; padding-right:0;"></th>
-          {% with total=data.hours|dictsortreversed:"count"|first %}
+              <th>Hour</th>
-          {% with max_count=total.count %}
+              <th class="text-end">Scrobbles</th>
-          {% for entry in data.hours %}
+            </tr>
-          <tr>
+          </thead>
-            <td>
+          <tbody>
-              {% if entry.hour == 0 %}
+            {% for entry in data.hours %}
-              12 AM
+            <tr>
-              {% elif entry.hour < 12 %}
+              <td class="p-1 text-center">
-              {{ entry.hour }} AM
+                <span class="legend-swatch" data-idx="{{ forloop.counter0 }}" style="display:inline-block; width:12px; height:12px; border-radius:2px;"></span>
-              {% elif entry.hour == 12 %}
+              </td>
-              12 PM
+              <td>
-              {% else %}
+                {% if entry.hour == 0 %}
-              {{ entry.hour|add:"-12" }} PM
+                  12 AM
-              {% endif %}
+                {% elif entry.hour < 12 %}
-            </td>
+                  {{ entry.hour }} AM
-            <td class="text-end">{{ entry.count }}</td>
+                {% elif entry.hour == 12 %}
-            <td style="width: 40%;">
+                  12 PM
-              {% if max_count > 0 %}
+                {% else %}
-              <div class="progress" style="height: 12px;">
+                  {{ entry.hour|add:"-12" }} PM
-                <div class="progress-bar" role="progressbar"
+                {% endif %}
-                     style="width: {{ entry.count|floatformat:0 }}%;"
+              </td>
-                     aria-valuenow="{{ entry.count }}"
+              <td class="text-end">{{ entry.count }}</td>
-                     aria-valuemin="0" aria-valuemax="{{ max_count }}">
+            </tr>
-                </div>
+            {% endfor %}
-              </div>
+          </tbody>
-              {% endif %}
+        </table>
-            </td>
+      </div>
-          </tr>
-          {% endfor %}
-          {% endwith %}
-          {% endwith %}
-        </tbody>
-      </table>
     </div>
+    <script>
+    (function() {
+      var dataEl = document.getElementById('peak-hours-data');
+      if (!dataEl) return;
+      var data = JSON.parse(dataEl.textContent);
+      var total = data.reduce(function(s, h) { return s + h.count; }, 0) || 1;
+      var canvas = document.getElementById('peakHoursChart');
+      if (!canvas) return;
+      var ctx = canvas.getContext('2d');
+      var cx = canvas.width / 2;
+      var cy = canvas.height / 2;
+      var radius = Math.min(cx, cy) - 10;
+      var startAngle = -Math.PI / 2;
+
+      var minCount = data.reduce(function(m, h) { return Math.min(m, h.count); }, Infinity);
+      var maxCount = data.reduce(function(m, h) { return Math.max(m, h.count); }, 0);
+      var range = maxCount - minCount || 1;
+
+      function countToHue(count) {
+        var t = (count - minCount) / range;
+        return 120 * t;
+      }
+
+      data.forEach(function(entry, i) {
+        var sliceAngle = (entry.count / total) * 2 * Math.PI;
+        var hue = countToHue(entry.count);
+        ctx.beginPath();
+        ctx.moveTo(cx, cy);
+        ctx.arc(cx, cy, radius, startAngle, startAngle + sliceAngle);
+        ctx.closePath();
+        ctx.fillStyle = 'hsl(' + hue + ', 70%, 50%)';
+        ctx.fill();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 1.5;
+        ctx.stroke();
+        startAngle += sliceAngle;
+      });
+
+      document.querySelectorAll('.legend-swatch').forEach(function(el) {
+        var idx = parseInt(el.getAttribute('data-idx'), 10);
+        var entry = data[idx];
+        var hue = countToHue(entry.count);
+        el.style.backgroundColor = 'hsl(' + hue + ', 70%, 50%)';
+      });
+    })();
+    </script>
     {% else %}
     <p class="text-muted">No activity data found.</p>
     {% endif %}

vrobbler/apps/trends/templates/trends/_time_of_day_categories.html

@@ -1,31 +1,45 @@
 <div class="row">
   <div class="col-12">
     {% if data.total and data.total > 0 %}
-    <h5>Overall</h5>
+    <div class="mb-4">
-    <div class="table-responsive mb-4">
+      {% for slug, info in data.categories.items %}
-      <table class="table table-striped table-sm">
+        {% if forloop.first %}
-        <thead>
+        <div class="card text-center border-0 bg-light mb-3">
-          <tr>
+          <div class="card-body py-4">
-            <th>Category</th>
+            {% if slug == "early_bird" %}
-            <th class="text-end">Scrobbles</th>
+              <div class="display-1">🌅</div>
-            <th class="text-end">%</th>
+            {% elif slug == "day_jay" %}
-          </tr>
+              <div class="display-1">☀️</div>
-        </thead>
+            {% else %}
-        <tbody>
+              <div class="display-1">🌙</div>
-          {% for slug, info in data.categories.items %}
+            {% endif %}
-          <tr>
+            <h3 class="mt-2">{{ info.label }}</h3>
-            <td>{{ info.label }}</td>
+            <div class="display-4 fw-bold">{{ info.pct }}%</div>
-            <td class="text-end">{{ info.count }}</td>
+            <div class="text-muted">{{ info.count }} scrobbles</div>
-            <td class="text-end">{{ info.pct }}%</td>
+          </div>
-          </tr>
+        </div>
-          {% endfor %}
+        {% else %}
-          <tr class="table-secondary">
+        <div class="card text-center border-0 bg-light mb-2">
-            <td><strong>Total</strong></td>
+          <div class="card-body py-2 d-flex align-items-center justify-content-between px-4">
-            <td class="text-end"><strong>{{ data.total }}</strong></td>
+            <div class="d-flex align-items-center gap-3">
-            <td class="text-end"></td>
+              {% if slug == "early_bird" %}
-          </tr>
+                <span style="font-size:1.5rem;">🌅</span>
-        </tbody>
+              {% elif slug == "day_jay" %}
-      </table>
+                <span style="font-size:1.5rem;">☀️</span>
+              {% else %}
+                <span style="font-size:1.5rem;">🌙</span>
+              {% endif %}
+              <h5 class="mb-0">{{ info.label }}</h5>
+            </div>
+            <div class="text-end">
+              <span class="fs-4 fw-bold">{{ info.pct }}%</span>
+              <br><small class="text-muted">{{ info.count }} scrobbles</small>
+            </div>
+          </div>
+        </div>
+        {% endif %}
+      {% endfor %}
+      <div class="text-center text-muted small mt-2">Total: {{ data.total }} scrobbles across Books, Trails, Birding Locations, and Board Games</div>
     </div>
 
     <h5>By Media Type</h5>

vrobbler/apps/trends/templates/trends/_trending_up.html

@@ -1,38 +1,27 @@
-<div class="row">
+<div class="row g-3">
-  <div class="col-12">
+  {% if data %}
-    {% if data %}
+    {% for mt, info in data.items %}
-    <div class="table-responsive">
+    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
-      <table class="table table-striped table-sm">
+      <div class="card text-center h-100">
-        <thead>
+        <div class="card-body d-flex flex-column align-items-center justify-content-center" style="aspect-ratio: 1;">
-          <tr>
+          {% if info.change_pct > 0 %}
-            <th>Media Type</th>
+            <div class="display-3 lh-1 text-success">↑</div>
-            <th class="text-end">Recent ({{ current_period_label }})</th>
+            <div class="fs-6 text-success mt-1">+{{ info.change_pct }}%</div>
-            <th class="text-end">Previous ({{ current_period_label }})</th>
+          {% elif info.change_pct < 0 %}
-            <th class="text-end">Change</th>
+            <div class="display-3 lh-1 text-danger">↓</div>
-          </tr>
+            <div class="fs-6 text-danger mt-1">{{ info.change_pct }}%</div>
-        </thead>
+          {% else %}
-        <tbody>
+            <div class="display-3 lh-1 text-muted">→</div>
-          {% for mt, info in data.items %}
+            <div class="fs-6 text-muted mt-1">0%</div>
-          <tr>
+          {% endif %}
-            <td>{{ mt }}</td>
+          <div class="fw-bold mt-2">{{ mt }}</div>
-            <td class="text-end">{{ info.recent }}</td>
+        </div>
-            <td class="text-end">{{ info.previous }}</td>
+      </div>
-            <td class="text-end">
-              {% if info.change_pct > 0 %}
-              <span class="text-success">+{{ info.change_pct }}%</span>
-              {% elif info.change_pct < 0 %}
-              <span class="text-danger">{{ info.change_pct }}%</span>
-              {% else %}
-              <span class="text-muted">0%</span>
-              {% endif %}
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
     </div>
-    {% else %}
+    {% endfor %}
-    <p class="text-muted">No trending data found.</p>
+  {% else %}
-    {% endif %}
+    <div class="col-12">
-  </div>
+      <p class="text-muted">No trending data found.</p>
+    </div>
+  {% endif %}
 </div>

vrobbler/apps/trends/trends/time_of_day.py

@@ -59,18 +59,21 @@ def compute_time_of_day_categories(user, period="last_30"):
             if slug:
                 cat_counts[slug] += count
                 mt_total += count
-        by_media_type[mt] = {
+        mt_categories = {}
-            "total": mt_total,
-            "categories": {},
-        }
         for slug in CATEGORIES:
             c = cat_counts[slug]
-            by_media_type[mt]["categories"][slug] = {
+            mt_categories[slug] = {
                 "count": c,
                 "pct": round((c / mt_total * 100), 1) if mt_total else 0,
                 "label": CATEGORIES[slug]["label"],
             }
             grand_totals[slug] += c
+        by_media_type[mt] = {
+            "total": mt_total,
+            "categories": dict(
+                sorted(mt_categories.items(), key=lambda x: x[1]["count"], reverse=True)
+            ),
+        }
         grand_total += mt_total
 
     categories = {}
@@ -81,6 +84,9 @@ def compute_time_of_day_categories(user, period="last_30"):
             "pct": round((c / grand_total * 100), 1) if grand_total else 0,
             "label": CATEGORIES[slug]["label"],
         }
+    categories = dict(
+        sorted(categories.items(), key=lambda x: x[1]["count"], reverse=True)
+    )
 
     return {
         "categories": categories,

vrobbler/apps/videogames/management/commands/cleanup_videogame_metadata.py

@@ -17,8 +17,8 @@ MISSING_ALL = [
 ]
 
 MISSING_GROUPS = {
-    "cover": lambda g: not bool(g.cover),
+    "cover": lambda g: _image_missing_or_broken(g, "cover"),
-    "screenshot": lambda g: not bool(g.screenshot),
+    "screenshot": lambda g: _image_missing_or_broken(g, "screenshot"),
     "summary": lambda g: not g.summary,
     "rating": lambda g: g.rating is None,
     "release_date": lambda g: g.release_date is None,
@@ -28,6 +28,16 @@ MISSING_GROUPS = {
 }
 
 
+def _image_missing_or_broken(game, field_name) -> bool:
+    field = getattr(game, field_name)
+    if not bool(field):
+        return True
+    try:
+        return not field.storage.exists(field.name)
+    except Exception:
+        return True
+
+
 def _game_matches(game, flags):
     if not flags:
         return False
@@ -103,6 +113,7 @@ class Command(BaseCommand):
 
         if all_missing:
             flags = MISSING_ALL
+            fix_broken_images = True
 
         if not flags and not game_id and not force and not fix_broken_images:
             self.stdout.write(

vrobbler/apps/videos/management/commands/cleanup_channel_metadata.py

@@ -30,6 +30,19 @@ class Command(BaseCommand):
             action="store_true",
             help="Only process channels with a twitch_id",
         )
+        parser.add_argument(
+            "--needs-metadata",
+            action="store_true",
+            help="Only process channels missing youtube_id, twitch_id, cover image, or with broken cover image",
+        )
+
+    def _has_broken_image(self, channel) -> bool:
+        if not channel.cover_image or not channel.cover_image.name:
+            return False
+        try:
+            return not channel.cover_image.storage.exists(channel.cover_image.name)
+        except Exception:
+            return True
 
     def handle(self, *args, **options):
         from videos.models import Channel
@@ -38,6 +51,7 @@ class Command(BaseCommand):
         dry_run = options["dry_run"]
         youtube_only = options["youtube_only"]
         twitch_only = options["twitch_only"]
+        needs_metadata = options["needs_metadata"]
 
         qs = Channel.objects.all()
 
@@ -45,29 +59,61 @@ class Command(BaseCommand):
             qs = qs.exclude(youtube_id__isnull=True).exclude(youtube_id="")
         elif twitch_only:
             qs = qs.exclude(twitch_id__isnull=True).exclude(twitch_id="")
+        elif needs_metadata:
+            no_id = models.Q(youtube_id__isnull=True) & models.Q(twitch_id__isnull=True)
+            no_id |= models.Q(youtube_id="") & models.Q(twitch_id="")
+            no_id |= models.Q(youtube_id__isnull=True) & models.Q(twitch_id="")
+            no_id |= models.Q(youtube_id="") & models.Q(twitch_id__isnull=True)
+            qs = qs.filter(
+                no_id
+                | models.Q(cover_image__isnull=True)
+                | models.Q(cover_image="")
+            )
         else:
             qs = qs.filter(
                 models.Q(youtube_id__isnull=False) | models.Q(twitch_id__isnull=False)
             ).exclude(youtube_id="", twitch_id="")
 
         total = qs.count()
-        self.stdout.write(f"Processing {total} channels")
+        self.stdout.write(f"Processing {total} channels from DB filter")
+
+        broken_channels = []
+        if needs_metadata:
+            broken_qs = Channel.objects.filter(
+                cover_image__isnull=False,
+            ).exclude(
+                cover_image="",
+            )
+            if youtube_only:
+                broken_qs = broken_qs.exclude(youtube_id__isnull=True).exclude(youtube_id="")
+            elif twitch_only:
+                broken_qs = broken_qs.exclude(twitch_id__isnull=True).exclude(twitch_id="")
+            for channel in broken_qs.iterator():
+                if self._has_broken_image(channel):
+                    broken_channels.append(channel)
+
+        all_channels = list(qs) + broken_channels
+        total = len(all_channels)
+        self.stdout.write(f"Total channels to process: {total}")
 
         if dry_run:
-            for channel in qs.iterator():
+            for channel in all_channels:
                 source = "youtube" if channel.youtube_id else "twitch"
                 identifier = channel.youtube_id or channel.twitch_id
+                status = f"({source}: {identifier})"
+                if self._has_broken_image(channel):
+                    status += " [image BROKEN]"
                 self.stdout.write(
-                    f"  [DRY RUN] Would fix {channel.name} ({source}: {identifier})"
+                    f"  [DRY RUN] Would fix {channel.name} {status}"
                 )
             return
 
         updated = 0
         errors = 0
-        for channel in qs.iterator():
+        for channel in all_channels:
             try:
                 with transaction.atomic():
-                    channel.fix_metadata(force=force)
+                    channel.fix_metadata(force=force or self._has_broken_image(channel))
                 updated += 1
                 source = "youtube" if channel.youtube_id else "twitch"
                 self.stdout.write(f"  [{updated}/{total}] {channel.name} ({source})")

vrobbler/apps/videos/management/commands/cleanup_series_metadata.py

@@ -1,4 +1,5 @@
 import logging
+import os
 
 from django.core.management.base import BaseCommand
 from django.db import models, transaction
@@ -28,9 +29,18 @@ class Command(BaseCommand):
         parser.add_argument(
             "--needs-metadata",
             action="store_true",
-            help="Only process series missing imdb_id or cover image",
+            help="Only process series missing imdb_id or with broken cover image",
         )
 
+    def _has_broken_image(self, series) -> bool:
+        """Check if a series has a cover_image set but the file is missing."""
+        if not series.cover_image:
+            return False
+        try:
+            return not os.path.exists(series.cover_image.path)
+        except Exception:
+            return True
+
     def handle(self, *args, **options):
         from videos.models import Series
 
@@ -51,25 +61,50 @@ class Command(BaseCommand):
             )
 
         total = qs.count()
-        self.stdout.write(f"Processing {total} series")
+        self.stdout.write(f"Processing {total} series from DB filter")
+
+        # Also find series with broken cover images
+        broken_image_series = []
+        if needs_metadata:
+            broken_qs = Series.objects.filter(
+                cover_image__isnull=False,
+            ).exclude(
+                models.Q(imdb_id__isnull=True)
+                | models.Q(imdb_id="")
+                | models.Q(cover_image__isnull=True)
+                | models.Q(cover_image=""),
+            )
+            if imdb_id:
+                broken_qs = broken_qs.filter(imdb_id=imdb_id)
+            for series in broken_qs.iterator():
+                if self._has_broken_image(series):
+                    broken_image_series.append(series)
+
+        all_series = list(qs) + broken_image_series
+        total = len(all_series)
+        self.stdout.write(f"Total series to process: {total}")
 
         if dry_run:
-            for series in qs.iterator():
+            for series in all_series:
                 has_imdb = bool(series.imdb_id)
                 has_image = bool(series.cover_image)
-                self.stdout.write(
+                image_broken = self._has_broken_image(series)
-                    f"  [DRY RUN] Would fix {series.name}"
+                status = f"imdb_id={'✓' if has_imdb else '✗'}"
-                    f" (imdb_id={'✓' if has_imdb else '✗'}"
+                if image_broken:
-                    f", image={'✓' if has_image else '✗'})"
+                    status += ", image=BROKEN"
-                )
+                elif has_image:
+                    status += ", image=✓"
+                else:
+                    status += ", image=✗"
+                self.stdout.write(f"  [DRY RUN] Would fix {series.name} ({status})")
             return
 
         updated = 0
         errors = 0
-        for series in qs.iterator():
+        for series in all_series:
             try:
                 with transaction.atomic():
-                    series.fix_metadata(force_update=force)
+                    series.fix_metadata(force_update=force or self._has_broken_image(series))
                 updated += 1
                 self.stdout.write(f"  [{updated}/{total}] {series.name}")
             except Exception as e:

vrobbler/templates/charts/chart_index.html

@@ -120,9 +120,67 @@
 </div>
 {% endif %}
 
-{% include "scrobbles/_top_charts.html" %}
+<div class="row mb-3">
+    <div class="col-12">
+        <a href="{% url 'charts:maloja-charts' %}" class="btn btn-sm btn-outline-secondary">🎨 Maloja Widgets</a>
+    </div>
+</div>
+
+<div class="row mt-4">
+    {% if charts.artist %}
+    <div class="col-md-6 col-lg-4 chart-section">
+        <h3>🎤 Top Artists</h3>
+        <ul class="list-group">
+            {% for chart in charts.artist|slice:":20" %}
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span class="me-2"><strong>#{{chart.rank}}</strong></span>
+                <a href="{{chart.artist.get_absolute_url}}">{{chart.artist.name}}</a>
+                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
+            </li>
+            {% endfor %}
+            <li class="list-group-item">
+                <a href="{% url 'charts:chart-detail' 'artist' %}">View all &raquo;</a>
+            </li>
+        </ul>
+    </div>
+    {% endif %}
+
+    {% if charts.album %}
+    <div class="col-md-6 col-lg-4 chart-section">
+        <h3>💿 Top Albums</h3>
+        <ul class="list-group">
+            {% for chart in charts.album|slice:":20" %}
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span class="me-2"><strong>#{{chart.rank}}</strong></span>
+                <a href="{{chart.album.get_absolute_url}}">{{chart.album.name}}</a>
+                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
+            </li>
+            {% endfor %}
+            <li class="list-group-item">
+                <a href="{% url 'charts:chart-detail' 'album' %}">View all &raquo;</a>
+            </li>
+        </ul>
+    </div>
+    {% endif %}
+
+    {% if charts.tv_series %}
+    <div class="col-md-6 col-lg-4 chart-section">
+        <h3>📺 Top TV Series</h3>
+        <ul class="list-group">
+            {% for chart in charts.tv_series|slice:":20" %}
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                <span class="me-2"><strong>#{{chart.rank}}</strong></span>
+                <a href="{{chart.tv_series.get_absolute_url}}">{{chart.tv_series.name}}</a>
+                <span class="badge bg-primary rounded-pill">{{chart.count}}</span>
+            </li>
+            {% endfor %}
+            <li class="list-group-item">
+                <a href="{% url 'charts:chart-detail' 'tv_series' %}">View all &raquo;</a>
+            </li>
+        </ul>
+    </div>
+    {% endif %}
 
-<div class="row">
     {% if charts.track %}
     <div class="col-md-6 col-lg-4 chart-section">
         <h3>🎵 Top Tracks</h3>

vrobbler/templates/charts/maloja_charts.html

@@ -0,0 +1,45 @@
+{% extends "base_list.html" %}
+{% load static %}
+
+{% block title %}Maloja Widgets{% endblock %}
+
+{% block head_extra %}
+<style>
+    .container { margin-bottom: 100px; }
+    h2 { padding-top: 20px; }
+    .nav-tabs { cursor: pointer; }
+    .image-wrapper { contain: content; }
+    .image-wrapper :hover { background: rgba(0,0,0,0.3); }
+    .caption {
+        position: fixed; top: 5px; left: 5px;
+        padding: 3px; font-size: 90%;
+        color: white; background: rgba(0,0,0,0.4);
+    }
+    .caption-medium {
+        position: fixed; top: 5px; left: 5px;
+        padding: 3px; font-size: 75%;
+        color: white; background: rgba(0,0,0,0.4);
+    }
+    .caption-small {
+        position: fixed; top: 5px; left: 5px;
+        padding: 3px; font-size: 60%;
+        color: white; background: rgba(0,0,0,0.4);
+    }
+</style>
+{% endblock %}
+
+{% block lists %}
+
+{% block grid_view_button %}{% endblock %}
+
+<div class="row mb-3">
+    <div class="col-12">
+        <a href="{% url 'charts:charts-home' %}" class="btn btn-sm btn-outline-secondary">&larr; Full Charts</a>
+        <a href="{% url 'charts:spotify-tracks' %}" class="btn btn-sm btn-outline-secondary">🎵 Spotify Tracks</a>
+        <a href="{% url 'charts:bandcamp-tracks' %}" class="btn btn-sm btn-outline-secondary">🎵 Bandcamp Tracks</a>
+    </div>
+</div>
+
+{% include "scrobbles/_top_charts.html" %}
+
+{% endblock %}

vrobbler/templates/scrobbles/_top_charts.html

@@ -49,11 +49,12 @@
                 </div>
                 <div style="float:left; width:300px;">
                     <div style="display:flex; flex-wrap: wrap;">
-                        {% for i in "67891011121314" %}
+                        {% for i in "123456789" %}
-                        {% with artists|get_item:forloop.counter|add:5 as artist %}
+                        {% with forloop.counter|add:4 as idx %}
+                        {% with artists|get_item:idx as artist %}
                         {% if artist %}
                         <div class="image-wrapper" style="width:33%">
-                            <div class="caption-small">#{{forloop.counter|add:6}} {{artist.artist.name}}</div>
+                            <div class="caption-small">#{{forloop.counter|add:5}} {{artist.artist.name}}</div>
                             {% if artist.artist.thumbnail %}
                             <a href="{{artist.artist.get_absolute_url}}"><img src="{{artist.artist.thumbnail_medium.url}}" width="100px"></a>
                             {% else %}
@@ -62,6 +63,7 @@
                         </div>
                         {% endif %}
                         {% endwith %}
+                        {% endwith %}
                         {% endfor %}
                     </div>
                 </div>
@@ -95,7 +97,7 @@
             <div style="display:block">
                 <div style="float:left;">
                     <div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
-                        <div class="caption">#1 {{albums.0.album.title}}</div>
+                        <div class="caption">#1 {{albums.0.album.name}}</div>
                         {% if albums.0.album.cover_image %}
                         <a href="{{albums.0.album.get_absolute_url}}"><img src="{{albums.0.album.cover_image_medium.url}}" width="300px"></a>
                         {% else %}
@@ -109,7 +111,7 @@
                         {% with albums|get_item:forloop.counter as album %}
                         {% if album %}
                         <div class="image-wrapper" style="width:50%">
-                            <div class="caption-medium">#{{forloop.counter|add:1}} {{album.album.title}}</div>
+                            <div class="caption-medium">#{{forloop.counter|add:1}} {{album.album.name}}</div>
                             {% if album.album.cover_image %}
                             <a href="{{album.album.get_absolute_url}}"><img src="{{album.album.cover_image_medium.url}}" width="150px"></a>
                             {% else %}
@@ -123,11 +125,12 @@
                 </div>
                 <div style="float:left; width:300px;">
                     <div style="display:flex; flex-wrap: wrap;">
-                        {% for i in "67891011121314" %}
+                        {% for i in "123456789" %}
-                        {% with albums|get_item:forloop.counter|add:5 as album %}
+                        {% with forloop.counter|add:4 as idx %}
+                        {% with albums|get_item:idx as album %}
                         {% if album %}
                         <div class="image-wrapper" style="width:33%">
-                            <div class="caption-small">#{{forloop.counter|add:6}} {{album.album.title}}</div>
+                            <div class="caption-small">#{{forloop.counter|add:5}} {{album.album.name}}</div>
                             {% if album.album.cover_image %}
                             <a href="{{album.album.get_absolute_url}}"><img src="{{album.album.cover_image_medium.url}}" width="100px"></a>
                             {% else %}
@@ -136,6 +139,7 @@
                         </div>
                         {% endif %}
                         {% endwith %}
+                        {% endwith %}
                         {% endfor %}
                     </div>
                 </div>
@@ -197,11 +201,12 @@
                 </div>
                 <div style="float:left; width:300px;">
                     <div style="display:flex; flex-wrap: wrap;">
-                        {% for i in "67891011121314" %}
+                        {% for i in "123456789" %}
-                        {% with shows|get_item:forloop.counter|add:5 as show %}
+                        {% with forloop.counter|add:4 as idx %}
+                        {% with shows|get_item:idx as show %}
                         {% if show %}
                         <div class="image-wrapper" style="width:33%">
-                            <div class="caption-small">#{{forloop.counter|add:6}} {{show.tv_series.name}}</div>
+                            <div class="caption-small">#{{forloop.counter|add:5}} {{show.tv_series.name}}</div>
                             {% if show.tv_series.cover_image %}
                             <a href="{{show.tv_series.get_absolute_url}}"><img src="{{show.tv_series.cover_small.url}}" width="100px" height="100px" style="object-fit: cover"></a>
                             {% else %}
@@ -210,6 +215,7 @@
                         </div>
                         {% endif %}
                         {% endwith %}
+                        {% endwith %}
                         {% endfor %}
                     </div>
                 </div>