Changeset 3d37c67 in Klonkt

Timestamp:

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

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

2f42b60

Parents:

3289a64

Message:

feat(fedi): interact page like/boost are 2 icon+label toggle buttons

Replace the '★ Like this post' / '🔁 Boost this post' buttons with two pill buttons
(gold star + Like, green repeat + Boost) that are real toggles. New ap_my_reactions
table tracks your like/boost state on a REMOTE post; clicking again retracts (Undo
Like / Undo Announce). The like/boost POST now redirects back to the interact page so
the state shows in place (no more separate confirmation screen).

Location:

src

Files:

• config/database.js (modified) (1 diff)
• routes/posts.js (modified) (1 diff)
• services/ActivityPubService.js (modified) (2 diffs)
• views/pages/authorize-interaction.ejs (modified) (2 diffs)

src/config/database.js

@@ -354 +354 @@
     );
     CREATE INDEX IF NOT EXISTS idx_ap_outbox_post ON ap_outbox(post_id);
+    -- Your like/boost state on a REMOTE post (the interact page), so those become toggles.
+    CREATE TABLE IF NOT EXISTS ap_my_reactions (
+      site_slug TEXT NOT NULL,
+      target_uri TEXT NOT NULL,
+      kind TEXT NOT NULL,             -- 'like' | 'boost'
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      UNIQUE(site_slug, target_uri, kind)
+    );
   `);
   ensureColumn('ap_interactions', 'parent_uri', 'TEXT'); // nesting (existing DBs)

src/routes/posts.js

@@ -502 +502 @@
     liked: !!req.query.liked,
     boosted: !!req.query.boosted,
+    reacted: (site && uri) ? ActivityPubService.getMyReactions(site.slug, uri) : { liked: false, boosted: false },
     siteTitle: site ? site.title : '',
   });
 });
 
-// ⭐ Like a remote post from your own site (the star flow lands here).
+// ⭐ Like / unlike a remote post from your own site (toggle on the interact page).
 router.post('/authorize_interaction/like', requireSiteManager, (req, res) => {
   const site = res.locals.site;
   const uri = (req.body.uri || '').toString();
   if (site && uri) {
+    const on = !ActivityPubService.getMyReactions(site.slug, uri).liked;
     ActivityPubService.resolveRemoteNote(uri)
-      .then((note) => note && ActivityPubService.sendInteraction(site, 'like', note.object_uri || uri, note.actor_uri))
+      .then((note) => note && ActivityPubService.sendInteraction(site, on ? 'like' : 'unlike', note.object_uri || uri, note.actor_uri))
       .catch((e) => console.warn('[AP] remote like failed:', e.message));
-  }
-  res.redirect('/authorize_interaction?liked=1&uri=' + encodeURIComponent(uri));
-});
-
-// 🔁 Boost a remote post from your own site. Also flags it for the Cirkel
-// (markBoosted is a no-op if the post isn't in your timeline).
+    ActivityPubService.setMyReaction(site.slug, uri, 'like', on);
+  }
+  res.redirect('/authorize_interaction?uri=' + encodeURIComponent(uri));
+});
+
+// 🔁 Boost / unboost a remote post from your own site (toggle on the interact page).
+// Also flags it for the Cirkel (markBoosted is a no-op if the post isn't in your timeline).
 router.post('/authorize_interaction/boost', requireSiteManager, (req, res) => {
   const site = res.locals.site;
   const uri = (req.body.uri || '').toString();
   if (site && uri) {
+    const on = !ActivityPubService.getMyReactions(site.slug, uri).boosted;
     ActivityPubService.resolveRemoteNote(uri)
       .then((note) => {
         if (!note) return;
         const id = note.object_uri || uri;
-        return Promise.resolve(ActivityPubService.sendInteraction(site, 'boost', id, note.actor_uri))
-          .then(() => ActivityPubService.markBoosted(site.slug, id));
+        return Promise.resolve(ActivityPubService.sendInteraction(site, on ? 'boost' : 'unboost', id, note.actor_uri))
+          .then(() => on ? ActivityPubService.markBoosted(site.slug, id) : ActivityPubService.unmarkBoosted(site.slug, id));
       })
       .catch((e) => console.warn('[AP] remote boost failed:', e.message));
-  }
-  res.redirect('/authorize_interaction?boosted=1&uri=' + encodeURIComponent(uri));
+    ActivityPubService.setMyReaction(site.slug, uri, 'boost', on);
+  }
+  res.redirect('/authorize_interaction?uri=' + encodeURIComponent(uri));
 });
 

src/services/ActivityPubService.js

@@ -367 +367 @@
 export function setInteractionLiked(id, on) {
   db.prepare('UPDATE ap_interactions SET acted_like = ? WHERE id = ?').run(on ? 1 : 0, id);
+}
+// Your like/boost state on a REMOTE post (interact page toggles).
+export function setMyReaction(slug, uri, kind, on) {
+  if (on) db.prepare('INSERT OR IGNORE INTO ap_my_reactions (site_slug, target_uri, kind) VALUES (?,?,?)').run(slug, uri, kind);
+  else db.prepare('DELETE FROM ap_my_reactions WHERE site_slug = ? AND target_uri = ? AND kind = ?').run(slug, uri, kind);
+}
+export function getMyReactions(slug, uri) {
+  const rows = (slug && uri) ? db.prepare('SELECT kind FROM ap_my_reactions WHERE site_slug = ? AND target_uri = ?').all(slug, uri) : [];
+  return { liked: rows.some((r) => r.kind === 'like'), boosted: rows.some((r) => r.kind === 'boost') };
 }
 
@@ -1337 +1346 @@
   buildActor, buildNote, buildCreate, buildOutbox, buildFollowers, buildFeatured,
   followerCount, deliver, fetchActor, verifyRequest, handleInbox, deliverCreate, deliverDelete, deliverUpdate, deliverActorUpdate, resyncFeaturedPins,
-  getInteractions, getInteractionById, setInteractionBoosted, setInteractionLiked, buildReplyNote, getOutboxNote, deliverReply, resolveRemoteNote,
+  getInteractions, getInteractionById, setInteractionBoosted, setInteractionLiked, setMyReaction, getMyReactions, buildReplyNote, getOutboxNote, deliverReply, resolveRemoteNote,
   listOutbox, deliverOutboxDelete,
   webfingerResolve, followActor, resolveRemoteActor, unfollowActor, listFollowing, setAutoBoost, getTimeline, sendInteraction,

src/views/pages/authorize-interaction.ejs

@@ -95 +95 @@
       <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>
+        <button type="submit" class="fedi-bigact fedi-bigact-like<%= (typeof reacted !== 'undefined' && reacted.liked) ? ' is-on' : '' %>">
+          <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>
+          <span><%= (typeof reacted !== 'undefined' && reacted.liked) ? t('fedi.unlike_short') : t('fedi.like_short') %></span>
+        </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>
+        <button type="submit" class="fedi-bigact fedi-bigact-boost<%= (typeof reacted !== 'undefined' && reacted.boosted) ? ' is-on' : '' %>">
+          <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>
+          <span><%= (typeof reacted !== 'undefined' && reacted.boosted) ? t('tl.unboost') : t('fedi.boost_short') %></span>
+        </button>
       </form>
     </div>
@@ -146 +152 @@
     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 { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .25rem; }
   .auth-interact-react form { margin: 0; }
-  .auth-boost-btn { white-space: nowrap; }
+  .fedi-bigact { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent);
+    background: color-mix(in srgb, var(--ink, #000) 4%, transparent);
+    color: var(--ink, inherit); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; white-space: nowrap;
+    transition: background .12s, border-color .12s; }
+  .fedi-bigact svg { width: 17px; height: 17px; flex: 0 0 17px; }
+  .fedi-bigact-like svg { color: #e8b04b; }
+  .fedi-bigact-like:hover, .fedi-bigact-like.is-on { background: color-mix(in srgb, #e8b04b 16%, transparent); border-color: color-mix(in srgb, #e8b04b 55%, transparent); }
+  .fedi-bigact-boost svg { color: #2fa85a; }
+  .fedi-bigact-boost:hover, .fedi-bigact-boost.is-on { background: color-mix(in srgb, #2fa85a 16%, transparent); border-color: color-mix(in srgb, #2fa85a 55%, transparent); }
   .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); }