Changeset 520e477 in Klonkt for src/routes

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/routes

Files:

• circle.js (modified) (2 diffs)
• posts.js (modified) (4 diffs)

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;