akkounts/app/javascript/controllers/nostr_metadata_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "status", "loading", "content" ]
  static values  = { url: String }

  connect () {
    this.runStep("relays")
  }

  async runStep (step) {
    const messages = {
      relays:  "Looking up your relay list…",
      profile: "Fetching your profile…",
      blossom: "Fetching your media server list…",
      render:  null
    }

    if (messages[step]) {
      this.statusTarget.textContent = messages[step]
    }

    try {
      const headers = (step === "render")
        ? { "Accept": "text/html" }
        : { "Accept": "application/json" }

      const res = await fetch(`${this.urlValue}?step=${step}`, { headers })

      if (!res.ok) {
        throw new Error(`HTTP ${res.status}`)
      }

      if (step === "render") {
        const html = await res.text()
        this.loadingTarget.classList.add("hidden")
        this.contentTarget.classList.remove("hidden")
        this.contentTarget.innerHTML = html
      } else {
        const data = await res.json()
        if (data.next) {
          this.runStep(data.next)
        }
      }
    } catch (error) {
      console.warn("Nostr metadata fetch failed:", error.message)
      this.statusTarget.textContent = "Something went wrong. Please reload."
    }
  }
}