Add user page with profile picture, number and about. change font to Selawik.

js/app.js

@@ -2,8 +2,8 @@ import { config } from "./config.js";
 import { waha } from "./waha.js";
 import { ui, elements } from "./ui.js";
 import { websocket } from "./websocket.js";
-import { compensateMessageOrdering, formatTime, normalizeId } from "./utils.js";
-import { fetchChats, getAppUser, getChatMessages, getChats, updateOnlineStatus } from "./storage.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";
 
 let activeChatState = null;
@@ -20,7 +20,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     await updateOnlineStatus();
     setupEventListeners();
     try {
-        elements.loggedUserName.textContent = (await getAppUser()).pushName;
+        setupElementsData();  
         loadChats();
         checkWahaStatus();
         initWebSocket();
@@ -29,6 +29,25 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 });
 
+async function setupElementsData() {
+    const usr = await getAppUser();
+    const usrPic = (await getChatPicture(usr.id))?.url;
+    const usrInfo = await getUser(usr.id);
+    const usrAbout = (await getUserAbout(usr.id)).about;
+    elements.contentUserName.forEach(e => {
+        e.innerHTML = usr.pushName;
+    })
+    elements.contentUserNumber.forEach(async e => {
+        e.innerHTML = usrInfo.number;
+    })
+    elements.resourceUserPic.forEach(async e => {
+        e.src = usrPic;
+    })
+    elements.valueUserStatus.forEach(async e => {
+        e.value = usrAbout.trim();
+    })
+}
+
 function loadChats() {
     elements.chatsLoader.classList.remove('hidden');
     try {
@@ -168,6 +187,17 @@ function setupEventListeners() {
     })
 
     elements.saveSettingsBtn.addEventListener('click', saveSettings);
+
+    elements.inputUserStatus.addEventListener('input', debounce(async function() {
+        const result = await sendStatus(elements.inputUserStatus.value);
+        console.log(result);
+    }, 2000))
+
+    // elements.selectable.forEach(e => {
+    //     e.addEventListener('pointerdown', () => {
+
+    //     })
+    // })
 }
 
 function initWebSocket() {

js/storage.js

@@ -43,8 +43,20 @@ export function getGroups() {
   return chats.filter(c => c.id.endsWith("@g.us"));
 }
 
-export function getUser(number) {
-  return users.find(user => user.id === number);
+export async function getUser(number) {
+  if (online) {
+    return await waha.getUser(number);
+  } else {
+    return;
+  }
+}
+
+export async function getUserAbout(userId) {
+  if (online) {
+    return await waha.getUserAbout(userId);
+  } else {
+    return;
+  }
 }
 
 export function getChats() {
@@ -125,4 +137,14 @@ export async function getChatPicture(chatId) {
 
 export function isOnline() {
   return online;
+}
+
+export async function sendStatus(text) {
+  if (online) {
+    return await waha.setStatus(text);
+  } else {
+    return {
+      success: false
+    }
+  }
 }

js/ui.js

@@ -33,7 +33,13 @@ export const elements = {
     attachmentInput: document.getElementById('attachment-input'),
     attachmentBtn: document.getElementById('attachment-btn'),
     extraPages: document.querySelectorAll('.extra-page'),
-    desktopSidebarButtons: document.querySelectorAll("#desktop-aside button")
+    desktopSidebarButtons: document.querySelectorAll("#desktop-aside button"),
+    contentUserName: document.querySelectorAll('[data-content="app-user"]'),
+    contentUserNumber: document.querySelectorAll('[data-content="app-user-number"]'),
+    resourceUserPic: document.querySelectorAll('[data-resource="app-user-image"]'),
+    valueUserStatus: document.querySelectorAll('[data-value="app-user-status"]'),
+    inputUserStatus: document.getElementById('profile-page-status-input'),
+    selectable: document.querySelectorAll('.selectable'),
 };
 
 export const ui = {
@@ -92,7 +98,7 @@ export const ui = {
         
         for (const chat of chats) {
             const li = document.createElement('li');
-            li.className = `chat-item ${activeChat && activeChat.id === chat.id ? 'active' : ''}`;
+            li.className = `chat-item selectable ${activeChat && activeChat.id === chat.id ? 'active' : ''}`;
             li.dataset.id = chat.id;
             
             const initials = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
@@ -235,7 +241,7 @@ export const ui = {
         const prevMsgEl = getPrevMessageElem();
         
         const groupDiv = document.createElement('div');
-        groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`;
+        groupDiv.className = `message-group selectable ${isOutgoing ? 'outgoing' : 'incoming'}`;
         groupDiv.id = normalizeId(msg._serialized ? msg : msg.id);
         groupDiv.dataset.timestamp = msg.timestamp;
         groupDiv.dataset.from = msg.participant || msg.from;

js/utils.js

@@ -112,4 +112,12 @@ export function normalizeId(raw) {
         return raw._serialized || raw.user || JSON.stringify(raw);
     }
     return raw;
+}
+
+export function debounce(func, delay) {
+    let timeoutId;
+    return function() {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(func, delay);
+    };
 }

js/waha.js

@@ -102,6 +102,14 @@ export const waha = {
         return request(`/api/${config.session}/chats/${chatId}/picture`);
     },
 
+    async getUser(chatId) {
+        return request(`/api/${config.session}/contacts/${chatId}`);
+    },
+
+    async getUserAbout(chatId) {
+        return request(`/api/contacts/about?contactId=${chatId}&session=${config.session}`);
+    },
+
     async readChat(chatId) {
         return request('/api/sendSeen', {
             method: 'POST',
@@ -143,6 +151,15 @@ export const waha = {
         });
     },
 
+    async setStatus(text) {
+        return request(`/api/${config.session}/profile/status`, {
+            method: 'PUT',
+            body: JSON.stringify({
+                status: text
+            })
+        });
+    },
+
     async sendFileMessage(chatId, file) {
         const fileBase64 = await getBase64(file);
         const body = {