@devchitchat/chat 4.1.2 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devchitchat/chat",
-  "version": "4.1.2",
+  "version": "4.2.1",
   "description": "A small chat app. p2p video and screenshare.",
   "scripts": {
     "dev": "bun --watch index.js",

package/pages/public/client/islands/call.js

@@ -165,6 +165,9 @@ export default function CallIsland(root) {
       if (!article.querySelector('.message-hover-actions')) {
         const toolbar = document.createElement('div')
         toolbar.className = 'message-hover-actions'
+        const quickPicks = document.createElement('span')
+        quickPicks.className = 'quick-picks'
+        toolbar.appendChild(quickPicks)
         const reactBtn = document.createElement('button')
         reactBtn.className = 'btn-react btn-icon'
         reactBtn.type = 'button'
@@ -181,6 +184,7 @@ export default function CallIsland(root) {
           toolbar.appendChild(actionsBtn)
         }
         article.appendChild(toolbar)
+        renderQuickPicks(toolbar)
       }
 
       // Apply inline rendering (URLs, @mentions) to server-rendered message text.
@@ -695,6 +699,8 @@ export default function CallIsland(root) {
     }
 
     enableTaskCheckboxes(article)
+    const toolbar = article.querySelector('.message-hover-actions')
+    if (toolbar) renderQuickPicks(toolbar)
     messages.appendChild(article)
     renderReactionBar(article, reactions ?? [], msg_id)
     messages.scrollTop = messages.scrollHeight
@@ -736,6 +742,22 @@ export default function CallIsland(root) {
     recents.unshift(emoji)
     if (recents.length > RECENT_MAX) recents = recents.slice(0, RECENT_MAX)
     localStorage.setItem(RECENT_KEY, JSON.stringify(recents))
+    refreshAllQuickPicks()
+  }
+
+  function renderQuickPicks(toolbar) {
+    const slot = toolbar.querySelector('.quick-picks')
+    if (!slot) return
+    const recents = loadRecentEmoji().slice(0, 4)
+    slot.innerHTML = recents.map(emoji =>
+      `<button class="btn-quick-react btn-icon" data-emoji="${escHtml(emoji)}" type="button" title="${escHtml(emoji)}">${emoji}</button>`
+    ).join('')
+  }
+
+  function refreshAllQuickPicks() {
+    for (const toolbar of messages.querySelectorAll('.message-hover-actions')) {
+      renderQuickPicks(toolbar)
+    }
   }
 
   let emojiPickerEl = null
@@ -913,6 +935,18 @@ export default function CallIsland(root) {
     ws.send({ t: 'msg.edit', body: { msg_id: article.dataset.msgId, channel_id: channelId, text: newText } })
   })
 
+  // Delegated click on .btn-quick-react — send reaction without opening picker
+  messages.addEventListener('click', e => {
+    const btn = e.target.closest('.btn-quick-react')
+    if (!btn) return
+    e.stopPropagation()
+    const emoji = btn.dataset.emoji
+    const msgId = btn.closest('article.message')?.dataset.msgId
+    if (!emoji || !msgId) return
+    saveRecentEmoji(emoji)
+    ws.send({ t: 'reaction.add', body: { msg_id: msgId, channel_id: channelId, emoji } })
+  })
+
   // Delegated click on .reaction-pill — toggle reaction
   messages.addEventListener('click', e => {
     const pill = e.target.closest('.reaction-pill')

package/pages/public/client/shared/messages.js

@@ -134,7 +134,7 @@ export function makeMessageEl({ msg_id, seq, user_id, user_display_name, ts, tex
   const isSelf = userId != null && user_id === userId
   const attachmentHtml = (attachments ?? []).map(a => renderAttachment(a)).join('')
   const editedHtml = edited_at ? '<span class="message-edited">(edited)</span>' : ''
-  const actionsHtml = `<div class="message-hover-actions"><button class="btn-react btn-icon" type="button" title="Add reaction" aria-label="Add reaction">🙂</button>${isSelf ? '<button class="btn-msg-actions btn-icon" type="button" title="Message actions">…</button>' : ''}</div>`
+  const actionsHtml = `<div class="message-hover-actions"><span class="quick-picks"></span><button class="btn-react btn-icon" type="button" title="Add reaction" aria-label="Add reaction">🙂</button>${isSelf ? '<button class="btn-msg-actions btn-icon" type="button" title="Message actions">…</button>' : ''}</div>`
   const textHtml = rendered_text ?? (text ? renderText(text, { userHandle }) : '')
   article.innerHTML = `
       <span class="message-handle${isSelf ? '' : ' dm-trigger'}" data-user-id="${escHtml(user_id)}" title="${isSelf ? '' : 'Send a direct message'}">${escHtml(user_display_name ?? user_id)}</span>

package/pages/public/themes/base.css

@@ -499,7 +499,10 @@ details summary {
   font-size: 1rem;
   margin-bottom: 7px;
 }
-.chat-topic { color: var(--text-secondary); }
+.chat-topic {
+  color: var(--text-secondary);
+  display: none; /* don't show this for now.*/
+}
 .chat-header-actions { margin-left: auto; display: flex; gap: 6px; }
 
 .search-bar { padding: 8px 20px; background: var(--bg-topbar); border-bottom: 1px solid var(--border); }
@@ -848,8 +851,11 @@ details summary {
 }
 .btn-primary:hover { opacity: 0.85; }
 .btn-ghost {
-  background: none; border: none; padding: 6px 12px; border-radius: var(--radius-sm);
-  color: var(--text-muted); cursor: pointer;
+  border: none;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
 }
 .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
 .btn-icon {
@@ -1508,7 +1514,6 @@ body:has(.admin-topbar) main {
   border: 1px solid var(--border);
   border-radius: 6px;
   margin-bottom: 8px;
-  overflow: hidden;
 }
 
 .hub-group__summary {
@@ -1803,6 +1808,9 @@ article.message { position: relative; }
   z-index: 10;
 }
 article.message:hover .message-hover-actions { opacity: 1; pointer-events: auto; }
+.quick-picks { display: contents; }
+.quick-picks:not(:empty) + .btn-react { border-left: 1px solid var(--border); margin-left: 1px; padding-left: 6px; }
+.btn-quick-react,
 .btn-react,
 .btn-msg-actions {
   background: none;
@@ -1815,6 +1823,7 @@ article.message:hover .message-hover-actions { opacity: 1; pointer-events: auto;
   color: var(--text-secondary);
   transition: background var(--transition), color var(--transition);
 }
+.btn-quick-react:hover,
 .btn-react:hover,
 .btn-msg-actions:hover {
   background: color-mix(in srgb, var(--accent) 15%, transparent);