Changeset 520e477 in Klonkt for src/views/pages

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/views/pages

Files:

• circle-feed.ejs (modified) (3 diffs)
• home.ejs (modified) (3 diffs)

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>
+<% } %>