From f127fad1e43967a1532bde306162bbd62d25817a Mon Sep 17 00:00:00 2001
From: Jose Farias <jose@37signals.com>
Date: Wed, 16 Oct 2024 17:22:11 -0600
Subject: [PATCH] Add flash notices

---
 app/assets/images/alert.svg                   |  1 +
 app/assets/stylesheets/animation.css          |  5 ++++
 app/assets/stylesheets/flash.css              | 23 +++++++++++++++++++
 app/controllers/buckets/views_controller.rb   |  2 +-
 .../controllers/element_removal_controller.js |  7 ++++++
 app/views/layouts/application.html.erb        | 13 +++++++++++
 6 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/images/alert.svg
 create mode 100644 app/assets/stylesheets/flash.css
 create mode 100644 app/javascript/controllers/element_removal_controller.js

diff --git a/app/assets/images/alert.svg b/app/assets/images/alert.svg
new file mode 100644
index 000000000..90c7c0b2d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index 986c73c6a..365946680 100644
--- a/app/assets/stylesheets/animation.css
+++ b/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; }
+}
diff --git a/app/assets/stylesheets/flash.css b/app/assets/stylesheets/flash.css
new file mode 100644
index 000000000..e7523006a
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/controllers/buckets/views_controller.rb b/app/controllers/buckets/views_controller.rb
index b225cffae..c7c9ae42a 100644
--- a/app/controllers/buckets/views_controller.rb
+++ b/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
diff --git a/app/javascript/controllers/element_removal_controller.js b/app/javascript/controllers/element_removal_controller.js
new file mode 100644
index 000000000..9d4172df6
--- /dev/null
+++ b/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()
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f75b3e64c..6b806273a 100644
--- a/app/views/layouts/application.html.erb
+++ b/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>