Changeset ef1853c in Klonkt for src/views

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/views

Files:

• pages/news.ejs (modified) (1 diff)
• partials/fedi-node.ejs (modified) (1 diff)
• partials/msg-item.ejs (modified) (2 diffs)
• partials/shared-styles.ejs (modified) (1 diff)

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>