Add support to page notifications; notify when saving the user status

js/app.js

@@ -5,6 +5,7 @@ import { websocket } from "./websocket.js";
 import { compensateMessageOrdering, debounce, formatTime, normalizeId } from "./utils.js";
 import { fetchChats, getAppUser, getChatMessages, getChatPicture, getChats, getUser, getUserAbout, sendStatus, updateOnlineStatus } from "./storage.js";
 import { upsertMessages } from "./db.js";
+import { showNotification } from "./notification.js";
 
 let activeChatState = null;
 const messageTone = new Audio("./message.ogg");
@@ -192,6 +193,11 @@ function setupEventListeners() {
 
     elements.inputUserStatus.addEventListener('input', debounce(async function() {
         const result = await sendStatus(elements.inputUserStatus.value);
+        if (result?.success) {
+            showNotification("Status updated successfully!", "", 2000);
+        } else {
+            showNotification("Failed to update status...", "", 2000);
+        }
         console.log(result);
     }, 2000))
 

js/notification.js

@@ -0,0 +1,36 @@
+export async function showNotification(title, subtitle, time = 5000, hint) {
+    const notificationBox = document.createElement('div');
+    notificationBox.classList.add('notification-box');
+    
+    const notificationTitle = document.createElement('h1');
+    notificationTitle.innerHTML = title;
+    
+    const notificationSubtitle = document.createElement('p');
+    notificationSubtitle.innerHTML = subtitle;
+    
+    notificationBox.appendChild(notificationTitle);
+    if (subtitle) {
+        notificationBox.appendChild(notificationSubtitle);
+    }
+    document.querySelector('body').appendChild(notificationBox);
+    
+    let clicked = false;
+
+    notificationBox.addEventListener('click', () => {
+        hideNotification(notificationBox);
+    })
+    
+    await new Promise(requestAnimationFrame);
+    notificationBox.classList.add("shown");
+    
+    await new Promise(r => setTimeout(r, time));
+    if (!clicked) {
+        hideNotification(notificationBox);
+    }
+}
+
+async function hideNotification(notificationBox) {
+    notificationBox.classList.remove('shown');
+    await new Promise(r => setTimeout(r, 1000));
+    notificationBox.remove();
+}

style.css

@@ -899,6 +899,27 @@ input:focus {
     border-bottom-color: var(--text-primary);
 }
 
+
+.notification-box {
+    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--bg-secondary);
+    transform: translateY(-100%);
+    padding: .4em;
+    text-transform: uppercase;
+}
+
+.notification-box.shown {
+    transform: none;
+}
+
+.notification-box h1 {
+    font-size: 1rem;
+}
+
 @media (max-width: 768px) {
     .app-container {
         width: 100%;