feat: inform user about automatic reassignments or reset selections

assets/controllers/toast_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from '@hotwired/stimulus'
+import Toastify from 'toastify-js'
+
+export default class extends Controller {
+
+    static values = { text: String, class: String }
+
+    connect() {
+        // Show toast from Stimulus values (existing functionality)
+        if (this.hasTextValue) {
+            this.showToast(this.textValue, this.classValue)
+        }
+
+        // Listen for HTMX notification events
+        document.addEventListener('showNotifications', this.handleNotifications.bind(this))
+    }
+
+    disconnect() {
+        document.removeEventListener('showNotifications', this.handleNotifications.bind(this))
+    }
+
+    handleNotifications(event) {
+        const notifications = event.detail?.notifications || []
+
+        notifications.forEach(notification => {
+            const className = this.getClassForType(notification.type)
+            this.showToast(notification.message, className)
+        })
+    }
+
+    showToast(text, className = '') {
+        Toastify({
+            duration: 5000,
+            text: text,
+            gravity: 'top',
+            position: 'right',
+            className: className,
+            close: true,
+        }).showToast()
+    }
+
+    getClassForType(type) {
+        const typeMap = {
+            'success': 'toastify--success',
+            'warning': 'toastify--warning',
+            'info': 'toastify--info',
+        }
+
+        return typeMap[type] || 'toastify--info'
+    }
+}

assets/styles/_components.css

@@ -3,4 +3,5 @@
 @import "components/button.css";
 @import "components/menu.css";
 @import "components/tooltip.css";
-@import "components/table-responsive.css";
+@import "components/table-responsive.css";
+@import "components/toast.css";

assets/styles/components/toast.css

@@ -0,0 +1,20 @@
+@import "toastify-js/src/toastify.css";
+
+.toastify {
+    @apply shadow-lg rounded;
+}
+
+.toastify--success {
+    @apply text-gray-100;
+    background: theme('colors.emerald.600');
+}
+
+.toastify--warning {
+    @apply text-gray-100;
+    background: theme('colors.red.600');
+}
+
+.toastify--info {
+    @apply text-gray-100;
+    background: theme('colors.primary');
+}