@olwiba/ui 0.2.22 → 0.2.24

package/src/blog/PostList.tsx

@@ -9,7 +9,11 @@ export interface PostListProps {
   posts: PostCardProps[];
   renderLink?: AppShellRenderLink;
   emptyMessage?: string;
-  /** Max columns at the widest breakpoint. */
+  /**
+   * Max columns at the widest breakpoint. When omitted, one- and two-post
+   * collections are balanced automatically instead of leaving an empty third
+   * column.
+   */
   columns?: 2 | 3;
   className?: string;
 }
@@ -18,20 +22,29 @@ export function PostList({
   posts,
   renderLink,
   emptyMessage = 'No posts published yet.',
-  columns = 3,
+  columns,
   className,
 }: PostListProps) {
   if (posts.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground italic">{emptyMessage}</p>
-    );
+    return <p className="text-sm text-muted-foreground italic">{emptyMessage}</p>;
   }
 
+  const resolvedColumns = columns ?? (posts.length < 3 ? 2 : 3);
+  const balancedShortListClassName =
+    columns === undefined
+      ? posts.length === 1
+        ? 'mx-auto w-full max-w-md sm:grid-cols-1'
+        : posts.length === 2
+          ? 'mx-auto w-full max-w-3xl'
+          : undefined
+      : undefined;
+
   return (
     <div
       className={cn(
         'grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2',
-        columns === 3 && 'lg:grid-cols-3',
+        resolvedColumns === 3 && 'lg:grid-cols-3',
+        balancedShortListClassName,
         className,
       )}
     >

package/src/components/LoadMore.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import * as React from 'react';
+import { Button, Spinner, cn } from '@olwiba/cn';
+
+export interface LoadMoreProps extends React.HTMLAttributes<HTMLDivElement> {
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void | Promise<unknown>;
+  /** Watches the sentinel instead of showing a manual button. */
+  auto?: boolean;
+  /** Plural noun used by the manual button, for example `properties`. */
+  label?: string;
+  /** Starts loading before the sentinel reaches the viewport. */
+  rootMargin?: string;
+}
+
+/** Cursor-pagination footer with either guarded infinite scroll or a manual fallback. */
+export function LoadMore({
+  hasNextPage,
+  isFetchingNextPage,
+  fetchNextPage,
+  auto = true,
+  label = 'more',
+  rootMargin = '400px',
+  className,
+  ...props
+}: LoadMoreProps) {
+  const sentinelRef = React.useRef<HTMLDivElement>(null);
+  const stateRef = React.useRef({ hasNextPage, isFetchingNextPage, fetchNextPage });
+  stateRef.current = { hasNextPage, isFetchingNextPage, fetchNextPage };
+
+  React.useEffect(() => {
+    if (!auto) return;
+    const node = sentinelRef.current;
+    if (!node) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry?.isIntersecting) return;
+        const state = stateRef.current;
+        if (state.hasNextPage && !state.isFetchingNextPage) void state.fetchNextPage();
+      },
+      { rootMargin },
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [auto, rootMargin]);
+
+  if (!hasNextPage) return null;
+
+  return (
+    <div ref={sentinelRef} className={cn('flex justify-center py-4', className)} {...props}>
+      {auto ? (
+        <span className="flex h-9 items-center text-sm text-muted-foreground" aria-live="polite">
+          {isFetchingNextPage && (
+            <>
+              <Spinner className="mr-2 size-4" /> Loading more…
+            </>
+          )}
+        </span>
+      ) : (
+        <Button
+          variant="outline"
+          onClick={() => void fetchNextPage()}
+          disabled={isFetchingNextPage}
+        >
+          {isFetchingNextPage ? (
+            <>
+              <Spinner className="mr-2 size-4" /> Loading…
+            </>
+          ) : (
+            `Load more ${label}`
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/index.ts

@@ -26,11 +26,16 @@ export {
   type AppShellUser,
   type AppShellAction,
   type AppShellRenderLink,
+  type AppShellBreadcrumb,
+  type AppShellHeaderControls,
+  type AppShellHeaderStart,
   type AppNavItem,
 } from './app/AppShell';
 
 export { AppPageHero, type AppPageHeroProps } from './app/AppPageHero';
 
+export { AppFooter, type AppFooterProps } from './app/AppFooter';
+
 export {
   AuthSection,
   type AuthSectionProps,
@@ -142,6 +147,7 @@ export { CommandMenu, type CommandMenuProps, type CommandMenuGroup, type Command
 
 // ─── Components — data ───────────────────────────────────────────────────────
 export { DataTable, type DataTableProps, type DataTableColumn } from './components/DataTable';
+export { LoadMore, type LoadMoreProps } from './components/LoadMore';
 export { DataView, type DataViewProps } from './app/DataView';
 export { Chart, type ChartProps, type ChartSeries } from './components/Chart';
 export { FileUpload, type FileUploadProps, type FileUploadEntry } from './components/FileUpload';