From edc9d66849fba99ca3d7644ca8bfe1d20b78c012 Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Wed, 13 Nov 2024 22:02:59 +0000
Subject: [PATCH] Add enhanced toast notifications for moderation actions

- Add color-coded toast notifications for different actions
- Use appropriate icons for each action type
- Improve toast positioning and z-index
- Add smooth transitions for better UX
- Remove duplicate toast implementation
---
 .../partials/dashboard_content.html           | 91 ++++++++++++++-----
 1 file changed, 66 insertions(+), 25 deletions(-)

diff --git a/templates/moderation/partials/dashboard_content.html b/templates/moderation/partials/dashboard_content.html
index f2a09c46..dc6754a1 100644
--- a/templates/moderation/partials/dashboard_content.html
+++ b/templates/moderation/partials/dashboard_content.html
@@ -103,30 +103,71 @@
     </div>
 </div>
 
-<div id="toast-success" 
-     class="fixed flex items-center w-full max-w-xs p-4 mb-4 text-gray-400 transition-all duration-300 transform translate-y-full bg-gray-800 rounded-lg shadow opacity-0 bottom-4 right-4"
-     role="alert"
-     x-data="{ show: false }"
-     x-show="show"
-     x-init="$watch('show', value => {
-         if (value) {
-             setTimeout(() => show = false, 3000);
-         }
-     })"
-     @htmx:afterOnLoad="show = true"
-     x-transition:enter="ease-out duration-300"
-     x-transition:enter-start="opacity-0 translate-y-full"
-     x-transition:enter-end="opacity-100 translate-y-0"
-     x-transition:leave="ease-in duration-200"
-     x-transition:leave-start="opacity-100 translate-y-0"
-     x-transition:leave-end="opacity-0 translate-y-full">
-    <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-400 rounded-lg bg-green-900/40">
-        <i class="fas fa-check"></i>
+<div id="toast-container" 
+     x-data="{ 
+        show: false, 
+        message: '',
+        icon: 'check',
+        color: 'green',
+        showToast(msg, icn = 'check', clr = 'green') {
+            this.message = msg;
+            this.icon = icn;
+            this.color = clr;
+            this.show = true;
+            setTimeout(() => this.show = false, 3000);
+        }
+     }"
+     @submission-approved.window="showToast('Submission approved successfully', 'check', 'green')"
+     @submission-rejected.window="showToast('Submission rejected', 'times', 'red')"
+     @submission-escalated.window="showToast('Submission escalated', 'exclamation-triangle', 'yellow')"
+     @submission-updated.window="showToast('Changes saved successfully', 'check', 'blue')"
+     class="fixed z-50 bottom-4 right-4">
+    
+    <div x-show="show"
+         x-transition:enter="ease-out duration-300"
+         x-transition:enter-start="opacity-0 translate-y-full"
+         x-transition:enter-end="opacity-100 translate-y-0"
+         x-transition:leave="ease-in duration-200"
+         x-transition:leave-start="opacity-100 translate-y-0"
+         x-transition:leave-end="opacity-0 translate-y-full"
+         class="flex items-center w-full max-w-xs p-4 text-gray-400 bg-gray-800 rounded-lg shadow">
+        <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 rounded-lg"
+             :class="{
+                'text-green-400 bg-green-900/40': color === 'green',
+                'text-red-400 bg-red-900/40': color === 'red',
+                'text-yellow-400 bg-yellow-900/40': color === 'yellow',
+                'text-blue-400 bg-blue-900/40': color === 'blue'
+             }">
+            <i class="fas" :class="'fa-' + icon"></i>
+        </div>
+        <div class="ml-3 text-sm font-normal" x-text="message"></div>
+        <button type="button" 
+                class="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-300 rounded-lg p-1.5 inline-flex h-8 w-8"
+                @click="show = false">
+            <i class="fas fa-times"></i>
+        </button>
     </div>
-    <div class="ml-3 text-sm font-normal" id="toast-message">Status updated successfully</div>
-    <button type="button" 
-            class="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-300 rounded-lg p-1.5 inline-flex h-8 w-8" 
-            @click="show = false">
-        <i class="fas fa-times"></i>
-    </button>
 </div>
+
+<script>
+    document.body.addEventListener('htmx:afterRequest', function(evt) {
+        if (evt.detail.successful) {
+            const path = evt.detail.requestConfig.path;
+            let event;
+            
+            if (path.includes('approve')) {
+                event = new CustomEvent('submission-approved');
+            } else if (path.includes('reject')) {
+                event = new CustomEvent('submission-rejected');
+            } else if (path.includes('escalate')) {
+                event = new CustomEvent('submission-escalated');
+            } else if (path.includes('edit')) {
+                event = new CustomEvent('submission-updated');
+            }
+            
+            if (event) {
+                window.dispatchEvent(event);
+            }
+        }
+    });
+</script>