Changeset 520e477 in Klonkt

Timestamp:

07/20/2026 07:35:55 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

22d2f5a8

Parents:

1485933

git-author:

Robin <roboburr@…> (07/20/2026 07:26:51 AM)

git-committer:

Robin <roboburr@…> (07/20/2026 07:35:55 AM)

Message:

Feature: Load more on Solo + Cirkel, page 72 (klonkt-demo-r9u, slice 3/4)

The home feed (Solo) and the Cirkel feed now page in 72s instead of a
hard 30/80 cap. Both render two containers (list + grid, CSS-toggled),
so the append fragment (partials/home-append) sends the post-cards as
the primary beforeend swap into #post-list and OOB-appends the same
posts as tiles into #grid-tiles. htmx 1.9.12 unwraps the OOB wrapper's
children on a positional swap, so the tiles land as direct grid items
(the display:contents wrapper is a belt-and-braces fallback). The
button lives once below both views and OOB-replaces itself with the
next offset, dropping on the last page. Pinned posts stay on page 1
only. getCirkelPosts gains an offset arg; FEED_PAGE hoisted to the top
of posts.js.

Browser-verified both feeds: 72 -> 144 -> 150 in list AND grid, then
the button disappears.

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

Location:

src

Files:

• routes/circle.js (modified) (2 diffs)
• routes/posts.js (modified) (4 diffs)
• services/ActivityPubService.js (modified) (2 diffs)
• views/pages/circle-feed.ejs (modified) (3 diffs)
• views/pages/home.ejs (modified) (3 diffs)
• views/partials/home-append.ejs (added)

src/routes/circle.js

@@ -42 +42 @@
 }
 
