Add an x-close button that fades out the flash with Alpine's
x-transition. Give the bar a light #f8f8f8 background so it reads
as a temporary notification rather than part of the page structure.

https://claude.ai/code/session_01NLGBcJgbiyWGDBGFh8DRas

diff --git a/lib/ketchup/views/dashboard.rb b/lib/ketchup/views/dashboard.rb
index cf279b3..3cf5006 100644
--- a/lib/ketchup/views/dashboard.rb
+++ b/lib/ketchup/views/dashboard.rb
@@ -42,7 +42,7 @@ module Views
 
       undo_path = @flash["undo_path"]
 
-      div(class: "flash-bar", "x-data": true) do
+      div(class: "flash-bar", "x-data": "{ show: true }", "x-show": "show", "x-transition.opacity": true) do
         span(class: "flash-message") { @flash["message"] }
         if undo_path
           button(
@@ -50,6 +50,11 @@ module Views
             "x-on:click": "fetch('#{undo_path}', {method: 'DELETE'}).then(() => location.reload())"
           ) { "Undo" }
         end
+        button(
+          class: "flash-close-btn",
+          "x-on:click": "show = false",
+          **{ "aria-label": "Dismiss" }
+        ) { "\u00d7" }
       end
     end
 
diff --git a/public/css/app.css b/public/css/app.css
index c47b29c..edaf30a 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -114,6 +114,7 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   padding: var(--space-2xs) var(--space-l);
   font-size: var(--step--1);
   color: #666;
+  background: #f8f8f8;
   border-block-end: 1px solid #eee;
 }
 
@@ -127,6 +128,19 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   text-decoration: underline;
 }
 
+.flash-close-btn {
+  all: unset;
+  color: #aaa;
+  cursor: pointer;
+  font-size: var(--step-0);
+  line-height: 1;
+  margin-inline-start: var(--space-2xs);
+}
+
+.flash-close-btn:hover {
+  color: #666;
+}
+
 /* -------------------- */
 /* Dashboard layout */
 /* -------------------- */