[books] Update widget to show all scrobbles WITH complete status

vrobbler/apps/scrobbles/views.py

@@ -1144,9 +1144,32 @@ class EmbeddableTopBooksWidget(BaseEmbeddableWidget):
     media_type = "Books"
     count_label = "reads"
     no_data_message = "No books read"
-    scrobble_filter = {"scrobble__long_play_complete": True}
 
     def get_items(self, user, start_date):
         from books.models import Book
+        from django.db.models import Count, Exists, OuterRef
 
-        return super().get_items(user, start_date, Book)
+        completed_subquery = Book.objects.filter(
+            scrobble__user=user,
+            scrobble__timestamp__gte=start_date,
+            scrobble__long_play_complete=True,
+            pk=OuterRef("pk"),
+        )
+
+        queryset = (
+            Book.objects.filter(
+                scrobble__user=user,
+                scrobble__timestamp__gte=start_date,
+            )
+            .annotate(
+                count=Count("scrobble", distinct=True),
+                is_completed=Exists(completed_subquery),
+            )
+            .order_by("-count")[:10]
+        )
+
+        items = list(queryset)
+        for item in items:
+            if not hasattr(item, "name") and hasattr(item, "title"):
+                item.name = item.title
+        return items

vrobbler/templates/scrobbles/embeddable_top_media.html

@@ -43,6 +43,10 @@
     font-size: 12px;
     color: #888;
   }
+  .vrobbler-completed {
+    color: #2e7d32;
+    margin-left: 4px;
+  }
   .vrobbler-media-thumb {
     width: 40px;
     height: 40px;
@@ -80,7 +84,7 @@
             <img class="vrobbler-media-thumb" src="{% static 'images/not-found.jpg' %}" alt="{{ item.name }}">
           {% endif %}
           <div class="vrobbler-media-info">
-            <div class="vrobbler-media-title">{{ item.name }}</div>
+            <div class="vrobbler-media-title">{{ item.name }}{% if item.is_completed %} <span class="vrobbler-completed">✓</span>{% endif %}</div>
             <div class="vrobbler-media-count">{{ item.count }} {{ count_label }}</div>
           </div>
         </li>