Replace stars dropdown with inline star picker on add/edit form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 23 insertions, 2 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));