Improve notifications, fix styles not being added

Based on https://petr.codes/blog/rails/modern-rails-flash-messages/part-3/

app/assets/stylesheets/application.tailwind.css

@@ -6,3 +6,4 @@
 @import "components/buttons";
 @import "components/forms";
 @import "components/links";
+@import "components/notifications";

app/assets/stylesheets/components/notifications.css

@@ -0,0 +1,39 @@
+@layer components {
+  @keyframes notification-countdown {
+    from { width: 100%; }
+    to   { width: 0; }
+  }
+
+  .notification-enter {
+    @apply transform ease-out duration-300 transition;
+  }
+
+  .notification-enter-from {
+    @apply translate-y-2 opacity-0;
+  }
+
+  .notification-enter-to {
+    @apply translate-y-0 opacity-100;
+  }
+
+  @screen sm {
+    .notification-enter-from {
+      @apply translate-y-0 translate-x-2;
+    }
+    .notification-enter-to {
+      @apply translate-x-0;
+    }
+  }
+
+  .notification-leave {
+    @apply transition ease-in duration-100;
+  }
+
+  .notification-leave-from {
+    @apply opacity-100;
+  }
+
+  .notification-leave-to {
+    @apply opacity-0;
+  }
+}

app/components/notification_component.html.erb

@@ -1,39 +1,49 @@
-<!-- Global notification live region, render this permanently at the end of the document -->
-<div aria-live="assertive" class="fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6 sm:items-start">
-  <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
-    <!--
-      Notification panel, dynamically insert this into the live region when it needs to be displayed
-
-      Entering: "transform ease-out duration-300 transition"
-        From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-        To: "translate-y-0 opacity-100 sm:translate-x-0"
-      Leaving: "transition ease-in duration-100"
-        From: "opacity-100"
-        To: "opacity-0"
-    -->
-    <div class="max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden">
-      <div class="p-4">
-        <div class="flex items-start">
-          <div class="flex-shrink-0">
-            <span class="inline-block h-6 w-6 <%= @icon_color_class %>">
-              <%= render "icons/#{@icon_name}" %>
-            </span>
-          </div>
-          <div class="ml-3 w-0 flex-1 pt-0.5">
-            <p class="text-sm font-medium text-gray-900"><%= @data[:title] %></p>
-            <p class="mt-1 text-sm text-gray-500"><%= @data[:body] %></p>
-          </div>
-          <div class="ml-4 flex-shrink-0 flex">
-            <button class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600">
-              <span class="sr-only">Close</span>
-              <!-- Heroicon name: solid/x -->
-              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-              </svg>
-            </button>
-          </div>
+<div class="hidden max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto mt-4"
+     data-turbo="false"
+     data-notification-action-url="<%= @data.dig(:action, :url) %>"
+     data-notification-action-method="<%= @data.dig(:action, :method) %>"
+     data-notification-timeout="<%= @data[:timeout] %>"
+     data-controller="notification">
+  <div class="rounded-lg shadow-xs overflow-hidden">
+    <div class="p-4">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <span class="inline-block h-6 w-6 <%= @icon_color_class %>">
+            <%= render "icons/#{@icon_name}" %>
+          </span>
+        </div>
+        <div class="ml-3 w-0 flex-1 pt-0.5">
+          <p class="text-sm leading-5 font-medium text-gray-900">
+            <%= @data[:title] %>
+          </p>
+          <% if @data[:body].present? %>
+            <p class="mt-1 text-sm leading-5 text-gray-500">
+              <%= @data[:body] %>
+            </p>
+          <% end %>
+          <% if @data[:action].present? %>
+            <div class="mt-2" data-notification-target="buttons">
+              <a data-turbo-frame="_top" <% if @data.dig(:action, :method) == 'get' %> href="<%= @data.dig(:action, :url) %>" <% else %> href="#" data-action="notification#run" <% end %> class="text-sm leading-5 font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+                <%= @data.dig(:action, :name) %>
+              </a>
+              <button data-action="notification#close" class="ml-6 text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+                <%= t('.dismiss') %>
+              </button>
+            </div>
+          <% end %>
+        </div>
+        <div class="ml-4 flex-shrink-0 flex">
+          <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150" data-action="notification#close">
+            <!-- Heroicon name: solid/x -->
+            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+          </button>
         </div>
       </div>
     </div>
+    <% if @data[:countdown] %>
+      <div class="bg-indigo-600 rounded-lg h-1 w-0" data-notification-target="countdown"></div>
+    <% end %>
   </div>
 </div>

app/components/notification_component.rb

@@ -1,13 +1,22 @@
 # frozen_string_literal: true
 
+# @param type [String] Classic notification type `error`, `alert` and `info` + custom `success`
+# @param data [String, Hash] `String` for backward compatibility,
+#   `Hash` for the new functionality `{title: '', body: '', timeout: 5, countdown: false, action: { url: '', method: '', name: ''}}`.
+#   The `title` attribute for `Hash` is mandatory.
 class NotificationComponent < ViewComponent::Base
   def initialize(type:, data:)
     @type = type
     @data = prepare_data(data)
     @icon_name = icon_name
     @icon_color_class = icon_color_class
