Changeset ef1853c in Klonkt

Timestamp:

07/26/2026 09:52:24 AM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

42e7616

Parents:

3597763

Message:

Web: custom-emoji ook in messages + threads (Shaer-pariteit)

Na de nieuwsfeed nu ook de andere note-surfaces: messages (msg-item) en
thread-replies (fedi-node) renderen custom-emoji's in de content en in de
auteur-naam. De emoji-tags werden voor replies nog niet bewaard; nu vangt
ap_interactions ze (emoji_json = content-emoji uit o.tag/child.tag,
actor_emoji_json = naam-emoji uit actorInfo) op inbound reply, like/boost en de
thread-crawl, en getNotifications/getInteractions serveren ze mee.

De .emoji-CSS staat nu globaal in shared-styles (was news-only), zodat alle
surfaces 'm delen.

Changed files:
src/config/database.js

• ap_interactions.emoji_json + actor_emoji_json kolommen

src/services/ActivityPubService.js

• INSERT ap_interactions + 3 callers (reply/like-boost/thread) vullen de emoji-kolommen
• emojiJsonOf() helper
• _listI + getNotifications SELECT en getInteractions-node geven emoji mee

src/views/partials/msg-item.ejs

• naam + content via emojiName/emojiHtml

src/views/partials/fedi-node.ejs

• auteur-naam + content via emojiName/emojiHtml

src/views/partials/shared-styles.ejs

• globale img.emoji-regels (inline, geen media-styling)

src/views/pages/news.ejs

• dubbele img.emoji-regels weg (nu globaal)

remarks: 187 tests groen. Visueel geverifieerd via standalone render van msg-item
+ fedi-node. Nieuwe replies vangen emoji direct; oude rijen niet (geen self-heal).
Quote-in-replies en de Cirkel-tegel-titels bewust nog niet meegenomen.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

Location:

src

Files:

• config/database.js (modified) (1 diff)
• services/ActivityPubService.js (modified) (8 diffs)
• views/pages/news.ejs (modified) (1 diff)
• views/partials/fedi-node.ejs (modified) (1 diff)
• views/partials/msg-item.ejs (modified) (2 diffs)
• views/partials/shared-styles.ejs (modified) (1 diff)

src/config/database.js

@@ -571 +571 @@
   // context instead. Existing rows default to 'public' (historically almost all were).
   ensureColumn('ap_interactions', 'visibility', "TEXT DEFAULT 'public'");
+  ensureColumn('ap_interactions', 'emoji_json', 'TEXT');        // FEP-9098 custom emojis in a reply's content (messages + thread)
+  ensureColumn('ap_interactions', 'actor_emoji_json', 'TEXT');  // FEP-9098 custom emojis in the reply author's display name
   // Rich replies: the reply's language (BCP47 code) → contentMap on the outgoing Note.
   ensureColumn('ap_outbox', 'language', 'TEXT');

src/services/ActivityPubService.js

