Toast notifications: add auto-dismiss, close button, and warning severity

[bleuropa]

Summary

The toast notification system (flash/1 component) has several small UX issues that make it feel unfinished. Good starter task — all changes are in 2 files.

Current Behavior

Toasts are rendered via flash/1 in core_components.ex:9-62, triggered by put_flash/2 throughout the app. They slide in from the right with a nice glassmorphism style, but:

1. No auto-dismiss — Toasts persist forever until the user clicks them
2. No close button — The entire toast is clickable to dismiss, but there's no visible × affordance. Users don't know they can click it
3. :warning severity is silently dropped — workspace_live.ex calls put_flash(:warning, ...) for agent-unavailable messages, but flash_group/1 only renders :info and :error (line 19: values: [:info, :error]). Warnings vanish into the void

Expected Behavior

1. Toasts auto-dismiss after ~5 seconds (with a subtle fade-out animation)
2. A small × button in the top-right corner of each toast for manual dismiss
3. :warning severity renders with amber/yellow styling (matching the existing emerald/rose pattern)

Implementation Guide

Auto-dismiss

Add a phx-mounted JS hook or use Process.send_after in the LiveView to clear flash after a timeout. Alternatively, a lightweight JS approach:

// In app.js or a Hook
Hooks.AutoDismissFlash = {
  mounted() {
    this.timer = setTimeout(() => {
      this.el.style.opacity = "0"
      setTimeout(() => this.el.remove(), 300)
    }, 5000)
  },
  destroyed() { clearTimeout(this.timer) }
}

Close button

Add an × button inside the flash div (before the <p> content), wired to the existing lv:clear-flash event.

Warning severity

1. In core_components.ex:19, change values: [:info, :error] → values: [:info, :error, :warning]
2. Add amber styling variant: @kind == :warning && "bg-amber-950/80 text-amber-200 border-amber-500/30"
3. In flash_group/1 (line 55-62), add <.flash id="flash-warning" kind={:warning} ... />

Files to Change

• lib/loomkin_web/components/core_components.ex — flash component (lines 9-62)
• assets/js/app.js — auto-dismiss hook (if using JS approach)
• assets/css/app.css — fade-out animation (optional, for smooth dismiss)

Acceptance Criteria

• Toasts auto-dismiss after ~5 seconds
• Each toast has a visible × close button
• :warning flash messages render with amber styling
• Existing :info (emerald) and :error (rose) toasts still work
• Auto-dismiss timer resets if user hovers over toast (nice-to-have)