Add account setup workflow; move activeChatState to states.ts to avoid importing app.ts on ui.ts; add ScrollableView to ui.ts to contain and modularize scrollable views; make app layout use ScrollableView add option to delete data on settings page.

Make Vite use gh pages prefix
Convert project to TypeScript; add workflow to build with Vite then publish to GH Pages.
2026-08-16 17:33:59 -03:00 · 2026-07-20 11:26:39 -03:00 · 2026-07-20 11:18:19 -03:00 · 2026-07-19 11:23:08 -03:00 · 2026-07-19 10:42:57 -03:00 · 2026-07-19 10:27:35 -03:00
36 changed files with 2798 additions and 846 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -0,0 +1,39 @@
 name: Build Vite
 on:
  push:
    branches:
      - master
  workflow_dispatch:
 permissions:
  contents: write
 jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [24.x]
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install dependencies & build
        run: |
          npm ci
          npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v4
        with:
          publish_dir: ./dist
          github_token: ${{ secrets.GITHUB_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -1,29 +1,3 @@
-# Licensed to the Apache Software Foundation (ASF) under one
+dist/
 # or more contributor license agreements.  See the NOTICE file
 # distributed with this work for additional information
 # regarding copyright ownership.  The ASF licenses this file
 # to you under the Apache License, Version 2.0 (the
 # "License"); you may not use this file except in compliance
 # with the License.  You may obtain a copy of the License at
 #
 #   http://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing,
 # software distributed under the License is distributed on an
 # "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 # KIND, either express or implied.  See the License for the
 # specific language governing permissions and limitations
 # under the License.
 .DS_Store
 # Generated by package manager
 node_modules/
-
+.idea
 # Generated by Cordova
 /plugins/
 /platforms/
 pandora.apks
 /android/app/build/
 test-upload-key.jks
--- a/README.md
+++ b/README.md
@ -1,4 +1,4 @@
-<img width="1920" height="1080" alt="PANDORA" src="https://github.com/user-attachments/assets/d9d7ba36-4510-47e1-8c49-b1977a26c448" />
+<img width="1920" height="auto" alt="PANDORA" src="https://github.com/user-attachments/assets/d9d7ba36-4510-47e1-8c49-b1977a26c448" />
 Pandora is an open-source web client for the WAHA API.
@ -13,7 +13,7 @@ Pandora is an open-source web client for the WAHA API.
 - [ ] Sending audio messages
 - [x] Sending attachments (sends image/video as such)<sup>4</sup>
 - [x] Notification sound<sup>5</sup>
- [ ] Browser notification
+- [x] Browser notification
 - [x] Download attachments
 - [x] Automatically download images<sup>6</sup>
 - [X] Local message storing
--- a/index.html
+++ b/index.html
@ -1,173 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
    <meta name="HandheldFriendly" content="true" />
    <title>Pandora</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="loading.css">
    <link rel="stylesheet" href="metroicons.css">
    <link rel="manifest" href="./manifest.json">
 </head>
 <body>
    <div class="app-container no-active-chat">
        <aside id="desktop-aside">
            <button id="profile-sidebar-btn" class="icon-btn mif-person mif-2x" data-page="profile-page"></button>
            <button id="chats-sidebar-btn" class="icon-btn mif-qa mif-2x" data-page="chat-page"></button>
            <button id="settings-sidebar-btn" class="icon-btn mif-cog mif-2x" data-page="settings-page"></button>
        </aside>
        <!-- Sidebar -->
        <aside class="sidebar">
            <header class="sidebar-header">
                <p class="app-name">PANDORA</p>
                <div class="user-profile">
                    <!-- <div id="pandora-user-icon" class="avatar user-avatar">P</div> -->
                    <div class="user-info">
                        <h3 id="pandora-username" data-content="app-user">Pandora User</h3>
                    </div>
                </div>
            </header>
            <div class="search-container">
                <div class="search-wrapper">
                    <input type="text" id="chat-search" placeholder="Search or start new chat...">
                </div>
            </div>
            <div class="chat-list-container">
                <div class="loading-chats" id="chats-loader">
                    <div class='loading-animation-wrapper'>
                        <div class="animation">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                        </div>
                    </div>
                </div>
                <ul class="chat-list" id="chat-list">
                    <!-- Chats will be dynamically injected here -->
                </ul>
            </div>
        </aside>
        <div class="extra-page" id="chat-page">
            <!-- Main Chat Area -->
            <main class="chat-area">
                <!-- No Chat Selected State -->
                <div class="no-chat-state" id="no-chat-state">
                    <div class="empty-state-content">
                        <div class="empty-state-icon mif-qa mif-3x">
                        </div>
                        <p>Select a contact to view the conversation or start a new chat.</p>
                    </div>
                </div>
                <!-- Active Chat State -->
                <div class="active-chat-container hidden" id="active-chat-container">
                    <header class="chat-header">
                        <div class="active-contact-info">
                            <!-- <button class="icon-btn back-btn mif-arrow-left mif-2x" id="back-to-sidebar" title="Back to chats"></button> -->
                            <div class="avatar active-avatar" id="active-chat-avatar">C</div>
                            <div>
                                <h3 id="active-chat-name">Contact Name</h3>
                                <span class="contact-status" id="active-chat-status"></span>
                            </div>
                        </div>
                        <div class="chat-actions">
                            <!-- <button class="icon-btn" title="Search in conversation"><i data-lucide="search"></i></button>
                            <button class="icon-btn" title="Call"><i data-lucide="phone"></i></button>
                            <button class="icon-btn" title="Video Call"><i data-lucide="video"></i></button>
                            <button class="icon-btn" title="More Options"><i data-lucide="more-vertical"></i></button> -->
                        </div>
                    </header>
                    <!-- Messages Area -->
                    <div class="messages-container" id="messages-container">
                        <!-- Messages will be dynamically injected here -->
                    </div>
                    <!-- Input Panel -->
                    <footer id="chat-input-panel" class="chat-input-panel">
                        <div class="input-actions-left">
                            <button id="chat-bottom-bar-btn" class="icon-btn mif-expand-less mif-3x" title="Expand"></button>
                        </div>
                        <form class="input-form" id="message-form">
                            <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
                            <button type="submit" class="send-btn mif-paper-plane mif-3x" id="send-button">
                            </button>
                        </form>
                    </footer>
                    <!-- Bottom Bar -->
                    <footer id="chat-bottom-bar" class="chat-expanded-panel alternate-panel collapsed">
                        <input id="attachment-input" style="display: none;" type="file">
                        <button id="attachment-btn" class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
                    </footer>
                </div>
            </main>
        </div>
        <section class="extra-page" id="profile-page">
            <h2 data-content="app-user">Pandora User</h2>
            <div class="content">
                <img id="profile-page-picture" data-resource="app-user-image">
                <div id="profile-page-user-info">
                    <p id="profile-page-user-number" data-content="app-user-number">Pandora User</p>
                    <input id="profile-page-status-input" placeholder="enter your status" data-value="app-user-status">
                </div>
            </div>
        </section>
        <section class="extra-page" id="settings-page">
            <div class="modal-content">
                <header class="modal-header">
                    <h2>SETTINGS</h2>
                </header>
                <div class="modal-body">
                    <h3>server</h3>
                    <div class="form-group">
                        <label for="settings-waha-url">WAHA Server URL</label>
                        <input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
                    </div>
                    <div class="form-group">
                        <label for="settings-session">Session ID</label>
                        <input type="text" id="settings-session" placeholder="session_01...">
                    </div>
                    <div class="form-group">
                        <label for="settings-api-key">API Key (X-API-KEY)</label>
                        <input type="password" id="settings-api-key" placeholder="Enter API Key">
                    </div>
                    <p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
                    <h3>chats</h3>
                    <div class="form-group">
                        <label for="settings-background-image">Chat background image</label>
                        <input type="text" id="settings-background-image" placeholder="Enter image URL">
                    </div>
                    <div class="form-group">
                        <label for="settings-background-opacity">Chat background opacity</label>
                        <input type="number" min="0" max="1" step="0.1" id="settings-background-opacity" placeholder="Enter opacity value">
                    </div>
                </div>
                <footer class="modal-footer">
                    <button class="btn primary-btn" id="save-settings">Save</button>
                </footer>
                <div class="sidebar-footer">
                    <div class="api-status-badge">
                        <span class="pulse-dot"></span>
                        <span id="backend-status-text">Backend connected</span>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- Client-side script loaded as ES Module -->
    <script type="module" src="./js/app.js"></script>
 </body>
 </html>
--- a/js/ui.js
+++ b/js/ui.js
@ -1,396 +0,0 @@
 import { formatTime, normalizeId } from "./utils.js";
 import { getChatPicture, getMessage, getMedia, getMoreChatMessages } from "./storage.js";
 import { getCurrentChat } from "./app.js";
 export const elements = {
    chatList: document.getElementById('chat-list'),
    chatsLoader: document.getElementById('chats-loader'),
    chatSearch: document.getElementById('chat-search'),
    backendStatusText: document.getElementById('backend-status-text'),
    apiStatusIndicator: document.querySelector('.pulse-dot'),
    noChatState: document.getElementById('no-chat-state'),
    activeChatContainer: document.getElementById('active-chat-container'),
    activeChatName: document.getElementById('active-chat-name'),
    activeChatAvatar: document.getElementById('active-chat-avatar'),
    messagesContainer: document.getElementById('messages-container'),
    messageForm: document.getElementById('message-form'),
    messageInput: document.getElementById('message-input'),
    backToSidebarBtn: document.querySelector('.chat-header'),
    sidebar: document.querySelector('.sidebar'),
    appContainer: document.querySelector('.app-container'),
    settingsModal: document.getElementById('settings-page'),
    settingsIconBtn: document.getElementById('settings-sidebar-btn'),
    saveSettingsBtn: document.getElementById('save-settings'),
    inputWahaUrl: document.getElementById('settings-waha-url'),
    inputSession: document.getElementById('settings-session'),
    inputApiKey: document.getElementById('settings-api-key'),
    inputBackgroundImage: document.getElementById('settings-background-image'),
    inputBackgroundOpacity: document.getElementById('settings-background-opacity'),
    loggedUserName: document.getElementById('pandora-username'),
    chatBottomBar: document.getElementById('chat-bottom-bar'),
    chatBottomBarBtn: document.getElementById('chat-bottom-bar-btn'),
    chatInputPanel: document.getElementById('chat-input-panel'),
    attachmentInput: document.getElementById('attachment-input'),
    attachmentBtn: document.getElementById('attachment-btn'),
    extraPages: document.querySelectorAll('.extra-page'),
    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 = {
    showExtraPage(pageId) {
        elements.extraPages.forEach(page => {
            if (page.id != pageId) {
                page.style.display = "none";
            } else {
                page.style.display = "flex";
            }
        })
    },
    /**
    * Switch view state when a contact chat is opened or closed
    */
    toggleChatState(hasActive) {
        if (hasActive) {
            elements.noChatState.classList.add('hidden');
            elements.activeChatContainer.classList.remove('hidden');
        } else {
            elements.noChatState.classList.remove('hidden');
            elements.activeChatContainer.classList.add('hidden');
        }
    },
    /**
    * Scroll message list automatically to bottom
    */
    scrollToBottom() {
        elements.messagesContainer.scrollTop = elements.messagesContainer.scrollHeight;
    },
    /**
    * Update connection status badge in sidebar footer
    */
    updateConnectionStatus(isConnected, text) {
        elements.backendStatusText.textContent = text;
        if (isConnected) {
            elements.apiStatusIndicator.style.backgroundColor = 'var(--online-color)';
            elements.apiStatusIndicator.style.animation = 'pulse 1.8s infinite';
        } else {
            elements.apiStatusIndicator.style.backgroundColor = '#ef4444';
            elements.apiStatusIndicator.style.animation = 'none';
        }
    },
    async renderChatList(chats, activeChat, onChatSelect) {
        elements.chatList.innerHTML = '';
        chats.sort((a, b) => b.timestamp - a.timestamp);
        if (chats.length === 0) {
            elements.chatList.innerHTML = `<li class="loading-chats">No chats found</li>`;
            return;
        }
        for (const chat of chats) {
            const li = document.createElement('li');
            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() : '?';
            const hasUnread = chat.unreadCount && chat.unreadCount > 0;
            const timeStr = formatTime(chat.timestamp || new Date());
            li.innerHTML = `
      <div class="avatar">
        <img
          src=""
          alt="${initials}"
          data-chat-avatar="${chat.id}"
        />
      </div>
      <div class="chat-item-info">
        <div class="chat-item-meta">
          <span class="chat-item-name">${chat.name}</span>
          <span class="chat-item-time">${timeStr}</span>
        </div>
        <div class="chat-item-preview">
          <span class="chat-item-msg" data-chatid="${chat.id}">
            ${chat.lastMessage || 'No messages yet'}
          </span>
          ${hasUnread ? `<span class="unread-badge">${chat.unreadCount}</span>` : ''}
        </div>
      </div>
    `;
            li.addEventListener('click', () => onChatSelect(chat));
            elements.chatList.appendChild(li);
            (async () => {
                try {
                    const picture = await getChatPicture(chat.id);
                    const img = li.querySelector(`img[data-chat-avatar="${chat.id}"]`);
                    if (img) img.src = picture.url ? picture.url : '';
                } catch (e) {
                }
            })();
        }
    },
    async updateChatInChatList(msg) {
        const chat = document.querySelector(`.chat-item[data-id="${msg.fromMe ? msg.to : msg.from}"]`);
        if (chat) {
            const messageItem = chat.querySelector('.chat-item-msg');
            const time = chat.querySelector('.chat-item-time')
            messageItem.innerText = msg.body || msg.text || 'Media message';
            time.innerText = msg.timestamp ? formatTime(msg.timestamp) : Date.now();
            const activeChatState = getCurrentChat();
            if (!msg.fromMe && (!activeChatState || activeChatState.id !== (msg.fromMe ? msg.to : msg.from))) {
                const unreadBadge = chat.querySelector('.unread-badge');
                unreadBadge.innerText = (Number(unreadBadge.innerHTML) || 0) + 1;
            }
        }
    },
    /**
    * Render chat message log inside chat view container
    */
    async renderMessages(messages, activeChatName, userID, chatId) {
        elements.messagesContainer.innerHTML = '';
        if (messages.length === 0) {
            elements.messagesContainer.innerHTML = '<div class="loading-chats">No messages. Say hello!</div>';
            return;
        }
        const loadMore = document.createElement("button");
        loadMore.classList.add("load-more-btn");
        loadMore.innerText = "Load more";
        loadMore.addEventListener('click', () => {
            this.loadMoreMessages(chatId, userID);
        });
        elements.messagesContainer.appendChild(loadMore);
        for (const msg of messages) {
            this.appendSingleMessage(msg, userID, chatId);
        }
        this.scrollToBottom();
    },
    async loadMoreMessages(chatId, userId) {
        const oldest = document.querySelector('.message-group:first-of-type');
        const oldestTimestamp = oldest.dataset.timestamp;
        const oldestId = oldest.id;
        console.log(oldest)
        console.log(oldestId)
        console.log(oldestTimestamp)
        const loadMoreButton = document.querySelector('.load-more-btn');
        loadMoreButton.removeEventListener('click', this.loadMoreMessages);
        const msgs = await getMoreChatMessages(chatId, oldestTimestamp, oldestId);
        msgs.shift();
        msgs.forEach(async msg => {
            loadMoreButton.after(this.generateMessage(msg, userId, chatId));
        });
        loadMoreButton.addEventListener('click', this.loadMoreMessages);
    },
    /**
    * Append a single message (used for optimistic updates immediately upon sending)
    */
    appendSingleMessage(msg, userID, chatId, isLocal = false) {
        elements.messagesContainer.appendChild(this.generateMessage(msg, userID, chatId, isLocal))
    },
    generateTempMessageLink(msg) {
        const a = document.createElement('a');
        a.target = "_blank";
        a.href = msg.media.url;
        if (msg._data?.mimetype?.startsWith('image/')) {
            const img = document.createElement('img');
            img.classList.add('message-image-attachement');
            img.src = msg.media.url;
            a.appendChild(img);
        } else {
            a.textContent = msg.media.filename || "Download file";
            a.download = msg.media.filename;
        }
        return a;
    },
    generateMessage(msg, userID, chatId, isLocal = false) {
        const isOutgoing = msg.fromMe || msg.sender === 'me';
        function getPrevMessageElem() {
            return elements.messagesContainer.lastElementChild;
        }
        const prevMsgEl = getPrevMessageElem();
        const groupDiv = document.createElement('div');
        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;
        const senderName = isOutgoing ? userID : (msg._data.notifyName || msg.from);
        const timeStr = formatTime(msg.timestamp || new Date());
        let statusCheck = '';
        if (isOutgoing) {
            if (msg.status === 'read') {
                statusCheck = '<span class="mif-done_all" style="color: var(--online-color); width:14px; height:14px;"></span>';
            } else if (msg.status === 'delivered') {
                statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
            } else if (msg.status === 'sending') {
                statusCheck = '<span class="mif-earth" style="width:14px; height:14px;"></span>';
            } else {
                statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
            }
        }
        const bubble = document.createElement('div');
        bubble.className = 'message-bubble';
        let prevUid;
        if (msg.participant) {
            prevUid = msg.participant;
        } else {
            prevUid = msg.from;
        }
        if (!isOutgoing && (!prevMsgEl || prevUid !== prevMsgEl.dataset.from)) {
            const senderEl = document.createElement('span');
            senderEl.className = 'message-sender';
            senderEl.textContent = senderName;
            bubble.appendChild(senderEl);
        }
        const contentEl = document.createElement('div');
        contentEl.classList.add('message-content');
        const textEl = document.createElement('div');
        textEl.innerHTML = msg.body || msg.text || "";
        contentEl.appendChild(textEl);
        bubble.appendChild(contentEl);
        if (msg.hasMedia) {
            let a;
            if (isLocal) {
                a = this.generateTempMessageLink(msg);    
            } else {
                a = document.createElement('a');
                a.innerText = `[Request media]`;
                a.target = "_blank";
                const clickListener = async (e) => {
                    a.removeEventListener('click', clickListener);
                    a.innerText = `[Downloading]`;
                    const mediaMsg = msg.media ? msg : await getMessage(chatId, normalizeId(msg._serialized ? msg : msg.id), true);
                    if (!mediaMsg || !mediaMsg?.media.url) {
                        a.addEventListener('click', clickListener);
                        a.innerText = `[Error, click to try again]`
                        return;
                    }
                    const url = new URL(mediaMsg.media.url);
                    const reqID = url.pathname.split('/').filter(Boolean).pop();
                    const { blob, filename } = await getMedia(reqID);
                    const objectUrl = URL.createObjectURL(blob);
                    e.target.href = objectUrl;
                    if (blob.type.startsWith('image/')) {
                        a.textContent = "";
                        const img = document.createElement('img');
                        img.classList.add('message-image-attachement');
                        img.src = objectUrl;
                        bubble.after(img);
                        bubble.querySelector('.message-content').remove();
                    } else {
                        e.target.textContent = filename || `Download ${mediaMsg.media.filename}`;
                    }
                }
                a.addEventListener('click', clickListener);
            }
            contentEl.appendChild(a);
            if (!isLocal && msg._data?.mimetype?.startsWith('image/')) {
                a.click();
            }
        }
        const meta = document.createElement('div');
        meta.className = 'message-meta';
        meta.innerHTML = `<span>${timeStr}</span>${statusCheck}`;
        bubble.appendChild(meta);
        if (isOutgoing) {
            if (prevMsgEl && prevMsgEl.classList.contains('outgoing')) {
                groupDiv.classList.add('same-sender');
            } else {
                groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
            }
        } else if (msg.participant) {
            if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
                groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
            } else groupDiv.classList.add('same-sender');
        } else {
            if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
                groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
            } else groupDiv.classList.add('same-sender');
        }
        groupDiv.appendChild(bubble);
        return groupDiv;
    },
    updateMessage(originalMsgId, generatedMsg) {
        const originalMsg = document.querySelector(`#${originalMsgId}`);
        if (originalMsg) {
            originalMsg.replaceWith(generatedMsg)
        }
    },
    updateMessageTick(id, status) {
        let statusCheck;
        if (status === 'read') {
            statusCheck = '<span class="mif-done_all" style="color: var(--online-color); width:14px; height:14px;"></span>';
        } else if (status === 'delivered') {
            statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
        } else if (status === 'sending') {
            statusCheck = '<span class="mif-earth" style="width:14px; height:14px;"></span>';
        } else {
            statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
        }
        document.getElementById(id).querySelector('.message-meta').outerHTML = statusCheck;
    },
    toggleChatBottomBar() {
        elements.chatBottomBar.classList.toggle("collapsed");
    },
    removeChatMessage(msgId) {
        const message = document.getElementById(msgId);
        if (message) message.remove();
    }
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,18 @@
 {
  "name": "pandora",
  "version": "1.0.0",
  "description": "<img width=\"1920\" height=\"auto\" alt=\"PANDORA\" src=\"https://github.com/user-attachments/assets/d9d7ba36-4510-47e1-8c49-b1977a26c448\" />",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "tsc && vite build && vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^7.0.2",
    "vite": "^8.1.5"
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,20 @@
 {
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "isolatedModules": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "outDir": "./dist",
    "rootDir": "./web/src",
    "sourceMap": true
  },
  "include": ["web/src"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,10 @@
 import { defineConfig } from 'vite';
 export default defineConfig({
  root: 'web',
  base: '/pandora/',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
 });
--- a/web/app.html
+++ b/web/app.html
@ -0,0 +1,175 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
    <meta name="HandheldFriendly" content="true" />
    <title>Pandora</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="loading.css">
    <link rel="stylesheet" href="metroicons.css">
    <link rel="manifest" href="./manifest.json">
 </head>
 <body>
    <div class="app-container no-active-chat">
        <div class="main-holder">
            <aside id="desktop-aside">
                <button id="profile-sidebar-btn" class="icon-btn mif-person mif-2x" data-page="profile-page"></button>
                <button id="chats-sidebar-btn" class="icon-btn mif-qa mif-2x" data-page="chat-page"></button>
                <button id="settings-sidebar-btn" class="icon-btn mif-cog mif-2x" data-page="settings-page"></button>
            </aside>
            <!-- Sidebar -->
            <aside class="sidebar">
                <header class="sidebar-header">
                    <p class="app-name">PANDORA</p>
                    <div class="user-profile">
                        <!-- <div id="pandora-user-icon" class="avatar user-avatar">P</div> -->
                        <div class="user-info">
                            <h3 id="pandora-username" data-content="app-user">Pandora User</h3>
                        </div>
                    </div>
                </header>
                <div class="search-container">
                    <div class="search-wrapper">
                        <input type="text" id="chat-search" placeholder="Search or start new chat...">
                    </div>
                </div>
                <div class="chat-list-container">
                    <div class="loading-chats" id="chats-loader">
                        <div class='loading-animation-wrapper'>
                            <div class="animation">
                                <div class="dot"></div>
                                <div class="dot"></div>
                                <div class="dot"></div>
                                <div class="dot"></div>
                                <div class="dot"></div>
                            </div>
                        </div>
                    </div>
                    <ul class="chat-list" id="chat-list">
                        <!-- Chats will be dynamically injected here -->
                    </ul>
                </div>
            </aside>
            <div class="_scrollableView" id="main-view">
                <div class="extra-page" id="chat-page">
                    <!-- Main Chat Area -->
                    <main class="chat-area">
                        <!-- No Chat Selected State -->
                        <div class="no-chat-state" id="no-chat-state">
                            <div class="empty-state-content">
                                <div class="empty-state-icon mif-qa mif-3x">
                                </div>
                                <p>Select a contact to view the conversation or start a new chat.</p>
                            </div>
                        </div>
                        <!-- Active Chat State -->
                        <div class="active-chat-container hidden" id="active-chat-container">
                            <header class="chat-header">
                                <div class="active-contact-info">
                                    <!-- <button class="icon-btn back-btn mif-arrow-left mif-2x" id="back-to-sidebar" title="Back to chats"></button> -->
                                    <div class="avatar active-avatar" id="active-chat-avatar">C</div>
                                    <div>
                                        <h3 id="active-chat-name">Contact Name</h3>
                                        <span class="contact-status" id="active-chat-status"></span>
                                    </div>
                                </div>
                                <div class="chat-actions">
                                </div>
                            </header>
                            <!-- Messages Area -->
                            <div class="messages-container" id="messages-container">
                                <!-- Messages will be dynamically injected here -->
                            </div>
                            <!-- Input Panel -->
                            <footer id="chat-input-panel" class="chat-input-panel">
                                <div class="input-actions-left">
                                    <button id="chat-bottom-bar-btn" class="icon-btn mif-expand-less mif-3x" title="Expand"></button>
                                </div>
                                <form class="input-form" id="message-form">
                                    <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off">
                                    <button type="submit" class="send-btn mif-paper-plane mif-3x" id="send-button">
                                    </button>
                                </form>
                            </footer>
                            <!-- Bottom Bar -->
                            <footer id="chat-bottom-bar" class="chat-expanded-panel alternate-panel collapsed">
                                <button id="markread-btn" class="icon-btn send-btn mif-done_all mif-2x" title="Mark read"></button>
                                <input id="attachment-input" style="display: none;" type="file">
                                <button id="attachment-btn" class="icon-btn send-btn mif-attachment mif-2x" title="Attach file"></button>
                            </footer>
                        </div>
                    </main>
                </div>
                <section class="extra-page" id="profile-page">
                    <h2 class="big-title" data-content="app-user">Pandora User</h2>
                    <div class="content">
                        <img id="profile-page-picture" data-resource="app-user-image">
                        <div id="profile-page-user-info">
                            <p id="profile-page-user-number" data-content="app-user-number">Pandora User</p>
                            <input id="profile-page-status-input" placeholder="enter your status" data-value="app-user-status">
                        </div>
                    </div>
                </section>
                <section class="extra-page" id="settings-page">
                    <div class="modal-content">
                        <header class="modal-header">
                            <h2>SETTINGS</h2>
                        </header>
                        <div class="modal-body">
                            <h3>server</h3>
                            <div class="form-group">
                                <label for="settings-waha-url">WAHA Server URL</label>
                                <input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
                            </div>
                            <div class="form-group">
                                <label for="settings-session">Session ID</label>
                                <input type="text" id="settings-session" placeholder="session_01...">
                            </div>
                            <div class="form-group">
                                <label for="settings-api-key">API Key (X-API-KEY)</label>
                                <input type="password" id="settings-api-key" placeholder="Enter API Key">
                            </div>
                            <p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
                            <h3>chats</h3>
                            <div class="form-group">
                                <label for="settings-background-image">Chat background image</label>
                                <input type="text" id="settings-background-image" placeholder="Enter image URL">
                            </div>
                            <div class="form-group">
                                <label for="settings-background-opacity">Chat background opacity</label>
                                <input type="number" min="0" max="1" step="0.1" id="settings-background-opacity" placeholder="Enter opacity value">
                            </div>
                        </div>
                        <div class="sidebar-footer">
                            <div class="api-status-badge">
                                <span class="pulse-dot"></span>
                                <span id="backend-status-text">Backend connected</span>
                            </div>
                        </div>
                        <footer class="modal-footer">
                            <button class="btn secondary-btn" id="purge-database">Delete data</button>
                            <button class="btn primary-btn" id="save-settings">Save</button>
                        </footer>
                    </div>
                </section>
            </div>
        </div>
        <!-- Client-side script loaded as ES Module -->
    </div>
    <script type="module" src="./src/app.ts"></script>
 </body>
 </html>
--- a/web/fonts/selawk.ttf
+++ b/web/fonts/selawk.ttf
--- a/web/fonts/selawkb.ttf
+++ b/web/fonts/selawkb.ttf
--- a/web/fonts/selawkl.ttf
+++ b/web/fonts/selawkl.ttf
--- a/web/fonts/selawksb.ttf
+++ b/web/fonts/selawksb.ttf
--- a/web/fonts/selawksl.ttf
+++ b/web/fonts/selawksl.ttf
--- a/web/index.html
+++ b/web/index.html
@ -0,0 +1,84 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, interactive-widget=resizes-content" />
    <meta name="HandheldFriendly" content="true" />
    <title>Pandora</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="loading.css">
    <link rel="stylesheet" href="metroicons.css">
    <link rel="manifest" href="./manifest.json">
 </head>
 <body>
    <div class="app-container _scrollableView">
        <section class="extra-page" id="welcome-page" style="display: flex;">
            <h2 class="big-title" style="margin: 0 auto">Pandora</h2>
            <div class="modal-content">
                <div style="font-size: 20rem; margin: 0 0 auto auto; transform: translateX(40%); opacity: .4;" class="mif-qa mif"></div>
                <div class="modal-body">
                    <p>
                        Welcome to Pandora, we need to get some things set up before you can start messaging. It shouldn't take long.
                    </p>
                    <p>This setup will guide you into linking your WAHA server to Pandora.</p>
                </div>
                <footer class="modal-footer">
                    <button class="btn primary-btn next-page-btn">Continue</button>
                </footer>
            </div>
        </section>
        <section class="extra-page" id="server-page">
            <div class="modal-content">
                <div class="modal-header"></div>
                <div class="modal-body">
                    <h3>where's your server?</h3>
                    <div class="form-group">
                        <label for="settings-waha-url">WAHA Server URL</label>
                        <input type="text" id="settings-waha-url" placeholder="http://localhost:3100">
                    </div>
                    <h3>credentials</h3>
                    <div class="form-group">
                        <label for="settings-session">Session ID</label>
                        <input type="text" id="settings-session" placeholder="session_01...">
                    </div>
                    <div class="form-group">
                        <label for="settings-api-key">API Key</label>
                        <input type="password" id="settings-api-key" placeholder="Enter API Key">
                    </div>
                    <p class="settings-warning">Note: Requests are sent directly from your browser to the WAHA server. Make sure CORS is enabled on your WAHA instance.</p>
                    <hr style="margin-top: auto">
                    <h3>I don't have a server</h3>
                    <p>You can setup a WAHA server on a system running Docker. <a href="https://waha.devlike.pro/docs/how-to/install/">See documentation.</a></p>
                </div>
                <footer class="modal-footer">
                    <button class="btn primary-btn next-page-btn">Connect</button>
                </footer>
            </div>
        </section>
        <section class="extra-page" id="connecting-page">
            <h2 class="big-title" style="margin: 0 auto">Connecting</h2>
            <div class="modal-content">
                <div style="font-size: 20rem; margin: 0 0 auto auto; transform: translateX(40%); opacity: .4;" class="mif-broadcast mif"></div>
                <div class="modal-body">
                    <p style="text-align: center;">Please wait while we test your connection to this WAHA server</p>
                    <p class="dim" id="connecting-status" style="text-align: center;">Asking for server version...</p>
                    <div class='loading-animation-wrapper' id="connecting-animation">
                        <div class="animation">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                        </div>
                    </div>
                </div>
                <footer class="modal-footer">
                    <button id="connecting-next-btn" class="btn primary-btn next-page-btn" style="display: none;">Finish</button>
                </footer>
            </div>
        </section>
    </div>
    <script type="module" src="./src/setup.ts"></script>
 </body>
 </html>
--- a/web/loading.css
+++ b/web/loading.css
--- a/web/metroicons.css
+++ b/web/metroicons.css
--- a/web/public/icon-192.png
+++ b/web/public/icon-192.png
--- a/web/public/icon-512.png
+++ b/web/public/icon-512.png
--- a/web/public/manifest.json
+++ b/web/public/manifest.json
--- a/web/public/message-long.ogg
+++ b/web/public/message-long.ogg
--- a/web/public/message.ogg
+++ b/web/public/message.ogg
--- a/web/src/app.ts
+++ b/web/src/app.ts
@ -1,24 +1,34 @@
-import { config } from "./config.js";
+import { config } from "./config";
-import { waha } from "./waha.js";
+import { waha } from "./waha";
-import { ui, elements } from "./ui.js";
+import { ui, elements, views } from "./ui";
-import { websocket } from "./websocket.js";
+import { websocket } from "./websocket";
-import { compensateMessageOrdering, debounce, formatTime, normalizeId } from "./utils.js";
+import { compensateMessageOrdering, debounce, formatTime, normalizeId } from "./utils";
-import { fetchChats, getAppUser, getChatMessages, getChatPicture, getChats, getUser, getUserAbout, sendStatus, updateOnlineStatus } from "./storage.js";
+import { fetchChats, getAppUser, getChatMessages, getChatPicture, getChats, getUser, getUserAbout, markRead, sendStatus, updateOnlineStatus } from "./storage";
-import { upsertMessages } from "./db.js";
+import { deleteDatabase, upsertMessages } from "./db";
 import { showNotification } from "./notification";
 import type { Chat, Message, WebSocketEvent } from "./types";
 import { activeChatState, setActiveChatState } from "./states";
 let activeChatState = null;
 const messageTone = new Audio("./message.ogg");
 const longPressEvent = new CustomEvent("longpress");
 export let isLoadingChat = false;
 export let notificationAuthorization: NotificationPermission = "default";
 const mainViewEl = document.getElementById("main-view");
 if (!mainViewEl) throw console.error();
 const mainView = views.get(mainViewEl);
 document.addEventListener('DOMContentLoaded', async () => {
-    elements.inputApiKey.value = config.apiKey;
+    updateSidebarPosition();
-    elements.inputWahaUrl.value = config.wahaUrl;
+    askForNotificationPermission();
-    elements.inputSession.value = config.session;
+    if (elements.inputApiKey) elements.inputApiKey.value = config.apiKey;
-    elements.inputBackgroundImage.value = config.bgImg;
+    if (elements.inputWahaUrl) elements.inputWahaUrl.value = config.wahaUrl;
-    elements.inputBackgroundOpacity.value = config.bgOpacity;
+    if (elements.inputSession) elements.inputSession.value = config.session;
-    elements.activeChatContainer.style.setProperty('--background-image', `URL("${config.bgImg}")`);
+    if (elements.inputBackgroundImage) elements.inputBackgroundImage.value = config.bgImg;
-    elements.activeChatContainer.style.setProperty('--background-opacity', `${config.bgOpacity}`);
+    if (elements.inputBackgroundOpacity) elements.inputBackgroundOpacity.value = config.bgOpacity;
    if (elements.activeChatContainer) {
        elements.activeChatContainer.style.setProperty('--background-image', `URL("${config.bgImg}")`);
        elements.activeChatContainer.style.setProperty('--background-opacity', `${config.bgOpacity}`);
    }
    await updateOnlineStatus();
    setupEventListeners();
    try {
@ -31,23 +41,40 @@ document.addEventListener('DOMContentLoaded', async () => {
    }
 });
 async function askForNotificationPermission() {
    notificationAuthorization = await Notification.requestPermission();
 }
 async function setupElementsData() {
-    const usr = await getAppUser();
+    try {
-    const usrPic = (await getChatPicture(usr.id))?.url;
+        const usr = await getAppUser();
-    const usrInfo = await getUser(usr.id);
+        const usrPic = (await getChatPicture(usr.id))?.url;
-    const usrAbout = (await getUserAbout(usr.id)).about;
+        const usrInfo = await getUser(usr.id);
-    elements.contentUserName.forEach(e => {
+        const usrAbout = (await getUserAbout(usr.id))?.about;
-        e.innerHTML = usr.pushName;
+        elements.contentUserName.forEach(e => {
-    })
+            e.innerHTML = usr.pushName || usr.name || '';
-    elements.contentUserNumber.forEach(async e => {
+        })
-        e.innerHTML = usrInfo.number;
+        elements.contentUserNumber.forEach(async e => {
-    })
+            if (usrInfo) e.innerHTML = usrInfo.number;
-    elements.resourceUserPic.forEach(async e => {
+        })
-        e.src = usrPic;
+        elements.resourceUserPic.forEach(async e => {
-    })
+            if (usrPic) e.src = usrPic;
-    elements.valueUserStatus.forEach(async e => {
+        })
-        e.value = usrAbout.trim();
+        elements.valueUserStatus.forEach(async e => {
-    })
+            if (usrAbout) e.value = usrAbout.trim();
        })
    } catch (error: any) {
        console.error(error.message);
    }
 }
 function purgeDatabase(ask: boolean = true) {
    if (ask) {
        if (!(confirm("Are you sure you want to delete all cached messages?") && confirm("This cannot be undone. Proceed?"))) return;
    }
    localStorage.clear();
    deleteDatabase();
    location.reload();
 }
 function loadChats() {
@ -65,7 +92,7 @@ function loadChats() {
                }
            }
        });
-    } catch (error) {
+    } catch (error: any) {
        console.error('Failed to load chats:', error);
        elements.chatList.innerHTML = `
            <li class="loading-chats" style="color: var(--text-primary); text-align: center; padding: 20px;">
@ -82,7 +109,7 @@ function loadChats() {
 }
 let isScrollingProgrammatically = false;
-let scrollTimeout = null;
+let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
 function scrollToChat(smooth = true) {
    isScrollingProgrammatically = true;
@ -103,6 +130,8 @@ function scrollToList(smooth = true) {
 }
 function setupEventListeners() {
    window.addEventListener('resize', updateSidebarPosition);
    if (!window.location.hash) {
        window.location.hash = '';
    }
@ -124,7 +153,7 @@ function setupEventListeners() {
        if (window.innerWidth > 768) return;
        if (isScrollingProgrammatically) return;
-        clearTimeout(scrollTimeout);
+        if (scrollTimeout) clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
            const scrollLeft = elements.appContainer.scrollLeft;
            const width = elements.appContainer.clientWidth;
@ -138,6 +167,14 @@ function setupEventListeners() {
        }, 100);
    });
    elements.appContainer.addEventListener('resize', () => {
        if (window.innerWidth > 768) {
            elements.desktopAside.after(elements.sidebar);
        } else {
            mainViewEl?.insertBefore(elements.sidebar, mainViewEl.firstChild);
        }
    })
    document.addEventListener('keydown', (e) => {
        if (e.code == "Escape") {
            e.preventDefault();
@ -145,8 +182,8 @@ function setupEventListeners() {
        }
    });
-    elements.chatSearch.addEventListener('input', (e) => {
+    elements.chatSearch.addEventListener('input', (e: Event) => {
-        const query = e.target.value.toLowerCase();
+        const query = (e.target as HTMLInputElement).value.toLowerCase();
        const filtered = getChats().filter(chat =>
            chat.name.toLowerCase().includes(query)
        );
@ -170,12 +207,18 @@ function setupEventListeners() {
        if (e.target == e.currentTarget) ui.toggleChatBottomBar();
    });
    elements.markreadBtn.addEventListener('click', async () => {
        if (activeChatState) {
            const result = await markRead(activeChatState.id);
            if (result) ui.updateChatInChatList2(result);
        }
    })
    elements.attachmentBtn.addEventListener('click', () => {
        elements.attachmentInput.click();
    })
-    elements.attachmentInput.addEventListener('change', function () {
+    elements.attachmentInput.addEventListener('change', function (this: HTMLInputElement) {
-        const firstFile = this.files[0];
+        const firstFile = this.files?.[0];
-        sendFileMessage(firstFile);
+        if (firstFile) sendFileMessage(firstFile);
    })
    elements.backToSidebarBtn.addEventListener('click', () => {
@ -184,19 +227,30 @@ function setupEventListeners() {
    elements.desktopSidebarButtons.forEach(sidebarBtn => {
        sidebarBtn.addEventListener('click', () => {
-            ui.showExtraPage(sidebarBtn.dataset.page);           
+            const page = sidebarBtn.dataset.page;
            if (!page) return;
            const pageEl = document.getElementById(page);
            if (!pageEl) return;
            if (page) mainView?.scrollTo(pageEl);
        })
    })
    elements.saveSettingsBtn.addEventListener('click', saveSettings);
    elements.purgeDatabaseButton.addEventListener('click', () => purgeDatabase(true));
    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))
    elements.selectable.forEach(e => {
-        let timerId, longPressed;
+        let timerId: ReturnType<typeof setTimeout>, longPressed: boolean;
        e.addEventListener('mousedown', () => {
            longPressed = false;
@ -204,12 +258,12 @@ function setupEventListeners() {
            timerId = setTimeout(() => {
                longPressed = true;
                e.dispatchEvent(longPressEvent);
-            })
+            }, 500); // 500ms for long press
        })
-        e.addEventListener('click', () => {
+        e.addEventListener('click', (event) => {
            if (longPressed) {
-                e.preventDefault();
+                event.preventDefault();
                clearTimeout(timerId);
            }
        })
@ -220,9 +274,22 @@ function setupEventListeners() {
    })
 }
 function updateSidebarPosition() {                                                                                      
    if (!mainViewEl || !elements.sidebar || !elements.desktopAside) return;
    if (window.innerWidth > 768) {                                                                                                                                                         
        if (elements.sidebar.parentElement !== elements.appContainer) {
            elements.desktopAside.after(elements.sidebar);
        }
    } else {
        if (elements.sidebar.parentElement !== mainViewEl) {
            mainViewEl.insertBefore(elements.sidebar, mainViewEl.firstChild);
        }
    }
 }
 function initWebSocket() {
-    websocket.connect((data) => {
+    websocket.connect((data: WebSocketEvent) => {
        // console.log('[WS] Received event:', data.event, data);
        const ev = data.event;
        if (ev === 'message' || ev === 'message.any' || ev === 'message.ack') {
            handleIncomingMessage(data.payload);
@ -232,28 +299,31 @@ function initWebSocket() {
 }
-async function handleIncomingMessage(msg) {
+async function handleIncomingMessage(msg: Message) {
    if (!msg) return;
    ui.updateChatInChatList(msg);
-    const rawChatId = msg.chatId || msg.from || (msg.chat && msg.chat.id);
+    const rawChatId = msg.chatId || (typeof msg.from === 'string' ? msg.from : (msg.from as any)?._serialized) || (msg.chat && msg.chat.id);
    const msgChatId = normalizeId(rawChatId);
    if (!msgChatId) {
        console.warn('[WS] Could not resolve chatId from payload:', msg);
        return;
    }
    // console.log('[WS] Resolved msgChatId:', msgChatId, '| activeChatState:', activeChatState?.id);
    if (!msg.fromMe) {
        messageTone.play();
    }
    if (notificationAuthorization === "granted") {
        new Notification("New message", { body: msg.body || msg.text });
    }
    if (activeChatState && activeChatState.id === msgChatId) {
-        const msgId = normalizeId(msg.id) || msg.id;
+        const msgId = normalizeId(msg.id as any) || (msg.id as string);
        const exists = document.getElementById(msgId);
        if (!exists) {
-            const scrolled = elements.messagesContainer.scrollTop == elements.messagesContainer.scrollTopMax;
+            const container = elements.messagesContainer;
            const scrolled = container.scrollTop === (container.scrollHeight - container.clientHeight);
            ui.appendSingleMessage({ ...msg, chatId: msgChatId }, activeChatState.name, (await getAppUser()).id);
            if (scrolled) {
                ui.scrollToBottom();
@ -262,16 +332,14 @@ async function handleIncomingMessage(msg) {
    }
 }
-async function selectChat(chat, isPopState = false, smoothScroll = true) {
+async function selectChat(chat: Chat, isPopState = false, smoothScroll = true) {
    if (isLoadingChat) return;
    isLoadingChat = true;
-    activeChatState = chat;
+    setActiveChatState(chat);
    chat.unreadCount = 0;
    // ui.renderChatList(chatsState, activeChatState, selectChat);
    ui.toggleChatState(true);
    elements.activeChatName.textContent = chat.name.toUpperCase();
    elements.activeChatAvatar.textContent = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
@ -312,7 +380,7 @@ async function selectChat(chat, isPopState = false, smoothScroll = true) {
 }
 async function closeActiveChat(isPopState = false) {
-    activeChatState = null;
+    setActiveChatState(null);
    if (window.innerWidth <= 768) {
        scrollToList();
@ -341,7 +409,7 @@ async function sendMessage() {
        sender: 'me',
        timestamp: new Date().toISOString(),
        status: 'sending'
-    };
+    } as any;
    ui.appendSingleMessage(tempMsg, activeChatState.name, (await getAppUser()).id);
    ui.scrollToBottom();
@ -365,7 +433,7 @@ async function sendMessage() {
            if (!activeChatState.id.endsWith('@lid')) {
                await waha.readChat(activeChatState.id);
            }
-        } catch (e) {
+        } catch (e: any) {
            console.warn('readChat failed (non-fatal):', e.message);
        }
@ -374,25 +442,26 @@ async function sendMessage() {
        const tempBubble = document.getElementById(tempMsg.id);
        if (tempBubble) {
            if (responseData && responseData.id) {
-                tempBubble.id = normalizeId(responseData.id);
+                tempBubble.id = normalizeId(responseData.id as any) || tempBubble.id;
            }
            const meta = tempBubble.querySelector('.message-meta');
-            meta.innerHTML = `<span>${formatTime(new Date())}</span><span style="width:14px; height:14px;" class="mif-done">`;
+            if (meta) meta.innerHTML = `<span>${formatTime(new Date())}</span><span style="width:14px; height:14px;" class="mif-done">`;
        }
        activeChatState.lastMessage = text;
-        activeChatState.timestamp = new Date();
+        activeChatState.timestamp = new Date().toISOString();
    } catch (error) {
        console.error('Failed to send message:', error);
        const tempBubble = document.getElementById(tempMsg.id);
        if (tempBubble) {
            const meta = tempBubble.querySelector('.message-meta');
-            meta.innerHTML = `<span style="color: #ef4444;">Failed to send</span>`;
+            if (meta) meta.innerHTML = `<span style="color: #ef4444;">Failed to send</span>`;
        }
    }
 }
-async function sendFileMessage(file) {
+async function sendFileMessage(file: File) {
    if (!activeChatState) return;
    try {
        const tempId = 'temp-' + Date.now();
        const tempMsg = {
@ -410,15 +479,15 @@ async function sendFileMessage(file) {
                url: URL.createObjectURL(file),
                filename: file.name
            }
-        };
+        } as any;
-        ui.appendSingleMessage(tempMsg, activeChatState.name, (await getAppUser()).id, activeChatState.id, true);
+        ui.appendSingleMessage(tempMsg, activeChatState.name, (await getAppUser()).id, true);
        ui.scrollToBottom();
        const result = await waha.sendFileMessage(activeChatState.id, file);
        ui.removeChatMessage(tempId);
-        ui.appendSingleMessage(result.id, activeChatState.name, (await getAppUser()).id, activeChatState.id);
+        ui.appendSingleMessage(result, activeChatState.name, (await getAppUser()).id);
-    } catch (error) {
+    } catch (error: any) {
        console.error(error.message);
    }
 }
--- a/web/src/config.ts
+++ b/web/src/config.ts
@ -1,13 +1,20 @@
-// Client Configuration State & Storage Manager
+export interface Config {
    wahaUrl: string;
    session: string;
    apiKey: string;
    bgImg: string;
    bgOpacity: string;
    save(url: string, session: string, apiKey: string, bgImg: string, bgOpacity: string): void;
 }
-export const config = {
+export const config: Config = {
-    wahaUrl: localStorage.getItem('waha_url') || 'http://inspiran.beetal-castor.ts.net:3100',
+    wahaUrl: localStorage.getItem('waha_url') || '',
-    session: localStorage.getItem('waha_session') || 'session_01kxc62bk5fs8vh4v127k88a7j',
+    session: localStorage.getItem('waha_session') || '',
    apiKey: localStorage.getItem('waha_api_key') || '',
    bgImg: localStorage.getItem('background_image') || '',
    bgOpacity: localStorage.getItem('background_opacity') || '0.4',
-    save(url, session, apiKey, bgImg, bgOpacity) {
+    save(url: string, session: string, apiKey: string, bgImg: string, bgOpacity: string): void {
        this.wahaUrl = url.trim().replace(/\/$/, "");
        this.session = session.trim();
        this.apiKey = apiKey.trim();
--- a/web/src/db.ts
+++ b/web/src/db.ts
@ -1,25 +1,26 @@
-import { normalizeId } from "./utils.js";
+import { normalizeId } from "./utils";
 import type { Chat, Message, StoredMedia } from "./types";
 const DB_NAME = "pandora";
 const DB_VERSION = 6;
-let dbPromise = null;
+let dbPromise: Promise<IDBDatabase> | null = null;
-function openDb() {
+function openDb(): Promise<IDBDatabase> {
  if (dbPromise) return dbPromise;
  dbPromise = new Promise((resolve, reject) => {
    const req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onupgradeneeded = (e) => {
+    req.onupgradeneeded = () => {
      const db = req.result;
-      const tx = req.transaction;
+      const tx = req.transaction!;
      if (!db.objectStoreNames.contains("chats")) {
        const store = db.createObjectStore("chats", { keyPath: "id" });
        store.createIndex("timestamp", "timestamp", { unique: false });
      }
-      let msgStore;
+      let msgStore: IDBObjectStore;
      if (!db.objectStoreNames.contains("messages")) {
        msgStore = db.createObjectStore("messages", { keyPath: "id" });
        msgStore.createIndex("from", "from", { unique: false });
@ -33,22 +34,21 @@ function openDb() {
        msgStore.createIndex("chatId_timestamp", ["chatId", "timestamp"], { unique: false });
      }
-      if (db.objectStoreNames.contains("messages")) {
+      // Migration logic
-        msgStore.openCursor().onsuccess = (event) => {
+      msgStore.openCursor().onsuccess = (event) => {
-          const cursor = event.target.result;
+        const cursor = (event.target as IDBRequest<IDBCursorWithValue | null>).result;
-          if (cursor) {
+        if (cursor) {
-            const m = cursor.value;
+          const m = cursor.value as Message;
-            const from = normalizeId(m.from);
+          const from = normalizeId(m.from);
-            const to = normalizeId(m.to);
+          const to = normalizeId(m.to);
-            const chatId = normalizeId(m.chatId) || (m.fromMe ? to : from);
+          const chatId = normalizeId(m.chatId) || (m.fromMe ? to : from);
-            if (!m.chatId && chatId) {
+          if (!m.chatId && chatId) {
-              m.chatId = chatId;
+            m.chatId = chatId;
-              cursor.update(m);
+            cursor.update(m);
            }
            cursor.continue();
          }
-        };
+          cursor.continue();
-      }
+        }
      };
      if (!db.objectStoreNames.contains("media")) {
        db.createObjectStore("media", { keyPath: "reqId" });
@ -62,7 +62,7 @@ function openDb() {
  return dbPromise;
 }
-export async function upsertChats(chats) {
+export async function upsertChats(chats: Chat[]): Promise<void> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
@ -84,7 +84,7 @@ export async function upsertChats(chats) {
  });
 }
-export async function loadChatsSorted() {
+export async function loadChatsSorted(): Promise<Chat[]> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
@ -92,9 +92,9 @@ export async function loadChatsSorted() {
    const store = tx.objectStore("chats");
    const idx = store.index("timestamp");
-    const result = [];
+    const result: Chat[] = [];
    idx.openCursor(null, "prev").onsuccess = (e) => {
-      const cursor = e.target.result;
+      const cursor = (e.target as IDBRequest<IDBCursorWithValue | null>).result;
      if (cursor) {
        result.push(cursor.value);
        cursor.continue();
@ -107,7 +107,20 @@ export async function loadChatsSorted() {
  });
 }
-function mapMessage(m) {
+export async function loadChat(chatId: string): Promise<Chat | undefined> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
    const tx = db.transaction("chats", "readonly");
    const store = tx.objectStore("chats");
    const req = store.get(chatId);
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
 }
 function mapMessage(m: Message): any {
  const from = normalizeId(m.from);
  const to = normalizeId(m.to);
  const chatId = normalizeId(m.chatId) || (m.fromMe ? to : from);
@ -126,7 +139,7 @@ function mapMessage(m) {
  }
 }
-export async function upsertMessages(messages) {
+export async function upsertMessages(messages: Message[]): Promise<void> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
@ -142,7 +155,7 @@ export async function upsertMessages(messages) {
  });
 }
-export async function loadLatestMessages(chatId, limit = 50) {
+export async function loadLatestMessages(chatId: string, limit: number = 50): Promise<Message[]> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
@ -150,12 +163,12 @@ export async function loadLatestMessages(chatId, limit = 50) {
    const store = tx.objectStore("messages");
    const idx = store.index("chatId_timestamp");
-    const out = [];
+    const out: Message[] = [];
    const range = IDBKeyRange.bound([chatId, -Infinity], [chatId, Infinity]);
    idx.openCursor(range, "prev").onsuccess = (e) => {
-      const cursor = e.target.result;
+      const cursor = (e.target as IDBRequest<IDBCursorWithValue | null>).result;
      if (!cursor) return resolve(out);
      out.push(cursor.value);
@ -167,7 +180,7 @@ export async function loadLatestMessages(chatId, limit = 50) {
  });
 }
-export async function loadOlderMessages(chatId, oldestTimestamp, oldestId, limit = 50) {
+export async function loadOlderMessages(chatId: string, oldestTimestamp: any, oldestId: string, limit: number = 50): Promise<Message[]> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
@ -175,7 +188,7 @@ export async function loadOlderMessages(chatId, oldestTimestamp, oldestId, limit
    const store = tx.objectStore("messages");
    const idx = store.index("cidTimestampId");
-    const out = [];
+    const out: Message[] = [];
    const parsedTimestamp = isNaN(oldestTimestamp) ? oldestTimestamp : Number(oldestTimestamp);
@ -187,7 +200,7 @@ export async function loadOlderMessages(chatId, oldestTimestamp, oldestId, limit
    );
    idx.openCursor(range, "prev").onsuccess = (e) => {
-      const cursor = e.target.result;
+      const cursor = (e.target as IDBRequest<IDBCursorWithValue | null>).result;
      if (!cursor) return resolve(out);
      out.push(cursor.value);
@ -200,7 +213,7 @@ export async function loadOlderMessages(chatId, oldestTimestamp, oldestId, limit
  });
 }
-export async function upsertMedia(reqId, blob, filename) {
+export async function upsertMedia(reqId: string, blob: Blob, filename: string): Promise<void> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
@ -218,7 +231,7 @@ export async function upsertMedia(reqId, blob, filename) {
  });
 }
-export async function loadMedia(reqId) {
+export async function loadMedia(reqId: string): Promise<StoredMedia | undefined> {
  const db = await openDb();
  return new Promise((resolve, reject) => {
@ -230,3 +243,7 @@ export async function loadMedia(reqId) {
    req.onerror = () => reject(req.error);
  });
 }
 export function deleteDatabase() {
  indexedDB.deleteDatabase(DB_NAME);
 }
--- a/web/src/notification.ts
+++ b/web/src/notification.ts
@ -0,0 +1,37 @@
 export async function showNotification(title: string, subtitle: string, time: number = 5000, _hint?: string): Promise<void> {
    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', () => {
        clicked = true;
        hideNotification(notificationBox);
    })
    await new Promise(requestAnimationFrame);
    notificationBox.classList.add("shown");
    await new Promise<void>(r => setTimeout(r, time));
    if (!clicked) {
        hideNotification(notificationBox);
    }
 }
 async function hideNotification(notificationBox: HTMLDivElement): Promise<void> {
    notificationBox.classList.remove('shown');
    await new Promise<void>(r => setTimeout(r, 1000));
    notificationBox.remove();
 }
--- a/web/src/setup.ts
+++ b/web/src/setup.ts
@ -0,0 +1,57 @@
 import { config } from "./config";
 import { elements, ScrollableView, ui, views } from "./ui";
 import { waha } from "./waha";
 const page = views.get(elements.appContainer);
 page?.scrollToIndex(0);
 const statusConnection = document.getElementById("connecting-status");
 const connectingPage = document.getElementById("connecting-page");
 const loading = document.getElementById("connecting-animation");
 const connectingNextBtn = document.getElementById("connecting-next-btn");
 const settingsApiKey = document.getElementById("settings-api-key") as HTMLInputElement;
 const settingsSession = document.getElementById("settings-session") as HTMLInputElement;
 const settingsWahaURL = document.getElementById("settings-waha-url") as HTMLInputElement;
 if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
 }
 window.addEventListener('load', () => {
    window.scrollTo(0, 0);
    if (localStorage.getItem('setupComplete') == 'true') {
        window.location.href = 'app.html';
    }
 });
 if (connectingPage) {
    connectingPage.addEventListener('intoView', () => {
        testConnection();
    })
 }
 connectingNextBtn?.addEventListener('click', () => {
    localStorage.setItem('setupComplete', 'true');
    window.location.href = "app.html";
 })
 async function testConnection() {
    console.log(settingsWahaURL?.value)
    config.save(settingsWahaURL?.value, settingsSession?.value, settingsApiKey?.value, "", "");
    if (!statusConnection || !connectingNextBtn || !loading) return;
    statusConnection.textContent = "Asking for server version...";
    try {
        const resp = await waha.getMyInfo();
        if (resp.pushName != null) {
            statusConnection.textContent = `Logged in as ${resp.pushName}`
            connectingNextBtn.style.display = 'flex';
            loading.style.display = 'none';
        } else {
            page?.previows();
        }
    } catch (e) {
        console.log(e);
        page?.previows();
    }
 }
--- a/web/src/states.ts
+++ b/web/src/states.ts
@ -0,0 +1,7 @@
 import { Chat } from "./types";
 export let activeChatState: Chat | null = null;
 export function setActiveChatState(value: Chat | null) {
    activeChatState = value;
 }
--- a/web/src/storage.ts
+++ b/web/src/storage.ts
@ -1,10 +1,11 @@
-import { loadChatsSorted, loadLatestMessages, loadMedia, loadOlderMessages, upsertChats, upsertMedia, upsertMessages } from "./db.js";
+import { loadChat, loadChatsSorted, loadLatestMessages, loadMedia, loadOlderMessages, upsertChats, upsertMedia, upsertMessages } from "./db";
-import { waha } from "./waha.js";
+import { waha } from "./waha";
 import type { Chat, Message, AppUser, ContactInfo, UserAboutResponse, ChatPictureResponse, StatusResponse, DownloadedMedia } from "./types";
 let online = false;
-let chats = [];
+let chats: Chat[] = [];
-export async function updateOnlineStatus() {
+export async function updateOnlineStatus(): Promise<void> {
  try {
    await waha.getVersion();
    online = true;
@ -14,17 +15,17 @@ export async function updateOnlineStatus() {
  }
 }
-export async function fetchChats() {
+export async function fetchChats(): Promise<void> {
  if (online) {
    await getRemoteChats()
  }
  chats = await loadChatsSorted();
 }
-export async function getRemoteChats() {
+export async function getRemoteChats(): Promise<void> {
  const u = await waha.getChats();
-  const mapped = u.map(chat => ({
+  const mapped: Chat[] = u.map(chat => ({
    id: chat.id,
    name: chat.name,
    lastMessage: chat.lastMessage,
@ -35,15 +36,15 @@ export async function getRemoteChats() {
  await upsertChats(mapped);
 }
-export function getUsers() {
+export function getUsers(): Chat[] {
  return chats.filter(c => c.id.endsWith("@c.us"));
 }
-export function getGroups() {
+export function getGroups(): Chat[] {
  return chats.filter(c => c.id.endsWith("@g.us"));
 }
-export async function getUser(number) {
+export async function getUser(number: string): Promise<ContactInfo | undefined> {
  if (online) {
    return await waha.getUser(number);
  } else {
@ -51,7 +52,7 @@ export async function getUser(number) {
  }
 }
-export async function getUserAbout(userId) {
+export async function getUserAbout(userId: string): Promise<UserAboutResponse | undefined> {
  if (online) {
    return await waha.getUserAbout(userId);
  } else {
@ -59,25 +60,26 @@ export async function getUserAbout(userId) {
  }
 }
-export function getChats() {
+export function getChats(): Chat[] {
  return chats;
 }
-export async function getAppUser() {
+export async function getAppUser(): Promise<AppUser> {
  if (online) {
    const info = await waha.getMyInfo();
-    localStorage.setItem('pandora-last-username', info.name);
+    localStorage.setItem('pandora-last-username', info.pushName || info.name || '');
    localStorage.setItem('pandora-last-userid', info.id);
    return info;
  } else {
    return {
        pushName: localStorage.getItem('pandora-last-username') || 'Unknown',
        name: localStorage.getItem('pandora-last-username') || 'Unknown',
        id: localStorage.getItem('pandora-last-userid') || 'Unknown'
-      }
+      } as AppUser;
  }
 }
-export async function getMessage(chatId, msgId, downloadMedia) {
+export async function getMessage(chatId: string, msgId: string, downloadMedia: boolean): Promise<Message> {
  if (online) {
    const newMessage = await waha.getSingleChatMessage(chatId, msgId, downloadMedia);
    upsertMessages([newMessage]);
@ -88,14 +90,14 @@ export async function getMessage(chatId, msgId, downloadMedia) {
      body: "You're offline",
      from: "system",
      timestamp: new Date().toISOString()
-    };
+    } as Message;
  }
 }
-export async function getMedia(reqId) {
+export async function getMedia(reqId: string): Promise<DownloadedMedia | undefined> {
    const cached = await loadMedia(reqId);
    if (cached) {
-      return cached;
+      return { blob: cached.blob, filename: cached.filename };
    }
    try {
@ -109,7 +111,7 @@ export async function getMedia(reqId) {
    }
 }
-export async function getChatMessages(chatId) {
+export async function getChatMessages(chatId: string): Promise<Message[]> {
  if (online) {
    const newMessages = await waha.getChatMessages(chatId);
    upsertMessages(newMessages);
@ -119,7 +121,7 @@ export async function getChatMessages(chatId) {
  }
 }
-export async function getMoreChatMessages(chatId, oldestTimestamp, oldestId, limit = 50) {
+export async function getMoreChatMessages(chatId: string, oldestTimestamp: any, oldestId: string): Promise<Message[]> {
  if (online) {
    return waha.getChatMessages(chatId, oldestTimestamp);
  } else {
@ -127,7 +129,7 @@ export async function getMoreChatMessages(chatId, oldestTimestamp, oldestId, lim
  }
 }
-export async function getChatPicture(chatId) {
+export async function getChatPicture(chatId: string): Promise<ChatPictureResponse> {
  if (online) {
    return await waha.getChatPicture(chatId);
  } else {
@ -135,11 +137,11 @@ export async function getChatPicture(chatId) {
  }
 }
-export function isOnline() {
+export function isOnline(): boolean {
  return online;
 }
-export async function sendStatus(text) {
+export async function sendStatus(text: string): Promise<StatusResponse> {
  if (online) {
    return await waha.setStatus(text);
  } else {
@ -148,3 +150,18 @@ export async function sendStatus(text) {
    }
  }
 }
 export async function markRead(chatId: string): Promise<Chat | undefined> {
  if (online) {
    await waha.readChat(chatId);
  }
  const chat = await loadChat(chatId);
  if (chat) {
      chat.unreadCount = 0;
      // Note: upsertMessages was called with [chat] in JS, but chat is a Chat object, not Message.
      // Keeping JS behavior but chat is Chat type here.
      await upsertChats([chat]);
  }
  return chat;
 }
--- a/web/src/types.ts
+++ b/web/src/types.ts
@ -0,0 +1,124 @@
 /** Represents a chat entry in the sidebar */
 export interface Chat {
  id: string;
  name: string;
  lastMessage: string;
  timestamp: number | string | Date;
  unreadCount: number;
 }
 /** Raw chat object returned from the WAHA API */
 export interface WahaChat {
  id: string | { _serialized?: string; user?: string };
  chatId?: string;
  name?: string;
  unreadCount?: number;
  lastMessage?: {
    body?: string;
    timestamp?: number | string;
  };
  lastMessageText?: string;
 }
 /** Message data sub-object (_data field) */
 export interface MessageData {
  notifyName?: string;
  mimetype?: string;
  [key: string]: unknown;
 }
 /** Media attachment info */
 export interface MediaInfo {
  url: string;
  filename?: string;
 }
 /** A WhatsApp message */
 export interface Message {
  _data?: MessageData;
  _serialized?: string | { _serialized?: string; user?: string };
  id: string | { _serialized?: string; user?: string };
  body?: string;
  text?: string;
  from?: string;
  to?: string;
  fromMe?: boolean;
  sender?: string;
  timestamp: number | string;
  status?: string;
  ack?: number;
  hasMedia?: boolean;
  media?: MediaInfo;
  chatId?: string;
  chat?: { id: string };
  participant?: string;
 }
 /** Temporary message used for optimistic UI updates */
 export interface TempMessage extends Message {
  status: string;
 }
 /** File-sending temporary message */
 export interface TempFileMessage extends TempMessage {
  _data: MessageData;
  hasMedia: true;
  media: MediaInfo;
 }
 /** WAHA version response */
 export interface VersionResponse {
  version?: string;
 }
 /** WAHA user info (getMyInfo) */
 export interface AppUser {
  id: string;
  pushName?: string;
  name?: string;
 }
 /** WAHA contact info */
 export interface ContactInfo {
  number: string;
  [key: string]: unknown;
 }
 /** WAHA user about response */
 export interface UserAboutResponse {
  about?: string;
 }
 /** Chat picture response */
 export interface ChatPictureResponse {
  url?: string;
 }
 /** Status update response */
 export interface StatusResponse {
  success?: boolean;
 }
 /** WebSocket event payload envelope */
 export interface WebSocketEvent {
  event: string;
  payload: Message;
 }
 /** IndexedDB stored media record */
 export interface StoredMedia {
  reqId: string;
  blob: Blob;
  filename: string;
 }
 /** Downloaded media result */
 export interface DownloadedMedia {
  blob: Blob;
  filename: string;
 }
 /** Message with _time field used during ordering compensation */
 export interface MessageWithTime extends Message {
  _time: number;
 }
--- a/web/src/ui.ts
+++ b/web/src/ui.ts
@ -0,0 +1,553 @@
 import { formatTime, normalizeId } from "./utils";
 import { getChatPicture, getMessage, getMedia, getMoreChatMessages } from "./storage";
 import type { Chat, Message } from "./types";
 import { activeChatState } from "./states";
 export const elements = {
    chatList: document.getElementById('chat-list') as HTMLUListElement,
    chatsLoader: document.getElementById('chats-loader') as HTMLDivElement,
    chatSearch: document.getElementById('chat-search') as HTMLInputElement,
    backendStatusText: document.getElementById('backend-status-text') as HTMLSpanElement,
    apiStatusIndicator: document.querySelector('.pulse-dot') as HTMLSpanElement,
    noChatState: document.getElementById('no-chat-state') as HTMLDivElement,
    activeChatContainer: document.getElementById('active-chat-container') as HTMLDivElement,
    activeChatName: document.getElementById('active-chat-name') as HTMLHeadingElement,
    activeChatAvatar: document.getElementById('active-chat-avatar') as HTMLDivElement,
    messagesContainer: document.getElementById('messages-container') as HTMLDivElement,
    messageForm: document.getElementById('message-form') as HTMLFormElement,
    messageInput: document.getElementById('message-input') as HTMLInputElement,
    backToSidebarBtn: document.querySelector('.chat-header') as HTMLElement,
    sidebar: document.querySelector('.sidebar') as HTMLElement,
    appContainer: document.querySelector('.app-container') as HTMLElement,
    settingsModal: document.getElementById('settings-page') as HTMLElement,
    settingsIconBtn: document.getElementById('settings-sidebar-btn') as HTMLButtonElement,
    saveSettingsBtn: document.getElementById('save-settings') as HTMLButtonElement,
    purgeDatabaseButton: document.getElementById('purge-database') as HTMLButtonElement,
    inputWahaUrl: document.getElementById('settings-waha-url') as HTMLInputElement,
    inputSession: document.getElementById('settings-session') as HTMLInputElement,
    inputApiKey: document.getElementById('settings-api-key') as HTMLInputElement,
    inputBackgroundImage: document.getElementById('settings-background-image') as HTMLInputElement,
    inputBackgroundOpacity: document.getElementById('settings-background-opacity') as HTMLInputElement,
    loggedUserName: document.getElementById('pandora-username') as HTMLHeadingElement,
    chatBottomBar: document.getElementById('chat-bottom-bar') as HTMLElement,
    chatBottomBarBtn: document.getElementById('chat-bottom-bar-btn') as HTMLButtonElement,
    chatInputPanel: document.getElementById('chat-input-panel') as HTMLElement,
    attachmentInput: document.getElementById('attachment-input') as HTMLInputElement,
    attachmentBtn: document.getElementById('attachment-btn') as HTMLButtonElement,
    markreadBtn: document.getElementById('markread-btn') as HTMLButtonElement,
    extraPages: document.querySelectorAll('.extra-page') as NodeListOf<HTMLElement>,
    desktopSidebarButtons: document.querySelectorAll("#desktop-aside button") as NodeListOf<HTMLButtonElement>,
    desktopAside: document.getElementById('desktop-aside') as HTMLElement,
    contentUserName: document.querySelectorAll('[data-content="app-user"]') as NodeListOf<HTMLElement>,
    contentUserNumber: document.querySelectorAll('[data-content="app-user-number"]') as NodeListOf<HTMLElement>,
    resourceUserPic: document.querySelectorAll('[data-resource="app-user-image"]') as NodeListOf<HTMLImageElement>,
    valueUserStatus: document.querySelectorAll('[data-value="app-user-status"]') as NodeListOf<HTMLInputElement>,
    inputUserStatus: document.getElementById('profile-page-status-input') as HTMLInputElement,
    selectable: document.querySelectorAll('.selectable') as NodeListOf<HTMLElement>,
    nextPageButtons: document.querySelectorAll('.next-page-btn') as NodeListOf<HTMLElement>,
    scrollableViews: document.querySelectorAll('._scrollableView') as NodeListOf<HTMLElement>
 };
 export const views = new Map<HTMLElement, ScrollableView>;
 export const ui = {
    /**
    * Switch view state when a contact chat is opened or closed
    */
    toggleChatState(hasActive: boolean) {
        if (hasActive) {
            elements.noChatState.classList.add('hidden');
            elements.activeChatContainer.classList.remove('hidden');
        } else {
            elements.noChatState.classList.remove('hidden');
            elements.activeChatContainer.classList.add('hidden');
        }
    },
    /**
    * Scroll message list automatically to bottom
    */
    scrollToBottom() {
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                elements.messagesContainer.scrollTop = elements.messagesContainer.scrollHeight;
            });
        });
    },
    ensureScroll(container: HTMLElement, after: Function) {
        const scrolled = container.scrollTop === (container.scrollHeight - container.clientHeight);
        after();
        if (scrolled) {
            container.scrollTop = container.scrollHeight;
        }
    },
    /**
    * Update connection status badge in sidebar footer
    */
    updateConnectionStatus(isConnected: boolean, text: string) {
        elements.backendStatusText.textContent = text;
        if (isConnected) {
            elements.apiStatusIndicator.style.backgroundColor = 'var(--online-color)';
            elements.apiStatusIndicator.style.animation = 'pulse 1.8s infinite';
        } else {
            elements.apiStatusIndicator.style.backgroundColor = '#ef4444';
            elements.apiStatusIndicator.style.animation = 'none';
        }
    },
    async renderChatList(chats: Chat[], activeChat: Chat | null, onChatSelect: (chat: Chat) => void) {
        elements.chatList.innerHTML = '';
        chats.sort((a, b) => {
            const timeA = new Date(a.timestamp).getTime();
            const timeB = new Date(b.timestamp).getTime();
            return timeB - timeA;
        });
        if (chats.length === 0) {
            elements.chatList.innerHTML = `<li class="loading-chats">No chats found</li>`;
            return;
        }
        for (const chat of chats) {
            if (chat.timestamp == null) return;
            const li = document.createElement('li');
            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() : '?';
            const hasUnread = chat.unreadCount && chat.unreadCount > 0;
            const timeStr = formatTime(chat.timestamp || new Date());
            li.innerHTML = `
      <div class="avatar">
        <img
          src=""
          alt="${initials}"
          data-chat-avatar="${chat.id}"
        />
      </div>
      <div class="chat-item-info">
        <div class="chat-item-meta">
          <span class="chat-item-name">${chat.name}</span>
          <span class="chat-item-time">${timeStr}</span>
        </div>
        <div class="chat-item-preview">
          <span class="chat-item-msg${chat.lastMessage == null ? ' text-accent' : ''}" data-chatid="${chat.id}">
            ${chat.lastMessage || '...'}
          </span>
          ${hasUnread ? `<span class="unread-badge">${chat.unreadCount}</span>` : ''}
        </div>
      </div>
    `;
            li.addEventListener('click', () => onChatSelect(chat));
            elements.chatList.appendChild(li);
            (async () => {
                try {
                    const picture = await getChatPicture(chat.id);
                    const img = li.querySelector(`img[data-chat-avatar="${chat.id}"]`) as HTMLImageElement;
                    if (img) img.src = picture.url ? picture.url : '';
                } catch (e) {
                }
            })();
        }
    },
    async updateChatInChatList(msg: Message) {
        const chatNode = document.querySelector(`.chat-item[data-id="${msg.fromMe ? msg.to : msg.from}"]`) as HTMLElement;
        if (chatNode) {
            const messageItem = chatNode.querySelector('.chat-item-msg') as HTMLElement;
            const time = chatNode.querySelector('.chat-item-time') as HTMLElement;
            messageItem.innerText = msg.body || msg.text || 'Media message';
            time.innerText = msg.timestamp ? formatTime(msg.timestamp) : formatTime(Date.now());
            if (!msg.fromMe && (!activeChatState || activeChatState.id !== (msg.fromMe ? msg.to : msg.from))) {
                const unreadBadge = chatNode.querySelector('.unread-badge') as HTMLElement;
                if (unreadBadge) {
                    unreadBadge.innerText = (Number(unreadBadge.innerHTML) || 0) + 1 + "";
                } else {
                    const preview = chatNode.querySelector('.chat-item-preview') as HTMLElement;
                    const badge = document.createElement('span');
                    badge.className = 'unread-badge';
                    badge.innerText = '1';
                    preview.appendChild(badge);
                }
            }
        }
    },
    async updateChatInChatList2(chat: Chat) {
        const chatNode = document.querySelector(`.chat-item[data-id="${chat.id}"]`) as HTMLElement;
        if (chatNode) {
            const messageItem = chatNode.querySelector('.chat-item-msg') as HTMLElement;
            const time = chatNode.querySelector('.chat-item-time') as HTMLElement;
            messageItem.innerText = chat.lastMessage || 'Media message';
            time.innerText = chat.timestamp ? formatTime(chat.timestamp) : formatTime(Date.now());
            const unreadBadge = chatNode.querySelector('.unread-badge') as HTMLElement;
            const newCount = (Number(unreadBadge?.innerHTML) || 0);
            if (unreadBadge && newCount != 0) {
                unreadBadge.innerText = newCount + "";
            } else {
                if (unreadBadge) unreadBadge.remove();
            }
        }
    },
    /**
    * Render chat message log inside chat view container
    */
    async renderMessages(messages: Message[], _activeChatName: string, userID: string, chatId: string) {
        elements.messagesContainer.innerHTML = '';
        if (messages.length === 0) {
            elements.messagesContainer.innerHTML = '<div class="loading-chats">No messages. Say hello!</div>';
            return;
        }
        const loadMore = document.createElement("button");
        loadMore.classList.add("load-more-btn");
        loadMore.innerText = "Load more";
        loadMore.onclick = () => {
            this.loadMoreMessages(chatId, userID);
        };
        elements.messagesContainer.appendChild(loadMore);
        for (const msg of messages) {
            this.appendSingleMessage(msg, userID, chatId);
        }
        this.scrollToBottom();
    },
    async loadMoreMessages(chatId: string, userId: string) {
        const oldest = document.querySelector('.message-group:first-of-type') as HTMLElement;
        if (!oldest) return;
        const oldestTimestamp = oldest.dataset.timestamp;
        const oldestId = oldest.id;
        const loadMoreButton = document.querySelector('.load-more-btn') as HTMLButtonElement;
        const msgs = await getMoreChatMessages(chatId, oldestTimestamp, oldestId);
        // JS version had msgs.shift(), probably to avoid duplication of the oldest message
        msgs.shift();
        msgs.forEach(async msg => {
            loadMoreButton.after(this.generateMessage(msg, userId, chatId));
        });
    },
    /**
    * Append a single message (used for optimistic updates immediately upon sending)
    */
    appendSingleMessage(msg: Message, userID: string, chatId: string, isLocal: boolean = false) {
        elements.messagesContainer.appendChild(this.generateMessage(msg, userID, chatId, isLocal))
    },
    generateTempMessageLink(msg: Message) {
        const a = document.createElement('a');
        a.target = "_blank";
        if (msg.media) {
            a.href = msg.media.url;
            if (msg._data?.mimetype?.startsWith('image/')) {
                const img = document.createElement('img');
                img.classList.add('message-image-attachement');
                img.src = msg.media.url;
                a.appendChild(img);
            } else {
                a.textContent = msg.media.filename || "Download file";
                a.download = msg.media.filename || "file";
            }
        }
        return a;
    },
    generateMessage(msg: Message, userID: string, chatId: string, isLocal: boolean = false) {
        const isOutgoing = msg.fromMe || msg.sender === 'me';
        function getPrevMessageElem() {
            return elements.messagesContainer.lastElementChild as HTMLElement | null;
        }
        const prevMsgEl = getPrevMessageElem();
        const groupDiv = document.createElement('div');
        groupDiv.className = `message-group selectable ${isOutgoing ? 'outgoing' : 'incoming'}`;
        groupDiv.id = normalizeId(msg._serialized ? (msg._serialized as any) : msg.id) || "msg-id";
        groupDiv.dataset.timestamp = msg.timestamp?.toString();
        groupDiv.dataset.from = msg.participant || (msg.from as string);
        const senderName = isOutgoing ? userID : (msg._data?.notifyName || (msg.from as string));
        const timeStr = formatTime(msg.timestamp || new Date());
        let statusCheck = '';
        if (isOutgoing) {
            if (msg.status === 'read') {
                statusCheck = '<span class="mif-done_all" style="color: var(--online-color); width:14px; height:14px;"></span>';
            } else if (msg.status === 'delivered') {
                statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
            } else if (msg.status === 'sending') {
                statusCheck = '<span class="mif-earth" style="width:14px; height:14px;"></span>';
            } else {
                statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
            }
        }
        const bubble = document.createElement('div');
        bubble.className = 'message-bubble';
        let prevUid: string | undefined;
        if (msg.participant) {
            prevUid = msg.participant;
        } else {
            prevUid = msg.from as string;
        }
        if (!isOutgoing && (!prevMsgEl || prevUid !== prevMsgEl.dataset.from)) {
            const senderEl = document.createElement('span');
            senderEl.className = 'message-sender';
            senderEl.textContent = senderName;
            bubble.appendChild(senderEl);
        }
        const contentEl = document.createElement('div');
        contentEl.classList.add('message-content');
        const textEl = document.createElement('div');
        textEl.innerHTML = msg.body || msg.text || "";
        contentEl.appendChild(textEl);
        bubble.appendChild(contentEl);
        if (msg.hasMedia) {
            let a: HTMLAnchorElement;
            if (isLocal) {
                a = this.generateTempMessageLink(msg);
            } else {
                a = document.createElement('a');
                a.innerText = `[Request media]`;
                a.target = "_blank";
                const clickListener = async (e: MouseEvent) => {
                    a.removeEventListener('click', clickListener);
                    a.innerText = `[Downloading]`;
                    const mediaMsg = msg.media ? msg : await getMessage(chatId, normalizeId(msg._serialized ? (msg._serialized as any) : msg.id) || "", true);
                    if (!mediaMsg || !mediaMsg?.media?.url) {
                        a.addEventListener('click', clickListener);
                        a.innerText = `[Error, click to try again]`
                        return;
                    }
                    const url = new URL(mediaMsg.media.url);
                    const reqID = url.pathname.split('/').filter(Boolean).pop();
                    if (!reqID) return;
                    const media = await getMedia(reqID);
                    if (!media) return;
                    const objectUrl = URL.createObjectURL(media.blob);
                    (e.target as HTMLAnchorElement).href = objectUrl;
                    if (media.blob.type.startsWith('image/')) {
                        a.textContent = "";
                        const img = document.createElement('img');
                        img.classList.add('message-image-attachement');
                        img.src = objectUrl;
                        this.ensureScroll(elements.messagesContainer, () => {
                            bubble.before(img);
                        })
                        // const content = bubble.querySelector('.message-content');
                        // if (content) content.remove(); // TODO make images attachment with text look cooler
                    } else {
                        (e.target as HTMLAnchorElement).textContent = media.filename || `Download ${mediaMsg.media.filename}`;
                    }
                }
                a.addEventListener('click', clickListener);
            }
            this.ensureScroll(elements.messagesContainer, () => {
                contentEl.appendChild(a);
            });
            if (!isLocal && msg._data?.mimetype?.startsWith('image/')) {
                a.click();
            }
        }
        const meta = document.createElement('div');
        meta.className = 'message-meta';
        meta.innerHTML = `<span>${timeStr}</span>${statusCheck}`;
        bubble.appendChild(meta);
        if (isOutgoing) {
            if (prevMsgEl && prevMsgEl.classList.contains('outgoing')) {
                groupDiv.classList.add('same-sender');
            } else {
                const indicator = document.createElement('div');
                indicator.className = 'message-indicator';
                groupDiv.appendChild(indicator);
            }
        } else if (msg.participant) {
            if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
                const indicator = document.createElement('div');
                indicator.className = 'message-indicator';
                groupDiv.appendChild(indicator);
            } else groupDiv.classList.add('same-sender');
        } else {
            if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
                const indicator = document.createElement('div');
                indicator.className = 'message-indicator';
                groupDiv.appendChild(indicator);
            } else groupDiv.classList.add('same-sender');
        }
        groupDiv.appendChild(bubble);
        return groupDiv;
    },
    updateMessage(originalMsgId: string, generatedMsg: HTMLElement) {
        const originalMsg = document.querySelector(`#${originalMsgId}`);
        if (originalMsg) {
            originalMsg.replaceWith(generatedMsg)
        }
    },
    updateMessageTick(id: string, status: string) {
        let statusCheck;
        if (status === 'read') {
            statusCheck = '<span class="mif-done_all" style="color: var(--online-color); width:14px; height:14px;"></span>';
        } else if (status === 'delivered') {
            statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
        } else if (status === 'sending') {
            statusCheck = '<span class="mif-earth" style="width:14px; height:14px;"></span>';
        } else {
            statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
        }
        const msgNode = document.getElementById(id);
        if (msgNode) {
            const meta = msgNode.querySelector('.message-meta');
            if (meta) meta.outerHTML = statusCheck;
        }
    },
    toggleChatBottomBar() {
        elements.chatBottomBar.classList.toggle("collapsed");
    },
    removeChatMessage(msgId: string) {
        const message = document.getElementById(msgId);
        if (message) message.remove();
    },
 };
 export class ScrollableView {
    private observer: IntersectionObserver | null = null;
    private activePage: HTMLElement | null = null;
    container: HTMLElement;
    isScrollingProgrammatically = false;
    scrollTimeout: ReturnType<typeof setTimeout> | null = null;
    constructor(container: HTMLElement) {
        this.container = container;
        this.setupIntersectionObserver();
        window.addEventListener('scroll', (e) => {
            if (this.isScrollingProgrammatically) e.preventDefault();
        });
        container.querySelectorAll('.next-page-btn').forEach(nextBtn => {
            nextBtn.addEventListener('click', () => {
                this.next();
            })
        })
    }
    private setupIntersectionObserver() {                                                                                                                                                  
        this.observer = new IntersectionObserver((entries) => {                                                                                                                            
            entries.forEach(entry => {                                                                                                                                                     
                if (entry.isIntersecting && entry.target !== this.activePage) {                                                                                                            
                    this.activePage = entry.target as HTMLElement;                                                                                                                         
                    entry.target.dispatchEvent(new CustomEvent('intoView', {                                                                                                               
                        bubbles: true,                                                                                                                                                     
                        detail: {                                                                                                                                                          
                            page: entry.target,                                                                                                                                            
                            index: this.getCurrentIndex()                                                                                                                                  
                        }                                                                                                                                                                  
                    }));                                                                                                                                                                   
                }                                                                                                                                                                          
            });                                                                                                                                                                            
        }, {                                                                                                                                                                               
            root: this.container,                                                                                                                                                          
            threshold: 0.6                                                                                               
        });                                                                                                                                                                                
        this.observePages();                                                                                                                                                               
    }
    observePages() {                                                                                                                                                                       
        if (!this.observer) return;                                                                                                                                                        
        Array.from(this.container.children).forEach(child => {                                                                                                                             
            this.observer?.observe(child);                                                                                                                                                 
        });                                                                                                                                                                                
    }
    get pages(): HTMLElement[] {
        return Array.from(this.container.children) as HTMLElement[];
    }
    getCurrentIndex(): number {
        const width = this.container.clientWidth;
        if (width === 0) return 0;
        return Math.round(this.container.scrollLeft / width);
    }
    getCurrentScreen(): HTMLElement | null {
        const pages = this.pages;
        return pages[this.getCurrentIndex()] || null;
    }
    scrollToIndex(index: number, smooth = true) {
        const pages = this.pages;
        if (index >= 0 && index < pages.length) {
            this.scrollTo(pages[index], smooth);
        }
    }
    next(smooth = true) {
        this.scrollToIndex(this.getCurrentIndex() + 1, smooth);
    }
    previows(smooth = true) {
        this.scrollToIndex(this.getCurrentIndex() - 1, smooth);
    }
    scrollTo(element: HTMLElement, smooth = true) {
        this.isScrollingProgrammatically = true;
        element.scrollIntoView({
            behavior: smooth ? 'smooth' : 'auto',
            inline: 'start',
            block: 'nearest'
        });
        setTimeout(() => { this.isScrollingProgrammatically = false; }, smooth ? 400 : 50);
    }
    getCurrentExtraPage(): number {       
        const pages = Array.from(elements.extraPages);
        const activeIndex = pages.findIndex(page => page.classList.contains("shown"));                     
        return activeIndex !== -1 ? activeIndex : 0;
    }
 }
 elements.scrollableViews.forEach(view => {
    views.set(view, new ScrollableView(view));
 })
--- a/web/src/utils.ts
+++ b/web/src/utils.ts
@ -1,13 +1,13 @@
-// Helper utilities and algorithms
+import type { Message, MessageWithTime } from "./types";
 /**
 * Format timestamps (supports Unix epoch seconds/ms, strings and ISO dates)
 * @param {string|number|Date} dateVal 
 * @returns {string} Formatted HH:MM AM/PM string
 */
-export function formatTime(dateVal) {
+export function formatTime(dateVal: string | number | Date): string {
    if (!dateVal) return '';
-    let date;
+    let date: Date;
    if (typeof dateVal === 'number') {
        date = new Date(dateVal < 10000000000 ? dateVal * 1000 : dateVal);
    } else if (typeof dateVal === 'string' && /^\d+$/.test(dateVal)) {
@ -18,12 +18,12 @@ export function formatTime(dateVal) {
    }
    let hours = date.getHours();
-    let minutes = date.getMinutes();
+    const minutes = date.getMinutes();
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12;
-    minutes = minutes < 10 ? '0' + minutes : minutes;
+    const minutesStr = minutes < 10 ? '0' + minutes : String(minutes);
-    return `${hours}:${minutes} ${ampm}`;
+    return `${hours}:${minutesStr} ${ampm}`;
 }
 /**
@ -32,24 +32,22 @@ export function formatTime(dateVal) {
 * @param {Array} messages List of raw messages from WAHA
 * @returns {Array} Compensated chronological message array
 */
-export function compensateMessageOrdering(messages) {
+export function compensateMessageOrdering(messages: Message[]): Message[] {
    if (!Array.isArray(messages)) return [];
-    // Convert timestamps to numeric milliseconds for stable comparison
+    // convert to ms
-    const msgs = messages.map(m => {
+    const msgs: MessageWithTime[] = messages.map(m => {
-        let t = m.timestamp;
+        let t: number;
-        if (typeof t === 'number') {
+        if (typeof m.timestamp === 'number') {
-            if (t < 10000000000) t = t * 1000;
+            t = m.timestamp < 10000000000 ? m.timestamp * 1000 : m.timestamp;
        } else {
-            t = new Date(t).getTime();
+            t = new Date(m.timestamp).getTime();
        }
        return { ...m, _time: t };
    });
    // Initial chronological sort
    msgs.sort((a, b) => a._time - b._time);
    // Apply drift bubble adjustments
    let changed = true;
    while (changed) {
        changed = false;
@ -58,12 +56,12 @@ export function compensateMessageOrdering(messages) {
            const next = msgs[i + 1];
            const timeDiff = next._time - current._time;
-            // Swap if an outgoing message is sorted before an incoming message within a 30-sec window
+            // swap if outgoing message is sorted before incoming message within 30-sec window
            if (current.fromMe && !next.fromMe && timeDiff >= 0 && timeDiff <= 30000) {
                msgs[i] = next;
                msgs[i + 1] = current;
-                // Advance the outgoing message's timestamp to be exactly 1 second after the incoming one
+                // advance the outgoing message timestamp to exactly 1 sec after the incoming
                current._time = next._time + 1000;
                if (typeof current.timestamp === 'number') {
                    current.timestamp = Math.floor(current._time / 1000);
@ -76,16 +74,16 @@ export function compensateMessageOrdering(messages) {
        }
    }
-    // Clean up temporary property
+    // clean temp property
    return msgs.map(({ _time, ...m }) => m);
 }
-export function getBase64(file) {
+export function getBase64(file: File): Promise<string> {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => {
-            resolve(reader.result.split(",")[1]);
+            resolve((reader.result as string).split(",")[1]);
        };
        reader.onerror = (e) => {
@ -106,7 +104,7 @@ export function getBase64(file) {
 * @param {string|object} raw
 * @returns {string|null}
 */
-export function normalizeId(raw) {
+export function normalizeId(raw: string | { _serialized?: string; user?: string } | null | undefined): string | null {
    if (!raw) return null;
    if (typeof raw === 'object') {
        return raw._serialized || raw.user || JSON.stringify(raw);
@ -114,8 +112,8 @@ export function normalizeId(raw) {
    return raw;
 }
-export function debounce(func, delay) {
+export function debounce(func: () => void, delay: number): () => void {
-    let timeoutId;
+    let timeoutId: ReturnType<typeof setTimeout>;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(func, delay);
--- a/web/src/waha.ts
+++ b/web/src/waha.ts
@ -1,19 +1,19 @@
-import { config } from "./config.js";
+import { config } from "./config";
-import { getBase64 } from "./utils.js";
+import { showNotification } from "./notification";
 import { getBase64 } from "./utils";
 import type { Message, VersionResponse, AppUser, ContactInfo, UserAboutResponse, ChatPictureResponse, StatusResponse } from "./types";
-async function request(path, options = {}) {
+async function request<T>(path: string, options: RequestInit = {}): Promise<T> {
    const url = `${config.wahaUrl}${path}`;
-    const headers = {
+    const headers: Record<string, string> = {
        'Content-Type': 'application/json',
        'accept': '*/*',
-        ...options.headers
+        ...(options.headers as Record<string, string>)
    };
    if (config.apiKey) {
        headers['X-Api-Key'] = config.apiKey;
    }
    // console.log(`[WAHA] ${options.method || 'GET'} ${url}`, options.body ? JSON.parse(options.body) : '');
    const response = await fetch(url, { ...options, headers });
    if (!response.ok) {
        let errorDetail = '';
@ -24,24 +24,24 @@ async function request(path, options = {}) {
        } catch (_) {
            errorDetail = await response.text().catch(() => '');
        }
        showNotification("API Error", `WAHA API returned ${response.status}: ${response.statusText} — ${errorDetail}`, 4000);
        throw new Error(`WAHA API returned ${response.status}: ${response.statusText} — ${errorDetail}`);
    }
    return response.json();
 }
-async function downloadFile(path, options = {}) {
+async function downloadFile(path: string, options: RequestInit = {}): Promise<{ blob: Blob, filename: string }> {
  const url = `${config.wahaUrl}${path}`;
-  const headers = {
+  const headers: Record<string, string> = {
-    'Content-Type': options.headers?.['Content-Type'] ?? 'application/json',
+    'Content-Type': (options.headers as Record<string, string> | undefined)?.['Content-Type'] ?? 'application/json',
    'accept': '*/*',
-    ...options.headers
+    ...(options.headers as Record<string, string>)
  };
  if (config.apiKey) headers['X-Api-Key'] = config.apiKey;
 //   console.log(`[WAHA] ${options.method || 'GET'} ${url}`);
  const response = await fetch(url, { ...options, headers });
  if (!response.ok) {
@ -66,82 +66,80 @@ async function downloadFile(path, options = {}) {
  return { blob, filename };
 }
 export const waha = {
-    async getVersion() {
+    async getVersion(): Promise<VersionResponse> {
-        return await request('/api/version');
+        return await request<VersionResponse>('/api/version');
    },
-    async getChats() {
+    async getChats(): Promise<any[]> {
-        const data = await request(`/api/${config.session}/chats`);
+        const data = await request<any[]>(`/api/${config.session}/chats`);
        return data.map(chat => {
            let chatId = chat.id;
            if (chatId && typeof chatId === "object") {
                chatId = chatId._serialized || chatId.user || JSON.stringify(chatId);
            }
            return {
-                id: chatId || chat.chatId || chat.name,
+                id: chatId || chat.chatId || null,
-                name: chat.name || "Unknown Contact",
+                name: chat.name || null,
                unreadCount: chat.unreadCount || 0,
-                lastMessage: chat.lastMessage?.body || chat.lastMessageText || "Click to open chat",
+                lastMessage: chat.lastMessage?.body || chat.lastMessageText || null,
-                timestamp: chat.lastMessage?.timestamp || new Date()
+                timestamp: chat.lastMessage?.timestamp || null
            };
        });
    },
-    async getChatMessages(chatId, beforeTimestamp) {
+    async getChatMessages(chatId: string, beforeTimestamp?: any): Promise<Message[]> {
-        console.log(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40&sortBy=timestamp${beforeTimestamp ? `&filter.timestamp.gte=${beforeTimestamp}` : "" }`);
+        return request<Message[]>(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40${beforeTimestamp ? `&filter.timestamp.lte=${beforeTimestamp}` : "" }`);
        return request(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40${beforeTimestamp ? `&filter.timestamp.lte=${beforeTimestamp}` : "" }`);
    },
-    async getSingleChatMessage(chatId, messageId, downladMedia) {
+    async getSingleChatMessage(chatId: string, messageId: string, downloadMedia: boolean): Promise<Message> {
-        return request(`/api/${config.session}/chats/${chatId}/messages/${messageId}?downloadMedia=${downladMedia}`);
+        return request<Message>(`/api/${config.session}/chats/${chatId}/messages/${messageId}?downloadMedia=${downloadMedia}`);
    },
-    async getChatPicture(chatId) {
+    async getChatPicture(chatId: string): Promise<ChatPictureResponse> {
-        return request(`/api/${config.session}/chats/${chatId}/picture`);
+        return request<ChatPictureResponse>(`/api/${config.session}/chats/${chatId}/picture`);
    },
-    async getUser(chatId) {
+    async getUser(chatId: string): Promise<ContactInfo> {
-        return request(`/api/${config.session}/contacts/${chatId}`);
+        return request<ContactInfo>(`/api/${config.session}/contacts/${chatId}`);
    },
-    async getUserAbout(chatId) {
+    async getUserAbout(chatId: string): Promise<UserAboutResponse> {
-        return request(`/api/contacts/about?contactId=${chatId}&session=${config.session}`);
+        return request<UserAboutResponse>(`/api/contacts/about?contactId=${chatId}&session=${config.session}`);
    },
-    async readChat(chatId) {
+    async readChat(chatId: string): Promise<any> {
        return request('/api/sendSeen', {
            method: 'POST',
            body: JSON.stringify({ chatId, session: config.session })
        });
    },
-    async downloadMedia(file) {
+    async downloadMedia(file: string): Promise<{ blob: Blob, filename: string }> {
        const { blob, filename } = await downloadFile(`/api/files/${config.session}/${file}`);
        return { blob, filename };
    },
-    async getMyInfo() {
+    async getMyInfo(): Promise<AppUser> {
-        return request(`/api/sessions/${config.session}/me`);
+        return request<AppUser>(`/api/sessions/${config.session}/me`);
    },
-    async startTyping(chatId) {
+    async startTyping(chatId: string): Promise<any> {
        return request('/api/startTyping', {
            method: 'POST',
            body: JSON.stringify({ chatId, session: config.session })
        });
    },
-    async stopTyping(chatId) {
+    async stopTyping(chatId: string): Promise<any> {
        return request('/api/stopTyping', {
            method: 'POST',
            body: JSON.stringify({ chatId, session: config.session })
        });
    },
-    async sendTextMessage(chatId, text) {
+    async sendTextMessage(chatId: string, text: string): Promise<Message> {
-        return request('/api/sendText', {
+        return request<Message>('/api/sendText', {
            method: 'POST',
            body: JSON.stringify({
                chatId,
@ -151,8 +149,8 @@ export const waha = {
        });
    },
-    async setStatus(text) {
+    async setStatus(text: string): Promise<StatusResponse> {
-        return request(`/api/${config.session}/profile/status`, {
+        return request<StatusResponse>(`/api/${config.session}/profile/status`, {
            method: 'PUT',
            body: JSON.stringify({
                status: text
@ -160,9 +158,9 @@ export const waha = {
        });
    },
-    async sendFileMessage(chatId, file) {
+    async sendFileMessage(chatId: string, file: File): Promise<Message> {
        const fileBase64 = await getBase64(file);
-        const body = {
+        const body: RequestInit = {
            method: 'POST',
            body: JSON.stringify({
                chatId,
@ -180,7 +178,7 @@ export const waha = {
        if (file.type.startsWith('image/')) endpoint = '/api/sendImage';
        if (file.type.startsWith('video/')) endpoint = '/api/sendVideo';
-        const result = await request(endpoint, body);
+        const result = await request<Message>(endpoint, body);
        return result;
    }
 };
--- a/web/src/websocket.ts
+++ b/web/src/websocket.ts
@ -1,13 +1,14 @@
-import { config } from "./config.js";
+import { config } from "./config";
-import { isOnline, updateOnlineStatus } from "./storage.js";
+import { isOnline, updateOnlineStatus } from "./storage";
 import type { WebSocketEvent } from "./types";
-let socket = null;
+let socket: WebSocket | null = null;
-let reconnectTimer = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
-let currentOnMessageCallback = null;
+let currentOnMessageCallback: ((data: WebSocketEvent) => void) | null = null;
 export const websocket = {
-    connect(onMessageCallback) {
+    connect(onMessageCallback: (data: WebSocketEvent) => void) {
-        if (!isOnline) return;
+        if (!isOnline()) return;
        currentOnMessageCallback = onMessageCallback;
        this.disconnect(false);
@ -48,7 +49,7 @@ export const websocket = {
            socket.onmessage = (event) => {
                try {
-                    const data = JSON.parse(event.data);
+                    const data = JSON.parse(event.data) as WebSocketEvent;
                    if (currentOnMessageCallback) {
                        currentOnMessageCallback(data);
                    }
@ -66,8 +67,11 @@ export const websocket = {
                socket = null;
                reconnectTimer = setTimeout(() => {
-                    updateOnlineStatus();
+                    updateOnlineStatus().then(() => {
-                    this.connect(currentOnMessageCallback);
+                        if (currentOnMessageCallback) {
                            this.connect(currentOnMessageCallback);
                        }
                    });
                }, 5000);
            };
        } catch (e) {
--- a/web/style.css
+++ b/web/style.css
@ -93,9 +93,6 @@ html, body {
 body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    background-image: 
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.12) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%);
 }
 a {
@ -129,16 +126,44 @@ input:focus {
 .app-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100dvh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
 }
 .main-holder {
    display: flex;
 }
 ._scrollableView, ._scrollableContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
-    overflow: hidden;
+    overflow-x: auto;
-    position: relative;
+    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
 }
 .app-container::-webkit-scrollbar, ._scrollableContainer::-webkit-scrollbar, ._scrollableView::-webkit-scrollbar {
    display: none;
 }
 .app-name {
    font-weight: bold;
 }
 .dim {
    opacity: .6;
 }
 /* Sidebar Styling */
 .sidebar {
    width: 380px;
@ -440,6 +465,7 @@ input:focus {
 .api-status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
@ -476,6 +502,7 @@ input:focus {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
 }
 /* Empty State */
@ -843,8 +870,14 @@ input:focus {
 /* Extra Pages */
 .extra-page {
-    display: none;
+    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex: 0 0 100%;
 }
 .extra-page-content {
@ -871,7 +904,7 @@ input:focus {
    flex: 1;
 }
-#profile-page h2 {
+.big-title {
    padding: 1.4rem;
    font-size: 5rem;
    text-wrap-mode: nowrap;
@ -899,6 +932,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%;
@ -910,13 +964,12 @@ input:focus {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
-        /* Hide scrollbars */
+        scrollbar-width: none;
-        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none;
        -ms-overflow-style: none;  /* IE and Edge */
    }
    .app-container::-webkit-scrollbar {
-        display: none; /* Chrome, Safari, Opera */
+        display: none;
    }
    .sidebar {
@ -944,7 +997,7 @@ input:focus {
    }
    .extra-page {
-        display: block;
+        display: flex;
        width: 100%;
        flex: 0 0 100%;
        position: relative;
@ -993,7 +1046,6 @@ input:focus {
 .modal-content {
    width: 100%;
    background: var(--bg-main);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: var(--glass-blur);
    display: flex;
@ -1010,7 +1062,7 @@ input:focus {
    display: flex;
    justify-content: space-between;
    align-items: center;
-    margin-bottom: 20px;
+    padding: 1em 2em 0em 2em;
 }
 .modal-header h2 {
@ -1022,6 +1074,11 @@ input:focus {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    flex: 1;
    overflow-x: hidden;
    padding: 0 2rem 0 2rem;
 }
 .form-group {
@ -1046,7 +1103,7 @@ input:focus {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
-    margin-top: auto;
+    padding: 1rem 2rem;
 }
 .btn {
@ -1059,8 +1116,15 @@ input:focus {
 }
 .primary-btn {
-    background: var(--accent-gradient);
+    background: transparent;
-    color: white;
+    color: var(--text-primary);
    border: medium solid var(--bg-secondary);
 }
 .primary-btn:hover {
    background: var(--text-primary);
    color: var(--bg-main);
    border-color: var(--text-primary);
 }
 .secondary-btn {
Author	SHA1	Message	Date
Adrian Victor	d4adfde73a	Add account setup workflow; move activeChatState to states.ts to avoid importing app.ts on ui.ts; add ScrollableView to ui.ts to contain and modularize scrollable views; make app layout use ScrollableView add option to delete data on settings page. Some checks failed Build Vite / build (24.x) (push) Has been cancelled Details	2026-08-16 17:33:59 -03:00
Adrian Victor	a467c41432	Make Vite use gh pages prefix	2026-07-20 11:26:39 -03:00
Adrian Victor	e615234325	Convert project to TypeScript; add workflow to build with Vite then publish to GH Pages.	2026-07-20 11:18:19 -03:00
Adrian Victor	932e63e299	Add button to mark chat read on chat-bottom-bar; make icon-btn icon color change to ensure visibility with hover effects; make waha show in-app notification for errors.	2026-07-19 11:23:08 -03:00
Adrian Victor	418f858807	Check if message has unread badge before changing it.	2026-07-19 10:42:57 -03:00
Adrian Victor	18394c5358	Add error handling for setupElementsData	2026-07-19 10:27:35 -03:00
Adrian Victor	4b8e9d71b1	Add browser message notification.	2026-07-18 15:22:10 -03:00
Adrian Victor	6f49eea7b4	Add support to page notifications; notify when saving the user status	2026-07-18 15:04:44 -03:00