@jant/core 0.3.23 → 0.3.24

package/src/themes/threads/timeline/TimelineLoadMore.tsx

@@ -0,0 +1,35 @@
+/**
+ * Threads Theme - Timeline Load More
+ *
+ * Auto-loads more posts when scrolled into view.
+ * Passes `lastDate` to the server so it can merge date groups across pages.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { TimelineLoadMoreProps } from "../../../types.js";
+
+export const TimelineLoadMore: FC<TimelineLoadMoreProps> = ({
+  nextCursor,
+  lastDate,
+}) => {
+  const { t } = useLingui();
+  const url = lastDate
+    ? `/?cursor=${nextCursor}&lastDate=${lastDate}`
+    : `/?cursor=${nextCursor}`;
+
+  return (
+    <div
+      id="load-more-container"
+      class="py-6 text-center"
+      data-on-intersect__once={`@get('${url}')`}
+    >
+      <span class="text-sm text-muted-foreground">
+        {t({
+          message: "Loading...",
+          comment: "@context: Loading indicator while fetching more posts",
+        })}
+      </span>
+    </div>
+  );
+};

package/src/themes/threads/timeline/groupByDate.ts

@@ -0,0 +1,30 @@
+/**
+ * Groups timeline items by their publication date (YYYY-MM-DD).
+ *
+ * Shared between TimelineFeed (initial render) and timelineMore (SSE patches)
+ * so that both produce identical date group structure.
+ */
+
+import type { TimelineItemView } from "../../../types.js";
+
+export interface DateGroup {
+  dateKey: string;
+  label: string;
+  items: TimelineItemView[];
+}
+
+export function groupByDate(items: TimelineItemView[]): DateGroup[] {
+  const groups: DateGroup[] = [];
+  let current: DateGroup | null = null;
+
+  for (const item of items) {
+    const dateKey = item.post.publishedAt.slice(0, 10);
+    if (!current || current.dateKey !== dateKey) {
+      current = { dateKey, label: item.post.publishedAtFormatted, items: [] };
+      groups.push(current);
+    }
+    current.items.push(item);
+  }
+
+  return groups;
+}

package/src/themes/threads/timeline/timelineMore.tsx

@@ -0,0 +1,130 @@
+/**
+ * Threads Theme - Timeline Load-More SSE Renderer
+ *
+ * Produces SSE DOM patches for incremental timeline loading.
+ * Uses date-grouped layout with threads-specific HTML (threads-card, threads-date-header)
+ * matching TimelineFeed's initial render exactly.
+ */
+
+import type {
+  TimelineMoreProps,
+  TimelinePatch,
+  TimelineItemView,
+} from "../../../types.js";
+import { groupByDate } from "./groupByDate.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview as DefaultThreadPreview } from "./ThreadPreview.js";
+import { TimelineLoadMore as DefaultTimelineLoadMore } from "./TimelineLoadMore.js";
+
+function renderItem(item: TimelineItemView, props: TimelineMoreProps): string {
+  const theme = props.theme;
+  const ResolvedThreadPreview = theme?.ThreadPreview ?? DefaultThreadPreview;
+
+  if (item.threadPreview) {
+    return (
+      <ResolvedThreadPreview
+        rootPost={item.post}
+        previewReplies={item.threadPreview.replies}
+        totalReplyCount={item.threadPreview.totalReplyCount}
+        theme={theme}
+      />
+    ).toString();
+  }
+  return (<TimelineItem item={item} theme={theme} />).toString();
+}
+
+/**
+ * Renders SSE patches for the threads theme's load-more response.
+ *
+ * @param props - Timeline more props with items, pagination, and theme
+ * @returns Array of DOM patch instructions for the SSE stream
+ */
+export function timelineMore(props: TimelineMoreProps): TimelinePatch[] {
+  const { items, lastDate, hasMore, nextCursor, theme } = props;
+  const patches: TimelinePatch[] = [];
+  const groups = groupByDate(items);
+
+  if (groups.length === 0) return patches;
+
+  const firstGroup = groups[0]!;
+  const isContinuation = lastDate === firstGroup.dateKey;
+
+  // Continuation items: append into the existing date group's container
+  if (isContinuation) {
+    const continuationHtml = firstGroup.items
+      .map((item) => {
+        const content = renderItem(item, props);
+        return `<div><hr class="border-border my-5"/>${content}</div>`;
+      })
+      .join("");
+
+    if (continuationHtml) {
+      patches.push({
+        selector: `#date-items-${lastDate}`,
+        content: continuationHtml,
+        mode: "append",
+      });
+    }
+  }
+
+  // New date groups: append to #timeline-feed
+  const newGroups = isContinuation ? groups.slice(1) : groups;
+  if (newGroups.length > 0) {
+    const newGroupsHtml = newGroups
+      .map((group) => {
+        const itemsHtml = group.items
+          .map((item, i) => {
+            const content = renderItem(item, props);
+            return i > 0
+              ? `<div><hr class="border-border my-5"/>${content}</div>`
+              : `<div>${content}</div>`;
+          })
+          .join("");
+
+        return (
+          <div class="threads-card">
+            <div class="threads-date-header">
+              <span>{group.label}</span>
+            </div>
+            <div
+              id={`date-items-${group.dateKey}`}
+              class="flex flex-col"
+              dangerouslySetInnerHTML={{ __html: itemsHtml }}
+            />
+          </div>
+        ).toString();
+      })
+      .join("");
+
+    patches.push({
+      selector: "#timeline-feed",
+      content: newGroupsHtml,
+      mode: "append",
+    });
+  }
+
+  // Load-more button
+  const ResolvedLoadMore = theme?.TimelineLoadMore ?? DefaultTimelineLoadMore;
+  const lastGroupDate = groups.at(-1)?.dateKey;
+
+  if (hasMore && nextCursor) {
+    patches.push({
+      selector: "#load-more-container",
+      content: (
+        <ResolvedLoadMore
+          nextCursor={nextCursor}
+          lastDate={lastGroupDate}
+          theme={theme}
+        />
+      ).toString(),
+    });
+  } else {
+    patches.push({
+      selector: "#load-more-container",
+      content: "",
+      mode: "remove",
+    });
+  }
+
+  return patches;
+}