From 258377e5916af3242baba0f74d2d6019da58a03b Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Fri, 7 Feb 2025 14:34:13 +0530
Subject: [PATCH 1/3] Update Django messages to reuse toast component used by
 htmx

This updates the full page load to use the same mechanism to
display the messages from django.contrib.messages as used during htmx
request
---
 hypha/templates/base.html                     |  9 +++--
 .../includes/_toast-placeholder.html          |  4 +-
 hypha/templates/includes/message_item.html    | 37 -------------------
 hypha/templates/includes/messages.html        |  6 ---
 4 files changed, 7 insertions(+), 49 deletions(-)
 delete mode 100644 hypha/templates/includes/message_item.html
 delete mode 100644 hypha/templates/includes/messages.html

diff --git a/hypha/templates/base.html b/hypha/templates/base.html
index eaf66bb019..d36cc8f97c 100644
--- a/hypha/templates/base.html
+++ b/hypha/templates/base.html
@@ -73,10 +73,6 @@
 
         {% include "includes/sprites.html" %}
 
-        {% if messages %}
-            {% include 'includes/messages.html' %}
-        {% endif %}
-
         {% block header %}{% endblock header %}
 
         {% block content_wrapper %}
@@ -168,6 +164,11 @@
         {% include "includes/_modal-placeholder.html" %}
         {% include "includes/_toast-placeholder.html" %}
 
