@devchitchat/chat 4.4.4 → 5.0.0

package/pages/public/client/views/ThreadPanelView.js

@@ -0,0 +1,260 @@
+/**
+ * ThreadPanelView.js — renders the thread panel.
+ *
+ * Uses the SAME makeMessageEl and MessageInteractions as MessageListView.
+ * There is no duplication of click handlers.
+ *
+ * Owned DOM:
+ *   #thread-panel      — the panel wrapper (toggled .active)
+ *   #thread-anchor     — parent message clone
+ *   #thread-replies    — reply list
+ *   #thread-input      — reply textarea
+ *   #thread-send       — send button
+ *
+ * Model events handled:
+ *   thread-opened       → show panel, clone parent, clear replies
+ *   thread-closed       → hide panel
+ *   thread-loaded       → render reply list
+ *   thread-reply-added  → append reply
+ *   thread-reply-updated → update reply text/reactions
+ *   thread-reply-deleted → remove reply
+ *   reactions-updated   → re-render reaction bar on reply if open
+ *   message-updated     → update anchor clone if it's the parent
+ */
+
+import * as Ev from '../model/events.js'
+import { makeMessageEl, escHtml, utcDateKey, makeDateSeparator } from '../shared/messages.js'
+import { attachMessageInteractions } from './shared/MessageInteractions.js'
+import { renderReactionBar } from './MessageListView.js'
+import { renderQuickPicksSlot } from './shared/EmojiPickerSingleton.js'
+import { dispatch } from '../controllers/ChatController.js'
+import { MentionPicker } from './shared/MentionPicker.js'
+
+export class ThreadPanelView {
+  #model
+  #panelEl
+  #anchorEl
+  #repliesEl
+  #bodyEl
+  #inputEl
+  #sendBtn
+  #mentionPicker
+
+  /**
+   * @param {AppModel}   model
+   * @param {HTMLElement} panelEl    — #thread-panel
+   */
+  constructor(model, panelEl) {
+    this.#model   = model
+    this.#panelEl = panelEl
+
+    this.#anchorEl  = panelEl.querySelector('#thread-anchor')  ?? panelEl.querySelector('.thread-anchor')
+    this.#repliesEl = panelEl.querySelector('#thread-replies') ?? panelEl.querySelector('.thread-replies')
+    this.#bodyEl    = panelEl.querySelector('.thread-body')
+    this.#inputEl   = panelEl.querySelector('#thread-input')
+    this.#sendBtn   = panelEl.querySelector('#thread-send')
+
+    this.#bindModelEvents()
+    this.#bindPanelEvents()
+
+    // @mention picker for the thread reply input
+    const composerEl = panelEl.querySelector('.thread-composer')
+    if (this.#inputEl && composerEl) {
+      this.#mentionPicker = new MentionPicker(
+        this.#inputEl, composerEl, () => [...model.members, ...model.bots],
+      )
+    }
+
+    // Attach message interactions to the replies container.
+    // isThread: true → no nested thread-open buttons.
+    if (this.#repliesEl) {
+      attachMessageInteractions(this.#repliesEl, { model, isThread: true })
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Model event bindings
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #bindModelEvents() {
+    const m = this.#model
+
+    m.addEventListener(Ev.THREAD_OPENED,        e => this.#onThreadOpened(e.detail))
+    m.addEventListener(Ev.THREAD_CLOSED,        () => this.#onThreadClosed())
+    m.addEventListener(Ev.THREAD_LOADED,        e => this.#onThreadLoaded(e.detail))
+    m.addEventListener(Ev.THREAD_REPLY_ADDED,   e => this.#onReplyAdded(e.detail))
+    m.addEventListener(Ev.THREAD_REPLY_UPDATED, e => this.#onReplyUpdated(e.detail))
+    m.addEventListener(Ev.THREAD_REPLY_DELETED, e => this.#onReplyDeleted(e.detail))
+    m.addEventListener(Ev.REACTIONS_UPDATED,    e => this.#onReactionsUpdated(e.detail))
+    m.addEventListener(Ev.MESSAGE_UPDATED,      e => this.#onParentUpdated(e.detail))
+    m.addEventListener(Ev.CHANNEL_SELECTED,     () => this.#onThreadClosed())
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Panel UI event bindings (close button, send button, textarea)
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #bindPanelEvents() {
+    // Close button(s) — delegation so both header X and mobile footer button work
+    this.#panelEl.addEventListener('click', e => {
+      if (e.target.closest('.thread-panel-close')) dispatch('close-thread')
+    })
+
+    this.#sendBtn?.addEventListener('click', () => this.#sendReply())
+
+    this.#inputEl?.addEventListener('keydown', e => {
+      if (this.#mentionPicker?.isOpen) return
+      if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.#sendReply() }
+    })
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Event handlers
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #onThreadOpened({ parentMsg }) {
+    // Clone the parent message into the anchor
+    if (this.#anchorEl) {
+      this.#anchorEl.innerHTML = ''
+      if (parentMsg) {
+        const clone = makeMessageEl(parentMsg, {
+          userId:       this.#model.userId,
+          userHandle:   this.#model.userHandle,
+          knownHandles: this.#model.knownHandles,
+        })
+        // Strip interactive elements from the clone
+        clone.querySelector('.message-hover-actions')?.remove()
+        clone.querySelector('.thread-replies-link')?.remove()
+        this.#anchorEl.appendChild(clone)
+      }
+    }
+
+    if (this.#repliesEl) {
+      this.#repliesEl.innerHTML = '<p class="thread-loading">Loading…</p>'
+    }
+
+    this.#panelEl.classList.add('active')
+    setTimeout(() => this.#inputEl?.focus(), 50)
+  }
+
+  #onThreadClosed() {
+    this.#panelEl.classList.remove('active')
+    if (this.#anchorEl)  this.#anchorEl.innerHTML  = ''
+    if (this.#repliesEl) this.#repliesEl.innerHTML = ''
+  }
+
+  #onThreadLoaded({ parentMsgId, replies }) {
+    if (parentMsgId !== this.#model.threadParentId) return
+    if (!this.#repliesEl) return
+
+    this.#repliesEl.innerHTML = ''
+
+    if (!replies.length) {
+      this.#repliesEl.innerHTML = '<p class="thread-empty">No replies yet. Be the first!</p>'
+      return
+    }
+
+    let prevDate = null
+    for (const reply of replies) {
+      const dateKey = utcDateKey(reply.ts)
+      if (prevDate && dateKey !== prevDate) {
+        this.#repliesEl.appendChild(makeDateSeparator(dateKey))
+      }
+      this.#repliesEl.appendChild(this.#makeReplyEl(reply))
+      prevDate = dateKey
+    }
+
+    this.#scrollToBottom()
+  }
+
+  #onReplyAdded({ parentMsgId, reply }) {
+    if (parentMsgId !== this.#model.threadParentId) return
+    if (!this.#repliesEl) return
+
+    const emptyEl = this.#repliesEl.querySelector('.thread-empty')
+    if (emptyEl) emptyEl.remove()
+
+    this.#repliesEl.appendChild(this.#makeReplyEl(reply))
+    this.#scrollToBottom()
+  }
+
+  #onReplyUpdated({ reply }) {
+    if (!this.#repliesEl) return
+    const article = this.#repliesEl.querySelector(`[data-msg-id="${reply.msg_id}"]`)
+    if (!article) return
+    if (reply.text !== undefined) article.dataset.rawText = reply.text
+    if (reply.rendered_text !== undefined || reply.text !== undefined) {
+      const textEl = article.querySelector('.message-text')
+      if (textEl) textEl.innerHTML = _sanitize(reply.rendered_text ?? escHtml(reply.text ?? ''))
+    }
+    if (reply.edited_at) {
+      article.dataset.editedAt = reply.edited_at
+      const timeEl = article.querySelector('.message-time')
+      if (timeEl && !timeEl.querySelector('.message-edited')) {
+        const span = document.createElement('span')
+        span.className = 'message-edited'
+        span.textContent = '(edited)'
+        timeEl.appendChild(span)
+      }
+    }
+  }
+
+  #onReplyDeleted({ msgId }) {
+    if (!this.#repliesEl) return
+    this.#repliesEl.querySelector(`[data-msg-id="${msgId}"]`)?.remove()
+  }
+
+  #onReactionsUpdated({ msgId, reactions }) {
+    if (!this.#repliesEl) return
+    const article = this.#repliesEl.querySelector(`[data-msg-id="${msgId}"]`)
+    if (article) renderReactionBar(article, reactions, msgId)
+  }
+
+  #onParentUpdated({ message }) {
+    if (message.msg_id !== this.#model.threadParentId) return
+    if (!this.#anchorEl) return
+    const textEl = this.#anchorEl.querySelector('.message-text')
+    if (textEl && (message.rendered_text !== undefined || message.text !== undefined)) {
+      textEl.innerHTML = _sanitize(message.rendered_text ?? escHtml(message.text ?? ''))
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Send reply
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #sendReply() {
+    const text        = this.#inputEl?.value.trim()
+    const parentMsgId = this.#model.threadParentId
+    const channelId   = this.#model.currentChannelId
+    if (!text || !parentMsgId) return
+    dispatch('send-thread-reply', { channelId, parentMsgId, text })
+    if (this.#inputEl) this.#inputEl.value = ''
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+  // Private helpers
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #makeReplyEl(reply) {
+    const article = makeMessageEl(reply, {
+      userId:        this.#model.userId,
+      userHandle:    this.#model.userHandle,
+      knownHandles:  this.#model.knownHandles,
+      isThreadReply: true,
+    })
+    renderQuickPicksSlot(article.querySelector('.quick-picks'))
+    if (reply.reactions?.length) {
+      renderReactionBar(article, reply.reactions, reply.msg_id)
+    }
+    return article
+  }
+
+  #scrollToBottom() {
+    if (this.#bodyEl) this.#bodyEl.scrollTop = this.#bodyEl.scrollHeight
+  }
+}
+
+function _sanitize(html) {
+  return String(html ?? '').replaceAll('<script>', '').replaceAll('</script>', '')
+}

package/pages/public/client/views/shared/EmojiPickerSingleton.js

@@ -0,0 +1,201 @@
+/**
+ * EmojiPickerSingleton.js — one emoji picker shared across the whole app.
+ *
+ * Both MessageListView and ThreadPanelView use this. The picker is a singleton
+ * that floats in document.body and positions itself near the anchor element.
+ *
+ * Usage:
+ *   import { openEmojiPicker, closeEmojiPicker, saveRecentEmoji,
+ *            loadRecentEmoji, refreshAllQuickPicks } from './EmojiPickerSingleton.js'
+ *
+ *   openEmojiPicker(anchorEl, msgId, channelId, onPick)
+ *   closeEmojiPicker()
+ */
+
+import { CATEGORIES, EMOJI_NAMES } from '../../emoji-data.js'
+import { escHtml } from '../../shared/messages.js'
+
+const RECENT_KEY = 'devchitchat_recent_emoji'
+const RECENT_MAX = 24
+const QUICK_PICKS_COUNT = 4
+
+// ── Persistent state ──────────────────────────────────────────────────────────
+
+let pickerEl  = null
+let currentCat = 'smileys'
+let currentMsgId   = null
+let currentOnPick  = null
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+export function loadRecentEmoji() {
+  try { return JSON.parse(localStorage.getItem(RECENT_KEY) ?? '[]') } catch { return [] }
+}
+
+export function saveRecentEmoji(emoji) {
+  let recents = loadRecentEmoji().filter(e => e !== emoji)
+  recents.unshift(emoji)
+  if (recents.length > RECENT_MAX) recents = recents.slice(0, RECENT_MAX)
+  localStorage.setItem(RECENT_KEY, JSON.stringify(recents))
+  refreshAllQuickPicks()
+}
+
+/** Refresh the quick-pick slots (recent emoji) in every visible message toolbar. */
+export function refreshAllQuickPicks() {
+  for (const slot of document.querySelectorAll('.message-hover-actions .quick-picks')) {
+    renderQuickPicksSlot(slot)
+  }
+}
+
+/** Render quick-pick buttons into a `.quick-picks` slot. */
+export function renderQuickPicksSlot(slot) {
+  if (!slot) return
+  const recents = loadRecentEmoji().slice(0, QUICK_PICKS_COUNT)
+  slot.innerHTML = recents.map(emoji =>
+    `<button class="btn-quick-react btn-icon" data-emoji="${escHtml(emoji)}" type="button" title="${escHtml(emoji)}">${emoji}</button>`
+  ).join('')
+}
+
+/** Open the floating emoji picker anchored to `anchorEl`. */
+export function openEmojiPicker(anchorEl, msgId, onPick) {
+  // Toggle off if already open for the same message
+  if (pickerEl?.parentNode && currentMsgId === msgId) {
+    closeEmojiPicker()
+    return
+  }
+
+  currentMsgId  = msgId
+  currentOnPick = onPick
+
+  pickerEl = pickerEl ?? _build()
+
+  if (currentCat === 'recent') _renderGrid(null)
+
+  document.body.appendChild(pickerEl)
+  _position(anchorEl)
+}
+
+/** Close and detach the picker. */
+export function closeEmojiPicker() {
+  pickerEl?.parentNode?.removeChild(pickerEl)
+  currentMsgId  = null
+  currentOnPick = null
+}
+
+/** True if the picker is open for the given msgId. */
+export function isPickerOpenFor(msgId) {
+  return pickerEl?.parentNode != null && currentMsgId === msgId
+}
+
+// ── Private ───────────────────────────────────────────────────────────────────
+
+function _build() {
+  const el = document.createElement('div')
+  el.className = 'emoji-picker'
+
+  const searchInput = document.createElement('input')
+  searchInput.type = 'search'
+  searchInput.className = 'emoji-picker-search'
+  searchInput.placeholder = 'Search emoji…'
+  searchInput.setAttribute('aria-label', 'Search emoji')
+  el.appendChild(searchInput)
+
+  const tabs = document.createElement('div')
+  tabs.className = 'emoji-picker-tabs'
+  for (const cat of CATEGORIES) {
+    const btn = document.createElement('button')
+    btn.type = 'button'
+    btn.className = 'emoji-picker-tab' + (cat.id === currentCat ? ' active' : '')
+    btn.dataset.catId = cat.id
+    btn.textContent = cat.label
+    btn.title = cat.id
+    tabs.appendChild(btn)
+  }
+  el.appendChild(tabs)
+
+  const grid = document.createElement('div')
+  grid.className = 'emoji-picker-grid'
+  el.appendChild(grid)
+
+  tabs.addEventListener('click', e => {
+    const btn = e.target.closest('.emoji-picker-tab')
+    if (!btn) return
+    currentCat = btn.dataset.catId
+    tabs.querySelectorAll('.emoji-picker-tab').forEach(b => {
+      b.classList.toggle('active', b.dataset.catId === currentCat)
+    })
+    searchInput.value = ''
+    _renderGrid(null)
+  })
+
+  searchInput.addEventListener('input', () => {
+    _renderGrid(searchInput.value.trim().toLowerCase() || null)
+  })
+
+  grid.addEventListener('click', e => {
+    const btn = e.target.closest('button[data-emoji]')
+    if (!btn) return
+    const emoji = btn.dataset.emoji
+    saveRecentEmoji(emoji)
+    closeEmojiPicker()
+    currentOnPick?.(emoji)
+  })
+
+  _renderGrid(null)
+  return el
+}
+
+function _renderGrid(query) {
+  if (!pickerEl) return
+  const grid = pickerEl.querySelector('.emoji-picker-grid')
+  if (!grid) return
+
+  let list
+  if (query) {
+    const all    = CATEGORIES.flatMap(c => c.emoji)
+    const unique = [...new Set(all)]
+    list = unique.filter(e => {
+      const name = EMOJI_NAMES[e] ?? ''
+      return name.includes(query) || e.includes(query)
+    })
+  } else if (currentCat === 'recent') {
+    list = loadRecentEmoji()
+  } else {
+    const cat = CATEGORIES.find(c => c.id === currentCat)
+    list = cat?.emoji ?? []
+  }
+
+  grid.innerHTML = list.map(e =>
+    `<button type="button" data-emoji="${escHtml(e)}" title="${escHtml(EMOJI_NAMES[e] ?? e)}">${e}</button>`
+  ).join('')
+}
+
+function _position(anchorEl) {
+  pickerEl.style.position = 'fixed'
+  pickerEl.style.zIndex   = '400'
+
+  const rect = anchorEl.getBoundingClientRect()
+  pickerEl.style.top  = `${rect.bottom + 4}px`
+  pickerEl.style.left = `${rect.left}px`
+
+  requestAnimationFrame(() => {
+    if (!pickerEl) return
+    const pr   = pickerEl.getBoundingClientRect()
+    let left   = rect.left
+    if (left + pr.width > window.innerWidth - 8)  left = window.innerWidth - 8 - pr.width
+    if (left < 8) left = 8
+    pickerEl.style.left = `${left}px`
+    if (rect.bottom + 4 + pr.height > window.innerHeight - 8) {
+      pickerEl.style.top = `${rect.top - 4 - pr.height}px`
+    }
+  })
+}
+
+// ── Global click-outside handler ──────────────────────────────────────────────
+
+document.addEventListener('click', e => {
+  if (!pickerEl?.parentNode) return
+  if (pickerEl.contains(e.target)) return
+  if (e.target.closest('.btn-react') || e.target.closest('.reaction-add')) return
+  closeEmojiPicker()
+}, { capture: true })

package/pages/public/client/views/shared/MentionPicker.js

@@ -0,0 +1,139 @@
+/**
+ * MentionPicker.js — reusable @mention autocomplete for any textarea.
+ *
+ * Usage:
+ *   const picker = new MentionPicker(textarea, container, () => model.members)
+ *   picker.destroy()   // remove all listeners
+ *
+ * The picker element is injected as the first child of `container` so CSS can
+ * position it relative to the composer/panel element.
+ */
+
+import { escHtml } from '../../shared/messages.js'
+
+export class MentionPicker {
+  #textarea
+  #pickerEl
+  #getMembers
+
+  #filtered  = []
+  #start     = -1
+  #selIdx    = 0
+
+  /**
+   * @param {HTMLTextAreaElement} textarea
+   * @param {HTMLElement}         container  parent element — picker is prepended here
+   * @param {() => Array}         getMembers returns current member list
+   */
+  constructor(textarea, container, getMembers) {
+    this.#textarea   = textarea
+    this.#getMembers = getMembers
+
+    const el = document.createElement('div')
+    el.id = 'mention-picker-' + Math.random().toString(36).slice(2)
+    el.className = 'mention-picker'
+    el.hidden = true
+    container.prepend(el)
+    this.#pickerEl = el
+
+    // Mouse click selects without firing the textarea blur
+    el.addEventListener('mousedown', e => {
+      e.preventDefault()
+      const btn = e.target.closest('.mention-option')
+      if (!btn) return
+      this.#select(this.#filtered[parseInt(btn.dataset.idx, 10)])
+    })
+
+    textarea.addEventListener('input',   this.#onInput)
+    textarea.addEventListener('keydown', this.#onKeydown)
+  }
+
+  /** Returns true if the picker intercepted the keydown event */
+  get isOpen() { return !this.#pickerEl.hidden }
+
+  destroy() {
+    this.#textarea.removeEventListener('input',   this.#onInput)
+    this.#textarea.removeEventListener('keydown', this.#onKeydown)
+    this.#pickerEl.remove()
+  }
+
+  // ─────────────────────────────────────────────────────────────────────────
+
+  #onInput = () => {
+    const ta     = this.#textarea
+    const cursor = ta.selectionStart
+    const before = ta.value.substring(0, cursor)
+    const match  = before.match(/@([a-zA-Z0-9_.-]*)$/)
+    if (!match) { this.#close(); return }
+
+    const query    = match[1].toLowerCase()
+    const start    = cursor - match[0].length
+    const filtered = this.#getMembers()
+      .filter(m =>
+        m.handle.toLowerCase().startsWith(query) ||
+        (m.display_name ?? '').toLowerCase().startsWith(query)
+      )
+      .slice(0, 8)
+
+    if (filtered.length === 0) { this.#close(); return }
+
+    this.#filtered = filtered
+    this.#start    = start
+    this.#selIdx   = 0
+    this.#render()
+  }
+
+  #onKeydown = e => {
+    if (this.#pickerEl.hidden) return
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      this.#selIdx = Math.min(this.#selIdx + 1, this.#filtered.length - 1)
+      this.#render()
+      return
+    }
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      this.#selIdx = Math.max(this.#selIdx - 1, 0)
+      this.#render()
+      return
+    }
+    if (e.key === 'Enter' || e.key === 'Tab') {
+      e.preventDefault()
+      this.#select(this.#filtered[this.#selIdx])
+      return
+    }
+    if (e.key === 'Escape') {
+      e.stopPropagation()
+      this.#close()
+    }
+  }
+
+  #render() {
+    this.#pickerEl.innerHTML = this.#filtered.map((m, i) => `
+      <button class="mention-option${i === this.#selIdx ? ' selected' : ''}"
+              data-idx="${i}" type="button">
+        <span class="mention-option-name">${escHtml(m.display_name || m.handle)}</span>
+        <span class="mention-option-handle">@${escHtml(m.handle)}</span>
+      </button>`).join('')
+    this.#pickerEl.hidden = false
+  }
+
+  #select(member) {
+    if (!member) return
+    const ta     = this.#textarea
+    const cursor = ta.selectionStart
+    const insert = `@${member.handle} `
+    ta.value = ta.value.substring(0, this.#start) + insert + ta.value.substring(cursor)
+    const pos = this.#start + insert.length
+    ta.setSelectionRange(pos, pos)
+    this.#close()
+    ta.focus()
+  }
+
+  #close() {
+    this.#filtered = []
+    this.#start    = -1
+    this.#pickerEl.hidden = true
+  }
+}