aperonight/app/javascript/controllers/flash_message_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["message"]

  connect() {
    console.log("FlashMessageController mounted", this.element);

    // Initialize Lucide icons for this element
    if (typeof lucide !== 'undefined') {
      lucide.createIcons({ within: this.element });
    }

    // Auto-dismiss after 2 seconds
    this.timeout = setTimeout(() => {
      this.close()
    }, 2000)
  }

  disconnect() {
    if (this.timeout) {
      clearTimeout(this.timeout)
    }
  }

  close() {
    this.element.classList.add('opacity-0', 'transition-opacity', 'duration-300')
    setTimeout(() => {
      this.element.remove()
    }, 300)
  }
}