From 20c1d02b40bcb9abb5882d0503e596c82e9819bb Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Fri, 15 May 2026 01:50:15 -0700
Subject: Refine Lumi stats and detail UX

---
 templates/detail.html | 82 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 51 insertions(+), 31 deletions(-)

(limited to 'templates/detail.html')

diff --git a/templates/detail.html b/templates/detail.html
index f51372d..94612d7 100644
--- a/templates/detail.html
+++ b/templates/detail.html
@@ -27,7 +27,7 @@
     <section class="detail-body">
       <section class="detail-hero">
         <div class="detail-hero-copy">
-          <p class="eyebrow">{{ film.shelf|title }} Entry</p>
+          <p class="eyebrow"><a class="detail-backlink" href="{{ shelf_meta.path }}">Back to {{ film.shelf|title }}</a></p>
           <h1>{{ film.title }}</h1>
           {% if film.original_title %}
             <p class="original-title">{{ film.original_title }}</p>
@@ -66,31 +66,51 @@
             </div>
             {% endif %}
           </div>
+          <div class="ledger-strip detail-ledger">
+            <span>{{ film.shelf|title }}</span>
+            {% if film.date_watched %}<span>{{ film.date_watched }}</span>{% endif %}
+            {% if film.runtime %}<span>{{ film.runtime }} min</span>{% endif %}
+            {% if film.rewatch %}<span>Rewatch{% if film.rewatch_count %} #{{ film.rewatch_count }}{% endif %}</span>{% endif %}
+            {% if film.stars %}<span class="rating">{% for _ in range(film.stars) %}✦{% endfor %}</span>{% endif %}
+          </div>
         </div>
 
         <div class="detail-actions">
-          <a class="secondary-button" href="/films/{{ film.id }}/edit">Edit</a>
-          {% if film.shelf == 'queue' %}
-            <a class="button-link" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
-            <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
-              <button class="secondary-button" type="submit">Abandon</button>
-            </form>
-          {% elif film.shelf == 'diary' %}
-            <form method="post" action="/films/{{ film.id }}/shelf/queue">
-              <button class="secondary-button" type="submit">Move to queue</button>
-            </form>
-            <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
-              <button class="secondary-button" type="submit">Mark abandoned</button>
-            </form>
-          {% else %}
-            <a class="button-link" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
-            <form method="post" action="/films/{{ film.id }}/shelf/queue">
-              <button class="secondary-button" type="submit">Move to queue</button>
+          <div class="detail-actions-primary">
+            {% if film.shelf == 'queue' %}
+              <a class="button-link" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
+            {% elif film.shelf == 'abandoned' %}
+              <a class="button-link" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
+            {% else %}
+              <a class="button-link" href="/films/{{ film.id }}/edit">Edit entry</a>
+            {% endif %}
+          </div>
+          <div class="detail-actions-secondary">
+            {% if film.shelf != 'diary' %}
+              <a class="secondary-button" href="/films/{{ film.id }}/edit">Edit</a>
+            {% endif %}
+            {% if film.shelf == 'queue' %}
+              <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
+                <button class="secondary-button" type="submit">Abandon</button>
+              </form>
+            {% elif film.shelf == 'diary' %}
+              <form method="post" action="/films/{{ film.id }}/shelf/queue">
+                <button class="secondary-button" type="submit">Move to queue</button>
+              </form>
+              <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
+                <button class="secondary-button" type="submit">Mark abandoned</button>
+              </form>
+            {% else %}
+              <form method="post" action="/films/{{ film.id }}/shelf/queue">
+                <button class="secondary-button" type="submit">Move to queue</button>
+              </form>
+            {% endif %}
+          </div>
+          <div class="detail-actions-danger">
+            <form method="post" action="/films/{{ film.id }}/delete">
+              <button class="danger-button" type="submit">Delete</button>
             </form>
-          {% endif %}
-          <form method="post" action="/films/{{ film.id }}/delete">
-            <button class="danger-button" type="submit">Delete</button>
-          </form>
+          </div>
         </div>
       </section>
 
@@ -191,6 +211,15 @@
         </aside>
 
         <div class="detail-main">
+          <section class="detail-panel detail-panel-feature">
+            <p class="eyebrow">Notes</p>
+            {% if film.notes %}
+              <div class="notes-body">{{ film.notes }}</div>
+            {% else %}
+              <p class="muted">No notes saved.</p>
+            {% endif %}
+          </section>
+
           {% if tmdb_context %}
             <section class="detail-panel detail-panel-feature">
               <p class="eyebrow">Summary</p>
@@ -209,15 +238,6 @@
             </section>
           {% endif %}
 
-          <section class="detail-panel detail-panel-feature">
-            <p class="eyebrow">Notes</p>
-            {% if film.notes %}
-              <div class="notes-body">{{ film.notes }}</div>
-            {% else %}
-              <p class="muted">No notes saved.</p>
-            {% endif %}
-          </section>
-
           {% if rewatch_history|length > 1 %}
           <section class="detail-panel">
             <p class="eyebrow">Rewatches</p>
-- 
cgit v1.3-2-g0d8e