Changeset 667fb41 in Klonkt for src/views/pages/authorize-interaction.ejs

Timestamp:

07/01/2026 01:32:22 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

c45c187

Parents:

bb3f67c

Message:

feat(polls): vote on any fediverse poll from the interact page

The interact page (paste any post URL) now detects a Question and shows a ballot
(radio/checkbox + Vote) so you can vote on any fediverse poll by URL — not only
polls from accounts you follow (which vote via /news). Casts the Mastodon-standard
ballot straight to the poll's author, no timeline cache needed.

• src/services/ActivityPubService.js — voteOnRemotePoll(site, url, choices) fetches the Question fresh, validates the choice(s) and delivers the ballot to the author; resolveRemoteNote now returns the parsed poll so the view can render options.
• src/routes/posts.js — POST /authorize_interaction/vote; GET passes voted and skips re-resolving the target on the confirmation view.
• src/views/pages/authorize-interaction.ejs — ballot (open) / results (closed) above the like/boost/reply actions, a "vote sent" confirmation, and scoped .auth-poll styles.
• src/services/i18n.js — poll.voted_title/_done (nl/en/de).

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

File:

• src/views/pages/authorize-interaction.ejs (modified) (3 diffs)

src/views/pages/authorize-interaction.ejs

@@ -93 +93 @@
       <a class="btn" href="/"><%= t('fedi.remote_back') %></a>
     </p>
+  <% } else if (typeof voted !== 'undefined' && voted) { %>
+    <h1 class="auth-interact-title">📊 <%= t('poll.voted_title') %></h1>
+    <p class="auth-interact-note"><%= t('poll.voted_done') %></p>
+    <p class="auth-interact-actions">
+      <% if (uri) { %><a class="btn btn-primary" href="<%= uri %>" rel="nofollow noopener"><%= t('fedi.remote_view_original') %></a><% } %>
+      <a class="btn" href="/"><%= t('fedi.remote_back') %></a>
+    </p>
   <% } else if (typeof followTarget !== 'undefined' && followTarget) { %>
   <h1 class="auth-interact-title"><%= t('fedi.follow_heading') %></h1>
@@ -135 +142 @@
         <span><%= t('fedi.remote_view_original') %></span>
       </a>
+    <% } %>
+    <% if (target.poll) { var _pl = target.poll; var _tot = _pl.options.reduce(function(s,o){return s+(o.count||0);},0); %>
+      <% if (!_pl.closed) { %>
+        <form method="post" action="/authorize_interaction/vote" class="auth-poll">
+          <input type="hidden" name="uri" value="<%= uri %>">
+          <% _pl.options.forEach(function(o){ %>
+            <label class="auth-poll-choice"><input type="<%= _pl.multiple ? 'checkbox' : 'radio' %>" name="choice" value="<%= o.name %>"><span><%= o.name %></span></label>
+          <% }); %>
+          <div class="auth-interact-actions">
+            <button type="submit" class="btn btn-primary"><%= t('poll.vote') %></button>
+          </div>
+          <p class="auth-poll-foot"><% if (_pl.multiple) { %><%= t('poll.multiple') %> · <% } %><%= (_pl.voters!=null?_pl.voters:_tot) %> <%= t('poll.votes') %></p>
+        </form>
+      <% } else { %>
+        <div class="auth-poll">
+          <% _pl.options.forEach(function(o){ var _pct = _tot ? Math.round((o.count||0)*100/_tot) : 0; %>
+            <div class="auth-poll-res"><span class="auth-poll-fill" style="width:<%= _pct %>%"></span><span class="auth-poll-name"><%= o.name %></span><span class="auth-poll-pct"><%= _pct %>%</span></div>
+          <% }); %>
+          <p class="auth-poll-foot"><%= (_pl.voters!=null?_pl.voters:_tot) %> <%= t('poll.votes') %> · <%= t('poll.closed') %></p>
+        </div>
+      <% } %>
     <% } %>
     <% var _liked = (typeof reacted !== 'undefined' && reacted.liked); var _boosted = (typeof reacted !== 'undefined' && reacted.boosted); %>
@@ -251 +279 @@
   .fedi-edit-save { padding: .4rem 1rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--paper, #fff);
     font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; }
+  /* Poll ballot / results on the interact page */
+  .auth-poll { display: flex; flex-direction: column; gap: 8px; margin: 0 0 1rem; }
+  .auth-poll-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
+    border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); }
+  .auth-poll-choice:hover { border-color: var(--accent); }
+  .auth-poll-choice input { accent-color: var(--accent); }
+  .auth-poll-res { position: relative; padding: 9px 12px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; gap: 8px;
+    background: color-mix(in srgb, var(--ink, #000) 6%, transparent); }
+  .auth-poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: 0; }
+  .auth-poll-name { position: relative; z-index: 1; flex: 1; font-size: .95rem; }
+  .auth-poll-pct { position: relative; z-index: 1; font-variant-numeric: tabular-nums; font-weight: 500; }
+  .auth-poll-foot { font-size: .82rem; color: var(--ink-soft, #888); margin: .1rem 0 0; }
 </style>