Improve asset input copy and Enter-key UX
Label is now just "Assets", button says "Add another". Pressing Enter
in any asset name field adds a new input and focuses it instead of
submitting the form.
change
commit 63d2ab15d8791bd0434c55f7250697a7021c052f
author Claude <noreply@anthropic.com>
date
parent fe1716a2
diff --git a/lib/views/capture.rb b/lib/views/capture.rb
index 81006b3..d5a85ae 100644
--- a/lib/views/capture.rb
+++ b/lib/views/capture.rb
@@ -120,13 +120,14 @@ module Domus
 
               div(class: "save-form") do
                 div(class: "asset-inputs") do
-                  p(class: "asset-inputs-label") { plain "Create assets (optional)" }
+                  p(class: "asset-inputs-label") { plain "Assets" }
                   template("x-for": "(_, i) in assetNames", ":key": "i") do
                     div(class: "asset-input-row") do
                       input(
                         type: "text",
                         name: "asset_names[]",
                         placeholder: "Asset name",
+                        "@keydown.enter.prevent": "addAsset()",
                         "@input": "assetNames[i] = $event.target.value"
                       )
                       button(
@@ -139,8 +140,8 @@ module Domus
                   button(
                     type: "button",
                     class: "asset-add-btn",
-                    "@click": "assetNames.push('')"
-                  ) { plain "+ Add asset" }
+                    "@click": "addAsset()"
+                  ) { plain "Add another" }
                 end
 
                 div(class: "btn-row") do
diff --git a/public/capture.js b/public/capture.js
index 132e2a7..a76ae34 100644
--- a/public/capture.js
+++ b/public/capture.js
@@ -25,6 +25,14 @@ function captureApp() {
       }
     },
 
+    addAsset() {
+      this.assetNames.push('');
+      this.$nextTick(() => {
+        const inputs = document.querySelectorAll('input[name="asset_names[]"]');
+        inputs[inputs.length - 1]?.focus();
+      });
+    },
+
     onSubmit() {
       const inactive = this.activeRef === 'cameraInput' ? this.$refs.fileInput : this.$refs.cameraInput;
       inactive.disabled = true;