+        {# Display messages from django.contrib.messages as toast #}
+        {% for message in messages %}
+            <template x-init="$nextTick(() => {$dispatch('notice', {type: '{{ message.tags }}', text: '{{ message }}'})})"></template>
+        {% endfor %}
+
         <!-- We still need jQuery for select2, daterangepicker and a few custom scripts. -->
         <!-- Please do not add new features that require jQuery! -->
         <script src="{% static 'js/vendor/jquery.min.js' %}"></script>
diff --git a/hypha/templates/includes/_toast-placeholder.html b/hypha/templates/includes/_toast-placeholder.html
index 253db04b68..23dd1ffa58 100644
--- a/hypha/templates/includes/_toast-placeholder.html
+++ b/hypha/templates/includes/_toast-placeholder.html
@@ -10,7 +10,7 @@
 <script>
     function toastHandler() {
         "use strict";
-        const AUTO_HIDE_TIMEOUT = 2500;
+        const AUTO_HIDE_TIMEOUT = 3000;
         return {
             toasts: [],
             visible: [],
@@ -103,7 +103,7 @@
             @click="remove(toast.id)"
             @mouseenter="pause(toast.id)"
             @mouseleave="resume(toast.id)"
-            class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group"
+            class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group sm:min-w-64"
             :class="{
                     'bg-gray-500': toast.type === 'debug',
                     'bg-green-500': toast.type === 'success',
diff --git a/hypha/templates/includes/message_item.html b/hypha/templates/includes/message_item.html
deleted file mode 100644
index d34ca448c3..0000000000
--- a/hypha/templates/includes/message_item.html
+++ /dev/null
@@ -1,37 +0,0 @@
-{% load i18n heroicons %}
-<li
-    role="alert"
-    aria-live="assertive"
-    aria-atomic="true"
-    x-data="{ show: true, status: '{{ tag }}' }"
-    x-show="show"
-    x-transition:enter="transition ease-in duration-200"
-    x-transition:enter-start="transform opacity-0 translate-y-2"
-    x-transition:enter-end="transform opacity-100"
-    x-transition:leave="transition ease-out duration-500"
-    x-transition:leave-start="transform translate-y-0 opacity-100"
-    x-transition:leave-end="transform -translate-y-full opacity-0"
-    class="flex gap-2 items-center py-2 px-3 mx-auto max-w-lg text-sm font-bold text-white rounded-md shadow-xl max-h-1000px"
-    :class="{
-            'bg-gray-500': status === 'debug',
-            'bg-green-500': status === 'success',
-            'bg-blue-500': status === 'info',
-            'bg-orange-500': status === 'warning',
-            'bg-red-500': status === 'error',
-            }"
-    style="pointer-events:all"
->
-    <span x-show="status == 'info'" aria-hidden="true">
-        {% heroicon_solid "information-circle" size=24 class="inline-block rounded-full" %}
-    </span>
-    <span x-show="status == 'success'" aria-hidden="true">
-        {% heroicon_solid "check-circle" size=24 class="inline-block rounded-full" %}
-    </span>
-    <span class="flex-1">{{ message }}</span>
-    {% if close %}
-        <button type="button" class="p-2 hover:opacity-70" x-on:click="show = ! show">
-            <span class="sr-only">{% trans "Close" %}</span>
-            {% heroicon_outline "x-mark" stroke_width=2 class="inline" aria_hidden=true %}
-        </button>
-    {% endif %}
-</li>
diff --git a/hypha/templates/includes/messages.html b/hypha/templates/includes/messages.html
deleted file mode 100644
index 34aaa2221d..0000000000
--- a/hypha/templates/includes/messages.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{% load heroicons i18n %}
-<ul class="fixed inset-x-0 top-2 z-50 pointer-events-none">
-    {% for message in messages %}
-        {% include "includes/message_item.html" with message=message tag=message.tags close=True %}
-    {% endfor %}
-</ul>

From 87572c70c645d9b4bab49240a76f4d15751934b2 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Sun, 9 Feb 2025 02:03:10 +0530
Subject: [PATCH 2/3] handle large screen and avoid loader

---
 hypha/templates/includes/_toast-placeholder.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/hypha/templates/includes/_toast-placeholder.html b/hypha/templates/includes/_toast-placeholder.html
index 23dd1ffa58..265a4b642a 100644
--- a/hypha/templates/includes/_toast-placeholder.html
+++ b/hypha/templates/includes/_toast-placeholder.html
@@ -85,7 +85,7 @@
 
 <div
     x-data="toastHandler()"
-    class="flex fixed inset-0 flex-col justify-start items-end px-4 w-screen h-screen pointer-events-none"
+    class="flex fixed inset-0 flex-col justify-start items-end px-8 mx-auto w-screen h-screen pointer-events-none max-w-[2200px]"
     @notice.window="add($event.detail)"
 >
     <template x-for="toast of toasts" :key="toast.id">
@@ -103,7 +103,7 @@
             @click="remove(toast.id)"
             @mouseenter="pause(toast.id)"
             @mouseleave="resume(toast.id)"
-            class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group sm:min-w-64"
+            class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white break-words rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group sm:min-w-64"
             :class="{
                     'bg-gray-500': toast.type === 'debug',
                     'bg-green-500': toast.type === 'success',

From ee9f443a1256a756c0b84cf70f8b6091d7a33767 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Mon, 10 Feb 2025 22:24:51 +0530
Subject: [PATCH 3/3] handle large screen and global loader

- handle long urls and words
---
 hypha/static_src/tailwind/main.css            |  5 ++
 .../includes/_toast-placeholder.html          | 59 ++++++++++---------
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/hypha/static_src/tailwind/main.css b/hypha/static_src/tailwind/main.css
index 35a81a4d0c..4c759649c3 100644
--- a/hypha/static_src/tailwind/main.css
+++ b/hypha/static_src/tailwind/main.css
@@ -21,4 +21,9 @@
             )
             10;
     }
+
+    /* see https://github.com/tailwindlabs/tailwindcss/pull/12128 */
+    .break-anywhere {
+        overflow-wrap: anywhere;
+    }
 }
diff --git a/hypha/templates/includes/_toast-placeholder.html b/hypha/templates/includes/_toast-placeholder.html
index 265a4b642a..830c7d241b 100644
--- a/hypha/templates/includes/_toast-placeholder.html
+++ b/hypha/templates/includes/_toast-placeholder.html
@@ -2,8 +2,10 @@
 {% comment %}
 How this works:
 - A htmx response responds with either "showMessage" or "messages" "HX-Trigger" event.
-- htmx traps the event and create another event for the toast layer.
+- htmx traps the event and creates another event for the toast layer.
 - The toast layer listens to the event and adds the toast to the list.
+- Toasts can be paused on hover and dismissed manually
+- Supports different message types with corresponding styles and icons
 {% endcomment %}
 
 <!-- Toast layer -->
