From a53879df9724d05462f2790d889812bcd31c72e6 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Tue, 30 Dec 2025 12:30:47 +0100
Subject: [PATCH] fix(ui): Move notifications to top-left corner and reduce
 display time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move toast container from bottom-right to top-left corner
- Reduce notification display time from 3-5s to 1.5s
- Prevents notifications from blocking message input area
- Applied consistently across all pages (main, DM, contacts)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/static/js/app.js             | 5 ++++-
 app/static/js/contacts.js        | 2 +-
 app/static/js/dm.js              | 5 ++++-
 app/templates/base.html          | 2 +-
 app/templates/contacts_base.html | 2 +-
 app/templates/dm.html            | 2 +-
 6 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index e2367b2..b29e185 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -587,7 +587,10 @@ function showNotification(message, type = 'info') {
     toastBody.textContent = message;
     toastEl.className = `toast bg-${type} text-white`;
 
-    const toast = new bootstrap.Toast(toastEl);
+    const toast = new bootstrap.Toast(toastEl, {
+        autohide: true,
+        delay: 1500
+    });
     toast.show();
 }
 
diff --git a/app/static/js/contacts.js b/app/static/js/contacts.js
index bb7f632..e2b1933 100644
--- a/app/static/js/contacts.js
+++ b/app/static/js/contacts.js
@@ -581,7 +581,7 @@ function showToast(message, type = 'info') {
     // Show toast
     const toast = new bootstrap.Toast(toastEl, {
         autohide: true,
-        delay: 3000
+        delay: 1500
     });
     toast.show();
 }
diff --git a/app/static/js/dm.js b/app/static/js/dm.js
index e6db4ec..5380457 100644
--- a/app/static/js/dm.js
+++ b/app/static/js/dm.js
@@ -717,6 +717,9 @@ function showNotification(message, type = 'info') {
         }
     }
 
-    const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
+    const toast = new bootstrap.Toast(toastEl, {
+        autohide: true,
+        delay: 1500
+    });
     toast.show();
 }
diff --git a/app/templates/base.html b/app/templates/base.html
index cf328c4..a950c9d 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -254,7 +254,7 @@
     </div>
 
     <!-- Toast container for notifications -->
-    <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div class="toast-container position-fixed top-0 start-0 p-3">
         <div id="notificationToast" class="toast" role="alert">
             <div class="toast-header">
                 <strong class="me-auto">mc-webui</strong>
diff --git a/app/templates/contacts_base.html b/app/templates/contacts_base.html
index 4797235..237f5ae 100644
--- a/app/templates/contacts_base.html
+++ b/app/templates/contacts_base.html
@@ -411,7 +411,7 @@
     </div>
 
     <!-- Toast container for notifications (shared across all contact pages) -->
-    <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div class="toast-container position-fixed top-0 start-0 p-3">
         <div id="contactToast" class="toast" role="alert">
             <div class="toast-header">
                 <strong class="me-auto">Contact Management</strong>
diff --git a/app/templates/dm.html b/app/templates/dm.html
index 8a12224..6ff9b61 100644
--- a/app/templates/dm.html
+++ b/app/templates/dm.html
@@ -150,7 +150,7 @@
     </main>
 
     <!-- Toast container for notifications -->
-    <div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div class="toast-container position-fixed top-0 start-0 p-3">
         <div id="notificationToast" class="toast" role="alert">
             <div class="toast-header">
                 <strong class="me-auto">mc-webui</strong>