From 65466fd5c645e546707ce699b4ea289f894fea20 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sat, 9 May 2026 01:14:57 -0700
Subject: Auto-select today's date on add form; clean up rewatch history panel

- Default date_watched to today when adding a new film (JS, en-CA locale)
- Match rewatch history by tmdb_id when available, fall back to title
- Replace inline styles in rewatch section with CSS classes
- Simplify redundant Jinja conditions (rewatch_history and, loop.length > 1)
- Move review-panel margin-top hack to .review-panel-spaced class

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 templates/detail.html      | 20 ++++++++++----------
 templates/form.html        |  3 ++-
 templates/year_review.html |  2 +-
 3 files changed, 13 insertions(+), 12 deletions(-)

(limited to 'templates')

diff --git a/templates/detail.html b/templates/detail.html
index 325b0c1..83bd26a 100644
--- a/templates/detail.html
+++ b/templates/detail.html
@@ -87,27 +87,27 @@
         </article>
       </section>
 
-      {% if rewatch_history and rewatch_history|length > 1 %}
+      {% if rewatch_history|length > 1 %}
       <section class="detail-panel">
         <p class="eyebrow">Rewatches</p>
-        <div style="display: flex; flex-direction: column; gap: 12px;">
+        <div class="rewatch-list">
           {% for entry in rewatch_history %}
-          <div style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line);">
+          <div class="rewatch-row">
             <div>
-              <p style="margin: 0 0 4px; color: var(--muted); font-size: 0.9rem;">{{ entry.date_watched }}</p>
-              <p style="margin: 0; display: flex; align-items: center; gap: 8px;">
-                <span style="color: var(--accent);">{% for _ in range(entry.stars) %}✦{% endfor %}</span>
-                {% if entry.watched_with %}<span style="color: var(--muted); font-size: 0.9rem;">with {{ entry.watched_with }}</span>{% endif %}
+              <p class="rewatch-meta">{{ entry.date_watched }}</p>
+              <p class="rewatch-rating">
+                <span class="rewatch-stars">{% for _ in range(entry.stars) %}✦{% endfor %}</span>
+                {% if entry.watched_with %}<span class="rewatch-companion">with {{ entry.watched_with }}</span>{% endif %}
               </p>
             </div>
-            {% if loop.length > 1 and not loop.first %}
-            <span style="color: var(--subtle); font-size: 0.85rem; text-align: right;">
+            {% if not loop.first %}
+            <span class="rewatch-delta">
               {% set prev_entry = rewatch_history[loop.index - 2] %}
               {% if prev_entry.date_watched %}
               {% set days = (entry.date_watched - prev_entry.date_watched).days %}
               {{ days }}d
               {% if entry.stars != prev_entry.stars %}
-              <span style="color: var(--accent);">({{ prev_entry.stars }}→{{ entry.stars }})</span>
+              <span class="rewatch-delta-rating">({{ prev_entry.stars }}→{{ entry.stars }})</span>
               {% endif %}
               {% endif %}
             </span>
diff --git a/templates/form.html b/templates/form.html
index 489d9c6..fce5e48 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -68,7 +68,8 @@
 
         <div class="field">
           <label for="date_watched">Watched</label>
-          <input id="date_watched" name="date_watched" type="date" value="{{ film.date_watched if film and film.date_watched else '' }}">
+          <input id="date_watched" name="date_watched" type="date" value="{{ film.date_watched if film and film.date_watched else '' }}"
+            {% if not (film and film.date_watched) %}data-default-today{% endif %}>
         </div>
 
         <div class="field">
diff --git a/templates/year_review.html b/templates/year_review.html
index 2a75f5b..82d372c 100644
--- a/templates/year_review.html
+++ b/templates/year_review.html
@@ -111,7 +111,7 @@
       </article>
     </section>
 
-    <section class="review-panel" style="margin-top: 24px;">
+    <section class="review-panel review-panel-spaced">
       <p class="eyebrow">Highlights</p>
       <div class="highlight-grid">
         {% if highlight_films.highest_rated %}
-- 
cgit v1.3-2-g0d8e