+const CIRKEL_PAGE = 72; // matches FEED_PAGE in posts.js: divisible by 2/3/4
+
 router.get('/cirkel', (req, res, next) => {
   const site = res.locals.site;
   if (!site || !apEnabled() || (ActivityPubService.autoBoostCount(site.slug) === 0 && ActivityPubService.boostedCount(site.slug) === 0)) return next();
 
-  const posts = ActivityPubService.getCirkelPosts(site.slug, 80).map((r) => {
+  const append = req.query.append === '1';
+  const offset = Math.max(0, parseInt(req.query.offset, 10) || 0);
+  const rows = ActivityPubService.getCirkelPosts(site.slug, CIRKEL_PAGE + 1, offset);
+  const hasMore = rows.length > CIRKEL_PAGE;
+  const posts = rows.slice(0, CIRKEL_PAGE).map((r) => {
     const text = tidySnippet(htmlToText(r.content));
     // Show ONLY the title (the bold first line a Klonkt note carries), not the whole
@@ -77 +83 @@
   });
 
+  const moreBase = res.locals.siteUrlBase || '';
+  if (append) {
+    return renderPage(req, res, 'partials/home-append', { posts, hasMore, nextOffset: offset + CIRKEL_PAGE, moreBase, morePath: '/cirkel' });
+  }
+
   const sites = ActivityPubService.getCirkelMembers(site.slug)
     .map((s) => ({ name: s.name || 'Onbekend', url: safeUrl(s.url), avatar: safeUrl(s.icon) }));
 
-  renderPage(req, res, 'pages/circle-feed', { pageTitle: 'Cirkel', bodyClass: 'on-cirkel', posts, sites });
+  renderPage(req, res, 'pages/circle-feed', {
+    pageTitle: 'Cirkel', bodyClass: 'on-cirkel', posts, sites,
+    hasMore, nextOffset: offset + CIRKEL_PAGE, moreBase,
+  });
 });
 

src/routes/posts.js

@@ -95 +95 @@
 const router = express.Router();
 
+// Feed page size for "Load more" (Solo, News, Messages, Cirkel). 72 is divisible
+// by 2/3/4 so every grid column count ends on a full row.
+const FEED_PAGE = 72;
+
 // ==================== UPLOAD IMAGE (cover or content) ====================
 // Returns JSON {url} so the editor can stick it into the cover field or
@@ -210 +214 @@
   `).all(site.id);
 
-  // Regular posts: anything with pinned = 0
-  const posts = db.prepare(`
+  // Regular posts: anything with pinned = 0. Paged in blocks of 72 (Load more).
+  const append = req.query.append === '1';
+  const offset = Math.max(0, parseInt(req.query.offset, 10) || 0);
+  const rows = db.prepare(`
     SELECT p.*, u.username as author_username
     FROM posts p JOIN users u ON p.author_id = u.id
     WHERE p.site_id = ? AND p.status = 'published' AND p.pinned = 0
     ORDER BY p.published_at DESC
-    LIMIT 30
-  `).all(site.id);
+    LIMIT ? OFFSET ?
+  `).all(site.id, FEED_PAGE + 1, offset);
+  const hasMore = rows.length > FEED_PAGE;
+  const posts = rows.slice(0, FEED_PAGE);
+  const moreBase = res.locals.siteUrlBase || '';
+
+  if (append) {
+    return renderPage(req, res, 'partials/home-append', { posts, hasMore, nextOffset: offset + FEED_PAGE, moreBase });
+  }
 
   recordPageview(site.id, req);
@@ -224 +237 @@
     pinnedPosts,
     posts,
+    hasMore, nextOffset: offset + FEED_PAGE, moreBase,
     pageTitle: site.title,
     socialDescr: site.description || site.tagline || '',
@@ -893 +907 @@
 }
 
-const FEED_PAGE = 72; // divisible by 2/3/4 → every grid column count keeps full rows
 router.get('/news', requireSiteManager, (req, res) => {
   const site = res.locals.site;

src/services/ActivityPubService.js

@@ -2245 +2245 @@
   try { if (!_abCount) _abCount = db.prepare('SELECT COUNT(*) AS n FROM ap_following WHERE slug = ? AND auto_boost = 1'); return _abCount.get(slug).n; } catch { return 0; }
 }
-export function getCirkelPosts(slug, limit) {
+export function getCirkelPosts(slug, limit, offset) {
   try {
     // Cirkel = posts from featured (auto_boost) accounts + posts you boosted
@@ -2256 +2256 @@
       WHERE t.slug = ? AND (f.auto_boost = 1 OR t.boosted = 1)
       ORDER BY COALESCE(t.published, t.created_at) DESC, t.rowid DESC
-      LIMIT ?`);
-    return _cirkelPosts.all(slug, limit || 60);
+      LIMIT ? OFFSET ?`);
+    return _cirkelPosts.all(slug, limit || 60, offset || 0);
   } catch { return []; }
 }

src/views/pages/circle-feed.ejs

@@ -67 +67 @@
   <!-- ===== TIMELINE (standaard) ===== -->
   <div class="container feed-timeline">
-    <ul class="post-list feed-timeline-list">
+    <ul class="post-list feed-timeline-list" id="post-list">
       <% posts.forEach(function(post){ %>
         <%- include('../partials/post-card', { post: post }) %>
@@ -76 +76 @@
   <!-- ===== GRID (body[data-feed-view="grid"]) ===== -->
   <section class="feed-grid container" aria-label="<%= t('cfeed.grid_view') %>">
-    <div class="grid-tiles">
+    <div class="grid-tiles" id="grid-tiles">
       <% posts.forEach(function(post){ %>
         <%- include('../partials/post-tile', { post: post }) %>
@@ -82 +82 @@
     </div>
   </section>
+
+  <% if (typeof hasMore !== 'undefined') { %>
+  <div class="container feed-more-wrap">
+    <%- include('../partials/load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#post-list', morePath: '/cirkel' }) %>
+  </div>
+  <% } %>
 
 <% } %>

src/views/pages/home.ejs

@@ -36 +36 @@
     </div>
   <% } else { %>
-    <ul class="post-list feed-timeline-list">
+    <ul class="post-list feed-timeline-list" id="post-list">
       <% allPosts.forEach(function(post) { %>
         <%- include('../partials/post-card', { post: post }) %>
@@ -48 +48 @@
 <% if (allPosts.length > 0) { %>
 <section class="feed-grid container" aria-label="<%= t('phome.grid_view') %>">
-  <div class="grid-tiles">
+  <div class="grid-tiles" id="grid-tiles">
     <% allPosts.forEach(function(post) { %>
       <%- include('../partials/post-tile', { post: post }) %>
@@ -55 +55 @@
 </section>
 <% } %>
+<% if (typeof hasMore !== 'undefined' && allPosts.length > 0) { %>
+<div class="container feed-more-wrap">
+  <%- include('../partials/load-more', { hasMore: hasMore, nextOffset: nextOffset, moreBase: moreBase, moreTarget: '#post-list', morePath: '/' }) %>
+</div>
+<% } %>