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
-# 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
+dist/
 node_modules/
-
-# Generated by Cordova
-/plugins/
-/platforms/
-
-pandora.apks
-/android/app/build/
-test-upload-key.jks
+.idea
--- 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,28 +1,38 @@
-import { config } from "./config.js";
-import { waha } from "./waha.js";
-import { ui, elements } from "./ui.js";
-import { websocket } from "./websocket.js";
-import { compensateMessageOrdering, debounce, formatTime, normalizeId } from "./utils.js";
-import { fetchChats, getAppUser, getChatMessages, getChatPicture, getChats, getUser, getUserAbout, sendStatus, updateOnlineStatus } from "./storage.js";
-import { upsertMessages } from "./db.js";
+import { config } from "./config";
+import { waha } from "./waha";
+import { ui, elements, views } from "./ui";
+import { websocket } from "./websocket";
+import { compensateMessageOrdering, debounce, formatTime, normalizeId } from "./utils";
+import { fetchChats, getAppUser, getChatMessages, getChatPicture, getChats, getUser, getUserAbout, markRead, sendStatus, updateOnlineStatus } from "./storage";
+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;
-    elements.inputWahaUrl.value = config.wahaUrl;
-    elements.inputSession.value = config.session;
-    elements.inputBackgroundImage.value = config.bgImg;
-    elements.inputBackgroundOpacity.value = config.bgOpacity;
-    elements.activeChatContainer.style.setProperty('--background-image', `URL("${config.bgImg}")`);
-    elements.activeChatContainer.style.setProperty('--background-opacity', `${config.bgOpacity}`);
+    updateSidebarPosition();
+    askForNotificationPermission();
+    if (elements.inputApiKey) elements.inputApiKey.value = config.apiKey;
+    if (elements.inputWahaUrl) elements.inputWahaUrl.value = config.wahaUrl;
+    if (elements.inputSession) elements.inputSession.value = config.session;
+    if (elements.inputBackgroundImage) elements.inputBackgroundImage.value = config.bgImg;
+    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 {
-        setupElementsData();  
+        setupElementsData();
        loadChats();
        checkWahaStatus();
        initWebSocket();
@ -31,29 +41,46 @@ document.addEventListener('DOMContentLoaded', async () => {
    }
 });

+async function askForNotificationPermission() {
+    notificationAuthorization = await Notification.requestPermission();
+}
+
 async function setupElementsData() {
-    const usr = await getAppUser();
-    const usrPic = (await getChatPicture(usr.id))?.url;
-    const usrInfo = await getUser(usr.id);
-    const usrAbout = (await getUserAbout(usr.id)).about;
-    elements.contentUserName.forEach(e => {
-        e.innerHTML = usr.pushName;
-    })
-    elements.contentUserNumber.forEach(async e => {
-        e.innerHTML = usrInfo.number;
-    })
-    elements.resourceUserPic.forEach(async e => {
-        e.src = usrPic;
-    })
-    elements.valueUserStatus.forEach(async e => {
-        e.value = usrAbout.trim();
-    })
+    try {
+        const usr = await getAppUser();
+        const usrPic = (await getChatPicture(usr.id))?.url;
+        const usrInfo = await getUser(usr.id);
+        const usrAbout = (await getUserAbout(usr.id))?.about;
+        elements.contentUserName.forEach(e => {
+            e.innerHTML = usr.pushName || usr.name || '';
+        })
+        elements.contentUserNumber.forEach(async e => {
+            if (usrInfo) e.innerHTML = usrInfo.number;
+        })
+        elements.resourceUserPic.forEach(async e => {
+            if (usrPic) e.src = usrPic;
+        })
+        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() {
    elements.chatsLoader.classList.remove('hidden');
    try {
-        fetchChats().then(async () => { 
+        fetchChats().then(async () => {
            ui.renderChatList(getChats(), activeChatState, selectChat);
            
            const hash = window.location.hash;
@ -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 = '';
    }
@ -119,12 +148,12 @@ function setupEventListeners() {
            closeActiveChat(true);
        }
    });
-
+    
    elements.appContainer.addEventListener('scroll', () => {
        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;
@ -137,7 +166,15 @@ 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,9 +182,9 @@ function setupEventListeners() {
        }
    });
    
-    elements.chatSearch.addEventListener('input', (e) => {
-        const query = e.target.value.toLowerCase();
-        const filtered = getChats().filter(chat => 
+    elements.chatSearch.addEventListener('input', (e: Event) => {
+        const query = (e.target as HTMLInputElement).value.toLowerCase();
+        const filtered = getChats().filter(chat =>
            chat.name.toLowerCase().includes(query)
        );
        ui.renderChatList(filtered, activeChatState, selectChat);
@ -170,59 +207,89 @@ 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 () {
-        const firstFile = this.files[0];
-        sendFileMessage(firstFile);
+    elements.attachmentInput.addEventListener('change', function (this: HTMLInputElement) {
+        const firstFile = this.files?.[0];
+        if (firstFile) sendFileMessage(firstFile);
    })
    
    elements.backToSidebarBtn.addEventListener('click', () => {
        closeActiveChat(false);
-    }); 
-
+    });
+    
    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;
-
+            
            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);
            }
        })
-
+        
        e.addEventListener('mouseleave', () => {
            clearTimeout(timerId);
        })
    })
 }

+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) => {
-        // console.log('[WS] Received event:', data.event, data);
+    websocket.connect((data: WebSocketEvent) => {
        const ev = data.event;
        if (ev === 'message' || ev === 'message.any' || ev === 'message.ack') {
            handleIncomingMessage(data.payload);
@ -232,46 +299,47 @@ 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();
-            } 
+            }
        }
    }
 }

