This message was deleted
`;
+ }
+
+ const name = displayNameOf(msg);
+ const senderName = isSelf ? '' :
+ `${escapeHtml(name)}
`;
+ const avatar = isSelf
+ ? ''
+ : `${avatarSmallHTML(msg)}
`;
+
+ let content = '';
+ if (msg.content) {
+ content += ``;
}
+ if (msg.file_path) {
+ content += buildAttachmentHTML(msg);
+ }
+ if (msg.reply_to_id) {
+ content = buildReplyQuote(msg) + content;
+ }
+
+ const meta = buildMetaHTML(msg, isSelf);
+
+ // actions
+ let actions = '';
+ actions += actionBtn('reply', 'fas fa-reply', 'Reply');
+ if (!isSelf) {
+ actions += ``;
+ } else {
+ actions += actionBtn('edit', 'fas fa-pen', 'Edit');
+ actions += actionBtn('delete', 'fas fa-trash', 'Delete');
+ }
+ actions += actionBtn('copy', 'fas fa-copy', 'Copy');
+
+ return `
+ ${avatar}
+
+ ${senderName}
+
+
+
`;
+ }
+
+ function actionBtn(action, icon, label) {
+ return ``;
}
- // =============================================
- // Rendering
- // =============================================
- function buildSenderAvatarHTML(msg) {
- const name = escapeHtml(msg.sender_display_name || msg.sender_username || '?');
- const initial = (msg.sender_display_name || msg.sender_username || '?').charAt(0).toUpperCase();
+ function avatarSmallHTML(msg) {
if (msg.sender_avatar_path) {
- return `${initial}
`;
+ return `${initialOf(displayNameOf(msg))}
`;
}
- function renderMessage(msg, append = false) {
- if (DOM.messagesList.querySelector(`[data-id="${msg.id}"]`)) return;
- const wrapper = createMessageElement(msg);
- if (append) {
- DOM.messagesList.appendChild(wrapper);
- } else {
- const ids = State.messageOrder;
- const idx = ids.indexOf(msg.id);
- const nextId = ids[idx + 1];
- if (nextId) {
- const nextEl = DOM.messagesList.querySelector(`[data-id="${nextId}"]`);
- if (nextEl) { DOM.messagesList.insertBefore(wrapper, nextEl); return; }
- }
- DOM.messagesList.appendChild(wrapper);
+ function buildMetaHTML(msg, isSelf) {
+ let s = ``;
+ return s;
}
- function createMessageElement(msg) {
- const isSelf = msg.sender_id === State.user?.id;
- const wrapper = document.createElement('div');
- wrapper.className = `message-wrapper ${isSelf ? 'self' : 'other'}`;
- wrapper.dataset.id = msg.id;
- wrapper.innerHTML = buildMessageHTML(msg);
- return wrapper;
+ function buildReplyQuote(msg) {
+ const target = State.messages.get(msg.reply_to_id);
+ const tn = target ? escapeHtml(displayNameOf(target)) : escapeHtml('Unknown');
+ let text;
+ if (!target) {
+ text = 'Message unavailable';
+ } else {
+ const tomb = (State.tombstoned.get(target.conversation_id) || new Set()).has(target.id);
+ if (tomb || target.is_deleted) text = 'deleted message';
+ else text = escapeHtml(truncate(plainPreview(target), 80));
+ }
+ return ``;
}
- function buildMessageHTML(msg) {
- if (msg.is_deleted) {
- return '';
+ function plainPreview(m) {
+ let txt = m.content ? stripMarkdown(m.content.replace(/
- ${buildSenderAvatarHTML(msg)}
- ${displayName}
+ if (ft.startsWith('image/')) {
+ return `
+ 
`;
- } else {
- html += `
- ${displayName}
- ${buildSenderAvatarHTML(msg)}
+ }
+ if (ft.startsWith('video/')) {
+ return ``;
}
+ if (ft.startsWith('audio/')) {
+ return ``;
+ }
+ const icon = ft.includes('pdf') ? 'fa-file-pdf' : ft.startsWith('text') ? 'fa-file-alt' : 'fa-file';
+ return ``;
+ }
- // Reply indicator
- if (msg.reply_to_id && State.messages.has(msg.reply_to_id)) {
- const reply = State.messages.get(msg.reply_to_id);
- const rName = escapeHtml(reply.sender_display_name || reply.sender_username || 'Unknown');
- const rText = escapeHtml(truncate(reply.content || (reply.file_name ? '📎 ' + reply.file_name : ''), 60));
- html += ``;
+ // ---------------- content formatting ----------------
+ const TOKEN_PLACEHOLDER = '\u0001';
+
+ function renderInlineContent(raw) {
+ let text = String(raw).replace(/\r\n/g, '\n');
+ const parts = [];
+ const ph = (i) => TOKEN_PLACEHOLDER + i + TOKEN_PLACEHOLDER;
+
+ // fenced code blocks ``` ... ``` (their contents are never re-parsed)
+ text = text.replace(/```([\s\S]*?)```/g, (whole, code) => {
+ const clean = code.replace(/^\n/, '').replace(/\n$/, '');
+ parts.push(`![]()
tags (the requested embed feature)
+ text = text.replace(/]*>/gi, (whole) => {
+ const srcMatch = whole.match(/\bsrc\s*=\s*["']([^"']+)["']/i);
+ const src = srcMatch && srcMatch[1];
+ if (src && isAllowedImageSrc(src)) {
+ const s = escapeHtml(src);
+ parts.push(`
`);
+ } else {
+ // not a safe embed - show it as literal text (escaped exactly once)
+ parts.push(escapeHtml(whole));
+ }
+ return ph(parts.length - 1);
+ });
+
+ // auto-linkify http(s) URLs while the text is still raw, so query
+ // strings with & / entities stay intact inside hrefs
+ text = text.replace(/(https?:\/\/[^\s<>"']+)/gi, (url) => {
+ let clean = url;
+ const trailing = clean.match(/[.,!?;:)\]}]+$/);
+ if (trailing) clean = clean.slice(0, -trailing[0].length);
+ if (!/^https?:\/\/\S+\.\S+/.test(clean) && !/^https?:\/\/localhost/i.test(clean)) return url;
+ const c = escapeHtml(clean);
+ parts.push(`${c}`);
+ return ph(parts.length - 1) + (trailing ? trailing[0] : '');
+ });
+
+ // escape everything once, then apply light markdown on the escaped text
+ // (placeholders contain no markdown characters, so they stay inert),
+ // and only then splice the generated HTML (code/img/link) back in.
+ let out = escapeHtml(text);
+ out = out.replace(/\*\*([^*\n]+)\*\*/g, '$1');
+ out = out.replace(/`([^`\n]+)`/g, '
${escapeHtml(clean)}$1');
+ out = out.replace(/(^|[\s(>])\*([^*\n]+)\*(?=[\s.,!?;:)\n]|$)/g, '$1$2');
+ parts.forEach((html, i) => {
+ out = out.split(ph(i)).join(html);
+ });
+ return out;
+ }
+
+ function isAllowedImageSrc(src) {
+ if (!src) return false;
+ if (src.startsWith('/api/download/')) return true;
+ if (/^https?:\/\//i.test(src)) return true;
+ if (/^data:image\/(png|jpe?g|gif|webp);base64,/i.test(src)) return src.length < 200000;
+ return false;
+ }
+
+ // ---------------- DOM patching ----------------
+ function rowEl(id) {
+ return DOM.messagesList.querySelector(`.message-row[data-id="${id}"]`);
+ }
+
+ function updateMessageDom(id, asTombstone = false) {
+ const el = rowEl(id);
+ const msg = State.messages.get(id);
+ if (!el || !msg) return;
+ const isSelf = msg.sender_id === State.user?.id;
+ const tomb = asTombstone || (State.tombstoned.get(msg.conversation_id) || new Set()).has(id);
+ el.className = 'message-row ' + (isSelf ? 'self' : 'other') + (tomb ? ' tomb' : '');
+ el.innerHTML = buildMessageHTML(msg, isSelf);
+ // keep hug class if previous row same author
+ const prev = el.previousElementSibling;
+ if (prev && prev.classList && prev.classList.contains('message-row')) {
+ const prevId = parseInt(prev.dataset.id, 10);
+ const prevMsg = State.messages.get(prevId);
+ if (prevMsg && sameAuthor(msg, prevMsg)) el.classList.add('hug');
}
+ }
- html += ``;
+ function removeMessageDom(id) {
+ const el = rowEl(id);
+ if (el) el.remove();
+ // clean dangling day chips
+ DOM.messagesList.querySelectorAll('.day-separator').forEach((chip) => {
+ const next = chip.nextElementSibling;
+ if (!next || next.classList.contains('day-separator')) chip.remove();
+ });
+ if (!DOM.messagesList.querySelector('.message-row') &&
+ !DOM.messagesList.querySelector('.deleted-note')) {
+ renderEmptyLoading(State.activeConvId);
+ }
+ }
- // Text content
- if (msg.content) {
- html += ``;
+ function updateTick(id) {
+ const el = rowEl(id);
+ if (!el) return;
+ const status = el.querySelector('.message-status');
+ if (status) {
+ status.classList.add('read');
+ const i = status.querySelector('i');
+ if (i) i.className = 'fas fa-check-double';
}
+ }
- // Attachment
- if (msg.file_path) {
- html += buildAttachmentHTML(msg);
+ function appendMessageDom(m) {
+ const ids = getConv(m.conversation_id).ids;
+ const prevId = ids.length > 1 ? ids[ids.length - 2] : null;
+ const prevMsg = prevId ? State.messages.get(prevId) : null;
+ const dayChanged = !prevMsg || dayKey(prevMsg.timestamp_ms) !== dayKey(m.timestamp_ms);
+
+ if (dayChanged) {
+ DOM.messagesList.appendChild(dayChip(dayKey(m.timestamp_ms), m.timestamp_ms));
+ }
+ const row = buildMessageRow(m, prevMsg);
+ if (prevMsg && !dayChanged && sameAuthor(m, prevMsg)) row.classList.add('hug');
+ DOM.messagesList.appendChild(row);
+ DOM.emptyState.style.display = 'none';
+ }
+
+ // ============================================================
+ // Scroll UI
+ // ============================================================
+ function updateScrollUI() {
+ if (!State.isAtBottom) {
+ DOM.scrollBottomBtn.classList.toggle('hidden', !State.prefs.showScrollBtn);
+ } else {
+ DOM.scrollBottomBtn.classList.add('hidden');
+ hideLatestBar();
+ }
+ }
+
+ DOM.messagesScroll.addEventListener('scroll', () => {
+ const { scrollTop, scrollHeight, clientHeight } = DOM.messagesScroll;
+ State.isAtBottom = (scrollHeight - scrollTop - clientHeight) < 90;
+ updateScrollUI();
+ if (State.isAtBottom) hideLatestBar();
+ });
+
+ DOM.scrollBottomBtn.addEventListener('click', () => { scrollToBottom(); hideLatestBar(); });
+
+ function scrollToBottom() {
+ requestAnimationFrame(() => {
+ DOM.messagesScroll.scrollTop = DOM.messagesScroll.scrollHeight;
+ State.isAtBottom = true;
+ updateScrollUI();
+ });
+ }
+
+ // ============================================================
+ // Latest message bar
+ // ============================================================
+ function showLatestBar(m) {
+ if (!State.prefs.showLatestBar || !DOM.latestMessageBar) return;
+ const name = displayNameOf(m);
+ if (m.sender_avatar_path) {
+ DOM.lmbAvatar.innerHTML = `})
`;
+ } else {
+ DOM.lmbAvatar.textContent = initialOf(name);
+ }
+ DOM.lmbName.textContent = name + ':';
+ DOM.lmbText.textContent = truncate(plainPreview(m), 40);
+ DOM.latestMessageBar.classList.remove('hidden');
+ }
+
+ function hideLatestBar() {
+ if (DOM.latestMessageBar) DOM.latestMessageBar.classList.add('hidden');
+ State.latestUnseen = null;
+ }
+
+ DOM.latestMessageBar.addEventListener('click', () => {
+ scrollToBottom();
+ hideLatestBar();
+ markActiveRead(true);
+ });
+
+ // ============================================================
+ // Message row actions (event delegation)
+ // ============================================================
+ DOM.messagesList.addEventListener('click', (e) => {
+ const row = e.target.closest('.message-row');
+ if (!row) return;
+ const msgId = parseInt(row.dataset.id, 10);
+ const msg = State.messages.get(msgId);
+ if (!msg) return;
+
+ const actionEl = e.target.closest('[data-action]');
+ if (!actionEl) return;
+ const action = actionEl.dataset.action;
+ const urlEl = e.target.closest('.js-zoom, [data-url]');
+ const zoomUrl = urlEl ? (urlEl.dataset.url || urlEl.getAttribute('src')) : null;
+
+ switch (action) {
+ case 'reply':
+ replyTo(msgId);
+ break;
+ case 'startchat':
+ openConvModal(msg.sender_id, displayNameOf(msg));
+ break;
+ case 'edit':
+ if (msg.sender_id === State.user?.id) startInlineEdit(msgId);
+ break;
+ case 'delete':
+ if (msg.sender_id === State.user?.id) requestDelete(msg);
+ break;
+ case 'copy':
+ copyMessage(msg);
+ break;
+ case 'receipts':
+ openReceipts(msgId);
+ break;
+ case 'goto-reply': {
+ const targetId = parseInt(actionEl.dataset.reply, 10);
+ const targetRow = rowEl(targetId);
+ if (targetRow) {
+ targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ targetRow.style.transition = 'background 0.8s';
+ targetRow.style.background = 'var(--primary-light)';
+ setTimeout(() => { targetRow.style.background = ''; }, 1200);
+ } else {
+ showToast('That message is no longer loaded', 'info');
+ }
+ break;
+ }
+ case 'open-file':
+ if (zoomUrl) window.open(zoomUrl, '_blank', 'noopener');
+ break;
}
+ });
- // Meta
- html += ``;
+ // image zoom (attachment or embedded)
+ document.addEventListener('click', (e) => {
+ const img = e.target.closest('img.js-zoom');
+ if (!img) return;
+ e.stopPropagation();
+ const url = img.dataset.url || img.getAttribute('src');
+ const name = img.dataset.name || 'image';
+ DOM.lightboxImg.src = url;
+ DOM.lightboxImg.referrerPolicy = 'no-referrer';
+ DOM.lightboxName.textContent = name;
+ DOM.lightboxDownload.href = url;
+ openModal(DOM.lightboxModal);
+ });
- // Actions - always visible
- html += ``;
-
- html += `
`; // close message-bubble
+ });
- return html;
+ function copyMessage(msg) {
+ const text = plainPreview(msg);
+ const done = () => showToast('Copied to clipboard', 'success');
+ const fallback = () => {
+ const ta = document.createElement('textarea');
+ ta.value = text;
+ document.body.appendChild(ta);
+ ta.select();
+ try { document.execCommand('copy'); done(); } catch (err) { showToast('Could not copy', 'error'); }
+ ta.remove();
+ };
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ navigator.clipboard.writeText(text).then(done).catch(fallback);
+ } else fallback();
}
- function buildAttachmentHTML(msg) {
- const url = fileUrl(msg.file_path);
- const ft = (msg.file_type || '').toLowerCase();
- const fname = escapeHtml(msg.file_name || 'File');
+ // ============================================================
+ // Reply
+ // ============================================================
+ function replyTo(messageId) {
+ const msg = State.messages.get(messageId);
+ if (!msg) return;
+ State.replyTo = msg;
+ DOM.replyUser.textContent = displayNameOf(msg);
+ DOM.replyText.textContent = truncate(plainPreview(msg) || '📎 attachment', 60);
+ DOM.replyPreview.classList.remove('hidden');
+ DOM.messageInput.focus();
+ }
+ function clearReply() {
+ State.replyTo = null;
+ DOM.replyPreview.classList.add('hidden');
+ }
+ document.addEventListener('click', (e) => {
+ if (e.target.closest('#cancel-reply')) clearReply();
+ });
- if (ft.startsWith('image/')) {
- return `
-
-
`;
- }
- if (ft.startsWith('video/')) {
- return ``;
- }
- if (ft.startsWith('audio/')) {
- return ``;
- }
- return `
-
-
- })
`;
- } else {
- avatarHtml = (u.display_name || u.username || '?').charAt(0).toUpperCase();
- }
+ const av = u.avatar_path
+ ? ``
+ : `${initialOf(displayNameOf(u))}`;
div.innerHTML = `
-
${fname}
- ${formatFileSize(msg.file_size)}
+ // ============================================================
+ // Edit (inline, no more prompt())
+ // ============================================================
+ function startInlineEdit(messageId) {
+ if (State.editingId) cancelInlineEdit();
+ const msg = State.messages.get(messageId);
+ if (!msg) return;
+ State.editingId = messageId;
+ const el = rowEl(messageId);
+ if (!el) return;
+ const bubble = el.querySelector('.message-bubble');
+ bubble.innerHTML = `
+
+
`;
+ const ta = bubble.querySelector('textarea');
+ ta.focus();
+ ta.setSelectionRange(ta.value.length, ta.value.length);
+
+ bubble.querySelector('[data-edit="save"]').addEventListener('click', () => saveInlineEdit(messageId, ta.value));
+ bubble.querySelector('[data-edit="cancel"]').addEventListener('click', () => cancelInlineEdit());
+ ta.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); saveInlineEdit(messageId, ta.value); }
+ if (e.key === 'Escape') cancelInlineEdit();
+ });
}
- function updateMessageBubble(id) {
- const el = DOM.messagesList.querySelector(`[data-id="${id}"]`);
- if (!el) return;
- const msg = State.messages.get(id);
- if (!msg) return;
- const isSelf = msg.sender_id === State.user?.id;
- el.className = `message-wrapper ${isSelf ? 'self' : 'other'}`;
- el.innerHTML = buildMessageHTML(msg);
+ function cancelInlineEdit() {
+ const id = State.editingId;
+ State.editingId = null;
+ if (id && State.messages.has(id)) updateMessageDom(id);
}
- function renderAllMessages() {
- const wasAtBottom = State.isAtBottom;
- const prevScrollHeight = DOM.messagesScroll.scrollHeight;
-
- DOM.messagesList.innerHTML = '';
-
- if (State.messageOrder.length === 0) {
- DOM.emptyState.style.display = 'flex';
- return;
+ async function saveInlineEdit(id, content) {
+ content = content.trim();
+ if (!content) { showToast('Message cannot be empty', 'warning'); return; }
+ const msg = State.messages.get(id);
+ if (!msg) return;
+ try {
+ const res = await fetch(`${API}/api/messages/${id}?content=${encodeURIComponent(content)}`, {
+ method: 'PATCH',
+ headers: { 'X-Auth-Token': State.token }
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.detail || 'Edit failed');
+ msg.content = content;
+ msg.is_edited = true;
+ State.editingId = null;
+ updateMessageDom(id);
+ const convId = msg.conversation_id;
+ const summary = convById(convId);
+ if (summary && summary.last_message_id === id) {
+ summary.last_message_preview = truncate(content.replace(/\s+/g, ' '), 90);
+ renderSidebar();
+ }
+ } catch (err) {
+ showToast(err.message, 'error');
}
- DOM.emptyState.style.display = 'none';
+ }
- State.messageOrder.forEach(id => {
- const msg = State.messages.get(id);
- if (msg) renderMessage(msg, true);
+ // ============================================================
+ // Delete (HTTP - reliable, never relies on a fragile WS send)
+ // ============================================================
+ async function requestDelete(msg) {
+ const ok = await showConfirm({
+ title: 'Delete message',
+ message: 'This permanently deletes the message for everyone. This cannot be undone.',
+ okText: 'Delete'
});
-
- if (wasAtBottom && State.prefs.autoScroll) {
- scrollToBottom();
- } else if (!wasAtBottom) {
- DOM.messagesScroll.scrollTop += (DOM.messagesScroll.scrollHeight - prevScrollHeight);
- } else {
- scrollToBottom();
+ if (!ok) return;
+ try {
+ const res = await fetch(`${API}/api/messages/${msg.id}`, {
+ method: 'DELETE',
+ headers: { 'X-Auth-Token': State.token }
+ });
+ if (!res.ok) {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Delete failed');
+ }
+ removeMessageDom(msg.id);
+ State.messages.delete(msg.id);
+ pruneConvId(msg.conversation_id, msg.id);
+ if (State.replyTo && State.replyTo.id === msg.id) clearReply();
+ showToast('Message deleted', 'success');
+ const summary = convById(msg.conversation_id);
+ if (summary && summary.last_message_id === msg.id) {
+ summary.last_message_preview = '';
+ summary.last_message_ts = null;
+ renderSidebar();
+ }
+ } catch (err) {
+ showToast(err.message, 'error');
}
}
- // =============================================
- // Compose
- // =============================================
- DOM.composeForm.addEventListener('submit', (e) => {
- e.preventDefault();
- sendMessage();
+ // ============================================================
+ // Compose / send
+ // ============================================================
+ DOM.composeForm.addEventListener('submit', (e) => { e.preventDefault(); sendMessage(); });
+
+ DOM.messageInput.addEventListener('input', () => {
+ const hasContent = DOM.messageInput.value.trim().length > 0 || !!State.pendingFile;
+ DOM.sendBtn.disabled = !hasContent;
+ sendTyping(true);
+ autoResize();
});
DOM.messageInput.addEventListener('keydown', (e) => {
- if (e.key === 'Enter' && !e.shiftKey) {
+ const enterSends = State.prefs.enterSend;
+ if (e.key === 'Enter' && !e.shiftKey && enterSends) {
e.preventDefault();
sendMessage();
+ } else if (e.key === 'Enter' && !e.shiftKey && !enterSends) {
+ // plain Enter = newline; Ctrl/Cmd+Enter still sends
+ if (e.ctrlKey || e.metaKey) { e.preventDefault(); sendMessage(); }
}
});
- DOM.messageInput.addEventListener('input', () => {
- const hasContent = DOM.messageInput.value.trim().length > 0 || !!State.pendingFile;
- DOM.sendBtn.disabled = !hasContent;
- if (hasContent) sendTyping(true);
- autoResize();
- });
+ DOM.messageInput.addEventListener('blur', () => sendTyping(false));
function sendMessage() {
const content = DOM.messageInput.value.trim();
if (!content && !State.pendingFile) return;
- if (!State.ws || State.ws.readyState !== WebSocket.OPEN) {
- showToast('Not connected', 'warning');
- return;
+ if (!State.activeConvId) { showToast('No conversation selected', 'warning'); return; }
+ if (!wsOpen()) {
+ showToast('Not connected - message queued, sending when reconnected', 'warning');
}
+ const clientId = generateId();
const payload = {
type: 'send_message',
content: content,
+ conversation_id: State.activeConvId,
reply_to_id: State.replyTo ? State.replyTo.id : null,
- client_id: generateId()
+ client_id: clientId
};
if (State.pendingFile) {
payload.file_path = State.pendingFile.file_path;
@@ -780,90 +1892,208 @@
payload.file_name = State.pendingFile.file_name;
payload.file_size = State.pendingFile.file_size;
}
- State.ws.send(JSON.stringify(payload));
+ State.pendingSends.set(clientId, payload);
+ // only keep the most recent 30 queued messages
+ while (State.pendingSends.size > 30) {
+ State.pendingSends.delete(State.pendingSends.keys().next().value);
+ }
+
+ if (!wsSend(payload)) {
+ // offline: keep queued; UI clears and message re-sends on reconnect
+ showToast('Message queued - will send when you reconnect', 'warning');
+ }
DOM.messageInput.value = '';
DOM.sendBtn.disabled = true;
+ DOM.messageInput.dispatchEvent(new Event('input'));
clearReply();
clearPendingFile();
- autoResize();
sendTyping(false);
+ autoResize();
+ }
+
+ function flushPendingSends() {
+ const pending = [...State.pendingSends.entries()];
+ pending.forEach(([clientId, payload]) => {
+ if (payload.conversation_id === GLOBAL_CONV && !getConv(GLOBAL_CONV).ids.length) {
+ // ensure lobby is loaded before replaying
+ loadMessages(GLOBAL_CONV);
+ }
+ wsSend({ ...payload });
+ });
}
function sendTyping(isTyping) {
- if (!State.ws || State.ws.readyState !== WebSocket.OPEN) return;
- clearTimeout(window.__typingTimer);
- State.ws.send(JSON.stringify({ type: 'typing', is_typing: isTyping }));
+ if (!wsOpen()) return;
+ const now = Date.now();
+ if (isTyping && now - State.typingSentAt < 1600) return;
+ State.typingSentAt = now;
+ wsSend({ type: 'typing', is_typing: isTyping, conversation_id: State.activeConvId });
if (isTyping) {
- window.__typingTimer = setTimeout(() => sendTyping(false), 2000);
+ clearTimeout(window.__typingStop);
+ window.__typingStop = setTimeout(() => sendTyping(false), 2200);
}
}
function updateTypingIndicator() {
- const users = Array.from(State.typingUsers.values()).filter(u => u.user_id !== State.user?.id);
- DOM.typingIndicator.classList.toggle('hidden', users.length === 0);
- if (users.length > 0) {
- DOM.typingText.textContent = users.map(u => u.display_name || u.username).join(', ') +
- (users.length === 1 ? ' is typing...' : ' are typing...');
+ const prefix = `${State.activeConvId}:`;
+ const names = [...State.typingUsers.entries()]
+ .filter(([k]) => k.startsWith(prefix))
+ .map(([, v]) => v.name);
+ DOM.typingIndicator.classList.toggle('hidden', names.length === 0);
+ if (names.length) {
+ DOM.typingText.textContent = names.join(', ') + (names.length === 1 ? ' is typing…' : ' are typing…');
}
}
- // =============================================
- // Reply
- // =============================================
- function replyTo(messageId) {
- const msg = State.messages.get(messageId);
- if (!msg) return;
- State.replyTo = msg;
- DOM.replyUser.textContent = msg.sender_display_name || msg.sender_username;
- DOM.replyText.textContent = truncate(msg.content || (msg.file_name ? '📎 ' + msg.file_name : ''), 60);
- DOM.replyPreview.classList.remove('hidden');
- DOM.messageInput.focus();
+ function autoResize() {
+ DOM.messageInput.style.height = 'auto';
+ DOM.messageInput.style.height = Math.min(DOM.messageInput.scrollHeight, 120) + 'px';
}
- function clearReply() {
- State.replyTo = null;
- DOM.replyPreview.classList.add('hidden');
+ // ============================================================
+ // Start private chat modal
+ // ============================================================
+ function openConvModal(peerId, peerName) {
+ if (peerId === State.user?.id) { showToast('That is you!', 'info'); return; }
+ const existing = [...State.conversations.values()].filter(
+ c => c.type === 'dm' && c.peer && c.peer.id === peerId
+ );
+ DOM.convModalDesc.innerHTML = `Chat privately with ${escapeHtml(peerName)}` +
+ (existing.length ? ` (${existing.length} of 3 existing)` : '');
+ DOM.convModal.dataset.peerId = peerId;
+ DOM.convModal.dataset.peerName = peerName;
+ renderConvModal(existing);
+ openModal(DOM.convModal);
}
- document.addEventListener('click', (e) => {
- if (e.target.id === 'cancel-reply' || e.target.closest('#cancel-reply')) clearReply();
- });
-
- // =============================================
- // Edit / Delete
- // =============================================
- function editMessage(messageId) {
- const msg = State.messages.get(messageId);
- if (!msg) return;
- const newContent = prompt('Edit message:', msg.content);
- if (newContent !== null && newContent.trim()) {
- State.ws?.send(JSON.stringify({ type: 'edit_message', message_id: messageId, content: newContent.trim() }));
+ function renderConvModal(existing) {
+ let html = '';
+ existing.forEach(c => {
+ html += ``;
+ });
+ if (!existing.length) {
+ html = '
+
+
No private chats with this person yet
';
+ }
+ DOM.convModalList.innerHTML = html;
+ const atLimit = existing.length >= 3;
+ DOM.newChatBtn.disabled = atLimit;
+ DOM.newChatBtn.querySelector('i').className = atLimit ? 'fas fa-ban' : 'fas fa-plus';
+ DOM.newChatBtn.lastChild.textContent = atLimit ? ' Limit Reached' : ' Start New Chat';
+ if (atLimit) {
+ const note = document.createElement('div');
+ note.className = 'conv-modal-note';
+ note.id = 'conv-limit-note';
+ note.innerHTML = ' You already have 3 private chats with this person. The limit is 3 per person.';
+ if (!DOM.convModalList.querySelector('#conv-limit-note')) DOM.convModalList.appendChild(note);
+ } else {
+ const note = DOM.convModalList.querySelector('#conv-limit-note');
+ if (note) note.remove();
}
+ DOM.convModalList.querySelectorAll('[data-open-conv]').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const cid = parseInt(btn.dataset.openConv, 10);
+ closeModal(DOM.convModal);
+ switchConversation(cid);
+ });
+ });
}
- function deleteMessage(messageId) {
- if (confirm('Permanently delete this message?')) {
- State.ws?.send(JSON.stringify({ type: 'delete_message', message_id: messageId }));
+ DOM.newChatBtn.addEventListener('click', async () => {
+ const peerId = parseInt(DOM.convModal.dataset.peerId, 10);
+ const peerName = DOM.convModal.dataset.peerName;
+ if (!peerId) return;
+ const btn = DOM.newChatBtn;
+ btn.disabled = true;
+ btn.innerHTML = ' Creating…';
+ const finish = () => { btn.disabled = false; btn.innerHTML = ' Start New Chat'; };
+ try {
+ if (wsOpen()) {
+ wsSend({ type: 'create_dm', user_id: peerId });
+ // The dm_created event switches conversation automatically.
+ // Close the modal: outcome arrives via ws in ms.
+ closeModal(DOM.convModal);
+ finish();
+ return;
+ }
+ const res = await fetch(`${API}/api/conversations/dm?user_id=${peerId}`, {
+ method: 'POST', headers: { 'X-Auth-Token': State.token }
+ });
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.detail || 'Could not start chat');
+ upsertConversation(data.conversation);
+ closeModal(DOM.convModal);
+ switchConversation(data.conversation.id);
+ showToast(`Private chat with ${peerName} started`, 'success');
+ } catch (err) {
+ showToast(err.message, 'error');
+ finish();
}
- }
+ });
- // =============================================
- // File Upload
- // =============================================
+ // ============================================================
+ // Uploads (attach, paste, drag & drop)
+ // ============================================================
DOM.attachBtn.addEventListener('click', () => DOM.fileInput.click());
DOM.fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
+ e.target.value = '';
if (!file) return;
await uploadChunked(file);
- e.target.value = '';
+ });
+
+ DOM.messageInput.addEventListener('paste', (e) => {
+ const items = e.clipboardData && e.clipboardData.items;
+ if (!items) return;
+ for (const item of items) {
+ if (item.type && item.type.startsWith('image/')) {
+ e.preventDefault();
+ const file = item.getAsFile();
+ if (file) uploadChunked(file);
+ break;
+ }
+ }
+ });
+
+ // drag & drop onto the chat window
+ let dragDepth = 0;
+ DOM.chatScreen.addEventListener('dragenter', (e) => {
+ if (!e.dataTransfer || ![...(e.dataTransfer.types || [])].includes('Files')) return;
+ dragDepth++;
+ DOM.dropOverlay.classList.remove('hidden');
+ });
+ DOM.chatScreen.addEventListener('dragover', (e) => { e.preventDefault(); });
+ DOM.chatScreen.addEventListener('dragleave', () => {
+ dragDepth = Math.max(0, dragDepth - 1);
+ if (!dragDepth) DOM.dropOverlay.classList.add('hidden');
+ });
+ DOM.chatScreen.addEventListener('drop', async (e) => {
+ e.preventDefault();
+ dragDepth = 0;
+ DOM.dropOverlay.classList.add('hidden');
+ const files = e.dataTransfer && e.dataTransfer.files;
+ if (!files || !files.length) return;
+ const file = files[0];
+ if (files.length > 1) showToast('Attaching the first file (one per message)', 'info');
+ await uploadChunked(file);
});
async function uploadChunked(file) {
+ if (file.size > 500 * 1024 * 1024) {
+ showToast('File too large (max 500MB)', 'error');
+ return;
+ }
const CHUNK_SIZE = 5 * 1024 * 1024;
- const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+ const totalChunks = Math.max(1, Math.ceil(file.size / CHUNK_SIZE));
const uploadId = generateId();
DOM.uploadProgress.classList.remove('hidden');
- updateProgress(0, file.name);
+ updateProgress(0, file.name, file.size);
for (let i = 0; i < totalChunks; i++) {
const blob = file.slice(i * CHUNK_SIZE, Math.min((i + 1) * CHUNK_SIZE, file.size));
@@ -873,10 +2103,15 @@
`&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type || 'application/octet-stream')}` +
`&file_size=${file.size}&upload_id=${uploadId}`;
try {
- const res = await fetch(url, { method: 'POST', body: formData, headers: { 'X-Auth-Token': State.token } });
- if (!res.ok) throw new Error('Upload failed');
+ const res = await fetch(url, {
+ method: 'POST', body: formData, headers: { 'X-Auth-Token': State.token }
+ });
+ if (!res.ok) {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Upload failed');
+ }
const data = await res.json();
- updateProgress(((i + 1) / totalChunks) * 100, file.name);
+ updateProgress(((i + 1) / totalChunks) * 100, file.name, file.size);
if (data.status === 'complete') {
State.pendingFile = {
file_path: data.file_path,
@@ -884,9 +2119,10 @@
file_name: data.file_name,
file_size: data.file_size
};
- showUploadPreview(data.file_name);
+ showUploadPreview(State.pendingFile);
DOM.uploadProgress.classList.add('hidden');
DOM.sendBtn.disabled = false;
+ DOM.messageInput.focus();
return;
}
} catch (err) {
@@ -898,15 +2134,21 @@
DOM.uploadProgress.classList.add('hidden');
}
- function updateProgress(percent, filename) {
+ function updateProgress(percent, filename, size) {
DOM.progressFill.style.width = `${percent}%`;
DOM.progressText.textContent = `${Math.round(percent)}%`;
if (filename) DOM.uploadFilename.textContent = filename;
+ if (size !== undefined) DOM.uploadSize.textContent = formatFileSize(size);
}
- function showUploadPreview(filename) {
+ function showUploadPreview(pf) {
+ const ft = (pf.file_type || '').toLowerCase();
+ DOM.uploadIcon.className = 'fas ' + (ft.startsWith('image/') ? 'fa-image'
+ : ft.startsWith('video/') ? 'fa-video'
+ : ft.startsWith('audio/') ? 'fa-music' : 'fa-paperclip');
+ DOM.uploadFilename.textContent = pf.file_name;
+ DOM.uploadSize.textContent = formatFileSize(pf.file_size);
DOM.uploadPreview.classList.remove('hidden');
- DOM.uploadFilename.textContent = filename;
}
function clearPendingFile() {
@@ -919,15 +2161,14 @@
DOM.sendBtn.disabled = DOM.messageInput.value.trim().length === 0;
});
- // =============================================
- // Emoji Picker
- // =============================================
+ // ============================================================
+ // Emoji picker
+ // ============================================================
DOM.emojiBtn.addEventListener('click', (e) => {
e.stopPropagation();
DOM.emojiPicker.classList.toggle('hidden');
if (!DOM.emojiPicker.classList.contains('hidden')) renderEmojis('smileys');
});
-
document.addEventListener('click', (e) => {
if (!DOM.emojiPicker.contains(e.target) && e.target !== DOM.emojiBtn) {
DOM.emojiPicker.classList.add('hidden');
@@ -967,71 +2208,70 @@
});
}
- // =============================================
- // Load More
- // =============================================
+ // ============================================================
+ // Load older
+ // ============================================================
DOM.loadOlderBtn.addEventListener('click', () => {
- if (State.ws?.readyState === WebSocket.OPEN && State.hasMore && State.cursor) {
- State.isAtBottom = false;
- State.ws.send(JSON.stringify({ type: 'load_messages', cursor: State.cursor, limit: 50 }));
+ const convId = State.activeConvId;
+ const cache = getConv(convId);
+ if (wsOpen() && cache.hasMore && cache.cursor && !cache.loading) {
+ cache.loading = true;
+ loadMessages(convId, { older: true });
}
});
- // =============================================
- // Online Users
- // =============================================
+ // ============================================================
+ // Online users
+ // ============================================================
DOM.onlineBtn.addEventListener('click', () => {
renderOnlineUsers();
- DOM.onlineModal.classList.remove('hidden');
+ openModal(DOM.onlineModal);
+ requestOnlineUsers();
});
- document.querySelectorAll('[data-close="online-modal"]').forEach(btn => {
- btn.addEventListener('click', () => DOM.onlineModal.classList.add('hidden'));
- });
+ function requestOnlineUsers() {
+ if (wsOpen()) wsSend({ type: 'get_online_users' });
+ }
function updateOnlineBadge() {
DOM.onlineBadge.textContent = State.onlineUsers.size;
+ DOM.onlineBadge.classList.toggle('hidden', State.onlineUsers.size === 0);
}
function renderOnlineUsers() {
DOM.onlineUsersList.innerHTML = '';
- if (State.onlineUsers.size === 0) {
+ if (!State.onlineUsers.size) {
DOM.onlineUsersList.innerHTML = 'No users online
';
DOM.onlineTotal.textContent = '0 users online';
return;
}
State.onlineUsers.forEach(u => {
+ if (u.id === State.user?.id) return; // don't list yourself
const div = document.createElement('div');
div.className = 'user-item';
- let avatarHtml;
- if (u.avatar_path) {
- avatarHtml = `${avatarHtml}
+ ${av}
`;
DOM.onlineUsersList.appendChild(div);
});
- DOM.onlineTotal.textContent = `${State.onlineUsers.size} user${State.onlineUsers.size !== 1 ? 's' : ''} online`;
+ DOM.onlineTotal.textContent = `${State.onlineUsers.size - (State.onlineUsers.has(State.user?.id) ? 1 : 0)} user${State.onlineUsers.size !== 1 ? 's' : ''} online`;
}
- // =============================================
+ // ============================================================
// Settings
- // =============================================
- document.getElementById('settings-btn').addEventListener('click', openSettings);
- document.querySelectorAll('[data-close="settings-modal"]').forEach(btn => {
- btn.addEventListener('click', () => DOM.settingsModal.classList.add('hidden'));
- });
- document.getElementById('save-settings').addEventListener('click', saveSettings);
-
+ // ============================================================
function openSettings() {
DOM.settingsDisplayName.value = State.user?.display_name || '';
DOM.settingsUsername.value = State.user?.username || '';
+ DOM.pwCurrent.value = '';
+ DOM.pwNew.value = '';
+ DOM.pwMsg.textContent = '';
if (State.user?.avatar_path) {
DOM.settingsAvatarImg.src = fileUrl(State.user.avatar_path);
@@ -1042,9 +2282,7 @@
DOM.settingsAvatarPreview.classList.remove('hidden');
}
- DOM.themeOptions.forEach(opt => {
- opt.classList.toggle('active', opt.dataset.theme === State.theme);
- });
+ DOM.themeOptions.forEach(opt => opt.classList.toggle('active', opt.dataset.theme === State.theme));
DOM.customThemeSettings.classList.toggle('hidden', State.theme !== 'custom');
if (State.theme === 'custom') {
DOM.customSelfColor.value = State.customColors.self;
@@ -1054,40 +2292,43 @@
DOM.otherColorHex.textContent = State.customColors.other;
DOM.textColorHex.textContent = State.customColors.text;
}
-
- // Load prefs into toggles
+ DOM.aboutVersion.textContent = APP_VERSION;
applyPrefs();
-
- DOM.settingsModal.classList.remove('hidden');
+ openModal(DOM.settingsModal);
}
+ DOM.settingsBtn.addEventListener('click', openSettings);
+ DOM.meSettingsBtn.addEventListener('click', openSettings);
+
async function saveSettings() {
const newName = DOM.settingsDisplayName.value.trim();
if (newName && newName !== State.user?.display_name) {
try {
const res = await fetch(`${API}/api/profile?display_name=${encodeURIComponent(newName)}`, {
- method: 'PATCH',
- headers: { 'X-Auth-Token': State.token }
+ method: 'PATCH', headers: { 'X-Auth-Token': State.token }
});
if (res.ok) {
State.user.display_name = newName;
- updateHeader();
+ updateSidebarMe();
+ renderSidebar();
+ renderConversationHeader(State.activeConvId);
showToast('Display name updated', 'success');
+ } else {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Failed');
}
- } catch (e) {
- showToast('Failed to update name', 'error');
- }
+ } catch (e) { showToast('Failed to update name', 'error'); }
}
const avatarFile = DOM.avatarInput.files[0];
if (avatarFile) {
const formData = new FormData();
formData.append('file', avatarFile);
+ DOM.avatarUploadBtn.disabled = true;
+ DOM.avatarUploadBtn.innerHTML = '';
try {
const res = await fetch(`${API}/api/profile/avatar`, {
- method: 'POST',
- body: formData,
- headers: { 'X-Auth-Token': State.token }
+ method: 'POST', body: formData, headers: { 'X-Auth-Token': State.token }
});
if (res.ok) {
const data = await res.json();
@@ -1095,18 +2336,27 @@
DOM.settingsAvatarImg.src = fileUrl(data.avatar_path);
DOM.settingsAvatarImg.classList.remove('hidden');
DOM.settingsAvatarPreview.classList.add('hidden');
- updateHeader();
+ updateSidebarMe();
+ renderSidebar();
+ renderConversationHeader(State.activeConvId);
showToast('Avatar updated', 'success');
+ } else {
+ const data = await res.json().catch(() => ({}));
+ throw new Error(data.detail || 'Upload failed');
}
} catch (e) {
- showToast('Failed to update avatar', 'error');
+ showToast(e.message, 'error');
+ } finally {
+ DOM.avatarUploadBtn.disabled = false;
+ DOM.avatarUploadBtn.innerHTML = ' Change Photo';
}
}
- // Save prefs from toggles
- if (DOM.toggleAutoScroll) State.prefs.autoScroll = DOM.toggleAutoScroll.checked;
- if (DOM.toggleScrollBtn) State.prefs.showScrollBtn = DOM.toggleScrollBtn.checked;
- if (DOM.toggleLatestBar) State.prefs.showLatestBar = DOM.toggleLatestBar.checked;
+ State.prefs.autoScroll = DOM.toggleAutoScroll.checked;
+ State.prefs.showScrollBtn = DOM.toggleScrollBtn.checked;
+ State.prefs.showLatestBar = DOM.toggleLatestBar.checked;
+ State.prefs.sound = DOM.toggleSound.checked;
+ State.prefs.enterSend = DOM.toggleEnterSend.checked;
savePrefs();
const selectedTheme = document.querySelector('.theme-option.active')?.dataset.theme || 'light';
@@ -1119,8 +2369,7 @@
localStorage.setItem('custom-text', State.customColors.text);
}
applyTheme(selectedTheme);
-
- DOM.settingsModal.classList.add('hidden');
+ closeModal(DOM.settingsModal);
}
DOM.customSelfColor.addEventListener('input', () => { DOM.selfColorHex.textContent = DOM.customSelfColor.value; });
@@ -1157,76 +2406,55 @@
}
});
- // =============================================
- // Utility
- // =============================================
- function generateId() {
- return Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
- }
-
- function truncate(str, n) {
- if (!str) return '';
- return str.length > n ? str.substr(0, n - 1) + '…' : str;
- }
-
- function escapeHtml(text) {
- if (!text) return '';
- const div = document.createElement('div');
- div.textContent = text;
- return div.innerHTML;
- }
+ document.getElementById('save-settings').addEventListener('click', saveSettings);
- function formatTime(ms) {
- if (!ms) return '';
- const date = new Date(ms);
- const now = new Date();
- const diff = now - date;
- if (diff < 60000) return 'just now';
- if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
- if (date.toDateString() === now.toDateString()) {
- return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+ DOM.pwChangeBtn.addEventListener('click', async () => {
+ const current = DOM.pwCurrent.value;
+ const next = DOM.pwNew.value;
+ if (!current || next.length < 6) {
+ DOM.pwMsg.textContent = 'Enter your current password and a new one (6+ characters)';
+ DOM.pwMsg.className = 'form-hint error';
+ return;
}
- const yesterday = new Date(now);
- yesterday.setDate(yesterday.getDate() - 1);
- if (date.toDateString() === yesterday.toDateString()) {
- return 'Yesterday ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+ DOM.pwChangeBtn.disabled = true;
+ DOM.pwChangeBtn.innerHTML = '';
+ try {
+ const res = await fetch(
+ `${API}/api/profile/password?current_password=${encodeURIComponent(current)}&new_password=${encodeURIComponent(next)}`,
+ { method: 'POST', headers: { 'X-Auth-Token': State.token } }
+ );
+ const data = await res.json().catch(() => ({}));
+ if (!res.ok) throw new Error(data.detail || 'Failed');
+ DOM.pwMsg.textContent = 'Password updated successfully';
+ DOM.pwMsg.className = 'form-hint success';
+ DOM.pwCurrent.value = '';
+ DOM.pwNew.value = '';
+ } catch (err) {
+ DOM.pwMsg.textContent = err.message;
+ DOM.pwMsg.className = 'form-hint error';
+ } finally {
+ DOM.pwChangeBtn.disabled = false;
+ DOM.pwChangeBtn.innerHTML = ' Change Password';
}
- return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' +
- date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
- }
-
- function formatFileSize(bytes) {
- if (!bytes) return '0 B';
- const k = 1024;
- const sizes = ['B', 'KB', 'MB', 'GB'];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
- }
-
- function autoResize() {
- DOM.messageInput.style.height = 'auto';
- DOM.messageInput.style.height = Math.min(DOM.messageInput.scrollHeight, 120) + 'px';
- }
+ });
- // =============================================
- // Init
- // =============================================
+ // ============================================================
+ // Auth lifecycle
+ // ============================================================
async function init() {
applyPrefs();
+ DOM.aboutVersion.textContent = APP_VERSION;
if (State.token) {
try {
- const res = await fetch(`${API}/api/auth/verify`, {
- headers: { 'X-Auth-Token': State.token }
- });
+ const res = await fetch(`${API}/api/auth/verify`, { headers: { 'X-Auth-Token': State.token } });
if (res.ok) {
const data = await res.json();
State.user = data.user;
showChat();
connectWebSocket();
- startTimestampUpdater();
return;
}
- } catch (e) {}
+ } catch (e) { /* fall through to auth screen */ }
localStorage.removeItem('token');
State.token = null;
}
@@ -1234,6 +2462,7 @@
}
function showAuth() {
+ State.wsState = 'disconnected';
DOM.authScreen.classList.add('active');
DOM.chatScreen.classList.remove('active');
}
@@ -1241,62 +2470,116 @@
function showChat() {
DOM.authScreen.classList.remove('active');
DOM.chatScreen.classList.add('active');
- updateHeader();
- startTimestampUpdater();
+ updateSidebarMe();
}
- function updateHeader() {
+ function updateSidebarMe() {
if (!State.user) return;
- const displayEl = document.getElementById('header-display-name');
- if (displayEl) displayEl.textContent = State.user.display_name || State.user.username;
+ DOM.sbMeName.textContent = displayNameOf(State.user);
if (State.user.avatar_path) {
- const img = document.getElementById('header-avatar');
- const ph = document.getElementById('header-avatar-placeholder');
- if (img) { img.src = fileUrl(State.user.avatar_path); img.classList.remove('hidden'); }
- if (ph) ph.classList.add('hidden');
+ DOM.sbMeAvatar.src = fileUrl(State.user.avatar_path);
+ DOM.sbMeAvatar.classList.remove('hidden');
+ DOM.sbMeAvatarPh.classList.add('hidden');
+ } else {
+ DOM.sbMeAvatar.classList.add('hidden');
+ DOM.sbMeAvatarPh.classList.remove('hidden');
}
}
- document.querySelectorAll('.input-toggle').forEach(btn => {
- btn.addEventListener('click', () => {
- const input = document.getElementById(btn.dataset.toggle);
- if (input) {
- input.type = input.type === 'password' ? 'text' : 'password';
- const icon = btn.querySelector('i');
- if (icon) icon.className = input.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
- }
- });
- });
-
- document.getElementById('logout-btn').addEventListener('click', async () => {
- if (State.token) {
- try {
- await fetch(`${API}/api/auth/logout`, { method: 'POST', headers: { 'X-Auth-Token': State.token } });
- } catch (e) {}
- }
- if (State.ws) { State.ws.close(); State.ws = null; }
+ function forceLogout() {
+ showToast('Session expired - please sign in again', 'warning');
localStorage.removeItem('token');
State.token = null;
+ State.wsState = 'disconnected';
+ if (State.ws) { try { State.ws.close(); } catch (e) { /* noop */ } }
+ State.ws = null;
+ resetAllState();
+ showAuth();
+ }
+
+ function resetAllState() {
State.user = null;
+ State.conversations.clear();
+ State.conversationOrder = [];
+ State.convCache.clear();
State.messages.clear();
- State.messageOrder = [];
+ State.tombstoned.clear();
+ State.pendingSends.clear();
State.onlineUsers.clear();
State.typingUsers.clear();
+ State.activeConvId = null;
State.cursor = null;
- State.hasMore = true;
+ State.replyTo = null;
+ State.pendingFile = null;
State.latestUnseen = null;
+ State.editingId = null;
DOM.messagesList.innerHTML = '';
+ DOM.convList.innerHTML = '';
+ DOM.sidebar.classList.remove('open');
+ DOM.sidebarBackdrop.classList.add('hidden');
+ DOM.loadOlderBtn.classList.add('hidden');
DOM.emptyState.style.display = 'flex';
hideLatestBar();
- showAuth();
updateOnlineBadge();
- });
+ updateTitleUnread();
+ clearReply();
+ clearPendingFile();
+ DOM.messageInput.value = '';
+ DOM.sendBtn.disabled = true;
+ DOM.uploadProgress.classList.add('hidden');
+ DOM.onlineModal.classList.add('hidden');
+ DOM.settingsModal.classList.add('hidden');
+ DOM.convModal.classList.add('hidden');
+ DOM.receiptsModal.classList.add('hidden');
+ DOM.confirmModal.classList.add('hidden');
+ DOM.lightboxModal.classList.add('hidden');
+ DOM.emojiPicker.classList.add('hidden');
+ openModals.length = 0;
+ document.body.style.overflow = '';
+ }
- if (window.Notification && Notification.permission === 'default') {
- Notification.requestPermission();
+ function doLogout() {
+ if (State.token) {
+ fetch(`${API}/api/auth/logout`, { method: 'POST', headers: { 'X-Auth-Token': State.token } }).catch(() => { });
+ }
+ if (State.ws) { try { State.ws.close(); } catch (e) { /* noop */ } }
+ State.ws = null;
+ localStorage.removeItem('token');
+ State.token = null;
+ resetAllState();
+ showAuth();
}
- window.InfinityChat = { replyTo, editMessage, deleteMessage };
+ DOM.logoutBtn.addEventListener('click', () => {
+ showConfirm({
+ title: 'Log out',
+ message: 'Log out of InfinityChat on this device?',
+ okText: 'Log Out',
+ danger: false
+ }).then(ok => { if (ok) doLogout(); });
+ });
+ DOM.sidebarLogoutBtn.addEventListener('click', () => {
+ showConfirm({
+ title: 'Log out',
+ message: 'Log out of InfinityChat on this device?',
+ okText: 'Log Out',
+ danger: false
+ }).then(ok => { if (ok) doLogout(); });
+ });
+
+ document.querySelectorAll('.input-toggle').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const input = document.getElementById(btn.dataset.toggle);
+ if (input) {
+ input.type = input.type === 'password' ? 'text' : 'password';
+ const icon = btn.querySelector('i');
+ if (icon) icon.className = input.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
+ }
+ });
+ });
+ // ============================================================
+ // Go
+ // ============================================================
init();
})();
\ No newline at end of file