Changeset b6cdc3d in Klonkt for src/views

Timestamp:

06/26/2026 01:13:21 PM (3 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

54d2f98

Parents:

c7c7f02

Message:

feat(fedi): like/boost/reply on the interaction page + display-only stats

• Post 'From the fediverse' stats (like/boost/reply) are now display-only counters (the star is no longer a button). One CTA, renamed 'Interact via the fediverse'.
• The /authorize_interaction page now offers Like AND Boost (next to reply), via a new POST /authorize_interaction/boost (Undo-able later; markBoosted so it shows in the Cirkel if it's in your timeline).
• The 'view the full post + replies on the source' link is now a prominent button.
• i18n nl/en/de: fedi.boost_btn, fedi.boosted_title/_done, fedi.remote_interact.

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

Location:

src/views/pages

Files:

• authorize-interaction.ejs (modified) (3 diffs)
• post.ejs (modified) (2 diffs)

src/views/pages/authorize-interaction.ejs

@@ -23 +23 @@
     <h1 class="auth-interact-title">★ <%= t('fedi.liked_title') %></h1>
     <p class="auth-interact-note"><%= t('fedi.liked_done') %></p>
+    <p class="auth-interact-actions">
+      <% if (uri) { %><a class="btn" href="<%= uri %>" rel="nofollow noopener"><%= t('fedi.remote_view_original') %></a><% } %>
+      <a class="btn btn-primary" href="/"><%= t('fedi.remote_back') %></a>
+    </p>
+  <% } else if (typeof boosted !== 'undefined' && boosted) { %>
+    <h1 class="auth-interact-title">🔁 <%= t('fedi.boosted_title') %></h1>
+    <p class="auth-interact-note"><%= t('fedi.boosted_done') %></p>
     <p class="auth-interact-actions">
       <% if (uri) { %><a class="btn" href="<%= uri %>" rel="nofollow noopener"><%= t('fedi.remote_view_original') %></a><% } %>
@@ -77 +84 @@
         <img class="auth-interact-img" src="<%= im %>" alt="" loading="lazy">
       <% }); %>
-      <% if (target.url || uri) { %>
-        <p class="auth-interact-orig"><a href="<%= target.url || uri %>" target="_blank" rel="nofollow noopener"><%= t('fedi.remote_view_original') %></a></p>
-      <% } %>
     </blockquote>
-    <form method="post" action="/authorize_interaction/like" class="auth-interact-like">
-      <input type="hidden" name="uri" value="<%= uri %>">
-      <button type="submit" class="btn btn-primary auth-like-btn">★ <%= t('fedi.like_btn') %></button>
-    </form>
+    <% if (target.url || uri) { %>
+      <a class="auth-view-src" href="<%= target.url || uri %>" target="_blank" rel="nofollow noopener">
+        <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7"/><path d="M7 7h10v10"/></svg>
+        <span><%= t('fedi.remote_view_original') %></span>
+      </a>
+    <% } %>
+    <div class="auth-interact-react">
+      <form method="post" action="/authorize_interaction/like">
+        <input type="hidden" name="uri" value="<%= uri %>">
+        <button type="submit" class="btn btn-primary auth-like-btn">★ <%= t('fedi.like_btn') %></button>
+      </form>
+      <form method="post" action="/authorize_interaction/boost">
+        <input type="hidden" name="uri" value="<%= uri %>">
+        <button type="submit" class="btn auth-boost-btn">🔁 <%= t('fedi.boost_btn') %></button>
+      </form>
+    </div>
     <p class="auth-interact-or"><%= t('fedi.or_reply') %></p>
     <p class="auth-interact-where">💬 <%= t('fedi.reply_where') %></p>
@@ -124 +140 @@
   .auth-interact-orig { margin: .75rem 0 0; font-size: .85rem; }
   .auth-interact-orig a { color: var(--accent, #06c); }
+  .auth-view-src { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; padding: .6rem 1rem;
+    border: 1px solid color-mix(in srgb, var(--accent, #888) 45%, transparent); border-radius: 12px;
+    background: color-mix(in srgb, var(--accent, #888) 10%, transparent); color: var(--accent, #06c);
+    text-decoration: none; font-weight: 600; font-size: .92rem; transition: background .15s, border-color .15s; }
+  .auth-view-src:hover { background: color-mix(in srgb, var(--accent, #888) 18%, transparent); border-color: var(--accent, #888); }
+  .auth-interact-react { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .25rem; }
+  .auth-interact-react form { margin: 0; }
+  .auth-boost-btn { white-space: nowrap; }
   .fedi-manage { list-style: none; padding: 0; margin: 1.25rem 0 1rem; display: flex; flex-direction: column; gap: .7rem; }
   .fedi-manage-item { padding: .85rem 1rem; border-radius: 14px; background: color-mix(in srgb, var(--ink, #000) 4%, transparent); border: 1px solid color-mix(in srgb, var(--ink, #000) 9%, transparent); }

src/views/pages/post.ejs

@@ -74 +74 @@
       <h2 class="comments-heading"><%= t('fedi.heading') %></h2>
       <div class="fedi-stats">
-        <button type="button" class="fedi-stat fedi-stat-btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>" title="<%= t('like.fedi_title') %>">
+        <span class="fedi-stat" title="<%= t('fedi.likes') %>">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
           <span><%= _fedi.likeCount %></span>
-        </button>
+        </span>
         <span class="fedi-stat" title="<%= t('fedi.boosts') %>">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" 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>
@@ -96 +96 @@
       <div class="post-fediverse-cta">
         <button type="button" class="btn fedi-remote-reply-btn" data-fedi-uri="<%= _postAbsUrl %>" data-fedi-ph="<%= t('fedi.remote_ph') %>">
-          <svg viewBox="0 0 24 24" width="16" height="16" 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') %>
+          <svg viewBox="0 0 24 24" width="16" height="16" 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>
+          <%= t('fedi.remote_interact') %>
         </button>
       </div>