From cdd28b6c0a3a6444b9ae79b123fe4fa7401de5ab Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Thu, 14 May 2026 01:31:34 -0700
Subject: Refine Lumi layouts and public profile

---
 templates/form.html | 226 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 128 insertions(+), 98 deletions(-)

(limited to 'templates/form.html')

diff --git a/templates/form.html b/templates/form.html
index cd29e67..f7bbbf1 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -13,138 +13,168 @@
 
       {% set current_stars = film.stars if film and film.stars else 0 %}
       <input type="hidden" id="stars" name="stars" value="{{ current_stars }}">
-      <div class="form-heading">
-        <p class="eyebrow">Diary Entry</p>
-        <div class="form-heading-row">
-          <h1>{{ page_title }}</h1>
-          <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}">
-            {% for value in range(1, 4) %}
-              <button
-                type="button"
-                class="star-button {% if current_stars >= value %}is-active{% endif %}"
-                data-stars="{{ value }}"
-                aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
-                aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}"
-              >✦</button>
-            {% endfor %}
+      <section class="form-hero">
+        <div class="form-heading">
+          <p class="eyebrow">Diary Entry</p>
+          <div class="form-heading-row">
+            <div>
+              <h1>{{ page_title }}</h1>
+              <p class="form-intro">Search TMDB first, then tune the entry like a ledger instead of filling a blank spreadsheet.</p>
+            </div>
+            <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}">
+              {% for value in range(1, 4) %}
+                <button
+                  type="button"
+                  class="star-button {% if current_stars >= value %}is-active{% endif %}"
+                  data-stars="{{ value }}"
+                  aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
+                  aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}"
+                >✦</button>
+              {% endfor %}
+            </div>
           </div>
         </div>
-      </div>
+      </section>
 
-      <div class="tmdb-panel">
-        <label for="tmdb-query">TMDB title search</label>
+      <section class="form-panel tmdb-panel">
+        <div class="form-panel-head">
+          <p class="eyebrow">Lookup</p>
+          <h2>TMDB title search</h2>
+        </div>
         <div class="search-row">
           <input id="tmdb-query" type="search" autocomplete="off" placeholder="Search by title">
           <button id="tmdb-search" type="button">Search</button>
         </div>
         <div id="tmdb-results" class="tmdb-results" aria-live="polite"></div>
         <div id="duplicate-notice" class="notice" hidden></div>
-      </div>
+      </section>
 
-      <div class="form-grid">
-        <div class="field span-2">
-          <label for="title">Display title</label>
-          <input id="title" name="title" required value="{{ film.title if film else '' }}">
+      <section class="form-panel">
+        <div class="form-panel-head">
+          <p class="eyebrow">Identity</p>
+          <h2>Core film record</h2>
         </div>
+        <div class="form-grid">
+          <div class="field span-2">
+            <label for="title">Display title</label>
+            <input id="title" name="title" required value="{{ film.title if film else '' }}">
+          </div>
 
-        <div class="field span-2">
-          <label for="original_title">Original title</label>
-          <input id="original_title" name="original_title" value="{{ film.original_title if film and film.original_title else '' }}">
-        </div>
+          <div class="field span-2">
+            <label for="original_title">Original title</label>
+            <input id="original_title" name="original_title" value="{{ film.original_title if film and film.original_title else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="director">Director</label>
-          <input id="director" name="director" value="{{ film.director if film and film.director else '' }}">
-        </div>
+          <div class="field">
+            <label for="director">Director</label>
+            <input id="director" name="director" value="{{ film.director if film and film.director else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="year">Year</label>
-          <input id="year" name="year" inputmode="numeric" value="{{ film.year if film and film.year else '' }}">
-        </div>
+          <div class="field">
+            <label for="year">Year</label>
+            <input id="year" name="year" inputmode="numeric" value="{{ film.year if film and film.year else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="country">Country</label>
-          <input id="country" name="country" value="{{ film.country if film and film.country else '' }}">
-        </div>
+          <div class="field">
+            <label for="country">Country</label>
+            <input id="country" name="country" value="{{ film.country if film and film.country else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="genre">Genre</label>
-          <input id="genre" name="genre" value="{{ film.genre if film and film.genre else '' }}">
-        </div>
+          <div class="field">
+            <label for="genre">Genre</label>
+            <input id="genre" name="genre" value="{{ film.genre if film and film.genre else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="language">Language</label>
-          <input id="language" name="language" value="{{ film.language if film and film.language else '' }}">
-        </div>
+          <div class="field">
+            <label for="language">Language</label>
+            <input id="language" name="language" value="{{ film.language if film and film.language else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="runtime">Runtime</label>
-          <input id="runtime" name="runtime" type="number" min="0" inputmode="numeric" value="{{ film.runtime if film and film.runtime is not none else '' }}">
+          <div class="field">
+            <label for="runtime">Runtime</label>
+            <input id="runtime" name="runtime" type="number" min="0" inputmode="numeric" value="{{ film.runtime if film and film.runtime is not none else '' }}">
+          </div>
         </div>
+      </section>
 
-        <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 '' }}"
-            {% if not (film and film.date_watched) %}data-default-today{% endif %}>
+      <section class="form-panel">
+        <div class="form-panel-head">
+          <p class="eyebrow">Log</p>
+          <h2>Watch context</h2>
         </div>
+        <div class="form-grid">
+          <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 '' }}"
+              {% if not (film and film.date_watched) %}data-default-today{% endif %}>
+          </div>
 