@@ -825 +825 @@
 function iStmts() {
   if (!_insI) {
-    _insI = db.prepare('INSERT OR IGNORE INTO ap_interactions (kind, post_id, object_uri, actor_uri, actor_name, actor_handle, actor_url, actor_icon, content, published, parent_uri, visibility, created_at) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,CURRENT_TIMESTAMP)');
+    _insI = db.prepare('INSERT OR IGNORE INTO ap_interactions (kind, post_id, object_uri, actor_uri, actor_name, actor_handle, actor_url, actor_icon, content, published, parent_uri, visibility, emoji_json, actor_emoji_json, created_at) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,CURRENT_TIMESTAMP)');
     _delLA = db.prepare('DELETE FROM ap_interactions WHERE kind = ? AND post_id = ? AND actor_uri = ?');
     _delReply = db.prepare("DELETE FROM ap_interactions WHERE kind = 'reply' AND object_uri = ?");
-    _listI = db.prepare('SELECT id, kind, object_uri, parent_uri, actor_uri, actor_name, actor_handle, actor_url, actor_icon, content, published, created_at, acted_boost, acted_like, visibility FROM ap_interactions WHERE post_id = ? ORDER BY created_at ASC');
+    _listI = db.prepare('SELECT id, kind, object_uri, parent_uri, actor_uri, actor_name, actor_handle, actor_url, actor_icon, content, published, created_at, acted_boost, acted_like, visibility, emoji_json, actor_emoji_json FROM ap_interactions WHERE post_id = ? ORDER BY created_at ASC');
     _getI = db.prepare('SELECT * FROM ap_interactions WHERE id = ?');
     _insO = db.prepare('INSERT INTO ap_outbox (id, site_slug, post_id, post_slug, in_reply_to, to_actor, to_handle, content, language, attachments, created_at) VALUES (?,?,?,?,?,?,?,?,?,?,CURRENT_TIMESTAMP)');
@@ -945 +945 @@
       actor_name: r.actor_name, actor_handle: r.actor_handle, actor_url: r.actor_url,
       actor_icon: r.actor_icon, content: stripLeadingMentions(r.content), created_at: r.published || r.created_at,
+      emoji_json: r.emoji_json, actor_emoji_json: r.actor_emoji_json,   // FEP-9098 (thread render)
       acted_boost: !!r.acted_boost, acted_like: !!r.acted_like,
       children: [],
@@ -1512 +1513 @@
       const html = HtmlSanitizerService.sanitize(o.content || '');
       if (isRejectedObject(o.id)) { console.log('[AP] reply skipped (tombstoned)', o.id); return 202; }
-      iStmts().ins.run('reply', tgt.post_id, o.id || '', actorUri, ai.name, ai.handle, ai.url, ai.icon, html, o.published || null, tgt.parent_uri, noteVisibility(o));
+      iStmts().ins.run('reply', tgt.post_id, o.id || '', actorUri, ai.name, ai.handle, ai.url, ai.icon, html, o.published || null, tgt.parent_uri, noteVisibility(o), extractEmojiTags(o.tag), emojiJsonOf(ai.emojis));
       console.log('[AP] reply', actorUri, '→', tgt.post_id);
       {
@@ -1657 +1658 @@
       }
       const ai = actorInfo(await resolveActor(actorUri), actorUri);
-      iStmts().ins.run(type.toLowerCase(), pid, '', actorUri, ai.name, ai.handle, ai.url, ai.icon, null, null, null, noteVisibility(act));
+      iStmts().ins.run(type.toLowerCase(), pid, '', actorUri, ai.name, ai.handle, ai.url, ai.icon, null, null, null, noteVisibility(act), null, emojiJsonOf(ai.emojis));
       console.log('[AP]', type === 'Like' ? 'like' : 'boost', actorUri, '→', pid);
       {
@@ -2707 +2708 @@
 }
 
+// A display-name emoji map (actorInfo().emojis) → JSON to store, or null.
+function emojiJsonOf(map) { return (map && Object.keys(map).length) ? JSON.stringify(map) : null; }
+
 // ── Cirkel = posts from the accounts you auto-boost ("feature an artist") ──
 let _abCount, _cirkelPosts, _cirkelMembers;
@@ -2996 +3000 @@
         const html = HtmlSanitizerService.sanitize(child.content || '');
         // The child replies to `note` by construction (it's in note's replies collection).
-        try { iStmts().ins.run('reply', postId, child.id, actorUri, ai.name, ai.handle, ai.url, ai.icon, html, child.published || null, note.id || noteUri, noteVisibility(child)); added++; } catch { /* ignore */ }
+        try { iStmts().ins.run('reply', postId, child.id, actorUri, ai.name, ai.handle, ai.url, ai.icon, html, child.published || null, note.id || noteUri, noteVisibility(child), extractEmojiTags(child.tag), emojiJsonOf(ai.emojis)); added++; } catch { /* ignore */ }
         nextFrontier.push(child.id); // expand this reply's own replies next depth
       }
@@ -3309 +3313 @@
     const rows = db.prepare(`
       SELECT i.kind, i.actor_name, i.actor_handle, i.actor_url, i.actor_icon, i.content, i.created_at, i.visibility,
+             i.emoji_json, i.actor_emoji_json,
              p.slug AS post_slug, p.title AS post_title
       FROM ap_interactions i LEFT JOIN posts p ON p.id = i.post_id
@@ -3317 +3322 @@
       type: r.kind, name: r.actor_name, handle: r.actor_handle, url: r.actor_url, icon: r.actor_icon,
       content: stripLeadingMentions(r.content), post_slug: r.post_slug, post_title: r.post_title, created_at: r.created_at,
+      emoji_json: r.emoji_json, actor_emoji_json: r.actor_emoji_json,   // FEP-9098 (messages render)
       // followers/direct = a private message to the owner (not on the public thread) → 🔒 in Messages
       visibility: r.visibility || 'public',

src/views/pages/news.ejs

@@ -137 +137 @@
   .tl-readmore:hover { text-decoration: underline; }
 
-  /* FEP-9098 custom emojis: small inline images, never treated as media. */
-  img.emoji { height: 1.35em; width: auto; margin: 0 .04em; vertical-align: -0.22em;
-    display: inline-block; border-radius: 0; background: none; box-shadow: none; }
-  .tl-content img.emoji, .tl-quote-body img.emoji { max-width: none; }
-
   /* FEP-044f embedded quote card (mirror of the Shaer QuoteCard). */
   .tl-quote { margin: .75rem 0 0; padding: .6rem .7rem; border-radius: 12px;

src/views/partials/fedi-node.ejs

@@ -6 +6 @@
 <div class="comment-body">
   <div class="comment-meta">
-    <% if (n.actor_url) { %><a class="comment-author" href="<%= n.actor_url %>" rel="nofollow noopener" target="_blank"><%= n.actor_name %></a>
-    <% } else { %><span class="comment-author"><%= n.actor_name %></span><% } %>
+    <% if (n.actor_url) { %><a class="comment-author" href="<%= n.actor_url %>" rel="nofollow noopener" target="_blank"><%- emojiName(n.actor_name, n.actor_emoji_json) %></a>
+    <% } else { %><span class="comment-author"><%- emojiName(n.actor_name, n.actor_emoji_json) %></span><% } %>
     <% if (n.actor_handle) { %><span class="fedi-handle"><%= n.actor_handle %></span><% } %>
     <% if (n.created_at) { %><span class="comment-time"><%= formatDateTime(n.created_at) %></span><% } %>
   </div>
-  <div class="comment-content"><%- n.content %></div>
+  <div class="comment-content"><%- emojiHtml(n.content, n.emoji_json) %></div>
   <%# Rich replies: media on our own sent replies (attachments on the Note).
       Visitors see these too, and the reply editor (owner-only) may not render,

src/views/partials/msg-item.ejs

@@ -40 +40 @@
                 <% if (n.to_handle) { %><span class="msg-handle">→ <%= n.to_handle %></span><% } %>
               <% } else { %>
-                <a class="msg-who" href="<%= n.url %>" target="_blank" rel="nofollow noopener"><%= _who %></a>
+                <a class="msg-who" href="<%= n.url %>" target="_blank" rel="nofollow noopener"><%- emojiName(_who, n.actor_emoji_json) %></a>
                 <% if (n.handle && n.name) { %><span class="msg-handle"><%= n.handle %></span><% } %>
               <% } %>
@@ -67 +67 @@
 
             <% if (_t === 'report' && n.content) { %><div class="msg-content"><%= n.content %></div>
-            <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %><div class="msg-content"><%- n.content %></div>
+            <% } else if ((_t === 'reply' || _t === 'mention' || _t === 'sent') && n.content) { %><div class="msg-content"><%- emojiHtml(n.content, n.emoji_json) %></div>
               <% if (_t === 'mention' && n.wave && n.actorUri && canMutate) { %>
                 <form class="msg-quickreply" method="post" action="<%= (typeof siteUrlBase !== 'undefined' ? siteUrlBase : '') %>/messages/quick-reply" style="display:flex;gap:6px;flex-wrap:wrap;margin-top:6px">

src/views/partials/shared-styles.ejs

@@ -193 +193 @@
 .load-more-btn:hover { background: color-mix(in srgb, var(--ink, #000) 9%, transparent); }
 .load-more-btn.htmx-request { opacity: .6; pointer-events: none; }
+
+/* FEP-9098 custom emojis: small inline images (Shaer parity), rendered in note
+   content and display names across the timeline, messages and threads. Never
+   styled as media (no rounding/background), and never blown up to media width. */
+img.emoji { height: 1.3em; width: auto; margin: 0 .05em; vertical-align: -0.2em;
+  display: inline-block; border-radius: 0; background: none; box-shadow: none; }
+.tl-content img.emoji, .tl-quote-body img.emoji, .msg-content img.emoji, .comment-content img.emoji,
+.tl-author img.emoji, .tl-boost-by img.emoji, .tl-quote-name img.emoji, .msg-who img.emoji, .comment-author img.emoji {
+  max-width: none; height: 1.3em; border-radius: 0; background: none; box-shadow: none; vertical-align: -0.2em; }
 </style>