Improve Nostr profile/relay settings forms

* Mark input fields as "added" when values were auto-added
* Add suggested values for existing fields (NIP-05/LUD-16)

app/javascript/controllers/field_suggestion_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "input", "badge", "suggestion" ]
+  static values  = { addedValue: String }
+
+  apply (event) {
+    event.preventDefault()
+    const value = event.params.value ?? this.addedValueValue
+
+    if (this.hasInputTarget && value !== undefined) {
+      this.inputTarget.value = value
+      this.checkAdded()
+    }
+  }
+
+  checkAdded () {
+    if (!this.hasInputTarget) return
+
+    const addedValue = this.hasAddedValueValue ? this.addedValueValue : null
+    if (!addedValue) return
+
+    const isMatch = (this.inputTarget.value.trim() === addedValue.trim())
+
+    const emeraldClasses = [
+      "border-emerald-500", "ring-1", "ring-emerald-500",
+      "focus:border-emerald-500", "focus:ring-emerald-500",
+      "bg-emerald-50/20"
+    ]
+    const amberClasses = [
+      "border-amber-400", "ring-1", "ring-amber-400",
+      "focus:border-amber-400", "focus:ring-amber-400"
+    ]
+
+    if (isMatch) {
+      this.inputTarget.classList.remove(...amberClasses)
+      this.inputTarget.classList.add(...emeraldClasses)
+
+      if (this.hasBadgeTarget) {
+        this.badgeTarget.innerHTML = `
+          <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-800">
+            added
+          </span>
+        `.trim()
+        this.badgeTarget.classList.remove("hidden")
+      }
+
+      if (this.hasSuggestionTarget) {
+        this.suggestionTarget.classList.add("hidden")
+      }
+    } else {
+      this.inputTarget.classList.remove(...emeraldClasses)
+
+      if (this.hasBadgeTarget) {
+        this.badgeTarget.classList.add("hidden")
+      }
+
+      if (this.hasSuggestionTarget) {
+        this.suggestionTarget.classList.remove("hidden")
+      }
+    }
+  }
+}

app/javascript/controllers/relay_list_editor_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "list", "template" ]
+  static targets = [ "list", "template", "addedBadge" ]
 
   add (event) {
     event.preventDefault()
@@ -14,4 +14,27 @@ export default class extends Controller {
     const row = event.target.closest("li")
     row.remove()
   }
+
+  checkAdded (event) {
+    const input = event.target
+    const addedValue = input.dataset.addedValue
+    if (!addedValue) return
+
+    const container = input.closest(".relative")
+    const badge = container?.querySelector("[data-relay-list-editor-target='addedBadge']")
+
+    const addedClasses = [
+      "border-emerald-500", "ring-1", "ring-emerald-500",
+      "focus:border-emerald-500", "focus:ring-emerald-500",
+      "bg-emerald-50/20"
+    ]
+
+    if (input.value.trim() === addedValue.trim()) {
+      input.classList.add(...addedClasses)
+      if (badge) badge.classList.remove("hidden")
+    } else {
+      input.classList.remove(...addedClasses)
+      if (badge) badge.classList.add("hidden")
+    }
+  }
 }