@devchitchat/chat 4.0.5 → 4.0.6

package/package.json

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

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

@@ -141,9 +141,7 @@ export default function CallIsland(root) {
               data-emoji="${escHtml(r.emoji)}" data-msg-id="${escHtml(msgId)}"
               type="button" title="${r.count} reaction${r.count !== 1 ? 's' : ''}">
         ${r.emoji} <span class="reaction-count">${r.count}</span>
-      </button>`).join('') +
-      `<button class="reaction-add" data-msg-id="${escHtml(msgId)}" type="button"
-               title="Add reaction" aria-label="Add reaction">+</button>`
+      </button>`).join('')
   }
 
   // ── Hydrate seed message attachments ──────────────────────────────────────
@@ -157,18 +155,32 @@ export default function CallIsland(root) {
       if (article.dataset.hydrated) continue
       article.dataset.hydrated = '1'
 
-      // Add dm-trigger to non-self sender handles; add … actions button to own messages
+      // Add dm-trigger to non-self sender handles
       const handle = article.querySelector('.message-handle[data-user-id]')
       if (handle && handle.dataset.userId !== userId) {
         handle.classList.add('dm-trigger')
         handle.title = 'Send a direct message'
-      } else if (article.dataset.userId === userId && !article.querySelector('.btn-msg-actions')) {
-        const btn = document.createElement('button')
-        btn.className = 'btn-msg-actions btn-icon'
-        btn.type = 'button'
-        btn.title = 'Message actions'
-        btn.textContent = '…'
-        article.appendChild(btn)
+      }
+      // Add hover action toolbar (react for all messages; … only for own)
+      if (!article.querySelector('.message-hover-actions')) {
+        const toolbar = document.createElement('div')
+        toolbar.className = 'message-hover-actions'
+        const reactBtn = document.createElement('button')
+        reactBtn.className = 'btn-react btn-icon'
+        reactBtn.type = 'button'
+        reactBtn.title = 'Add reaction'
+        reactBtn.setAttribute('aria-label', 'Add reaction')
+        reactBtn.textContent = '🙂'
+        toolbar.appendChild(reactBtn)
+        if (article.dataset.userId === userId) {
+          const actionsBtn = document.createElement('button')
+          actionsBtn.className = 'btn-msg-actions btn-icon'
+          actionsBtn.type = 'button'
+          actionsBtn.title = 'Message actions'
+          actionsBtn.textContent = '…'
+          toolbar.appendChild(actionsBtn)
+        }
+        article.appendChild(toolbar)
       }
 
       // Apply inline rendering (URLs, @mentions) to server-rendered message text.
@@ -906,7 +918,7 @@ export default function CallIsland(root) {
     if (activeReactionContextMenu && !activeReactionContextMenu.contains(e.target)) closeReactionContextMenu()
     // Close emoji picker on click-outside
     if (emojiPickerEl && emojiPickerEl.parentNode && !emojiPickerEl.contains(e.target)) {
-      const isReactionAddBtn = e.target.closest('.reaction-add')
+      const isReactionAddBtn = e.target.closest('.reaction-add') || e.target.closest('.btn-react')
       if (!isReactionAddBtn) closeEmojiPicker()
     }
   }, { capture: true })
@@ -933,12 +945,14 @@ export default function CallIsland(root) {
     }
   })
 
-  // Delegated click on .reaction-add — open emoji picker
+  // Delegated click on .reaction-add or .btn-react — open emoji picker
   messages.addEventListener('click', e => {
-    const btn = e.target.closest('.reaction-add')
+    const addBtn = e.target.closest('.reaction-add')
+    const reactBtn = e.target.closest('.btn-react')
+    const btn = addBtn ?? reactBtn
     if (!btn) return
     e.stopPropagation()
-    const msgId = btn.dataset.msgId
+    const msgId = addBtn?.dataset.msgId ?? btn.closest('article.message')?.dataset.msgId
     if (!msgId) return
     // Toggle: close if already open for this message
     if (emojiPickerEl && emojiPickerEl.parentNode && emojiPickerTarget === msgId) {

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 = isSelf ? '<button class="btn-msg-actions btn-icon" type="button" title="Message actions">…</button>' : ''
+  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 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

@@ -989,10 +989,11 @@ mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: va
   }
   .btn-back-mobile:hover { color: var(--text-primary); }
 
-  /* Actions button: no hover on touch — always visible for own messages */
-  .btn-msg-actions {
+  /* Hover toolbar: no hover on touch — always visible, tucked inside message */
+  .message-hover-actions {
     opacity: 1;
     pointer-events: auto;
+    top: 2px;
   }
 }
 
@@ -1767,19 +1768,43 @@ form.inline { display: inline; }
   font-size: 14px;
 }
 
-/* … actions button on message hover */
-.btn-msg-actions {
+/* Hover action toolbar — floats above the message on hover (Discord-style) */
+article.message { position: relative; }
+.message-hover-actions {
   position: absolute;
-  top: 2px;
+  top: -20px;
   right: 4px;
-  font-size: 16px;
-  line-height: 1;
+  display: flex;
+  gap: 1px;
+  align-items: center;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.1s;
+  background: var(--bg-sidebar);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 2px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  z-index: 10;
+}
+article.message:hover .message-hover-actions { opacity: 1; pointer-events: auto; }
+.btn-react,
+.btn-msg-actions {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 3px 7px;
+  border-radius: calc(var(--radius-md) - 2px);
+  font-size: 15px;
+  line-height: 1;
+  color: var(--text-secondary);
+  transition: background var(--transition), color var(--transition);
+}
+.btn-react:hover,
+.btn-msg-actions:hover {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--text-primary);
 }
-article.message:hover .btn-msg-actions { opacity: 1; pointer-events: auto; }
-article.message { position: relative; }
 
 /* Context menu */
 .msg-context-menu {