Add flash notices

app/assets/images/alert.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m23.119 20-9.347-17.85a2 2 0 0 0 -3.543 0l-9.348 17.85a2 2 0 0 0 1.772 2.928h18.694a2 2 0 0 0 1.772-2.928zm-12.119-11.577a1 1 0 0 1 2 0v6a1 1 0 1 1 -2 0zm1.05 11.51h-.028a1.528 1.528 0 0 1 -1.522-1.47 1.476 1.476 0 0 1 1.448-1.53h.028a1.527 1.527 0 0 1 1.524 1.467 1.475 1.475 0 0 1 -1.45 1.533z"/></svg>

app/assets/stylesheets/animation.css

@@ -35,3 +35,8 @@
   50% { transform: translateX(-0.2rem); }
   75% { transform: translateX(0.2rem); }
 }
+
+@keyframes appear-then-fade {
+  0%,100% { opacity: 0; }
+  5%,60%  { opacity: 1; }
+}

app/assets/stylesheets/flash.css

@@ -0,0 +1,23 @@
+.flash {
+  display: flex;
+  inset-block-start: var(--block-space);
+  inset-inline-start: 50%;
+  justify-content: center;
+  position: fixed;
+  transform: translate(-50%);
+  z-index: 6;
+}
+
+.flash__inner {
+  animation: appear-then-fade 3s 300ms both;
+  aspect-ratio: 1;
+  background-color: var(--flash-background, var(--color-positive));
+  border-radius: 50%;
+  display: grid;
+  padding: var(--block-space);
+  place-items: center;
+
+  img {
+    grid-area: 1/1;
+  }
+}

app/controllers/buckets/views_controller.rb

@@ -3,7 +3,7 @@ class Buckets::ViewsController < ApplicationController
 
   def create
     @bucket.views.create! filters: view_params.merge(assignee_ids:, tag_ids:).compact_blank
-    redirect_back_or_to bucket_bubbles_path(@bucket), notice: "Filters saved"
+    redirect_back_or_to bucket_bubbles_path(@bucket), notice: "✓"
   end
 
   private

app/javascript/controllers/element_removal_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  remove() {
+    this.element.remove()
+  }
+}

app/views/layouts/application.html.erb

@@ -20,6 +20,19 @@
       <%= yield :header %>
     </header>
 
+    <% if notice = flash[:notice] || flash[:alert] %>
+      <div class="flash" data-controller="element-removal" data-action="animationend->element-removal#remove">
+        <div class="flash__inner shadow" style="<%= "--flash-background: var(--color-negative)" if flash[:alert] %>">
+          <% if flash[:alert] %>
+            <%= image_tag "alert.svg", aria: { hidden: true }, size: 24, class: "colorize--white" %></span>
+          <% else %>
+            <%= image_tag "check.svg", aria: { hidden: true }, size: 24, class: "colorize--white" %></span>
+          <% end %>
+        </div>
+        <span class="for-screen-reader" role="alert" aria-atomic="true"><%= notice %></span>
+      </div>
+    <% end %>
+
     <main id="main">
       <%= yield %>
     </main>