From 84ac42e5be00fe7591a6946f27a33770b0270a41 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Thu, 7 May 2026 00:02:25 -0700
Subject: Add rewatch patterns stats panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a "Rewatches" section to /stats that displays films you've watched multiple times, grouped by title. For each rewatched film, shows:
- Watch count (e.g., "3×")
- Rating history (e.g., ✦ → ✦✦ → ✦) with accent highlight when ratings drift
- Days between first and last watch

Changes:
- routers/stats.py: Group films by title in _build_stats_payload, compute rewatch details (ratings, days between, rating change flag), add rewatch_patterns key
- templates/stats.html: Add "Rewatches" panel HTML and JS renderer (renderLists)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 templates/stats.html | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

(limited to 'templates')

diff --git a/templates/stats.html b/templates/stats.html
index 9b71679..6f271bd 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -98,6 +98,16 @@
       </div>
       <ol id="film-decades" class="stats-list"></ol>
     </section>
+
+    <section class="stats-panel stats-panel-wide">
+      <div class="stats-panel-header">
+        <div>
+          <p class="eyebrow">Films</p>
+          <h2>Rewatches</h2>
+        </div>
+      </div>
+      <div id="rewatch-patterns-list" class="stats-list"></div>
+    </section>
   </section>
 {% endblock %}
 
@@ -164,6 +174,26 @@
         <strong>${rate}%</strong>
         <span>${data.rewatch_rate.rewatched} of ${data.rewatch_rate.total_watched} watched films were rewatches.</span>
       `;
+
+      const rewatchPatterns = document.getElementById("rewatch-patterns-list");
+      if (data.rewatch_patterns && data.rewatch_patterns.length > 0) {
+        rewatchPatterns.innerHTML = data.rewatch_patterns.map((item) => {
+          const stars = (n) => (n > 0 ? "✦".repeat(n) : "—");
+          const ratingHistory = item.ratings.map(stars).join(" → ");
+          const drift = item.rating_changed
+            ? `<span style="color:var(--accent)">${ratingHistory}</span>`
+            : `<span style="color:var(--muted)">${ratingHistory}</span>`;
+          const gap = item.days_between != null
+            ? `<span style="color:var(--subtle);font-size:13px">${item.days_between}d apart</span>`
+            : "";
+          return `<div class="stats-list-row">
+            <span>${item.title}</span>
+            <span style="display:flex;gap:12px;align-items:center">${gap}${drift}<strong>${item.watches}×</strong></span>
+          </div>`;
+        }).join("");
+      } else {
+        rewatchPatterns.innerHTML = "<p style=\"color:var(--muted);font-size:14px;margin:0\">No rewatches yet.</p>";
+      }
     }
 
     function renderHeatmap(days) {
-- 
cgit v1.3-2-g0d8e