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.
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:
× affordance. Users don't know they can click it: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× button in the top-right corner of each toast for manual dismiss:warning severity renders with amber/yellow styling (matching the existing emerald/rose pattern)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) }
}
Add an × button inside the flash div (before the <p> content), wired to the existing lv:clear-flash event.
core_components.ex:19, change values: [:info, :error] → values: [:info, :error, :warning]@kind == :warning && "bg-amber-950/80 text-amber-200 border-amber-500/30"flash_group/1 (line 55-62), add <.flash id="flash-warning" kind={:warning} ... />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)× close button:warning flash messages render with amber styling:info (emerald) and :error (rose) toasts still work