Changeset c7c7f02 in Klonkt

Timestamp:

06/26/2026 01:01:54 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

b6cdc3d

Parents:

bbce8da

Message:

feat(cirkel): render boosted posts in the pinned style with a Boost badge

A post you boosted (ap_timeline.boosted) now stands out in the Cirkel: same visual
treatment as a pinned post on the solo page (accent outline in grid, badge), but the
badge reads 'Boost' (🔁/loop icon) instead of 'Pinned'. Featured-account posts stay
normal. getCirkelPosts returns t.boosted; circle.js sets isBoost; post-card/post-tile
swap the badge + reuse is-pinned styling. No effect on the home page (isBoost only set
in the Cirkel).

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

Location:

src

Files:

• routes/circle.js (modified) (1 diff)
• services/ActivityPubService.js (modified) (1 diff)
• views/partials/post-card.ejs (modified) (3 diffs)
• views/partials/post-tile.ejs (modified) (3 diffs)

src/routes/circle.js

@@ -46 +46 @@
       tags: '',
       pinned: 0,
+      isBoost: !!r.boosted, // a post YOU boosted → render in the pinned style with a Boost badge
       status: 'published',
       source_name: name,

src/services/ActivityPubService.js

@@ -1063 +1063 @@
     if (!_cirkelPosts) _cirkelPosts = db.prepare(`
       SELECT t.id, t.author_uri, t.author_name, t.author_handle, t.author_icon, t.author_url,
-             t.content, t.url, t.published, t.media_json
+             t.content, t.url, t.published, t.media_json, t.boosted
       FROM ap_timeline t
       LEFT JOIN ap_following f ON f.slug = t.slug AND f.actor_uri = t.author_uri

src/views/partials/post-card.ejs

@@ -19 +19 @@
 const _typeLabel = (post.type && post.type !== 'overig' && post.type !== 'post') ? post.type : '';
 const _isPinned  = !!post.pinned;
+const _isBoost   = !!post.isBoost;
 const _isDraft   = post.status && post.status !== 'published';
 
@@ -42 +43 @@
 }
 %>
-<li class="post-list-item<%= _hasCover ? ' has-cover' : '' %><%= _isPinned ? ' is-pinned' : '' %>">
+<li class="post-list-item<%= _hasCover ? ' has-cover' : '' %><%= (_isPinned || _isBoost) ? ' is-pinned' : '' %>">
 
   <% if (_hasCover) { %>
@@ -54 +55 @@
   <div class="post-list-body">
     <div class="post-list-meta mono">
-      <% if (_isPinned) { %><span class="post-list-pin" aria-label="Vastgepind">★</span><% } %>
+      <% if (_isBoost) { %><span class="post-list-pin post-list-boost" aria-label="Boost">🔁</span><% } else if (_isPinned) { %><span class="post-list-pin" aria-label="Vastgepind">★</span><% } %>
       <time datetime="<%= post.published_at || post.created_at %>"><%= _ddmmyyyy(post.published_at || post.created_at) %></time>
       <% if (_src) { %><span class="post-list-type">&middot; via <%= _src %></span><% } %>

src/views/partials/post-tile.ejs

@@ -5 +5 @@
 const _tileHue = ((post.id || post.slug || '0').charCodeAt(0) * 7) % 360;
 const _isPinned = !!post.pinned;
+const _isBoost = !!post.isBoost;
 const _hasCover = !!post.cover_image_url;
 const _typeLabel = (post.type && post.type !== 'post') ? post.type : '';
@@ -13 +14 @@
 const _ext = !!_external;
 %>
-<a class="grid-tile<%= _hasCover ? '' : ' grid-tile-gradient' %><%= _isPinned ? ' is-pinned' : '' %>"
+<a class="grid-tile<%= _hasCover ? '' : ' grid-tile-gradient' %><%= (_isPinned || _isBoost) ? ' is-pinned' : '' %>"
    href="<%= _href %>"
    <% if (_hasCover) { %>style="background-image: url('<%= post.cover_image_url %>'); --tile-hue: <%= _tileHue %>;"<% } else { %>style="--tile-hue: <%= _tileHue %>;"<% } %>
@@ -21 +22 @@
     <span class="grid-tile-type"><%= _typeLabel %></span>
   <% } %>
-  <% if (_isPinned) { %>
+  <% if (_isBoost) { %>
+    <span class="grid-tile-pin grid-tile-boost"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/></svg>Boost</span>
+  <% } else if (_isPinned) { %>
     <span class="grid-tile-pin"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/></svg>Pinned</span>
   <% } %>