-        <div class="field">
-          <label for="shelf">Shelf</label>
-          {% set current_shelf = shelf_override if shelf_override else (film.shelf if film and film.shelf else 'diary') %}
-          <select id="shelf" name="shelf">
-            <option value="diary" {% if current_shelf == 'diary' %}selected{% endif %}>Diary</option>
-            <option value="queue" {% if current_shelf == 'queue' %}selected{% endif %}>Queue</option>
-            <option value="abandoned" {% if current_shelf == 'abandoned' %}selected{% endif %}>Abandoned</option>
-          </select>
-        </div>
+          <div class="field">
+            <label for="shelf">Shelf</label>
+            {% set current_shelf = shelf_override if shelf_override else (film.shelf if film and film.shelf else 'diary') %}
+            <select id="shelf" name="shelf">
+              <option value="diary" {% if current_shelf == 'diary' %}selected{% endif %}>Diary</option>
+              <option value="queue" {% if current_shelf == 'queue' %}selected{% endif %}>Queue</option>
+              <option value="abandoned" {% if current_shelf == 'abandoned' %}selected{% endif %}>Abandoned</option>
+            </select>
+          </div>
 
-        <div class="field checkbox-field">
-          <label class="check-label" for="rewatch">
-            <input id="rewatch" name="rewatch" type="checkbox" value="on" {% if film and film.rewatch %}checked{% endif %}>
-            Rewatch
-          </label>
-        </div>
+          <div class="field checkbox-field">
+            <label class="check-label" for="rewatch">
+              <input id="rewatch" name="rewatch" type="checkbox" value="on" {% if film and film.rewatch %}checked{% endif %}>
+              Rewatch
+            </label>
+          </div>
 
-        <div class="field">
-          <label for="rewatch_count">Rewatch count</label>
-          <input id="rewatch_count" name="rewatch_count" type="number" min="0" inputmode="numeric" value="{{ film.rewatch_count if film and film.rewatch_count is not none else 0 }}">
-        </div>
+          <div class="field">
+            <label for="rewatch_count">Rewatch count</label>
+            <input id="rewatch_count" name="rewatch_count" type="number" min="0" inputmode="numeric" value="{{ film.rewatch_count if film and film.rewatch_count is not none else 0 }}">
+          </div>
 
-        <div class="field span-2">
-          <label for="watched_with">Watched with</label>
-          <input id="watched_with" name="watched_with" placeholder="Solo, Maya, Film club" value="{{ film.watched_with if film and film.watched_with else '' }}">
-        </div>
+          <div class="field span-2">
+            <label for="watched_with">Watched with</label>
+            <input id="watched_with" name="watched_with" placeholder="Solo, Maya, Film club" value="{{ film.watched_with if film and film.watched_with else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="how_found">How found</label>
-          <input id="how_found" name="how_found" placeholder="Recommendation, festival, streaming queue" value="{{ film.how_found if film and film.how_found else '' }}">
-        </div>
+          <div class="field">
+            <label for="how_found">How found</label>
+            <input id="how_found" name="how_found" placeholder="Recommendation, festival, streaming queue" value="{{ film.how_found if film and film.how_found else '' }}">
+          </div>
 
-        <div class="field">
-          <label for="context">Context</label>
-          <input id="context" name="context" placeholder="Criterion, Festival, Kiarostami deep-dive" value="{{ film.context if film and film.context else '' }}">
+          <div class="field">
+            <label for="context">Context</label>
+            <input id="context" name="context" placeholder="Criterion, Festival, Kiarostami deep-dive" value="{{ film.context if film and film.context else '' }}">
+          </div>
         </div>
+      </section>
 
-        <div class="field span-2">
-          <label for="poster_url">Poster URL</label>
-          <input id="poster_url" name="poster_url" value="{{ film.poster_url if film and film.poster_url else '' }}">
+      <section class="form-panel">
+        <div class="form-panel-head">
+          <p class="eyebrow">Archive</p>
+          <h2>Poster and notes</h2>
         </div>
+        <div class="form-grid form-grid-archive">
+          <div class="field span-2">
+            <label for="poster_url">Poster URL</label>
+            <input id="poster_url" name="poster_url" value="{{ film.poster_url if film and film.poster_url else '' }}">
+          </div>
 
-        <div class="poster-preview-field">
-          <div class="poster-frame poster-preview">
-            {% if film and film.poster_url %}
-              <img id="poster-preview" src="{{ film.poster_url }}" alt="Poster preview">
-            {% else %}
-              <img id="poster-preview" alt="Poster preview">
-            {% endif %}
+          <div class="poster-preview-field">
+            <div class="poster-frame poster-preview">
+              {% if film and film.poster_url %}
+                <img id="poster-preview" src="{{ film.poster_url }}" alt="Poster preview">
+              {% else %}
+                <img id="poster-preview" alt="Poster preview">
+              {% endif %}
+            </div>
           </div>
-        </div>
 
-        <div class="field notes-field">
-          <label for="notes">Notes</label>
-          <textarea id="notes" name="notes" rows="10">{{ film.notes if film and film.notes else '' }}</textarea>
+          <div class="field notes-field">
+            <label for="notes">Notes</label>
+            <textarea id="notes" name="notes" rows="10">{{ film.notes if film and film.notes else '' }}</textarea>
+          </div>
         </div>
-      </div>
+      </section>
 
       <div class="form-actions">
         <a href="{{ '/films/' ~ film.id if film and film.id else '/' }}">Cancel</a>
-- 
cgit v1.3-2-g0d8e