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>

6 files changed, 72 insertions, 13 deletions

diff --git a/routers/films.py b/routers/films.py
index c85d811..333eaef 100644
--- a/routers/films.py
+++ b/routers/films.py
@@ -444,9 +444,12 @@ async def film_detail(film_id: int, request: Request, db: Session = Depends(get_
     film = _get_film_or_404(db, film_id)
     tmdb_context = await _film_tmdb_context(film)
 
+    rewatch_filter = (
+        Film.tmdb_id == film.tmdb_id if film.tmdb_id is not None else Film.title == film.title
+    )
     rewatch_history = (
         db.query(Film)
-        .filter(Film.title == film.title, Film.shelf == "diary")
+        .filter(rewatch_filter, Film.shelf == "diary")
         .order_by(Film.date_watched.asc())
         .all()
     )
diff --git a/static/app.js b/static/app.js
index fae2dbd..db3e694 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,3 +1,8 @@
+const dateDefault = document.querySelector("[data-default-today]");
+if (dateDefault) {
+  dateDefault.value = new Date().toLocaleDateString("en-CA");
+}
+
 // Hamburger menu toggle
 const menuToggle = document.querySelector("#menu-toggle");
 const navActions = document.querySelector("#nav-actions");
diff --git a/static/styles.css b/static/styles.css
index 9507439..24340e7 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -488,6 +488,52 @@ h2 {
   margin-bottom: 10px;
 }
 
+.rewatch-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.rewatch-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--line);
+}
+
+.rewatch-meta {
+  margin: 0 0 4px;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.rewatch-rating {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rewatch-stars {
+  color: var(--accent);
+}
+
+.rewatch-companion {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.rewatch-delta {
+  color: var(--subtle);
+  font-size: 0.85rem;
+  text-align: right;
+}
+
+.rewatch-delta-rating {
+  color: var(--accent);
+}
+
 .detail-tagline {
   margin: 0 0 12px;
   color: var(--accent-strong);
@@ -895,6 +941,10 @@ textarea:focus {
   grid-column: 1 / -1;
 }
 
+.review-panel-spaced {
+  margin-top: 24px;
+}
+
 .year-bars {
   display: grid;
   gap: 10px;
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 %}