Changeset 3a2c9d3 in Klonkt

Timestamp:

06/24/2026 12:16:43 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

52ea6df

Parents:

55bc7f9

Message:

style(activitypub): match fediverse section to native comment styling

Reuse .comment/.comments-list/.comment-reply markup so inbound replies look
identical to native comments; our reply nests as a comment-reply; reply toggle
is a plain 'Reageer' action (no card/box).

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• services/i18n.js (modified) (3 diffs)
• views/pages/post.ejs (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -4401 +4401 @@
 }
 
-/* === Fediverse interactions (inbound AP replies/likes/boosts) === */
-.post-fediverse { margin: 2.5rem 0; }
-.post-fediverse .fedi-heading { font-size: 1.2rem; margin: 0 0 .85rem; }
-.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: 0 0 1.25rem; }
+/* === Fediverse interactions — inherits the native .comment styling === */
+.post-fediverse .fedi-stats { display: flex; gap: .55rem; margin: .25rem 0 1.25rem; }
 .post-fediverse .fedi-stats span {
   display: inline-flex; align-items: center; gap: .35rem;
-  padding: .25rem .7rem; border-radius: 999px; font-size: .85rem;
+  padding: .2rem .65rem; border-radius: 999px; font-size: .82rem;
   color: var(--ink-soft, #888);
-  background: color-mix(in srgb, currentColor 10%, transparent);
-}
-.post-fediverse .fedi-replies { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
-.post-fediverse .fedi-reply {
-  display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 16px;
-  background: color-mix(in srgb, var(--ink, #000) 4%, transparent);
-  border: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent);
-}
-.post-fediverse .fedi-avatar {
-  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
-  display: flex; align-items: center; justify-content: center;
-  background: color-mix(in srgb, var(--accent, #888) 22%, transparent);
-}
-.post-fediverse .fedi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
-.post-fediverse .fedi-avatar-fallback { font-weight: 700; font-size: 1.05rem; color: var(--accent, #555); }
-.post-fediverse .fedi-main { flex: 1; min-width: 0; }
-.post-fediverse .fedi-line { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
-.post-fediverse .fedi-name { font-weight: 600; color: var(--ink, inherit); text-decoration: none; }
-.post-fediverse .fedi-name:hover { text-decoration: underline; }
-.post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .85rem; }
-.post-fediverse .fedi-time { color: var(--ink-soft, #999); font-size: .8rem; margin-left: auto; }
-.post-fediverse .fedi-text { margin: .3rem 0 0; line-height: 1.5; overflow-wrap: anywhere; }
-.post-fediverse .fedi-text p { margin: .25rem 0; }
-.post-fediverse .fedi-text p:first-child { margin-top: 0; }
-.post-fediverse .fedi-text a { color: var(--accent, #06c); }
-.post-fediverse .fedi-ours {
-  margin: .6rem 0 0; padding: .55rem .75rem; border-radius: 12px;
-  border-left: 3px solid var(--accent, #888);
-  background: color-mix(in srgb, var(--accent, #888) 8%, transparent);
-  font-size: .95rem;
-}
-.post-fediverse .fedi-ours-label { font-weight: 600; color: var(--accent, #555); margin-right: .25rem; }
-.post-fediverse .fedi-ours-body p { margin: 0; display: inline; }
-.post-fediverse .fedi-replybox { margin-top: .55rem; }
-.post-fediverse .fedi-replybox summary { cursor: pointer; font-size: .85rem; color: var(--ink-soft, #888); width: fit-content; }
-.post-fediverse .fedi-replybox form { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
-.post-fediverse .fedi-replybox textarea {
-  width: 100%; box-sizing: border-box; resize: vertical; padding: .55rem .7rem;
-  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent);
-  background: var(--paper, #fff); color: var(--ink, #000); font: inherit;
-}
-.post-fediverse .fedi-replybox button { align-self: flex-end; }
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.post-fediverse .fedi-handle { color: var(--ink-soft, #888); font-size: .82rem; }
+.post-fediverse .comment-content p { margin: .2rem 0; }
+.post-fediverse .comment-content p:first-child { margin-top: 0; }
+.post-fediverse .comment-content p:last-child { margin-bottom: 0; }
+/* reply toggle: a plain "Reageer" action like the comment buttons (no triangle) */
+.post-fediverse .fedi-reply-toggle { list-style: none; cursor: pointer; display: inline-block; }
+.post-fediverse .fedi-reply-toggle::-webkit-details-marker { display: none; }
+.post-fediverse details[open] .fedi-reply-toggle { margin-bottom: .5rem; }

src/services/i18n.js

@@ -108 +108 @@
     'comments.empty': 'Nog geen reacties.',
     'fedi.heading': 'Vanuit de fediverse', 'fedi.likes': 'sterren', 'fedi.boosts': 'boosts', 'fedi.replies': 'Reacties uit de fediverse',
-    'fedi.reply': 'Reageer', 'fedi.reply_ph': 'Je antwoord aan de fediverse…', 'fedi.send': 'Versturen', 'fedi.you': 'Jij:',
+    'fedi.reply': 'Reageer', 'fedi.reply_ph': 'Je antwoord aan de fediverse…', 'fedi.send': 'Versturen', 'fedi.you': 'Jij',
     'comments.to_start': 'om de conversatie te starten.',
     'comments.reply': 'Reageer', 'comments.delete': 'Verwijder', 'comments.cancel': 'Annuleren',
@@ -1102 +1102 @@
     'comments.empty': 'No comments yet.',
     'fedi.heading': 'From the fediverse', 'fedi.likes': 'favourites', 'fedi.boosts': 'boosts', 'fedi.replies': 'Replies from the fediverse',
-    'fedi.reply': 'Reply', 'fedi.reply_ph': 'Your reply to the fediverse…', 'fedi.send': 'Send', 'fedi.you': 'You:',
+    'fedi.reply': 'Reply', 'fedi.reply_ph': 'Your reply to the fediverse…', 'fedi.send': 'Send', 'fedi.you': 'You',
     'comments.to_start': 'to start the conversation.',
     'comments.reply': 'Reply', 'comments.delete': 'Delete', 'comments.cancel': 'Cancel',
@@ -2094 +2094 @@
     'comments.empty': 'Noch keine Kommentare.',
     'fedi.heading': 'Aus dem Fediverse', 'fedi.likes': 'Favoriten', 'fedi.boosts': 'Boosts', 'fedi.replies': 'Antworten aus dem Fediverse',
-    'fedi.reply': 'Antworten', 'fedi.reply_ph': 'Deine Antwort an das Fediverse…', 'fedi.send': 'Senden', 'fedi.you': 'Du:',
+    'fedi.reply': 'Antworten', 'fedi.reply_ph': 'Deine Antwort an das Fediverse…', 'fedi.send': 'Senden', 'fedi.you': 'Du',
     'comments.to_start': 'um das Gespräch zu starten.',
     'comments.reply': 'Antworten', 'comments.delete': 'Löschen', 'comments.cancel': 'Abbrechen',

src/views/pages/post.ejs

@@ -73 +73 @@
 
   <!-- Fediverse interactions (inbound replies / likes / boosts via ActivityPub) -->
+  <!-- Mirrors the native comment markup/classes so it looks identical. -->
   <% if (typeof fediverse !== 'undefined' && fediverse && fediverse.total > 0) { %>
-    <section class="post-fediverse" id="fediverse">
-      <h2 class="fedi-heading"><%= t('fedi.heading') %></h2>
+    <section class="post-fediverse post-comments" id="fediverse">
+      <h2 class="comments-heading"><%= t('fedi.heading') %></h2>
       <p class="fedi-stats">
         <span title="<%= t('fedi.likes') %>">⭐ <%= fediverse.likeCount %></span>
@@ -82 +83 @@
       </p>
       <% if (fediverse.replies.length) { %>
-        <ul class="fedi-replies">
+        <ol class="comments-list">
           <% fediverse.replies.forEach(function(r) { %>
-            <li class="fedi-reply">
-              <div class="fedi-avatar">
+            <li class="comment">
+              <div class="comment-avatar">
                 <% if (r.actor_icon) { %><img src="<%= r.actor_icon %>" alt="" loading="lazy">
-                <% } else { %><span class="fedi-avatar-fallback"><%= (r.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
+                <% } else { %><span><%= (r.actor_name || '?').charAt(0).toUpperCase() %></span><% } %>
               </div>
-              <div class="fedi-main">
-                <div class="fedi-line">
-                  <a class="fedi-name" href="<%= r.actor_url %>" rel="nofollow noopener" target="_blank"><%= r.actor_name %></a>
+              <div class="comment-body">
+                <div class="comment-meta">
+                  <a class="comment-author" href="<%= r.actor_url %>" rel="nofollow noopener" target="_blank"><%= r.actor_name %></a>
                   <span class="fedi-handle"><%= r.actor_handle %></span>
-                  <% if (r.published || r.created_at) { %><time class="fedi-time"><%= formatDateTime(r.published || r.created_at) %></time><% } %>
+                  <% if (r.published || r.created_at) { %><span class="comment-time"><%= formatDateTime(r.published || r.created_at) %></span><% } %>
                 </div>
-                <div class="fedi-text"><%- r.content %></div>
-                <% var mine = (typeof fediverse.outReplies !== 'undefined' ? fediverse.outReplies : []).filter(function(o){ return o.in_reply_to && o.in_reply_to === r.object_uri; }); %>
-                <% mine.forEach(function(o){ %>
-                  <div class="fedi-ours"><span class="fedi-ours-label"><%= t('fedi.you') %></span> <span class="fedi-ours-body"><%- o.content %></span></div>
-                <% }); %>
+                <div class="comment-content"><%- r.content %></div>
+
                 <% if (typeof canManageSite !== 'undefined' && canManageSite) { %>
                   <details class="fedi-replybox">
-                    <summary><%= t('fedi.reply') %></summary>
-                    <form method="post" action="<%= _base %>/posts/<%= post.slug %>/fedi-reply">
+                    <summary class="comment-reply-btn fedi-reply-toggle"><%= t('fedi.reply') %></summary>
+                    <form method="post" action="<%= _base %>/posts/<%= post.slug %>/fedi-reply" class="comment-reply-form">
                       <input type="hidden" name="interaction_id" value="<%= r.id %>">
-                      <textarea name="text" rows="2" required placeholder="<%= t('fedi.reply_ph') %>"></textarea>
-                      <button type="submit" class="btn btn-primary"><%= t('fedi.send') %></button>
+                      <textarea name="text" rows="3" required placeholder="<%= t('fedi.reply_ph') %>"></textarea>
+                      <div class="comment-reply-form-actions">
+                        <button type="submit" class="btn btn-primary"><%= t('fedi.send') %></button>
+                      </div>
                     </form>
                   </details>
+                <% } %>
+
+                <% var mine = (typeof fediverse.outReplies !== 'undefined' ? fediverse.outReplies : []).filter(function(o){ return o.in_reply_to && o.in_reply_to === r.object_uri; }); %>
+                <% if (mine.length) { %>
+                  <ol class="comment-replies">
+                    <% mine.forEach(function(o){ %>
+                      <li class="comment comment-reply">
+                        <div class="comment-avatar"><span><%= t('fedi.you').charAt(0).toUpperCase() %></span></div>
+                        <div class="comment-body">
+                          <div class="comment-meta"><span class="comment-author"><%= t('fedi.you') %></span></div>
+                          <div class="comment-content"><%- o.content %></div>
+                        </div>
+                      </li>
+                    <% }); %>
+                  </ol>
                 <% } %>
               </div>
             </li>
           <% }); %>
-        </ul>
+        </ol>
       <% } %>
     </section>

src/views/shell.ejs

@@ -175 +175 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=37">
+<link rel="stylesheet" href="/assets/css/style.css?v=38">
 
 <!-- Audio player styles: loaded on every page so the mini-player works