-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() : '?';
@ -307,19 +375,19 @@ async function selectChat(chat, isPopState = false, smoothScroll = true) {
        console.error('Failed to load messages:', error);
        elements.messagesContainer.innerHTML = '<div class="loading-chats">Error loading messages</div>';
    }
-
+    
    isLoadingChat = false;
 }

 async function closeActiveChat(isPopState = false) {
-    activeChatState = null;
+    setActiveChatState(null);
    
    if (window.innerWidth <= 768) {
        scrollToList();
    } else {
        ui.toggleChatState(false);
    }
-
+    
    
    if (!isPopState) {
        if (window.location.hash.startsWith('#chat-')) {
@ -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);
-    } catch (error) {
+        ui.appendSingleMessage(result, activeChatState.name, (await getAppUser()).id);
+    } catch (error: any) {
        console.error(error.message);
    }
 }
@ -448,4 +517,4 @@ async function checkWahaStatus() {

 export function getCurrentChat() {
    return activeChatState;
-}
+}
--- 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 = {
-    wahaUrl: localStorage.getItem('waha_url') || 'http://inspiran.beetal-castor.ts.net:3100',
-    session: localStorage.getItem('waha_session') || 'session_01kxc62bk5fs8vh4v127k88a7j',
+export const config: Config = {
+    wahaUrl: localStorage.getItem('waha_url') || '',
+    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")) {
-        msgStore.openCursor().onsuccess = (event) => {
-          const cursor = event.target.result;
-          if (cursor) {
-            const m = cursor.value;
-            const from = normalizeId(m.from);
-            const to = normalizeId(m.to);
-            const chatId = normalizeId(m.chatId) || (m.fromMe ? to : from);
-            if (!m.chatId && chatId) {
-              m.chatId = chatId;
-              cursor.update(m);
-            }
-            cursor.continue();
+      // Migration logic
+      msgStore.openCursor().onsuccess = (event) => {
+        const cursor = (event.target as IDBRequest<IDBCursorWithValue | null>).result;
+        if (cursor) {
+          const m = cursor.value as Message;
+          const from = normalizeId(m.from);
+          const to = normalizeId(m.to);
+          const chatId = normalizeId(m.chatId) || (m.fromMe ? to : from);
+          if (!m.chatId && chatId) {
+            m.chatId = chatId;
+            cursor.update(m);
          }
-        };
-      }
+          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) => {
@ -229,4 +242,8 @@ export async function loadMedia(reqId) {
    req.onsuccess = () => resolve(req.result);
    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 { waha } from "./waha.js";
+import { loadChat, loadChatsSorted, loadLatestMessages, loadMedia, loadOlderMessages, upsertChats, upsertMedia, upsertMessages } from "./db";
+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 {
@ -147,4 +149,19 @@ export async function sendStatus(text) {
      success: false
    }
  }
+}
+
+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;
-    return `${hours}:${minutes} ${ampm}`;
+    const minutesStr = minutes < 10 ? '0' + minutes : String(minutes);
+    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
-    const msgs = messages.map(m => {
-        let t = m.timestamp;
-        if (typeof t === 'number') {
-            if (t < 10000000000) t = t * 1000;
+    // convert to ms
+    const msgs: MessageWithTime[] = messages.map(m => {
+        let t: number;
+        if (typeof m.timestamp === 'number') {
+            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,10 +112,10 @@ export function normalizeId(raw) {
    return raw;
 }

-export function debounce(func, delay) {
-    let timeoutId;
+export function debounce(func: () => void, delay: number): () => void {
+    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 { getBase64 } from "./utils.js";
+import { config } from "./config";
+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 = {
-    'Content-Type': options.headers?.['Content-Type'] ?? 'application/json',
+  const headers: Record<string, string> = {
+    '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() {
-        return await request('/api/version');
+    async getVersion(): Promise<VersionResponse> {
+        return await request<VersionResponse>('/api/version');
    },

-    async getChats() {
-        const data = await request(`/api/${config.session}/chats`);
+    async getChats(): Promise<any[]> {
+        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,
-                name: chat.name || "Unknown Contact",
+                id: chatId || chat.chatId || null,
+                name: chat.name || null,
                unreadCount: chat.unreadCount || 0,
-                lastMessage: chat.lastMessage?.body || chat.lastMessageText || "Click to open chat",
-                timestamp: chat.lastMessage?.timestamp || new Date()
+                lastMessage: chat.lastMessage?.body || chat.lastMessageText || null,
+                timestamp: chat.lastMessage?.timestamp || null
            };
        });
    },

-    async getChatMessages(chatId, beforeTimestamp) {
-        console.log(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40&sortBy=timestamp${beforeTimestamp ? `&filter.timestamp.gte=${beforeTimestamp}` : "" }`);
-        return request(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40${beforeTimestamp ? `&filter.timestamp.lte=${beforeTimestamp}` : "" }`);
+    async getChatMessages(chatId: string, beforeTimestamp?: any): Promise<Message[]> {
+        return request<Message[]>(`/api/${config.session}/chats/${chatId}/messages?downloadMedia=false&limit=40${beforeTimestamp ? `&filter.timestamp.lte=${beforeTimestamp}` : "" }`);
    },

-    async getSingleChatMessage(chatId, messageId, downladMedia) {
-        return request(`/api/${config.session}/chats/${chatId}/messages/${messageId}?downloadMedia=${downladMedia}`);
+    async getSingleChatMessage(chatId: string, messageId: string, downloadMedia: boolean): Promise<Message> {
+        return request<Message>(`/api/${config.session}/chats/${chatId}/messages/${messageId}?downloadMedia=${downloadMedia}`);
    },

-    async getChatPicture(chatId) {
-        return request(`/api/${config.session}/chats/${chatId}/picture`);
+    async getChatPicture(chatId: string): Promise<ChatPictureResponse> {
+        return request<ChatPictureResponse>(`/api/${config.session}/chats/${chatId}/picture`);
    },

-    async getUser(chatId) {
-        return request(`/api/${config.session}/contacts/${chatId}`);
+    async getUser(chatId: string): Promise<ContactInfo> {
+        return request<ContactInfo>(`/api/${config.session}/contacts/${chatId}`);
    },

-    async getUserAbout(chatId) {
-        return request(`/api/contacts/about?contactId=${chatId}&session=${config.session}`);
+    async getUserAbout(chatId: string): Promise<UserAboutResponse> {
+        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() {
-        return request(`/api/sessions/${config.session}/me`);
+    async getMyInfo(): Promise<AppUser> {
+        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) {
-        return request('/api/sendText', {
+    async sendTextMessage(chatId: string, text: string): Promise<Message> {
+        return request<Message>('/api/sendText', {
            method: 'POST',
            body: JSON.stringify({
                chatId,
@ -151,8 +149,8 @@ export const waha = {
        });
    },

-    async setStatus(text) {
-        return request(`/api/${config.session}/profile/status`, {
+    async setStatus(text: string): Promise<StatusResponse> {
+        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 { isOnline, updateOnlineStatus } from "./storage.js";
+import { config } from "./config";
+import { isOnline, updateOnlineStatus } from "./storage";
+import type { WebSocketEvent } from "./types";

-let socket = null;
-let reconnectTimer = null;
-let currentOnMessageCallback = null;
+let socket: WebSocket | null = null;
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let currentOnMessageCallback: ((data: WebSocketEvent) => void) | null = null;

 export const websocket = {
-    connect(onMessageCallback) {
-        if (!isOnline) return;
+    connect(onMessageCallback: (data: WebSocketEvent) => void) {
+        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);
                    }
@ -64,10 +65,13 @@ export const websocket = {
            socket.onclose = (event) => {
                console.log(`[WS] Connection closed (code: ${event.code}). Reconnecting in 5 seconds...`);
                socket = null;
-                
+
                reconnectTimer = setTimeout(() => {
-                    updateOnlineStatus();
-                    this.connect(currentOnMessageCallback);
+                    updateOnlineStatus().then(() => {
+                        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;
-    position: relative;
+    overflow-x: auto;
+    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; /* Firefox */
-        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
    }
    
    .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);
-    color: white;
+    background: transparent;
+    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