From 74933687c1005d40ca7ee5449d956cc49706d88e Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sun, 22 Feb 2026 00:13:41 +0100
Subject: [PATCH] feat: unify listening widget with Funkwhale + Last.fm sources
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show 2 recent tracks from each source (4 total) instead of only
Funkwhale. Removed stats section — users can visit /listening/ for
full statistics. Now Playing indicator works from either source.
---
 _includes/components/widgets/funkwhale.njk | 118 ++++++++++++++-------
 1 file changed, 79 insertions(+), 39 deletions(-)

diff --git a/_includes/components/widgets/funkwhale.njk b/_includes/components/widgets/funkwhale.njk
index 36aba11..5ac286a 100644
--- a/_includes/components/widgets/funkwhale.njk
+++ b/_includes/components/widgets/funkwhale.njk
@@ -1,6 +1,6 @@
-{# Funkwhale Now Playing Widget #}
-{% if funkwhaleActivity and (funkwhaleActivity.nowPlaying or funkwhaleActivity.stats) %}
-<is-land on:visible>
+{# Listening Widget — combined Funkwhale + Last.fm recent tracks #}
+{% set hasListening = (funkwhaleActivity and (funkwhaleActivity.nowPlaying or funkwhaleActivity.listenings.length)) or (lastfmActivity and (lastfmActivity.nowPlaying or lastfmActivity.scrobbles.length)) %}
+{% if hasListening %}
 <div class="widget">
   <h3 class="widget-title flex items-center gap-2">
     <svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -9,10 +9,15 @@
     Listening
   </h3>
 
-  {# Now Playing / Recently Played #}
-  {% if funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.track %}
-  <div class="{% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800{% else %}bg-surface-50 dark:bg-surface-800{% endif %} rounded-lg p-3 mb-3">
-    {% if funkwhaleActivity.nowPlaying.status == 'now-playing' %}
+  {# Now Playing — show if either source is actively playing #}
+  {% set fwNow = funkwhaleActivity.nowPlaying if funkwhaleActivity and funkwhaleActivity.nowPlaying and funkwhaleActivity.nowPlaying.status == 'now-playing' else null %}
+  {% set lfmNow = lastfmActivity.nowPlaying if lastfmActivity and lastfmActivity.nowPlaying and lastfmActivity.nowPlaying.status == 'now-playing' else null %}
+
+  {% if fwNow or lfmNow %}
+  {% set np = fwNow or lfmNow %}
+  {% set npSource = "Funkwhale" if fwNow else "Last.fm" %}
+  {% set npColor = "purple" if fwNow else "red" %}
+  <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3 mb-3">
     <div class="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400 mb-2">
       <span class="flex gap-0.5 items-end h-2.5">
         <span class="w-0.5 bg-green-500 animate-pulse" style="height: 30%;"></span>
@@ -20,54 +25,89 @@
         <span class="w-0.5 bg-green-500 animate-pulse" style="height: 50%; animation-delay: 0.4s;"></span>
       </span>
       Now Playing
+      <span class="text-{{ npColor }}-600 dark:text-{{ npColor }}-400 ml-1">({{ npSource }})</span>
     </div>
-    {% elif funkwhaleActivity.nowPlaying.status == 'recently-played' %}
-    <div class="text-xs text-surface-500 mb-2">Recently Played</div>
-    {% endif %}
-
     <div class="flex items-center gap-3">
-      {% if funkwhaleActivity.nowPlaying.coverUrl %}
-      <img src="{{ funkwhaleActivity.nowPlaying.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      {% if np.coverUrl %}
+      <img src="{{ np.coverUrl }}" alt="" class="w-10 h-10 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
       {% endif %}
       <div class="min-w-0 flex-1">
         <p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate">
-          {% if funkwhaleActivity.nowPlaying.trackUrl %}
-          <a href="{{ funkwhaleActivity.nowPlaying.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">
-            {{ funkwhaleActivity.nowPlaying.track }}
-          </a>
+          {% if np.trackUrl %}
+          <a href="{{ np.trackUrl }}" class="hover:text-primary-600 dark:hover:text-primary-400" target="_blank" rel="noopener">{{ np.track }}</a>
           {% else %}
-          {{ funkwhaleActivity.nowPlaying.track }}
+          {{ np.track }}
           {% endif %}
         </p>
-        <p class="text-xs text-surface-600 dark:text-surface-400 truncate">{{ funkwhaleActivity.nowPlaying.artist }}</p>
+        <p class="text-xs text-surface-600 dark:text-surface-400 truncate">{{ np.artist }}</p>
       </div>
     </div>
   </div>
   {% endif %}
 
-  {# Quick Stats #}
-  {% if funkwhaleActivity.stats and funkwhaleActivity.stats.summary %}
-  {% set stats = funkwhaleActivity.stats.summary.all %}
-  <div class="grid grid-cols-3 gap-2 text-center mb-3">
-    <div class="p-2 bg-surface-50 dark:bg-surface-800 rounded">
-      <span class="text-lg font-bold text-primary-600 dark:text-primary-400 block">{{ stats.totalPlays or 0 }}</span>
-      <span class="text-[10px] text-surface-500 uppercase">plays</span>
-    </div>
-    <div class="p-2 bg-surface-50 dark:bg-surface-800 rounded">
-      <span class="text-lg font-bold text-primary-600 dark:text-primary-400 block">{{ stats.uniqueArtists or 0 }}</span>
-      <span class="text-[10px] text-surface-500 uppercase">artists</span>
-    </div>
-    <div class="p-2 bg-surface-50 dark:bg-surface-800 rounded">
-      <span class="text-lg font-bold text-primary-600 dark:text-primary-400 block">{{ stats.totalDurationFormatted or '0m' }}</span>
-      <span class="text-[10px] text-surface-500 uppercase">listened</span>
-    </div>
-  </div>
-  {% endif %}
+  {# Recent tracks — 2 from each source #}
+  <ul class="space-y-2">
+    {% if funkwhaleActivity and funkwhaleActivity.listenings.length %}
+    {% for listening in funkwhaleActivity.listenings | head(2) %}
+    <li class="flex items-center gap-2">
+      {% if listening.coverUrl %}
+      <img src="{{ listening.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      {% else %}
+      <div class="w-8 h-8 rounded bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
+        <svg class="w-4 h-4 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13"/>
+        </svg>
+      </div>
+      {% endif %}
+      <div class="min-w-0 flex-1">
+        <p class="text-sm text-surface-900 dark:text-surface-100 truncate">
+          {% if listening.trackUrl %}
+          <a href="{{ listening.trackUrl }}" class="hover:text-purple-600 dark:hover:text-purple-400" target="_blank" rel="noopener">{{ listening.track }}</a>
+          {% else %}
+          {{ listening.track }}
+          {% endif %}
+        </p>
+        <p class="text-xs text-surface-500 truncate">{{ listening.artist }}
+          <span class="text-purple-500 ml-1">Funkwhale</span>
+        </p>
+      </div>
+    </li>
+    {% endfor %}
+    {% endif %}
 
-  <a href="/listening/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline flex items-center gap-1">
+    {% if lastfmActivity and lastfmActivity.scrobbles.length %}
+    {% for scrobble in lastfmActivity.scrobbles | head(2) %}
+    <li class="flex items-center gap-2">
+      {% if scrobble.coverUrl %}
+      <img src="{{ scrobble.coverUrl }}" alt="" class="w-8 h-8 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
+      {% else %}
+      <div class="w-8 h-8 rounded bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
+        <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13"/>
+        </svg>
+      </div>
+      {% endif %}
+      <div class="min-w-0 flex-1">
+        <p class="text-sm text-surface-900 dark:text-surface-100 truncate">
+          {% if scrobble.trackUrl %}
+          <a href="{{ scrobble.trackUrl }}" class="hover:text-red-600 dark:hover:text-red-400" target="_blank" rel="noopener">{{ scrobble.track }}</a>
+          {% else %}
+          {{ scrobble.track }}
+          {% endif %}
+          {% if scrobble.loved %}<span class="text-red-500 ml-0.5">&#9829;</span>{% endif %}
+        </p>
+        <p class="text-xs text-surface-500 truncate">{{ scrobble.artist }}
+          <span class="text-red-500 ml-1">Last.fm</span>
+        </p>
+      </div>
+    </li>
+    {% endfor %}
+    {% endif %}
+  </ul>
+
+  <a href="/listening/" class="text-sm text-primary-600 dark:text-primary-400 hover:underline flex items-center gap-1 mt-3">
     View full listening history
     <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
   </a>
 </div>
-</is-land>
 {% endif %}