From f3f40da05e0f97ff4308ddf1085e156879854eb5 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sat, 9 May 2026 01:21:30 -0700
Subject: Replace stars dropdown with inline star picker on add/edit form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/app.js       | 25 +++++++++++++++++++++++--
 templates/form.html | 22 ++++++++++++++--------
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/static/app.js b/static/app.js
index db3e694..938cf70 100644
--- a/static/app.js
+++ b/static/app.js
@@ -233,7 +233,7 @@ document.querySelectorAll("form[data-confirm]").forEach((form) => {
   });
 });
 
-document.querySelectorAll(".star-control").forEach((control) => {
+document.querySelectorAll(".star-control:not([data-form-stars])").forEach((control) => {
   syncStarControl(control, Number(control.dataset.currentStars || 0));
   control.addEventListener("pointerleave", () => clearStarPreview(control));
   control.addEventListener("focusout", (event) => {
@@ -274,6 +274,27 @@ document.querySelectorAll(".star-control").forEach((control) => {
   });
 });
 
+// Form star picker — updates hidden input instead of fetching
+document.querySelectorAll(".star-control[data-form-stars]").forEach((control) => {
+  syncStarControl(control, Number(control.dataset.currentStars || 0));
+  control.addEventListener("pointerleave", () => clearStarPreview(control));
+  control.addEventListener("focusout", (event) => {
+    if (!control.contains(event.relatedTarget)) clearStarPreview(control);
+  });
+  control.querySelectorAll(".star-button").forEach((button) => {
+    button.addEventListener("pointerenter", () => previewStarControl(control, Number(button.dataset.stars || 0)));
+    button.addEventListener("focus", () => previewStarControl(control, Number(button.dataset.stars || 0)));
+    button.addEventListener("click", () => {
+      const current = Number(control.dataset.currentStars || 0);
+      const selected = Number(button.dataset.stars || 0);
+      const next = current === selected ? 0 : selected;
+      syncStarControl(control, next);
+      const hidden = document.getElementById("stars");
+      if (hidden) hidden.value = String(next);
+    });
+  });
+});
+
 // Infinite scroll + search/filter/sort
 (function () {
   const feedContainer = document.querySelector("#film-feed");
@@ -286,7 +307,7 @@ document.querySelectorAll(".star-control").forEach((control) => {
   let currentSort = "";
 
   function attachStarListeners(root) {
-    root.querySelectorAll(".star-control").forEach((control) => {
+    root.querySelectorAll(".star-control:not([data-form-stars])").forEach((control) => {
       if (control.dataset.listenerAttached) return;
       control.dataset.listenerAttached = "true";
       syncStarControl(control, Number(control.dataset.currentStars || 0));
diff --git a/templates/form.html b/templates/form.html
index fce5e48..23e6d2d 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -83,14 +83,20 @@
         </div>
 
         <div class="field">
-          <label for="stars">Stars</label>
-          {% set current_stars = film.stars if film else 0 %}
-          <select id="stars" name="stars">
-            <option value="0" {% if current_stars|string == '0' %}selected{% endif %}>Unstarred</option>
-            <option value="1" {% if current_stars|string == '1' %}selected{% endif %}>1 star</option>
-            <option value="2" {% if current_stars|string == '2' %}selected{% endif %}>2 stars</option>
-            <option value="3" {% if current_stars|string == '3' %}selected{% endif %}>3 stars</option>
-          </select>
+          <label>Stars</label>
+          {% set current_stars = film.stars if film and film.stars else 0 %}
+          <input type="hidden" id="stars" name="stars" value="{{ current_stars }}">
+          <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 class="field checkbox-field">
-- 
cgit v1.3-2-g0d8e