+
+    @data[:timeout] ||= 5
+    @data[:action][:method] ||= "get" if @data[:action]
   end
 
+  private
+
   def prepare_data(data)
     case data
     when Hash

app/controllers/dashboard_controller.rb

@@ -3,10 +3,5 @@ class DashboardController < ApplicationController
 
   def index
     @current_section = :dashboard
-    # flash[:error] = 'Notification shown successfully!'
-    flash[:success] = {
-      title: 'Discussion moved',
-      body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit oluptatum tenetur.'
-    }
   end
 end

app/javascript/application.js

@@ -1,3 +1,3 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
-// import "controllers"
+import "controllers"

app/javascript/controllers/hello_controller.js

@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}

app/javascript/controllers/notification_controller.js

@@ -0,0 +1,110 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["buttons", "countdown"]
+
+  connect() {
+    const timeoutSeconds = parseInt(this.data.get("timeout"));
+
+    setTimeout(() => {
+      this.element.classList.remove('hidden');
+      this.element.classList.add('notification-enter', 'notification-enter-from');
+
+      // Trigger transition
+      setTimeout(() => {
+        this.element.classList.add('notification-enter-to');
+      }, 100);
+
+      // Trigger countdown
+      if (this.hasCountdownTarget) {
+        this.countdownTarget.style.animation = 'notification-countdown linear ' + timeoutSeconds + 's';
+      }
+
+    }, 500);
+    this.timeoutId = setTimeout(() => {
+      this.close();
+    }, timeoutSeconds * 1000 + 500);
+  }
+
+  run(e) {
+    e.preventDefault();
+    this.stop();
+    let _this = this;
+    this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-grey-700">Processing...</span>';
+
+    // Call the action
+    fetch(this.data.get("action-url"), {
+      method: this.data.get("action-method").toUpperCase(),
+      dataType: 'script',
+      credentials: "include",
+      headers: {
+        "X-CSRF-Token": this.csrfToken
+      },
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw Error(response.statusText);
+        }
+        return response;
+      })
+      .then(response => response.json())
+      .then(data => {
+        // Set new content
+        _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-green-700">' + data.message + '</span>';
+
+        // Remove hidden class and display the record
+        if (data.inline) {
+          document.getElementById(data.dom_id).classList.toggle('hidden');
+        }
+
+        // Close
+        setTimeout(() => {
+          if (data.inline) {
+            // Just close the notification
+            _this.close();
+          } else {
+            // Reload the page using Turbo
+            window.Turbo.visit(window.location.toString(), {action: 'replace'})
+          }
+        }, 1000);
+      })
+      .catch(error => {
+        console.log(error);
+        _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-red-700">Error!</span>';
+        setTimeout(() => {
+          _this.close();
+        }, 1000);
+      });
+  }
+
+  stop() {
+    clearTimeout(this.timeoutId)
+    this.timeoutId = null
+  }
+
+  continue() {
+    this.timeoutId = setTimeout(() => {
+      this.close();
+    }, parseInt(this.data.get("timeout")));
+  }
+
+  close() {
+    this.element.classList.remove('notification-enter', 'notification-enter-from', 'notification-enter-to');
+    this.element.classList.add('notification-leave', 'notification-leave-from')
+
+    // Trigger transition
+    setTimeout(() => {
+      this.element.classList.add('notification-leave-to');
+    }, 100);
+
+    // Remove element after transition
+    setTimeout(() => {
+      this.element.remove();
+    }, 300);
+  }
+
+  get csrfToken() {
+    const element = document.head.querySelector('meta[name="csrf-token"]')
+    return element.getAttribute("content")
+  }
+}

app/views/layouts/admin.html.erb

@@ -66,15 +66,15 @@
         </div>
       </nav>
 
-      <%= yield %>
-    </div>
-
-    <div id="wrapper">
-      <% flash.each do |type, msg| %>
-        <div class="flash-msg <%= type %>">
-          <p><%= msg %></p>
+      <div class="fixed inset-0 px-4 py-6 pointer-events-none sm:px-6 sm:py-4 sm:items-start sm:justify-end">
+        <div class="flex flex-col items-end justify-center">
+          <% flash.each do |type, data| %>
+            <%= render NotificationComponent.new(type: type, data: data) %>
+          <% end %>
         </div>
-      <% end %>
+      </div>
+
+      <%= yield %>
     </div>
   </body>
 </html>

app/views/layouts/application.html.erb

@@ -57,16 +57,14 @@
             </div>
             <div class="mt-3 px-2 space-y-1">
               <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
-
               <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
-
               <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
             </div>
           </div>
         </div>
       </nav>
 
-      <div class="fixed inset-0 px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end">
+      <div class="fixed inset-0 px-4 py-6 pointer-events-none sm:px-6 sm:py-4 sm:items-start sm:justify-end">
         <div class="flex flex-col items-end justify-center">
           <% flash.each do |type, data| %>
             <%= render NotificationComponent.new(type: type, data: data) %>

tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   content: [
+    './app/assets/stylesheets/components/**/*.css',
     './app/components/**/*.html.erb',
     './app/components/**/*.rb',
     './app/views/**/*.html.erb',