Changeset 462a931 in Klonkt for src/views/pages/following.ejs

Timestamp:

06/30/2026 01:31:49 PM (2 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

8b700ad

Parents:

d5aa7c8

Message:

feat(circle): filter the Circle feed by member (clickable chips + Following "Show" link)

The member chips on the Circle page are now clickable filters: clicking one shows only that
account's posts, with an "Everyone" chip to clear and an active highlight. The Following page
gets a "Show" link per featured account that lands on the filtered Circle view. So Featured =
"include in my Circle", and Show lets you view just that one person here.

• src/services/ActivityPubService.js — getCirkelPosts(slug, limit, actorUri) filter; members expose actor_uri
• src/routes/circle.js — honour ?actor=<uri> (validated against the member list) + active flags
• src/views/pages/circle-feed.ejs — chips + modal as filter links + Everyone + active state
• src/views/pages/following.ejs — Show link for featured accounts
• src/services/i18n.js — cfeed.all, tl.show (nl/en/de)

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

File:

• src/views/pages/following.ejs (modified) (2 diffs)

src/views/pages/following.ejs

@@ -30 +30 @@
             <label><input type="checkbox" name="auto_boost" value="1" <%= f.auto_boost ? 'checked' : '' %> data-autosubmit> ✨ <%= t('tl.autoboost') %></label>
           </form>
+          <% if (f.auto_boost) { %><a class="tl-foll-show" href="/cirkel?actor=<%= encodeURIComponent(f.actor_uri) %>" title="<%= t('tl.show') %>"><%= t('tl.show') %></a><% } %>
           <form method="post" action="/news/unfollow"><input type="hidden" name="actor_uri" value="<%= f.actor_uri %>"><button type="submit" class="tl-unfollow"><%= t('tl.unfollow') %></button></form>
         </li>
@@ -66 +67 @@
   .tl-unfollow { background: none; border: 1px solid color-mix(in srgb, var(--ink, #000) 18%, transparent); border-radius: 8px; padding: .25rem .6rem; font-size: .8rem; color: var(--ink-soft, #888); cursor: pointer; }
   .tl-unfollow:hover { color: var(--ink, #000); }
+  .tl-foll-show { font-size: .8rem; text-decoration: none; white-space: nowrap; color: var(--accent, #888);
+    border: 1px solid color-mix(in srgb, var(--accent, #888) 35%, transparent); border-radius: 8px; padding: .25rem .6rem; }
+  .tl-foll-show:hover { background: color-mix(in srgb, var(--accent, #888) 12%, transparent); }
   .tl-empty { color: var(--ink-soft, #888); }
 </style>