@devchitchat/chat 4.1.1 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devchitchat/chat",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "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

@@ -547,6 +547,9 @@ details summary {
 .message-text h3,.message-text h4 { font-size: 1em; }
 .message-text ul,.message-text ol { margin: 4px 0; padding-left: 1.75em; }
 .message-text li { margin: 2px 0; }
+.message-text .task-list-item { list-style: none; margin-left: -1.25em; }
+.message-text .task-list-item-checkbox { margin-right: 6px; cursor: pointer; vertical-align: middle; position: relative; top: -1px; }
+.message-text .task-list-item:has(.task-list-item-checkbox:checked) { text-decoration: line-through; color: var(--text-muted); }
 .message-text code { font-family: var(--font-mono, monospace); font-size: 0.875em; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px; padding: 1px 4px; }
 .message-text pre { background: var(--bg-input, var(--bg-sidebar)); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; overflow-x: auto; margin: 6px 0; }
 .message-text pre code { background: none; padding: 0; font-size: 0.85em; }
@@ -1800,6 +1803,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;
@@ -1812,6 +1818,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);