Changeset c745659 in Klonkt for src/views

Timestamp:

06/26/2026 11:25:14 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

3289a64

Parents:

eacd3d6

Message:

feat(fedi): comment boost is a toggle with state + coloured action icons

Inbound fediverse comments: the owner like/boost/reply controls are now coloured SVG
icons (gold star / green repeat / accent arrow), matching the News feed. Boost is a
real toggle — ap_interactions.acted_boost remembers what you boosted, the button shows
an 'on' state, and clicking again retracts it (Undo Announce). Like stays fire-and-forget
(no unlike in AS).

Location:

src/views

Files:

• pages/post.ejs (modified) (1 diff)
• partials/fedi-node.ejs (modified) (1 diff)

src/views/pages/post.ejs

@@ -325 +325 @@
 .comment-delete-btn:hover { color: #c33; }
 
+/* Owner comment-action icons — same visual language as the News feed, compact (30px). */
+.fedi-cact { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; padding: 0; box-sizing: border-box;
+  display: inline-flex; align-items: center; justify-content: center; list-style: none;
+  border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent);
+  background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
+  color: var(--ink-soft, #888); cursor: pointer; -webkit-tap-highlight-color: transparent;
+  transition: background .12s, border-color .12s, transform .1s; }
+.fedi-cact::-webkit-details-marker { display: none; }
+.fedi-cact svg { width: 15px; height: 15px; display: block; }
+.fedi-cact:active { transform: scale(.9); }
+.fedi-cact-like svg { color: #e8b04b; }
+.fedi-cact-like:hover { background: color-mix(in srgb, #e8b04b 15%, transparent); border-color: color-mix(in srgb, #e8b04b 50%, transparent); }
+.fedi-cact-boost svg { color: #2fa85a; }
+.fedi-cact-boost:hover { background: color-mix(in srgb, #2fa85a 15%, transparent); border-color: color-mix(in srgb, #2fa85a 50%, transparent); }
+.fedi-cact-boost.is-on { background: color-mix(in srgb, #2fa85a 18%, transparent); border-color: color-mix(in srgb, #2fa85a 60%, transparent); }
+.fedi-cact-reply svg { color: var(--accent, #06c); }
+.fedi-cact-reply:hover { background: color-mix(in srgb, var(--accent, #888) 14%, transparent); border-color: color-mix(in srgb, var(--accent, #888) 50%, transparent); }
+
 .comment-replies {
   margin-top: 1rem;

src/views/partials/fedi-node.ejs

@@ -22 +22 @@
         <input type="hidden" name="interaction_id" value="<%= n.id %>">
         <input type="hidden" name="kind" value="like">
-        <button type="submit" class="comment-reply-btn">⭐ <%= t('fedi.like_short') %></button>
+        <button type="submit" class="fedi-cact fedi-cact-like" title="<%= t('fedi.like_short') %>" aria-label="<%= t('fedi.like_short') %>"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.6l2.9 5.88 6.49.95-4.7 4.58 1.11 6.46L12 17.96l-5.8 3.06 1.1-6.46-4.69-4.58 6.49-.95z"/></svg></button>
       </form>
       <form method="post" action="<%= _base %>/posts/<%= postSlug %>/fedi-react" class="fedi-owner-react">
         <input type="hidden" name="interaction_id" value="<%= n.id %>">
         <input type="hidden" name="kind" value="boost">
-        <button type="submit" class="comment-reply-btn">🔁 <%= t('fedi.boost_short') %></button>
+        <button type="submit" class="fedi-cact fedi-cact-boost<%= n.acted_boost ? ' is-on' : '' %>" title="<%= n.acted_boost ? t('tl.unboost') : t('fedi.boost_short') %>" aria-label="<%= n.acted_boost ? t('tl.unboost') : t('fedi.boost_short') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></button>
       </form>
       <details class="fedi-owner-reply">
-        <summary class="comment-reply-btn">
-          <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg>
-          <%= t('fedi.remote_reply_short') %>
-        </summary>
+        <summary class="fedi-cact fedi-cact-reply" title="<%= t('fedi.remote_reply_short') %>" aria-label="<%= t('fedi.remote_reply_short') %>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 17 4 12 9 7"/><path d="M20 18v-2a4 4 0 0 0-4-4H4"/></svg></summary>
         <form method="post" action="<%= _base %>/posts/<%= postSlug %>/fedi-reply" class="comment-reply-form">
           <input type="hidden" name="interaction_id" value="<%= n.id %>">