@@ -56,36 +58,28 @@
             },
         };
     }
+
+    const createNoticeEvent = (detail) => new CustomEvent("notice", {
+        detail,
+        bubbles: true,
+        cancelable: true,
+        composed: true
+    });
+
     htmx.on("showMessage", (e) => {
-        let message_detail = { type: "success", text: e.detail.value };
-        dispatchEvent(
-            new CustomEvent("notice", {
-                detail: message_detail,
-                bubbles: true,
-                cancelable: true,
-                composed: true,
-            })
-        );
+        dispatchEvent(createNoticeEvent({ type: "success", text: e.detail.value }));
     });
+
     htmx.on("messages", (e) => {
-        e.detail.value.forEach((message) => {
-            let message_detail = { type: message.tags, text: message.message };
-            console.log(message_detail);
-            dispatchEvent(
-                new CustomEvent("notice", {
-                    detail: message_detail,
-                    bubbles: true,
-                    cancelable: true,
-                    composed: true,
-                })
-            );
+        e.detail.value.forEach(message => {
+            dispatchEvent(createNoticeEvent({ type: message.tags, text: message.message }));
         });
     });
 </script>
 
 <div
     x-data="toastHandler()"
-    class="flex fixed inset-0 flex-col justify-start items-end px-8 mx-auto w-screen h-screen pointer-events-none max-w-[2200px]"
+    class="flex fixed inset-0 z-50 flex-col justify-start items-end px-8 mx-auto w-screen h-screen pointer-events-none max-w-[2200px]"
     @notice.window="add($event.detail)"
 >
     <template x-for="toast of toasts" :key="toast.id">
@@ -96,30 +90,39 @@
             x-show="visible.includes(toast)"
             x-transition:enter="transition ease-in duration-200"
             x-transition:enter-start="transform opacity-0 translate-y-2"
-            x-transition:enter-end="transform opacity-100"
+            x-transition:enter-end="transform opacity-100 translate-y-0"
             x-transition:leave="transition ease-out duration-500"
             x-transition:leave-start="transform translate-x-0 opacity-100"
             x-transition:leave-end="transform translate-x-full opacity-0"
             @click="remove(toast.id)"
             @mouseenter="pause(toast.id)"
             @mouseleave="resume(toast.id)"
-            class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white break-words rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group sm:min-w-64"
+            class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-semibold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm break-anywhere hyphens-auto group sm:min-w-64"
             :class="{
-                    'bg-gray-500': toast.type === 'debug',
-                    'bg-green-500': toast.type === 'success',
+                    'bg-neutral-500': toast.type === 'debug',
+                    'bg-green-600': toast.type === 'success',
                     'bg-blue-500': toast.type === 'info',
                     'bg-orange-500': toast.type === 'warning',
                     'bg-red-500': toast.type === 'error',
                     }"
             style="pointer-events:all"
         >
-            <div class="flex gap-2 items-center">
+            <div class="flex gap-4 items-center">
                 <span x-show="toast.type == 'info'" aria-hidden="true">
-                    {% heroicon_solid "information-circle" size=24 class="inline-block rounded-full" %}
+                    {% heroicon_solid "light-bulb" size=24 class="inline-block rounded-full" %}
                 </span>
                 <span x-show="toast.type == 'success'" aria-hidden="true">
                     {% heroicon_solid "check-circle" size=24 class="inline-block rounded-full" %}
                 </span>
+                <span x-show="toast.type == 'warning'" aria-hidden="true">
+                    {% heroicon_solid "exclamation-circle" size=24 class="inline-block rounded-full" %}
+                </span>
+                <span x-show="toast.type == 'error'" aria-hidden="true">
+                    {% heroicon_solid "exclamation-triangle" size=24 class="inline-block rounded-full" %}
+                </span>
+                <span x-show="toast.type == 'debug'" aria-hidden="true">
+                    {% heroicon_solid "wrench" size=24 class="inline-block rounded-full" %}
+                </span>
                 <span x-text="toast.text"></span>
             </div>
             <button class="absolute -top-3 -left-3 invisible p-1 transition-all group-hover:visible">