@commonpub/layer 0.41.0 → 0.43.0

package/components/homepage/ContentGridSection.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
 import type { HomepageSectionConfig } from '@commonpub/server';
 
 const props = defineProps<{
@@ -9,7 +8,6 @@ const props = defineProps<{
 
 const { user: authUser } = useAuth();
 const { enabledTypeMeta } = useContentTypes();
-const toast = useToast();
 
 const activeTab = ref(authUser.value ? 'foryou' : 'latest');
 const tabs = computed(() => [
@@ -32,35 +30,9 @@ const contentQuery = computed(() => ({
   limit: limit.value,
 }));
 
-const { data: feed, pending: feedPending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
-  query: contentQuery,
-  watch: [contentQuery],
-});
-
-const loadingMore = ref(false);
-const allLoaded = ref(false);
-
-watch(activeTab, () => { allLoaded.value = false; });
-
-async function loadMore(): Promise<void> {
-  loadingMore.value = true;
-  try {
-    const nextOffset = (feed.value?.items?.length ?? 0);
-    const more = await $fetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
-      query: { ...contentQuery.value, offset: nextOffset },
-    });
-    if (more.items?.length && feed.value?.items) {
-      feed.value.items.push(...more.items);
-    }
-    if (!more.items?.length || more.items.length < limit.value) {
-      allLoaded.value = true;
-    }
-  } catch {
-    toast.error('Failed to load more');
-  } finally {
-    loadingMore.value = false;
-  }
-}
+// Keyset for recency tabs, offset for popular — handled transparently. Replaces the
+// hand-rolled load-more (was a 3rd copy of the offset-window logic behind the dup saga).
+const { items: feedItems, pending: feedPending, loadMore, canLoadMore, loadingMore } = useContentFeed(contentQuery);
 
 const isAuthenticated = computed(() => !!authUser.value);
 const columns = computed(() => props.config.columns ?? 2);
@@ -87,8 +59,8 @@ const columns = computed(() => props.config.columns ?? 2);
     <div v-if="feedPending" class="cpub-loading-state">
       <i class="fa-solid fa-circle-notch fa-spin"></i> Loading content...
     </div>
-    <div v-else-if="feed?.items?.length" class="cpub-content-grid" :style="{ '--grid-cols': columns }">
-      <ContentCard v-for="item in feed.items" :key="item.id" :item="item" />
+    <div v-else-if="feedItems.length" class="cpub-content-grid" :style="{ '--grid-cols': columns }">
+      <ContentCard v-for="item in feedItems" :key="item.id" :item="item" />
     </div>
     <div v-else class="cpub-empty-state">
       <div class="cpub-empty-state-icon"><i :class="activeTab === 'following' ? 'fa-solid fa-user-group' : 'fa-solid fa-inbox'"></i></div>
@@ -107,7 +79,7 @@ const columns = computed(() => props.config.columns ?? 2);
       </template>
     </div>
 
-    <div v-if="!allLoaded && feed?.items?.length" class="cpub-load-more-row">
+    <div v-if="canLoadMore" class="cpub-load-more-row">
       <button class="cpub-btn-load-more" :disabled="loadingMore" @click="loadMore">
         <i :class="loadingMore ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-rotate'"></i>
         {{ loadingMore ? 'Loading...' : 'Load more' }}

package/composables/useContentFeed.ts

@@ -0,0 +1,120 @@
+import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
+
+/**
+ * Unified content-feed loader with transparent keyset/offset pagination.
+ *
+ * Why this exists: the homepage, the homepage section renderer, and the deveco custom
+ * homepage each hand-rolled the SAME load-more block (fetch next page, push, set
+ * allLoaded) — three copies that drifted and each re-implemented the offset window
+ * behind the load-more dup saga. This centralises it.
+ *
+ * Pagination strategy is chosen by sort, not by the caller:
+ *  - RECENCY feeds (sort 'recent' / 'following' / undefined) use the scalable keyset
+ *    endpoint `GET /api/content/feed` (O(limit)/page, no offset window, no COUNT) and
+ *    page by the opaque `nextCursor`. This is what structurally fixes load-more dups.
+ *  - NON-recency feeds (sort 'popular'/'featured'/'editorial') stay on the offset
+ *    `GET /api/content` — keyset needs a stable total order, and viewCount/featured
+ *    mutate, so a viewCount cursor would drift mid-scroll. Offset-popular is already
+ *    dup-stable since the `id` tiebreaker (server 2.68), so this is not a regression.
+ *
+ * The caller passes a reactive query (the same shape it already builds). When the query
+ * identity changes (tab switch), the feed re-fetches from the first page and pagination
+ * state resets. Uniform surface regardless of strategy: { items, pending, loadMore,
+ * canLoadMore, loadingMore }.
+ */
+
+type FeedQuery = Record<string, unknown> & { sort?: string; limit?: number };
+type Item = Serialized<ContentListItem>;
+
+interface KeysetResponse { items: Item[]; nextCursor: string | null }
+
+export function useContentFeed(query: Ref<FeedQuery> | ComputedRef<FeedQuery>) {
+  const toast = useToast();
+
+  // Recency is the keyset-eligible order (sort 'recent', or unset → server default
+  // recency). 'popular'/'featured'/'editorial' use mutable keys → stay on offset.
+  const isKeyset = computed(() => {
+    const s = query.value.sort;
+    return s === undefined || s === 'recent';
+  });
+  const limit = computed(() => Number(query.value.limit ?? 12));
+
+  // Keyset cursor for the current query identity (reset on query change below).
+  const cursor = ref<string | null>(null);
+  const loadingMore = ref(false);
+  const exhausted = ref(false);
+
+  // Initial page — SSR-friendly via useFetch. Both endpoints accept the same query;
+  // the keyset one returns { items, nextCursor }, the offset one { items, total }.
+  const endpoint = computed(() => (isKeyset.value ? '/api/content/feed' : '/api/content'));
+  const { data, pending } = useFetch<KeysetResponse | PaginatedResponse<Item>>(endpoint, {
+    query,
+    watch: [query],
+  });
+
+  // Local accumulator: the first page from useFetch, plus any load-more pages. Kept
+  // separate from `data` so we never mutate the useFetch payload (which it re-creates
+  // on refetch) — and so a tab switch cleanly replaces the list.
+  const extra = ref<Item[]>([]);
+  const items = computed<Item[]>(() => [...(data.value?.items ?? []), ...extra.value]);
+
+  // Reset pagination whenever the underlying query (tab/filter) changes.
+  watch(
+    query,
+    () => {
+      extra.value = [];
+      cursor.value = null;
+      exhausted.value = false;
+    },
+    { deep: true },
+  );
+
+  // Seed the keyset cursor from the first page once it arrives.
+  watch(
+    data,
+    (d) => {
+      if (isKeyset.value) {
+        cursor.value = (d as KeysetResponse | null)?.nextCursor ?? null;
+        if (cursor.value === null) exhausted.value = true;
+      }
+    },
+    { immediate: true },
+  );
+
+  const canLoadMore = computed(() => {
+    if (!items.value.length) return false;
+    if (exhausted.value) return false;
+    if (isKeyset.value) return cursor.value !== null;
+    // Offset: stop once a page comes back short.
+    return true;
+  });
+
+  async function loadMore(): Promise<void> {
+    if (loadingMore.value || exhausted.value) return;
+    loadingMore.value = true;
+    try {
+      if (isKeyset.value) {
+        if (!cursor.value) { exhausted.value = true; return; }
+        const res = await $fetch<KeysetResponse>('/api/content/feed', {
+          query: { ...query.value, cursor: cursor.value },
+        });
+        if (res.items?.length) extra.value.push(...res.items);
+        cursor.value = res.nextCursor;
+        if (!res.nextCursor) exhausted.value = true;
+      } else {
+        const offset = items.value.length;
+        const res = await $fetch<PaginatedResponse<Item>>('/api/content', {
+          query: { ...query.value, offset },
+        });
+        if (res.items?.length) extra.value.push(...res.items);
+        if (!res.items?.length || res.items.length < limit.value) exhausted.value = true;
+      }
+    } catch {
+      toast.error('Failed to load more');
+    } finally {
+      loadingMore.value = false;
+    }
+  }
+
+  return { items, pending, loadMore, canLoadMore, loadingMore };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.41.0",
+  "version": "0.43.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,16 +53,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.7.0",
-    "@commonpub/config": "0.16.0",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/auth": "0.7.0",
     "@commonpub/explainer": "0.7.15",
+    "@commonpub/schema": "0.25.0",
+    "@commonpub/server": "2.71.0",
+    "@commonpub/protocol": "0.12.0",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/schema": "0.24.0",
     "@commonpub/ui": "0.9.1",
-    "@commonpub/protocol": "0.12.0",
-    "@commonpub/server": "2.69.0"
+    "@commonpub/config": "0.16.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/feed.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { Serialized, ContentListItem, PaginatedResponse } from '@commonpub/server';
-
 useSeoMeta({
   title: `Feed — ${useSiteName()}`,
   description: 'Recent published content from the community.',
@@ -9,8 +7,6 @@ useSeoMeta({
 const { isAuthenticated } = useAuth();
 const { enabledTypeMeta } = useContentTypes();
 const activeFilter = ref('all');
-const loadingMore = ref(false);
-const allLoaded = ref(false);
 
 const contentQuery = computed(() => ({
   status: 'published',
@@ -19,36 +15,9 @@ const contentQuery = computed(() => ({
   limit: 12,
 }));
 
-const { data, status } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
-  query: contentQuery,
-  watch: [contentQuery],
-});
-
-const items = computed(() => data.value?.items ?? []);
-const total = computed(() => data.value?.total ?? 0);
-
-async function loadMore(): Promise<void> {
-  if (!data.value?.items) return;
-  loadingMore.value = true;
-  try {
-    const nextOffset = data.value.items.length;
-    const more = await $fetch<{ items: Array<Record<string, unknown>> }>('/api/content', {
-      query: { ...contentQuery.value, offset: nextOffset },
-    });
-    if (more?.items?.length) {
-      data.value.items.push(...(more.items as typeof data.value.items));
-    }
-    if (!more?.items?.length || more.items.length < 12) {
-      allLoaded.value = true;
-    }
-  } catch {
-    allLoaded.value = true;
-  } finally {
-    loadingMore.value = false;
-  }
-}
-
-watch(activeFilter, () => { allLoaded.value = false; });
+// Pure recency feed → keyset pagination (scalable, dup-free). useContentFeed handles
+// cursor threading + reset-on-filter-change.
+const { items, pending, loadMore, canLoadMore, loadingMore } = useContentFeed(contentQuery);
 
 const filters = computed(() => [
   { value: 'all', label: 'All', icon: 'fa-solid fa-layer-group' },
@@ -83,7 +52,7 @@ const filters = computed(() => [
       <ContentCard v-for="item in items" :key="item.id" :item="item" />
     </div>
 
-    <div v-else-if="status === 'pending'" class="feed-loading">Loading...</div>
+    <div v-else-if="pending" class="feed-loading">Loading...</div>
 
     <div v-else class="feed-empty">
       <div class="feed-empty-icon"><i class="fa-solid fa-rss"></i></div>
@@ -92,7 +61,7 @@ const filters = computed(() => [
     </div>
 
     <!-- Load More -->
-    <div v-if="!allLoaded && items.length >= 12" class="feed-more">
+    <div v-if="canLoadMore" class="feed-more">
       <button class="cpub-btn" @click="loadMore" :disabled="loadingMore">
         {{ loadingMore ? 'Loading...' : 'Load More' }}
       </button>

package/pages/index.vue

@@ -48,10 +48,9 @@ const contentQuery = computed(() => ({
   limit: 12,
 }));
 
-const { data: feed, pending: feedPending } = await useFetch<PaginatedResponse<Serialized<ContentListItem>>>('/api/content', {
-  query: contentQuery,
-  watch: [contentQuery],
-});
+// Keyset for recency tabs (latest/following/per-type), offset for the popular "For You"
+// tab — chosen transparently by useContentFeed. Replaces the hand-rolled offset loadMore.
+const { items: feedItems, pending: feedPending, loadMore, canLoadMore, loadingMore } = useContentFeed(contentQuery);
 
 // Editorial picks — staff-curated content for the homepage (only when editorial feature is enabled)
 const { data: editorialPicks } = editorialEnabled.value
@@ -106,39 +105,6 @@ const activeContest = computed<ContestListItem | null>(() => {
 const isAuthenticated = computed(() => !!user.value);
 const toast = useToast();
 
-// Load more state
-const feedOffset = ref(0);
-const loadingMore = ref(false);
-const allLoaded = ref(false);
-
-async function loadMore(): Promise<void> {
-  loadingMore.value = true;
-  try {
-    const nextOffset = (feed.value?.items?.length ?? 0);
-    const more = await $fetch<{ items: Array<Record<string, unknown>> }>('/api/content', {
-      query: {
-        ...contentQuery.value,
-        offset: nextOffset,
-      },
-    });
-    if (more.items?.length) {
-      if (feed.value?.items) {
-        feed.value.items.push(...(more.items as typeof feed.value.items));
-      }
-    }
-    if (!more.items?.length || more.items.length < 12) {
-      allLoaded.value = true;
-    }
-  } catch {
-    toast.error('Failed to load more');
-  } finally {
-    loadingMore.value = false;
-  }
-}
-
-// Reset load more when tab changes
-watch(activeTab, () => { allLoaded.value = false; });
-
 async function handleHubJoin(hubSlug: string): Promise<void> {
   if (!isAuthenticated.value) {
     await navigateTo(`/auth/login?redirect=/`);
@@ -374,8 +340,8 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
         <div v-if="feedPending" class="cpub-loading-state">
           <i class="fa-solid fa-circle-notch fa-spin"></i> Loading content...
         </div>
-        <div v-else-if="feed?.items?.length" class="cpub-content-grid">
-          <ContentCard v-for="item in feed.items" :key="item.id" :item="item" />
+        <div v-else-if="feedItems.length" class="cpub-content-grid">
+          <ContentCard v-for="item in feedItems" :key="item.id" :item="item" />
         </div>
         <div v-else class="cpub-empty-state">
           <div class="cpub-empty-state-icon"><i :class="activeTab === 'following' ? 'fa-solid fa-user-group' : 'fa-solid fa-inbox'"></i></div>
@@ -395,7 +361,7 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
           </template>
         </div>
 
-        <div v-if="!allLoaded && feed?.items?.length" class="cpub-load-more-row">
+        <div v-if="canLoadMore" class="cpub-load-more-row">
           <button class="cpub-btn-load-more" :disabled="loadingMore" @click="loadMore">
             <i :class="loadingMore ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-rotate'"></i>
             {{ loadingMore ? 'Loading...' : 'Load more' }}

package/server/api/content/feed.get.ts

@@ -0,0 +1,22 @@
+import { listContentKeyset } from '@commonpub/server';
+import type { ContentListItem } from '@commonpub/server';
+import { contentFiltersSchema } from '@commonpub/schema';
+
+/**
+ * Keyset (cursor) pagination for the chronological content feed — the scalable
+ * infinite-scroll endpoint (O(limit) per page, no COUNT, no offset window).
+ *
+ * Separate from the offset `GET /api/content` (which stays for numbered/admin listing
+ * and for `total`); both share `resolveContentQuery` so the auth/status/visibility/
+ * federation gate can't drift between them. Order is fixed to recency — popular/
+ * featured/editorial sorts and `offset` are not meaningful here and are ignored.
+ *
+ * Request:  GET /api/content/feed?type=blog&limit=20[&cursor=<opaque>]
+ * Response: { items, nextCursor }  (nextCursor null when the feed is exhausted)
+ */
+export default defineEventHandler(async (event): Promise<{ items: ContentListItem[]; nextCursor: string | null }> => {
+  const db = useDB();
+  const rawFilters = parseQueryParams(event, contentFiltersSchema);
+  const { filters, options } = resolveContentQuery(event, rawFilters);
+  return listContentKeyset(db, filters, options);
+});

package/server/api/content/index.get.ts

@@ -2,31 +2,10 @@ import { listContent } from '@commonpub/server';
 import type { PaginatedResponse, ContentListItem } from '@commonpub/server';
 import { contentFiltersSchema } from '@commonpub/schema';
 
-// Statuses a non-owner may request. Any other value (draft, scheduled, deleted,
-// etc.) is coerced to 'published' — the old behavior passed the filter through
-// verbatim, so /api/content?status=draft leaked every user's drafts.
-const PUBLIC_STATUSES = new Set(['published', 'archived']);
-
 export default defineEventHandler(async (event): Promise<PaginatedResponse<ContentListItem>> => {
   const db = useDB();
-  const user = getOptionalUser(event);
-  const filters = parseQueryParams(event, contentFiltersSchema);
-
-  const isOwnContent = filters.authorId && user?.id === filters.authorId;
-
-  const config = useConfig();
-
-  const resolvedStatus = isOwnContent
-    ? filters.status
-    : (filters.status && PUBLIC_STATUSES.has(filters.status) ? filters.status : 'published');
-
-  return listContent(db, {
-    ...filters,
-    status: resolvedStatus,
-    // Only show public content unless viewing own content
-    visibility: isOwnContent ? filters.visibility : 'public',
-  }, {
-    includeFederated: config.features.seamlessFederation,
-    allowedContentTypes: config.instance.contentTypes,
-  });
+  const rawFilters = parseQueryParams(event, contentFiltersSchema);
+  // Shared auth/status/visibility/federation gate (also used by the keyset feed endpoint).
+  const { filters, options } = resolveContentQuery(event, rawFilters);
+  return listContent(db, filters, options);
 });

package/server/utils/contentQuery.ts

@@ -0,0 +1,40 @@
+import type { H3Event } from 'h3';
+import type { ContentFilters } from '@commonpub/schema';
+
+// Statuses a non-owner may request. Any other value (draft, scheduled, deleted, etc.)
+// is coerced to 'published' — passing the filter through verbatim would leak drafts
+// (/api/content?status=draft once leaked every user's drafts).
+const PUBLIC_STATUSES = new Set(['published', 'archived']);
+
+/**
+ * Resolve a raw ContentFilters query into the SAFE filters + server options shared by
+ * BOTH content list endpoints (offset `index.get.ts` and keyset `feed.get.ts`). Centralises
+ * the auth/status/visibility gate + the federation/content-type options so the two endpoints
+ * can't drift on security: a non-owner only ever sees published+public content.
+ */
+export function resolveContentQuery(
+  event: H3Event,
+  filters: ContentFilters,
+): { filters: ContentFilters; options: { includeFederated: boolean; allowedContentTypes?: string[] } } {
+  const user = getOptionalUser(event);
+  const config = useConfig();
+
+  const isOwnContent = !!filters.authorId && user?.id === filters.authorId;
+
+  const resolvedStatus = isOwnContent
+    ? filters.status
+    : (filters.status && PUBLIC_STATUSES.has(filters.status) ? filters.status : 'published');
+
+  return {
+    filters: {
+      ...filters,
+      status: resolvedStatus,
+      // Only show public content unless viewing own content.
+      visibility: isOwnContent ? filters.visibility : 'public',
+    },
+    options: {
+      includeFederated: config.features.seamlessFederation,
+      allowedContentTypes: config.instance.contentTypes,
+    },
+  };
+}