Add genre tracking and year-in-review improvements

Adds genre field to Film model with TMDB enrichment. Genres populate from
TMDB detail fetch during add/edit and bulk enrichment. Genre metadata displays
on film cards, detail page (Production section), stats page (top genres panel),
and year-in-review (by decade and genre breakdowns).

Auto-detects rewatches when adding films via TMDB autocomplete - if a film with
the same TMDB ID already exists in diary, pre-fills rewatch checkbox and count.
Rewatch count now displays on film cards as "Rewatch #N".

Stats page now shows:
- Top genres (most watched)
- Film decades (sorted chronologically)
- Already shows: directors, companions, star distribution, rewatch rate

Year-in-review shows decades and genres alongside monthly activity and companions.

Bulk enrichment endpoint (/data/enrich-posters) now fetches missing genre
metadata along with posters and TMDB IDs.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 30 insertions, 0 deletions

diff --git a/templates/stats.html b/templates/stats.html
index e0a6a91..9b71679 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -78,6 +78,26 @@
       </div>
       <ol id="watched-with" class="stats-list"></ol>
     </section>
+
+    <section class="stats-panel">
+      <div class="stats-panel-header">
+        <div>
+          <p class="eyebrow">Genres</p>
+          <h2>Most watched</h2>
+        </div>
+      </div>
+      <ol id="top-genres" class="stats-list"></ol>
+    </section>
+
+    <section class="stats-panel">
+      <div class="stats-panel-header">
+        <div>
+          <p class="eyebrow">Decades</p>
+          <h2>By era</h2>
+        </div>
+      </div>
+      <ol id="film-decades" class="stats-list"></ol>
+    </section>
   </section>
 {% endblock %}
 
@@ -118,6 +138,16 @@
         <li><span>${item.watched_with}</span><strong>${item.count}</strong></li>
       `).join("");
 
+      const topGenres = document.getElementById("top-genres");
+      topGenres.innerHTML = data.films_per_genre.slice(0, 8).map((item) => `
+        <li><span>${item.genre}</span><strong>${item.count}</strong></li>
+      `).join("");
+
+      const filmDecades = document.getElementById("film-decades");
+      filmDecades.innerHTML = data.films_per_decade.map((item) => `
+        <li><span>${item.decade}</span><strong>${item.count}</strong></li>
+      `).join("");
+
       const starDistribution = document.getElementById("star-distribution");
       const maxStars = Math.max(1, ...data.star_distribution.map((item) => item.count));
       starDistribution.innerHTML = data.star_distribution.map((item) => `