fix(ui): Move notifications to top-left corner and reduce display time

- 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

@@ -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();
 }
 

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();
 }

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();
 }

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>

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>

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>