From 83fbfb5fd4e82b7c329c400f6365cf79c8b0f4cf Mon Sep 17 00:00:00 2001 From: ancsemi Date: Mon, 20 Apr 2026 18:28:50 -0400 Subject: [PATCH] feat: add threads, toolbar customization, and SSO/auth flow improvements --- CHANGELOG.md | 20 + docs/index.html | 12 +- donor-order.json | 12 +- package.json | 2 +- public/app.html | 66 +++ public/css/style.css | 676 ++++++++++++++++++++++++++++- public/js/app.js | 19 +- public/js/auth.js | 160 +++++-- public/js/modules/app-channels.js | 1 + public/js/modules/app-media.js | 175 +++++++- public/js/modules/app-messages.js | 77 +++- public/js/modules/app-platform.js | 3 + public/js/modules/app-socket.js | 42 +- public/js/modules/app-ui.js | 345 ++++++++++++++- public/js/modules/app-utilities.js | 387 ++++++++++++++++- public/js/servers.js | 35 +- src/auth.js | 113 ++++- src/database.js | 8 + src/socketHandlers/messages.js | 230 +++++++++- website/index.html | 12 +- 20 files changed, 2245 insertions(+), 150 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cb9d427..d798fd0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,26 @@ Format follows [Keep a Changelog](https://keepachangelog.com/). Haven uses [Sema --- +## [3.5.0] — 2026-04-20 + +### Added +- **Threaded replies panel** — message threads now open in a dedicated right-side panel with parent context, inline reply flow, and live updates. +- **Thread previews in channel chat** — parent messages now show thread activity summaries with reply count, recent participants, and last activity timestamp. +- **Thread panel PiP mode and resize handle** — thread conversations can be popped out into a floating panel and resized for multitasking. +- **Toolbar icon and layout customization** — settings now include monochrome vs emoji toolbar styles, visible action slot count, and per-action order controls. + +### Fixed +- **SSO approval reliability and feedback** — improved SSO consent/auth flow with clearer status messages, timeout handling, profile return via `postMessage`, and stronger fallback behavior. +- **Vanity invite continuity through auth redirects** — `invite` query params now persist through login/register flows and redirect correctly into `/app`. +- **Thread-aware message queries** — primary channel history now excludes thread replies to prevent duplicate rendering and keep main timelines clean. +- **Cache-busting version query injection** — static asset version query strings are now auto-injected more reliably to reduce stale client bundles after updates. + +### Changed +- **SSO response metadata** — SSO auth responses now include display name data and stricter CORS/origin handling for cross-origin auth handoff. +- **Database schema for threads** — added `messages.thread_id` migration and index to support efficient threaded message fetches. + +--- + ## [3.4.0] — 2026-04-19 ### Added diff --git a/docs/index.html b/docs/index.html index 2ef35c5..aee2fc4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1415,12 +1415,12 @@
-

⬡ Haven Server — v3.4.0

+

⬡ Haven Server — v3.5.0

Latest stable release · Windows, macOS & Linux · ~5 MB

- - ⬇ Download v3.4.0 (.zip) + + ⬇ Download v3.5.0 (.zip)
⛭ View on GitHub @@ -1437,7 +1437,11 @@
-
v3.4.0Latest
+
v3.5.0Latest
+ Download → +
+
+
v3.4.0 — Quote/edit UX, bot API upgrades, SSO quality fixes
Download →
diff --git a/donor-order.json b/donor-order.json index d202ffc..e7a9bc5 100644 --- a/donor-order.json +++ b/donor-order.json @@ -9,24 +9,24 @@ ], "donors": [ "Andrew Schott", - "Taylan", "birdycrazy", + "Taylan", "(,,•ᴗ•,,)", "Morgan", "deNully", - "wreckedcarzz", - "khyrna", "HoppyGamers", + "khyrna", + "wreckedcarzz", "c0urier", - "JollyOrc", "Ezmana", "john doe", + "JollyOrc", + "lataxd9", "ohmygdala", "Orange Lantern", - "lataxd9", "MutantRabbbit767", - "haruna", "CloneBtw", + "haruna", "ArtyDaSmarty", "6yBbBc" ] diff --git a/package.json b/package.json index 2535125..3da5aae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "haven", - "version": "3.4.0", + "version": "3.5.0", "description": "Haven — self-hosted private chat for your server, your rules", "license": "AGPL-3.0", "main": "server.js", diff --git a/public/app.html b/public/app.html index 9f6df1a..6077f54 100644 --- a/public/app.html +++ b/public/app.html @@ -711,6 +711,37 @@
+ + + ${toolbarHtml} @@ -1070,6 +1124,7 @@ _enterMoveSelectionMode() { _exitMoveSelectionMode() { this._moveSelectionActive = false; this._moveSelectedIds.clear(); + this._lastMoveSelectedEl = null; document.body.classList.remove('move-selection-mode'); const toolbar = document.getElementById('move-msg-toolbar'); if (toolbar) toolbar.style.display = 'none'; diff --git a/public/js/modules/app-platform.js b/public/js/modules/app-platform.js index 1730dc4..0125a0a 100644 --- a/public/js/modules/app-platform.js +++ b/public/js/modules/app-platform.js @@ -492,6 +492,7 @@ async _initE2E() { if (syncKey && this.serverManager) { await this.serverManager.syncWithServer(this.token, syncKey); this._renderServerBar(); + this._pushServersToDesktopHistory(); // Re-sync periodically (every 5 min) so cross-device changes propagate // without requiring a full page reload or re-login @@ -502,6 +503,7 @@ async _initE2E() { try { await this.serverManager.syncWithServer(this.token, key); this._renderServerBar(); + this._pushServersToDesktopHistory(); } catch { /* silent — best-effort background sync */ } } }, 5 * 60 * 1000); @@ -517,6 +519,7 @@ async _initE2E() { try { await this.serverManager.syncWithServer(this.token, key); this._renderServerBar(); + this._pushServersToDesktopHistory(); } catch { /* silent */ } } }); diff --git a/public/js/modules/app-socket.js b/public/js/modules/app-socket.js index 0b344bf..446e8f1 100644 --- a/public/js/modules/app-socket.js +++ b/public/js/modules/app-socket.js @@ -296,6 +296,7 @@ _setupSocketListeners() { if (inviteCode && !this._inviteHandled) { this._inviteHandled = true; this.socket.emit('join-channel', { code: inviteCode }); + sessionStorage.removeItem('haven_pending_invite'); // Clean up the URL const cleanUrl = window.location.pathname; window.history.replaceState({}, '', cleanUrl); @@ -728,6 +729,45 @@ _setupSocketListeners() { } }); + // ── Threads ─────────────────────────────────────── + this.socket.on('thread-messages', (data) => { + if (data.parentUsername) { + this._setThreadParentHeader({ + username: data.parentUsername, + avatar: data.parentAvatar || null, + avatarShape: data.parentAvatarShape || 'circle' + }); + } + + // Update parent preview from server (authoritative source) + if (data.parentContent) { + const preview = document.getElementById('thread-parent-preview'); + if (preview) { + const text = data.parentContent.length > 120 ? data.parentContent.substring(0, 120) + '…' : data.parentContent; + preview.textContent = text; + } + } + const container = document.getElementById('thread-messages'); + if (!container) return; + container.innerHTML = ''; + if (data.messages) { + data.messages.forEach(msg => this._appendThreadMessage(msg)); + } + }); + + this.socket.on('new-thread-message', (data) => { + if (data.channelCode !== this.currentChannel) return; + // If this thread is open, append the message + if (this._activeThreadParent === data.parentId) { + this._appendThreadMessage(data.message); + } + }); + + this.socket.on('thread-updated', (data) => { + if (data.channelCode !== this.currentChannel) return; + this._updateThreadPreview(data.parentId, data.thread); + }); + // ── Polls ───────────────────────────────────────── this.socket.on('poll-updated', (data) => { if (data.channelCode === this.currentChannel) { @@ -960,7 +1000,7 @@ _setupSocketListeners() { if (data.channelCode === this.currentChannel) { const msgEl = document.querySelector(`[data-msg-id="${data.messageId}"]`); if (!msgEl) return; - const contentEl = msgEl.querySelector('.message-content'); + const contentEl = msgEl.querySelector('.message-content, .thread-msg-content'); if (contentEl) { // E2E: decrypt if needed let displayContent = data.content; diff --git a/public/js/modules/app-ui.js b/public/js/modules/app-ui.js index 38ee996..2d4c112 100644 --- a/public/js/modules/app-ui.js +++ b/public/js/modules/app-ui.js @@ -1475,6 +1475,175 @@ _setupUI() { this._jumpToMessage(parseInt(replyMsgId, 10)); }); + // Thread preview click — open thread panel + document.getElementById('messages').addEventListener('click', (e) => { + const preview = e.target.closest('.thread-preview'); + if (!preview) return; + const parentId = parseInt(preview.dataset.threadParent); + if (parentId) this._openThread(parentId); + }); + + // Thread panel — close, send + const threadCloseBtn = document.getElementById('thread-panel-close'); + if (threadCloseBtn) threadCloseBtn.addEventListener('click', () => this._closeThread()); + + const threadPipBtn = document.getElementById('thread-panel-pip'); + if (threadPipBtn) threadPipBtn.addEventListener('click', () => this._toggleThreadPiP()); + + const threadSendBtn = document.getElementById('thread-send-btn'); + if (threadSendBtn) threadSendBtn.addEventListener('click', () => this._sendThreadMessage()); + + const threadInput = document.getElementById('thread-input'); + if (threadInput) { + threadInput.addEventListener('keydown', (e) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + this._sendThreadMessage(); + } + }); + } + + const threadReplyCloseBtn = document.getElementById('thread-reply-close-btn'); + if (threadReplyCloseBtn) threadReplyCloseBtn.addEventListener('click', () => this._clearThreadReply()); + + // Thread panel width resize (drag left edge) + const threadPanel = document.getElementById('thread-panel'); + const threadResizer = document.getElementById('thread-panel-resizer'); + if (threadPanel) { + const savedWidth = parseInt(localStorage.getItem('haven_thread_panel_width') || '', 10); + if (Number.isFinite(savedWidth) && savedWidth >= 300 && savedWidth <= 920) { + threadPanel.style.width = `${savedWidth}px`; + } + } + if (threadPanel && threadResizer) { + let resizing = false; + const clampWidth = (w) => { + const min = 300; + const max = Math.min(920, window.innerWidth - 220); + return Math.max(min, Math.min(max, w)); + }; + const onMove = (e) => { + if (!resizing || threadPanel.classList.contains('pip')) return; + const width = clampWidth(window.innerWidth - e.clientX); + threadPanel.style.width = `${width}px`; + }; + const onUp = () => { + if (!resizing) return; + resizing = false; + document.body.classList.remove('resizing-thread-panel'); + document.removeEventListener('mousemove', onMove); + document.removeEventListener('mouseup', onUp); + const current = parseInt(threadPanel.style.width || '', 10); + if (Number.isFinite(current)) { + localStorage.setItem('haven_thread_panel_width', String(clampWidth(current))); + } + }; + threadResizer.addEventListener('mousedown', (e) => { + if (threadPanel.classList.contains('pip')) return; + resizing = true; + e.preventDefault(); + document.body.classList.add('resizing-thread-panel'); + document.addEventListener('mousemove', onMove); + document.addEventListener('mouseup', onUp); + }); + window.addEventListener('resize', () => { + if (threadPanel.classList.contains('pip')) return; + const current = parseInt(threadPanel.style.width || '', 10); + if (!Number.isFinite(current)) return; + const width = clampWidth(current); + if (width !== current) { + threadPanel.style.width = `${width}px`; + localStorage.setItem('haven_thread_panel_width', String(width)); + } + }); + } + + // Thread panel PiP drag (drag by header) + if (threadPanel) { + const threadHeaderTop = threadPanel.querySelector('.thread-panel-header-top'); + let draggingPiP = false; + let dragOffsetX = 0; + let dragOffsetY = 0; + + const footerOffset = () => { + const raw = getComputedStyle(document.body).getPropertyValue('--thread-footer-offset'); + const v = parseInt(raw, 10); + return Number.isFinite(v) ? v : 0; + }; + + const clampPiPRect = (left, top, width, height) => { + const maxLeft = Math.max(0, window.innerWidth - width); + const maxTop = Math.max(0, window.innerHeight - footerOffset() - height); + return { + left: Math.max(0, Math.min(maxLeft, left)), + top: Math.max(0, Math.min(maxTop, top)) + }; + }; + + const savePiPRect = () => { + if (!threadPanel.classList.contains('pip')) return; + const r = threadPanel.getBoundingClientRect(); + const rect = { + left: Math.round(r.left), + top: Math.round(r.top), + width: Math.round(r.width), + height: Math.round(r.height) + }; + localStorage.setItem('haven_thread_panel_pip_rect', JSON.stringify(rect)); + }; + + const onPiPMove = (e) => { + if (!draggingPiP || !threadPanel.classList.contains('pip')) return; + const r = threadPanel.getBoundingClientRect(); + const rawLeft = e.clientX - dragOffsetX; + const rawTop = e.clientY - dragOffsetY; + const pos = clampPiPRect(rawLeft, rawTop, r.width, r.height); + threadPanel.style.left = `${pos.left}px`; + threadPanel.style.top = `${pos.top}px`; + threadPanel.style.right = 'auto'; + threadPanel.style.bottom = 'auto'; + }; + + const onPiPUp = () => { + if (!draggingPiP) return; + draggingPiP = false; + document.removeEventListener('mousemove', onPiPMove); + document.removeEventListener('mouseup', onPiPUp); + savePiPRect(); + }; + + if (threadHeaderTop) { + threadHeaderTop.addEventListener('mousedown', (e) => { + if (!threadPanel.classList.contains('pip')) return; + if (e.target.closest('button, input, textarea, a')) return; + const r = threadPanel.getBoundingClientRect(); + draggingPiP = true; + dragOffsetX = e.clientX - r.left; + dragOffsetY = e.clientY - r.top; + threadPanel.style.right = 'auto'; + threadPanel.style.bottom = 'auto'; + e.preventDefault(); + document.addEventListener('mousemove', onPiPMove); + document.addEventListener('mouseup', onPiPUp); + }); + } + + if (window.ResizeObserver) { + const observer = new ResizeObserver(() => { + if (!threadPanel.classList.contains('pip')) return; + clearTimeout(this._threadPiPSaveTimer); + this._threadPiPSaveTimer = setTimeout(() => { + const r = threadPanel.getBoundingClientRect(); + const pos = clampPiPRect(r.left, r.top, r.width, r.height); + threadPanel.style.left = `${pos.left}px`; + threadPanel.style.top = `${pos.top}px`; + savePiPRect(); + }, 80); + }); + observer.observe(threadPanel); + } + } + // Emoji picker toggle document.getElementById('emoji-btn').addEventListener('click', () => { this._toggleEmojiPicker(); @@ -1495,7 +1664,7 @@ _setupUI() { this._clearReply(); }); - // Messages container — move-selection mode intercept + // Messages container — move-selection mode intercept (supports Shift+click range) document.getElementById('messages').addEventListener('click', (e) => { if (!this._moveSelectionActive) return; // Don't intercept toolbar button clicks @@ -1504,7 +1673,30 @@ _setupUI() { if (msgEl) { e.preventDefault(); e.stopPropagation(); - this._toggleMoveSelect(msgEl); + + if (e.shiftKey && this._lastMoveSelectedEl) { + // Shift+click: select all messages between last selected and this one + const container = document.getElementById('messages'); + const allMsgs = Array.from(container.querySelectorAll('.message, .message-compact')); + const lastIdx = allMsgs.indexOf(this._lastMoveSelectedEl); + const curIdx = allMsgs.indexOf(msgEl); + if (lastIdx !== -1 && curIdx !== -1) { + const start = Math.min(lastIdx, curIdx); + const end = Math.max(lastIdx, curIdx); + for (let i = start; i <= end; i++) { + const id = parseInt(allMsgs[i].dataset.msgId); + if (id && !this._moveSelectedIds.has(id)) { + if (this._moveSelectedIds.size >= 200) break; + this._moveSelectedIds.add(id); + allMsgs[i].classList.add('move-selected'); + } + } + this._updateMoveCount(); + } + } else { + this._toggleMoveSelect(msgEl); + this._lastMoveSelectedEl = msgEl; + } } }, true); // capture phase so it fires before the toolbar action handler @@ -1524,6 +1716,8 @@ _setupUI() { this._showReactionPicker(msgEl, msgId); } else if (action === 'reply') { this._setReply(msgEl, msgId); + } else if (action === 'thread') { + this._openThread(msgId); } else if (action === 'quote') { this._quoteMessage(msgEl); } else if (action === 'edit') { @@ -1547,6 +1741,7 @@ _setupUI() { document.getElementById('messages').addEventListener('click', (e) => { const badge = e.target.closest('.reaction-badge'); if (!badge) return; + this._hideReactionPopout(); const msgEl = badge.closest('.message, .message-compact'); if (!msgEl) return; const msgId = parseInt(msgEl.dataset.msgId); @@ -1559,6 +1754,152 @@ _setupUI() { } }); + // Thread panel reactions: open picker + toggle reaction on badges + const threadMessages = document.getElementById('thread-messages'); + if (threadMessages) { + threadMessages.addEventListener('click', (e) => { + const threadActionBtn = e.target.closest('[data-thread-action]'); + if (threadActionBtn) { + const msgEl = threadActionBtn.closest('.thread-message'); + if (!msgEl) return; + const msgId = parseInt(msgEl.dataset.msgId, 10); + if (!msgId) return; + e.preventDefault(); + e.stopPropagation(); + const action = threadActionBtn.dataset.threadAction; + if (action === 'react') { + this._showReactionPicker(msgEl, msgId); + } else if (action === 'reply') { + this._setThreadReply(msgEl, msgId); + } else if (action === 'quote') { + this._quoteThreadMessage(msgEl); + } else if (action === 'edit') { + this._startEditMessage(msgEl, msgId); + } else if (action === 'delete') { + if (confirm(t('confirm.delete_message'))) { + this.socket.emit('delete-message', { messageId: msgId }); + } + } + return; + } + + const banner = e.target.closest('.reply-banner'); + if (banner) { + const replyMsgId = parseInt(banner.dataset.replyMsgId || '', 10); + if (!replyMsgId) return; + const target = threadMessages.querySelector(`[data-msg-id="${replyMsgId}"]`); + if (target) { + target.scrollIntoView({ block: 'center', behavior: 'smooth' }); + target.classList.add('thread-highlight'); + setTimeout(() => target.classList.remove('thread-highlight'), 1200); + } + return; + } + + const badge = e.target.closest('.reaction-badge'); + if (!badge) return; + this._hideReactionPopout(); + const msgEl = badge.closest('.thread-message'); + if (!msgEl) return; + const msgId = parseInt(msgEl.dataset.msgId, 10); + const emoji = badge.dataset.emoji; + const hasOwn = badge.classList.contains('own'); + if (!msgId || !emoji) return; + if (hasOwn) { + this.socket.emit('remove-reaction', { messageId: msgId, emoji }); + } else { + this.socket.emit('add-reaction', { messageId: msgId, emoji }); + } + }); + } + + // Keep toolbar overflow menus visible: flip below when top space is too small. + const updateToolbarOverflowDirection = (moreWrap) => { + if (!moreWrap) return; + const overflow = moreWrap.querySelector('.msg-toolbar-overflow, .thread-msg-overflow'); + if (!overflow) return; + + overflow.classList.remove('flip-below'); + + const container = moreWrap.closest('#messages, #thread-messages'); + const containerRect = container + ? container.getBoundingClientRect() + : { top: 0, bottom: window.innerHeight }; + const moreRect = moreWrap.getBoundingClientRect(); + const menuHeight = Math.max(overflow.scrollHeight, 40) + 8; + const spaceAbove = moreRect.top - containerRect.top; + const spaceBelow = containerRect.bottom - moreRect.bottom; + + // Open downward when opening upward would clip in the current visible viewport. + if (spaceAbove < menuHeight && spaceBelow > spaceAbove) { + overflow.classList.add('flip-below'); + } + }; + + const bindOverflowDirection = (container) => { + if (!container) return; + + container.addEventListener('mouseover', (e) => { + const moreWrap = e.target.closest('.msg-toolbar-more, .thread-msg-more'); + if (!moreWrap) return; + updateToolbarOverflowDirection(moreWrap); + }); + + container.addEventListener('focusin', (e) => { + const moreWrap = e.target.closest('.msg-toolbar-more, .thread-msg-more'); + if (!moreWrap) return; + updateToolbarOverflowDirection(moreWrap); + }); + }; + + bindOverflowDirection(document.getElementById('messages')); + bindOverflowDirection(threadMessages); + + // Reaction badge hover — show popout with user list + { + let _popoutTimer = null; + const msgs = document.getElementById('messages'); + const threadMsgs = document.getElementById('thread-messages'); + msgs.addEventListener('mouseover', (e) => { + const badge = e.target.closest('.reaction-badge'); + if (!badge) return; + clearTimeout(_popoutTimer); + _popoutTimer = setTimeout(() => this._showReactionPopout(badge), 350); + }); + if (threadMsgs) { + threadMsgs.addEventListener('mouseover', (e) => { + const badge = e.target.closest('.reaction-badge'); + if (!badge) return; + clearTimeout(_popoutTimer); + _popoutTimer = setTimeout(() => this._showReactionPopout(badge), 350); + }); + threadMsgs.addEventListener('mouseout', (e) => { + const badge = e.target.closest('.reaction-badge'); + if (!badge && !e.target.closest('#reaction-popout')) { + clearTimeout(_popoutTimer); + setTimeout(() => { + if (!document.querySelector('#reaction-popout:hover')) this._hideReactionPopout(); + }, 200); + } + }); + } + msgs.addEventListener('mouseout', (e) => { + const badge = e.target.closest('.reaction-badge'); + if (!badge && !e.target.closest('#reaction-popout')) { + clearTimeout(_popoutTimer); + setTimeout(() => { + if (!document.querySelector('#reaction-popout:hover')) this._hideReactionPopout(); + }, 200); + } + }); + document.addEventListener('mouseover', (e) => { + if (!e.target.closest('#reaction-popout') && !e.target.closest('.reaction-badge')) { + clearTimeout(_popoutTimer); + this._hideReactionPopout(); + } + }); + } + // ── Poll vote click (delegated from messages container) ── document.getElementById('messages').addEventListener('click', (e) => { const optBtn = e.target.closest('.poll-option'); diff --git a/public/js/modules/app-utilities.js b/public/js/modules/app-utilities.js index 730a760..e7ffb40 100644 --- a/public/js/modules/app-utilities.js +++ b/public/js/modules/app-utilities.js @@ -209,9 +209,18 @@ _formatContent(str) { // Render `inline code` html = html.replace(/`([^`]+)`/g, '$1'); - // Render > blockquotes (lines starting with >) - html = html.replace(/(?:^|\n)>\s?(.+)/g, (_, text) => { - return `\n
${text}
`; + // Render grouped > blockquotes and preserve attribution lines inside the quote. + const blockquotes = []; + html = html.replace(/(^|\n)((?:>[^\n]*(?:\n|$))+)/g, (full, pre, block) => { + const lines = block.trim().split('\n').map(line => line.replace(/^>\s?/, '')); + let authorHtml = ''; + if (lines[0] && /^@[^\s].+ wrote:$/.test(lines[0])) { + authorHtml = `
${lines.shift()}
`; + } + const textHtml = lines.join('
'); + const idx = blockquotes.length; + blockquotes.push(`${pre}
${authorHtml}
${textHtml}
`); + return `\x00BLOCKQUOTE_${idx}\x00`; }); // ── Headings: # H1, ## H2, ### H3 at start of line ── @@ -243,6 +252,10 @@ _formatContent(str) { html = html.replace(/\n/g, '
'); + blockquotes.forEach((block, idx) => { + html = html.replace(`\x00BLOCKQUOTE_${idx}\x00`, block); + }); + // ── Restore fenced code blocks ── codeBlocks.forEach((block, idx) => { const escaped = this._escapeHtml(block.code).replace(/\n$/, ''); @@ -919,6 +932,7 @@ _renderReactions(msgId, reactions) { const badges = Object.values(grouped).map(g => { const isOwn = g.users.some(u => u.id === this.user.id); const names = g.users.map(u => u.username).join(', '); + const usersJson = this._escapeHtml(JSON.stringify(g.users.map(u => u.username))); // Check if it's a custom emoji const customMatch = g.emoji.match(/^:([a-zA-Z0-9_-]+):$/); let emojiDisplay = g.emoji; @@ -926,7 +940,7 @@ _renderReactions(msgId, reactions) { const ce = this.customEmojis.find(e => e.name === customMatch[1]); if (ce) emojiDisplay = `:${this._escapeHtml(ce.name)}:`; } - return ``; + return ``; }).join(''); return `
${badges}
`; @@ -946,8 +960,8 @@ _updateMessageReactions(messageId, reactions) { const html = this._renderReactions(messageId, reactions); if (!html) { if (wasAtBottom) this._scrollToBottom(true); return; } - // Find where to insert — after .message-content - const content = msgEl.querySelector('.message-content'); + // Find where to insert — after main or thread message content + const content = msgEl.querySelector('.message-content, .thread-msg-content'); if (content) { content.insertAdjacentHTML('afterend', html); } @@ -955,6 +969,49 @@ _updateMessageReactions(messageId, reactions) { if (wasAtBottom) this._scrollToBottom(true); }, +// ── Reaction popout (who reacted) ───────────────────── + +_showReactionPopout(badge) { + this._hideReactionPopout(); + let users; + try { users = JSON.parse(badge.dataset.users || '[]'); } catch { return; } + if (!users.length) return; + + const emoji = badge.dataset.emoji; + const customMatch = emoji.match(/^:([a-zA-Z0-9_-]+):$/); + let emojiDisplay = emoji; + if (customMatch && this.customEmojis) { + const ce = this.customEmojis.find(e => e.name === customMatch[1]); + if (ce) emojiDisplay = `:${this._escapeHtml(ce.name)}:`; + } + + const popout = document.createElement('div'); + popout.id = 'reaction-popout'; + popout.className = 'reaction-popout'; + popout.innerHTML = ` +
${emojiDisplay} ${users.length}
+
+ ${users.map(u => `
${this._escapeHtml(u)}
`).join('')} +
+ `; + document.body.appendChild(popout); + + // Position above the badge + const rect = badge.getBoundingClientRect(); + popout.style.left = rect.left + 'px'; + popout.style.top = (rect.top - popout.offsetHeight - 6) + 'px'; + // Clamp to viewport + const pr = popout.getBoundingClientRect(); + if (pr.right > window.innerWidth) popout.style.left = (window.innerWidth - pr.width - 8) + 'px'; + if (pr.left < 0) popout.style.left = '8px'; + if (pr.top < 0) popout.style.top = (rect.bottom + 6) + 'px'; +}, + +_hideReactionPopout() { + const existing = document.getElementById('reaction-popout'); + if (existing) existing.remove(); +}, + _getQuickEmojis() { const saved = localStorage.getItem('haven_quick_emojis'); if (saved) { @@ -1179,17 +1236,10 @@ _showReactionPicker(msgEl, msgId) { // Flip picker below the message if it would be clipped above requestAnimationFrame(() => { const pickerRect = picker.getBoundingClientRect(); - if (pickerRect.top < 0) { + const container = msgEl.closest('#thread-messages, #messages'); + const containerTop = container ? container.getBoundingClientRect().top : 0; + if (pickerRect.top < containerTop + 4) { picker.classList.add('flip-below'); - } else { - // Also check against the messages container top (channel header/topic) - const container = document.getElementById('messages'); - if (container) { - const containerRect = container.getBoundingClientRect(); - if (pickerRect.top < containerRect.top) { - picker.classList.add('flip-below'); - } - } } }); @@ -1311,11 +1361,308 @@ _showFullReactionPicker(msgEl, msgId, quickPicker) { searchTimer = setTimeout(() => renderAll(searchInput.value.trim()), 150); }); - // Position the panel near the quick picker - msgEl.appendChild(panel); + // Position the panel relative to quick picker so it never overlaps it + quickPicker.appendChild(panel); + if (quickPicker.classList.contains('flip-below')) { + panel.classList.add('flip-below'); + } + + requestAnimationFrame(() => { + const panelRect = panel.getBoundingClientRect(); + const container = msgEl.closest('#thread-messages, #messages'); + const containerTop = container ? container.getBoundingClientRect().top : 0; + if (panelRect.top < containerTop + 4) { + panel.classList.add('flip-below'); + } + }); searchInput.focus(); }, +// ═══════════════════════════════════════════════════════ +// THREADS +// ═══════════════════════════════════════════════════════ + +_renderThreadPreview(parentId, thread) { + if (!thread || !thread.count) return ''; + const participantAvatars = (thread.participants || []).map(p => { + if (p.avatar) { + return `${this._escapeHtml(p.username)}`; + } + const color = this._getUserColor(p.username); + const initial = p.username.charAt(0).toUpperCase(); + return `
${initial}
`; + }).join(''); + + const timeAgo = this._relativeTime(thread.lastReplyAt); + return ` + + `; +}, + +_relativeTime(isoStr) { + if (!isoStr) return ''; + const diff = Date.now() - new Date(isoStr).getTime(); + const mins = Math.floor(diff / 60000); + if (mins < 1) return 'just now'; + if (mins < 60) return `${mins}m ago`; + const hours = Math.floor(mins / 60); + if (hours < 24) return `${hours}h ago`; + const days = Math.floor(hours / 24); + return `${days}d ago`; +}, + +_setThreadParentHeader(meta = {}) { + const wrap = document.getElementById('thread-parent-avatar-wrap'); + const nameEl = document.getElementById('thread-parent-name'); + if (!wrap || !nameEl) return; + + const username = (meta.username || '').trim() || 'Thread starter'; + const shape = (meta.avatarShape || 'circle') === 'square' ? 'square' : 'circle'; + const shapeClass = shape === 'square' ? ' thread-parent-avatar-square' : ''; + + if (meta.avatar) { + wrap.innerHTML = `${this._escapeHtml(username)}`; + } else { + const initial = username.charAt(0).toUpperCase() || '?'; + const color = this._getUserColor(username); + wrap.innerHTML = `
${this._escapeHtml(initial)}
`; + } + + nameEl.textContent = username; + nameEl.title = username; +}, + +_setThreadReply(msgEl, msgId) { + const author = msgEl.querySelector('.thread-msg-author')?.textContent || 'someone'; + const rawContent = msgEl.dataset.rawContent || msgEl.querySelector('.thread-msg-content')?.textContent || ''; + const preview = rawContent.length > 70 ? rawContent.substring(0, 70) + '…' : rawContent; + this._threadReplyingTo = { id: msgId, username: author, content: rawContent }; + + const bar = document.getElementById('thread-reply-bar'); + const text = document.getElementById('thread-reply-preview-text'); + if (!bar || !text) return; + bar.style.display = 'flex'; + text.innerHTML = `Replying to ${this._escapeHtml(author)}: ${this._escapeHtml(preview)}`; + + const input = document.getElementById('thread-input'); + if (input) input.focus(); +}, + +_clearThreadReply() { + this._threadReplyingTo = null; + const bar = document.getElementById('thread-reply-bar'); + if (bar) bar.style.display = 'none'; +}, + +_quoteThreadMessage(msgEl) { + const rawContent = msgEl.dataset.rawContent || msgEl.querySelector('.thread-msg-content')?.textContent || ''; + const author = msgEl.querySelector('.thread-msg-author')?.textContent || 'someone'; + const quotedLines = rawContent.split('\n').map(l => `> ${l}`).join('\n'); + const quoteText = `> @${author} wrote:\n${quotedLines}\n`; + + const input = document.getElementById('thread-input'); + if (!input) return; + if (input.value) { + input.value += '\n' + quoteText; + } else { + input.value = quoteText; + } + input.focus(); + input.dispatchEvent(new Event('input')); +}, + +_openThread(parentId) { + this._activeThreadParent = parentId; + const panel = document.getElementById('thread-panel'); + if (!panel) return; + panel.style.display = 'flex'; + panel.dataset.parentId = parentId; + this._setThreadPiPEnabled(localStorage.getItem('haven_thread_panel_pip') === '1'); + + // Request thread messages from server + this.socket.emit('get-thread-messages', { parentId }); + + // Update header + const msgEl = document.querySelector(`[data-msg-id="${parentId}"]`); + const author = msgEl?.querySelector('.message-author')?.textContent || 'Thread starter'; + document.getElementById('thread-panel-title').textContent = 'Thread'; + const parentPreview = msgEl?.querySelector('.message-content')?.textContent || ''; + document.getElementById('thread-parent-preview').textContent = parentPreview.length > 120 ? parentPreview.substring(0, 120) + '…' : parentPreview; + + const avatarImg = msgEl?.querySelector('.message-avatar-img'); + let avatar = null; + if (avatarImg && avatarImg.getAttribute('src')) avatar = avatarImg.getAttribute('src'); + const avatarShape = (avatarImg && avatarImg.classList.contains('avatar-square')) ? 'square' : 'circle'; + this._setThreadParentHeader({ username: author, avatar, avatarShape }); + + // Focus input + const input = document.getElementById('thread-input'); + if (input) input.focus(); +}, + +_setThreadPiPEnabled(enabled) { + const panel = document.getElementById('thread-panel'); + const pipBtn = document.getElementById('thread-panel-pip'); + if (!panel || !pipBtn) return; + + const isOn = !!enabled; + panel.classList.toggle('pip', isOn); + pipBtn.textContent = isOn ? '▣' : '⧉'; + pipBtn.title = isOn ? 'Dock thread panel' : 'Pop out thread (PiP)'; + pipBtn.setAttribute('aria-pressed', isOn ? 'true' : 'false'); + localStorage.setItem('haven_thread_panel_pip', isOn ? '1' : '0'); + + if (isOn) { + let saved = null; + try { saved = JSON.parse(localStorage.getItem('haven_thread_panel_pip_rect') || 'null'); } catch {} + + const minW = 320; + const maxW = Math.min(760, window.innerWidth - 28); + const minH = 240; + const footerOffset = (() => { + const raw = getComputedStyle(document.body).getPropertyValue('--thread-footer-offset'); + const v = parseInt(raw, 10); + return Number.isFinite(v) ? v : 0; + })(); + const maxH = Math.max(minH, window.innerHeight - footerOffset - 28); + + const width = Math.max(minW, Math.min(maxW, (saved && saved.width) || panel.offsetWidth || 420)); + const height = Math.max(minH, Math.min(maxH, (saved && saved.height) || panel.offsetHeight || 460)); + const defaultLeft = Math.max(0, window.innerWidth - width - 14); + const defaultTop = Math.max(0, window.innerHeight - footerOffset - height - 14); + const left = Math.max(0, Math.min(window.innerWidth - width, (saved && Number.isFinite(saved.left)) ? saved.left : defaultLeft)); + const top = Math.max(0, Math.min(window.innerHeight - footerOffset - height, (saved && Number.isFinite(saved.top)) ? saved.top : defaultTop)); + + panel.style.width = `${Math.round(width)}px`; + panel.style.height = `${Math.round(height)}px`; + panel.style.left = `${Math.round(left)}px`; + panel.style.top = `${Math.round(top)}px`; + panel.style.right = 'auto'; + panel.style.bottom = 'auto'; + } else { + panel.style.height = ''; + panel.style.left = ''; + panel.style.top = ''; + panel.style.right = ''; + panel.style.bottom = ''; + } +}, + +_toggleThreadPiP() { + const panel = document.getElementById('thread-panel'); + if (!panel) return; + this._setThreadPiPEnabled(!panel.classList.contains('pip')); +}, + +_closeThread() { + this._activeThreadParent = null; + this._clearThreadReply(); + const panel = document.getElementById('thread-panel'); + if (panel) { + panel.style.display = 'none'; + panel.dataset.parentId = ''; + } +}, + +_sendThreadMessage() { + const input = document.getElementById('thread-input'); + if (!input) return; + const content = input.value.trim(); + if (!content) return; + const parentId = this._activeThreadParent; + if (!parentId) return; + const replyTo = this._threadReplyingTo ? this._threadReplyingTo.id : null; + + this.socket.emit('send-thread-message', { parentId, content, replyTo }, (resp) => { + if (resp && resp.error) { + this._showToast(resp.error, 'error'); + return; + } + this._clearThreadReply(); + }); + input.value = ''; +}, + +_appendThreadMessage(msg) { + const container = document.getElementById('thread-messages'); + if (!container) return; + + const color = this._getUserColor(msg.username); + const initial = msg.username.charAt(0).toUpperCase(); + let avatarHtml; + if (msg.avatar) { + avatarHtml = `${initial}`; + } else { + avatarHtml = `
${initial}
`; + } + + const reactionsHtml = this._renderReactions(msg.id, msg.reactions || []); + const replyHtml = msg.replyContext ? this._renderReplyBanner(msg.replyContext) : ''; + const canDelete = msg.user_id === this.user.id || this.user.isAdmin || this._canModerate(); + const canEdit = msg.user_id === this.user.id; + const iconPair = (emoji, monoSvg) => ``; + const iReact = iconPair('😀', ''); + const iReply = iconPair('↩️', ''); + const iQuote = iconPair('💬', ''); + const iEdit = iconPair('✏️', ''); + const iDelete = iconPair('🗑️', ''); + const iMore = iconPair('⋯', ''); + const threadCoreToolbarBtns = ``; + let threadOverflowToolbarBtns = ''; + if (canEdit) threadOverflowToolbarBtns += ``; + if (canDelete) threadOverflowToolbarBtns += ``; + const threadOverflowHtml = threadOverflowToolbarBtns + ? `
${threadOverflowToolbarBtns}
` + : ''; + + const el = document.createElement('div'); + el.className = 'thread-message'; + el.dataset.msgId = msg.id; + el.dataset.rawContent = msg.content; + el.innerHTML = ` +
+ ${avatarHtml} +
+
+ ${this._escapeHtml(msg.username)} + ${this._formatTime(msg.created_at)} + +
+
${threadCoreToolbarBtns}
+ ${threadOverflowHtml} +
+
+ ${replyHtml} +
${this._formatContent(msg.content)}
+ ${reactionsHtml} +
+
+ `; + container.appendChild(el); + container.scrollTop = container.scrollHeight; +}, + +_updateThreadPreview(parentId, thread) { + const msgEl = document.querySelector(`[data-msg-id="${parentId}"]`); + if (!msgEl) return; + const oldPreview = msgEl.querySelector('.thread-preview'); + const newHtml = this._renderThreadPreview(parentId, thread); + if (oldPreview) { + oldPreview.outerHTML = newHtml; + } else if (newHtml) { + // Insert after reactions row, or after message-content + const reactions = msgEl.querySelector('.reactions-row'); + const content = msgEl.querySelector('.message-content'); + const insertAfter = reactions || content; + if (insertAfter) insertAfter.insertAdjacentHTML('afterend', newHtml); + } +}, + // ═══════════════════════════════════════════════════════ // REPLY // ═══════════════════════════════════════════════════════ @@ -1382,7 +1729,7 @@ _quoteMessage(msgEl) { // Build the blockquote text — each line prefixed with > const quotedLines = rawContent.split('\n').map(l => `> ${l}`).join('\n'); - const quoteText = `${quotedLines}\n@${author} `; + const quoteText = `> @${author} wrote:\n${quotedLines}\n`; const input = document.getElementById('message-input'); // If there's already text, add a newline before the quote @@ -1405,7 +1752,7 @@ _startEditMessage(msgEl, msgId) { // Guard against re-entering edit mode if (msgEl.classList.contains('editing')) return; - const contentEl = msgEl.querySelector('.message-content'); + const contentEl = msgEl.querySelector('.message-content, .thread-msg-content'); if (!contentEl) return; // Use the stored raw markdown content (set on render and kept in sync on diff --git a/public/js/servers.js b/public/js/servers.js index 18d85f8..08eb66c 100644 --- a/public/js/servers.js +++ b/public/js/servers.js @@ -25,7 +25,20 @@ class ServerManager { _load() { try { - return JSON.parse(localStorage.getItem('haven_servers') || '[]'); + const raw = JSON.parse(localStorage.getItem('haven_servers') || '[]'); + // Normalize URLs on load to dedup legacy entries with mismatched casing + const seen = new Set(); + const deduped = []; + for (const s of raw) { + try { s.url = new URL(s.url).origin; } catch {} + if (seen.has(s.url)) continue; + seen.add(s.url); + deduped.push(s); + } + if (deduped.length !== raw.length) { + localStorage.setItem('haven_servers', JSON.stringify(deduped)); + } + return deduped; } catch { return []; } } @@ -35,7 +48,7 @@ class ServerManager { add(name, url, icon = null) { url = this._normalizeUrl(url); - if (this.servers.find(s => s.url === url)) return false; + if (this.servers.find(s => this._normalizeUrl(s.url) === url)) return false; // User explicitly adding — clear from removed set so sync won't fight it const removed = this._loadRemoved(); @@ -66,6 +79,20 @@ class ServerManager { this.markRemoved(url); } + /** Reorder servers by an array of URLs in the desired order. */ + reorder(orderedUrls) { + const map = new Map(this.servers.map(s => [s.url, s])); + const reordered = []; + for (const url of orderedUrls) { + const s = map.get(url); + if (s) { reordered.push(s); map.delete(url); } + } + // Append any servers not in the ordered list (shouldn't happen, but safe) + for (const s of map.values()) reordered.push(s); + this.servers = reordered; + this._save(); + } + getAll() { return this.servers.map(s => ({ ...s, @@ -191,8 +218,8 @@ class ServerManager { const removed = this._loadRemoved(); // 4. Merge: union by URL, filtering out locally-removed servers - const localUrls = new Set(this.servers.map(s => s.url)); - const remoteUrls = new Set(remoteServers.map(s => s.url)); + const localUrls = new Set(this.servers.map(s => this._normalizeUrl(s.url))); + const remoteUrls = new Set(remoteServers.map(s => this._normalizeUrl(s.url))); let changed = false; // Add remote servers we don't have locally (and haven't removed) diff --git a/src/auth.js b/src/auth.js index 3870f83..bbcd580 100644 --- a/src/auth.js +++ b/src/auth.js @@ -1036,12 +1036,16 @@ router.get('/SSO', (req, res) => { .success { display: none; color: #4ade80; font-size: 15px; margin-top: 12px; } .not-logged-in { color: #ef4444; } .loading { color: #888; } + .debug { margin-top: 10px; font-size: 12px; color: #8f95b2; word-break: break-word; } + .debug.error { color: #ef4444; } + .debug.ok { color: #4ade80; }

⬡ Haven SSO

Checking login status...

+
Starting SSO checks...