Add persistent notification with dismiss and action button (#611)

* Update notification partial

* Update locals args

* Lint

* Move content to body in notification helper

* Avoid dynamic Tailwind class

* Styling

* Add notification to localization file

* Lint

* Normalize locales

* Auto dismiss by default

app/controllers/accounts_controller.rb

@@ -26,7 +26,7 @@ class AccountsController < ApplicationController
         format.html { redirect_to accounts_path, notice: t(".success") }
         format.turbo_stream do
           render turbo_stream: [
-            turbo_stream.append("notification-tray", partial: "shared/notification", locals: { type: "success", content: t(".success") }),
+            turbo_stream.append("notification-tray", partial: "shared/notification", locals: { type: "success", content: { body: t(".success") } }),
             turbo_stream.replace("account_#{@account.id}", partial: "accounts/account", locals: { account: @account })
           ]
         end
@@ -58,7 +58,7 @@ class AccountsController < ApplicationController
     respond_to do |format|
       format.html { redirect_to account_path(@account), notice: t(".success") }
       format.turbo_stream do
-        render turbo_stream: turbo_stream.append("notification-tray", partial: "shared/notification", locals: { type: "success", content: t(".success") })
+        render turbo_stream: turbo_stream.append("notification-tray", partial: "shared/notification", locals: { type: "success", content: { body: t(".success") } })
       end
     end
   end

app/controllers/transactions_controller.rb

@@ -78,7 +78,7 @@ class TransactionsController < ApplicationController
         format.html { redirect_to transaction_url(@transaction), notice: t(".success") }
         format.turbo_stream do
           render turbo_stream: [
-            turbo_stream.append("notification-tray", partial: "shared/notification", locals: { type: "success", content: t(".success") }),
+            turbo_stream.append("notification-tray", partial: "shared/notification", locals: { type: "success", content: { body: t(".success") } }),
             turbo_stream.replace("transaction_#{@transaction.id}", partial: "transactions/transaction", locals: { transaction: @transaction })
           ]
         end

app/helpers/application_helper.rb

@@ -17,7 +17,7 @@ module ApplicationHelper
     content = tag.p(text)
     content = capture &block if block_given?
 
-    render partial: "shared/notification", locals: { type: options[:type], content: content }
+    render partial: "shared/notification", locals: { type: options[:type], content: { body: content } }
   end
 
   # Wrap view with <%= modal do %> ... <% end %> to have it open in a modal

app/views/shared/_notification.html.erb

@@ -1,23 +1,42 @@
-<%# locals: (type: "success", content:) -%>
+<%# locals: (type: "success", content: { title: '', body: ''}, action: { label:'' , url:'' }, options: { auto_dismiss: true }) -%>
 
 <turbo-stream action="append" target="notification-tray">
   <template>
-    <div
-      class="max-w-80 bg-white shadow-xs border border-alpha-black-50 border-solid py-3 px-4 rounded-[10px] text-sm font-medium flex gap-3 animate-[appear-then-fade_5s_300ms_both]"
-      role="<%= type == "error" ? "alert" : "status" %>"
-      data-controller="element-removal"
-      data-action="click->element-removal#remove animationend->element-removal#remove">
+    <% actions = options[:auto_dismiss] ? "animationend->element-removal#remove" : "" %>
+    <% animation = options[:auto_dismiss] ? "animate-[appear-then-fades_5s_300ms_both]" : "animate-[appear_5s_300ms_both]" %>
+    <%= content_tag :div,
+      class: "max-w-80 bg-white shadow-xs border border-alpha-black-50 border-solid py-3 px-4 rounded-[10px] text-sm font-medium flex gap-4 #{animation}",
+      data: {controller: "element-removal", action: actions },
+      role: type == "error" ? "alert" : "status" do -%>
       <% base_class = "w-5 h-5 p-1 text-white flex shrink-0 items-center justify-center rounded-full" %>
       <%= type.in?(["error", "alert"]) ? lucide_icon("x", class: "#{base_class} bg-error") : lucide_icon("check", class: "#{base_class} bg-success") %>
+      <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-1">
+          <% if content[:title].present? %>
+            <h1 class="text-sm text-gray-900 font-medium"><%= content[:title] %></h1>
+          <% end %>
+          <p class="text-sm text-gray-500 font-normal"><%= content[:body] %></p>
+        </div>
 
-      <%= content %>
+        <div class="flex flex-row justify-end gap-2">
+          <% if !options[:auto_dismiss] %>
+            <%= content_tag :a, t(".dismiss"), data: { action: "click->element-removal#remove" }, class:"flex gap-1 font-medium items-center text-gray-900 px-3 py-1.5 rounded-lg cursor-pointer" %>
+          <% end %>
+          <% if action[:label].present? && action[:url].present? %>
+            <%= link_to action[:label], action[:url], class: "flex gap-1 font-medium items-center bg-gray-50 text-gray-900 px-3 py-1.5 rounded-lg" %>
+          <% end %>
+        </div>
+      </div>
 
-      <button aria-label="Close notification" data-action="click->element-removal#remove" class="shrink-0 h-5">
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
-          <path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
-          <circle class="origin-center -rotate-90 animate-[stroke-fill_5s_300ms_forwards]" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
-        </svg>
-      </button>
-    </div>
-  </template>
+      <% if options[:auto_dismiss] %>
+        <div class="shrink-0 h-5">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
+            <path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
+            <circle class="origin-center -rotate-90 animate-[stroke-fill_5s_300ms_forwards]" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
+          </svg>
+        </div>
+      <% end %>
+    <% end -%>
+  </div>
+</template>
 </turbo-stream>

app/views/valuations/create.turbo_stream.erb

@@ -1,4 +1,4 @@
 <%= turbo_stream.replace Valuation.new, body: turbo_frame_tag(dom_id(Valuation.new)) %>
-<%= turbo_stream.append "notification-tray", partial: "shared/notification", locals: { type: "success", content: "Valuation created" } %>
+<%= turbo_stream.append "notification-tray", partial: "shared/notification", locals: { type: "success", content: { body: "Valuation created" } } %>
 <%= turbo_stream.replace "valuations_list", partial: "accounts/account_valuation_list", locals: { valuation_series: @account.valuations.to_series } %>
 <%= turbo_stream.replace "sync_message", partial: "accounts/sync_message", locals: { is_syncing: true } %>

app/views/valuations/destroy.turbo_stream.erb

@@ -1,4 +1,4 @@
 <%= turbo_stream.remove @valuation %>
-<%= turbo_stream.append "notification-tray", partial: "shared/notification", locals: { type: "success", content: "Valuation deleted" } %>
+<%= turbo_stream.append "notification-tray", partial: "shared/notification", locals: { type: "success", content: { body: "Valuation deleted" } } %>
 <%= turbo_stream.replace "valuations_list", partial: "accounts/account_valuation_list", locals: { valuation_series: @account.valuations.to_series } %>
 <%= turbo_stream.replace "sync_message", partial: "accounts/sync_message", locals: { is_syncing: true } %>

config/locales/views/shared/en.yml

@@ -21,6 +21,8 @@ en:
         back is by re-entering it manually via a new entry</p>"
       title: Delete Entry?
   shared:
+    notification:
+      dismiss: Dismiss
     upgrade_notification:
       app_upgraded: The app has been upgraded to %{version}.
       dismiss: Dismiss