@jant/core 0.3.24 → 0.3.25

package/src/{themes/threads → ui}/pages/ArchivePage.tsx

@@ -1,14 +1,14 @@
 /**
- * Threads Theme - Archive Page
+ * Archive Page
  *
  * Posts grouped by year-month with format filter and cursor pagination.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { ArchivePageProps } from "../../../types.js";
-import { FORMATS } from "../../../types.js";
-import { Pagination as DefaultPagination } from "../../../theme/index.js";
+import type { ArchivePageProps } from "../../types.js";
+import { FORMATS } from "../../types.js";
+import { Pagination } from "../shared/Pagination.js";
 
 function getFormatLabel(format: string): string {
   const { t } = useLingui();
@@ -39,7 +39,7 @@ function getFormatLabelPlural(format: string): string {
       comment: "@context: Post format label plural - quotes",
     }),
   };
-  return labels[format] ?? `${format}s`;
+  return labels[format] ?? format + "s";
 }
 
 export const ArchivePage: FC<ArchivePageProps> = ({
@@ -48,17 +48,14 @@ export const ArchivePage: FC<ArchivePageProps> = ({
   nextCursor,
   format,
   featured,
-  theme,
 }) => {
   const { t } = useLingui();
   const title = format
     ? getFormatLabelPlural(format)
     : t({ message: "Archive", comment: "@context: Archive page title" });
 
-  const PaginationComponent = theme?.Pagination ?? DefaultPagination;
-
   return (
-    <div class="py-6">
+    <div class="py-6" data-page="archive">
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{title}</h1>
 
@@ -66,7 +63,10 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         <nav class="flex flex-wrap gap-2 mt-4">
           <a
             href="/archive"
-            class={`badge ${!format && !featured ? "badge-primary" : "badge-outline"}`}
+            class={
+              "badge " +
+              (!format && !featured ? "badge-primary" : "badge-outline")
+            }
           >
             {t({
               message: "All",
@@ -76,15 +76,18 @@ export const ArchivePage: FC<ArchivePageProps> = ({
           {FORMATS.map((formatKey) => (
             <a
               key={formatKey}
-              href={`/archive?format=${formatKey}`}
-              class={`badge ${format === formatKey ? "badge-primary" : "badge-outline"}`}
+              href={"/archive?format=" + formatKey}
+              class={
+                "badge " +
+                (format === formatKey ? "badge-primary" : "badge-outline")
+              }
             >
               {getFormatLabelPlural(formatKey)}
             </a>
           ))}
           <a
             href="/archive?featured=true"
-            class={`badge ${featured ? "badge-primary" : "badge-outline"}`}
+            class={"badge " + (featured ? "badge-primary" : "badge-outline")}
           >
             {t({
               message: "Featured",
@@ -104,7 +107,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
           </p>
         ) : (
           groups.map((group) => (
-            <section key={`${group.year}-${group.month}`} class="mb-8">
+            <section key={group.year + "-" + group.month} class="mb-8">
               <h2 class="text-lg font-medium mb-4 text-muted-foreground">
                 {group.label}
               </h2>
@@ -113,6 +116,8 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                   <article
                     key={post.id}
                     class="flex items-baseline gap-4 py-2.5"
+                    data-post
+                    data-format={post.format}
                   >
                     <time
                       class="text-sm text-muted-foreground w-12 shrink-0"
@@ -124,7 +129,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                       <a href={post.permalink} class="hover:underline">
                         {post.title ||
                           post.excerpt?.slice(0, 80) ||
-                          `Post #${post.id}`}
+                          "Post #" + post.id}
                       </a>
                       {!format && (
                         <span class="ml-2 badge-outline text-xs">
@@ -141,10 +146,10 @@ export const ArchivePage: FC<ArchivePageProps> = ({
       </main>
 
       {/* Pagination */}
-      <PaginationComponent
+      <Pagination
         baseUrl={
           format
-            ? `/archive?format=${format}`
+            ? "/archive?format=" + format
             : featured
               ? "/archive?featured=true"
               : "/archive"

package/src/{themes/threads → ui}/pages/CollectionPage.tsx

@@ -1,12 +1,12 @@
 /**
- * Threads Theme - Collection Page
+ * Collection Page
  *
  * Collection header with divider-separated post list.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { CollectionPageProps } from "../../../types.js";
+import type { CollectionPageProps } from "../../types.js";
 
 export const CollectionPage: FC<CollectionPageProps> = ({
   collection,
@@ -15,7 +15,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
   const { t } = useLingui();
 
   return (
-    <div class="py-6">
+    <div class="py-6" data-page="collection">
       <header class="mb-8">
         <h1 class="text-2xl font-semibold">{collection.title}</h1>
         {collection.description && (
@@ -34,7 +34,12 @@ export const CollectionPage: FC<CollectionPageProps> = ({
         ) : (
           <div class="divide-y divide-border">
             {posts.map((post) => (
-              <article key={post.id} class="h-entry py-4">
+              <article
+                key={post.id}
+                class="h-entry py-4"
+                data-post
+                data-format={post.format}
+              >
                 {post.title && (
                   <h2 class="p-name text-lg font-medium mb-2">
                     <a href={post.permalink} class="u-url hover:underline">
@@ -44,9 +49,13 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                 )}
                 <div
                   class="e-content prose prose-sm"
+                  data-post-body
                   dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
                 />
-                <footer class="mt-2 text-sm text-muted-foreground">
+                <footer
+                  class="mt-2 text-sm text-muted-foreground"
+                  data-post-meta
+                >
                   <time class="dt-published" datetime={post.publishedAt}>
                     {post.publishedAtFormatted}
                   </time>

package/src/ui/pages/CollectionsPage.tsx

@@ -0,0 +1,73 @@
+/**
+ * Collections Listing Page
+ *
+ * Lists all collections with titles, descriptions, and post counts.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { CollectionsPageProps } from "../../types.js";
+
+export const CollectionsPage: FC<CollectionsPageProps> = ({ collections }) => {
+  const { t } = useLingui();
+
+  return (
+    <div class="py-6" data-page="collections">
+      <header class="mb-8">
+        <h1 class="text-2xl font-semibold">
+          {t({
+            message: "Collections",
+            comment: "@context: Collections page heading",
+          })}
+        </h1>
+      </header>
+
+      <main>
+        {collections.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No collections yet.",
+              comment: "@context: Empty state message on collections page",
+            })}
+          </p>
+        ) : (
+          <div class="divide-y divide-border">
+            {collections.map((collection) => (
+              <a
+                key={collection.id}
+                href={"/c/" + collection.slug}
+                class="block py-4 hover:bg-accent/50 -mx-4 px-4 rounded-md transition-colors"
+              >
+                <div class="flex items-center gap-3">
+                  {collection.icon && (
+                    <span class="text-2xl">{collection.icon}</span>
+                  )}
+                  <div class="flex-1 min-w-0">
+                    <h2 class="font-medium">{collection.title}</h2>
+                    {collection.description && (
+                      <p class="text-sm text-muted-foreground mt-1">
+                        {collection.description}
+                      </p>
+                    )}
+                  </div>
+                  <span class="text-sm text-muted-foreground shrink-0">
+                    {collection.postCount}{" "}
+                    {collection.postCount === 1
+                      ? t({
+                          message: "post",
+                          comment: "@context: Singular post count label",
+                        })
+                      : t({
+                          message: "posts",
+                          comment: "@context: Plural post count label",
+                        })}
+                  </span>
+                </div>
+              </a>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};

package/src/ui/pages/FeaturedPage.tsx

@@ -0,0 +1,31 @@
+/**
+ * Featured Page
+ *
+ * Shows featured posts as a timeline feed.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type { FeaturedPageProps } from "../../types.js";
+import { TimelineFeed } from "../feed/TimelineFeed.js";
+
+export const FeaturedPage: FC<FeaturedPageProps> = ({ items }) => {
+  const { t } = useLingui();
+
+  return (
+    <div data-page="featured">
+      <main>
+        {items.length === 0 ? (
+          <p class="text-muted-foreground">
+            {t({
+              message: "No featured posts yet.",
+              comment: "@context: Empty state message on featured page",
+            })}
+          </p>
+        ) : (
+          <TimelineFeed items={items} />
+        )}
+      </main>
+    </div>
+  );
+};

package/src/{themes/threads → ui}/pages/HomePage.tsx

@@ -1,26 +1,23 @@
 /**
- * Threads Theme - Home Page
+ * Home Page
  *
- * Clean feed of posts separated by dividers.
+ * Timeline feed with per-type card components and thread previews.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { HomePageProps } from "../../../types.js";
-import { TimelineFeed as DefaultTimelineFeed } from "../timeline/TimelineFeed.js";
+import type { HomePageProps } from "../../types.js";
+import { TimelineFeed } from "../feed/TimelineFeed.js";
 
 export const HomePage: FC<HomePageProps> = ({
   items,
-  hasMore,
-  nextCursor,
-  theme,
+  currentPage,
+  totalPages,
 }) => {
   const { t } = useLingui();
 
-  const Feed = theme?.TimelineFeed ?? DefaultTimelineFeed;
-
   return (
-    <>
+    <div data-page="home">
       {items.length === 0 ? (
         <p class="py-12 text-center text-muted-foreground">
           {t({
@@ -29,13 +26,12 @@ export const HomePage: FC<HomePageProps> = ({
           })}
         </p>
       ) : (
-        <Feed
+        <TimelineFeed
           items={items}
-          hasMore={hasMore}
-          nextCursor={nextCursor}
-          theme={theme}
+          currentPage={currentPage}
+          totalPages={totalPages}
         />
       )}
-    </>
+    </div>
   );
 };

package/src/{themes/threads → ui}/pages/PostPage.tsx

@@ -1,37 +1,46 @@
 /**
- * Threads Theme - Post Page
+ * Single Post Page
  *
  * Single post view — clean, no card border, with divider footer.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { PostPageProps } from "../../../types.js";
-import { MediaGallery as DefaultMediaGallery } from "../../../theme/index.js";
+import type { PostPageProps } from "../../types.js";
+import { MediaGallery } from "../shared/MediaGallery.js";
 
-export const PostPage: FC<PostPageProps> = ({ post, theme }) => {
+export const PostPage: FC<PostPageProps> = ({ post }) => {
   const { t } = useLingui();
 
-  const Gallery = theme?.MediaGallery ?? DefaultMediaGallery;
-
   return (
-    <article class="h-entry py-6">
+    <article
+      class="h-entry py-6"
+      data-page="post"
+      data-post
+      data-format={post.format}
+    >
       {post.title && (
         <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
       )}
 
-      <div
-        class="e-content prose"
-        dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
-      />
+      {post.bodyHtml && (
+        <div
+          class="e-content prose"
+          data-post-body
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
 
       {post.media.length > 0 && (
-        <div class="threads-media mt-4">
-          <Gallery attachments={post.media} />
+        <div class="mt-4" data-post-media>
+          <MediaGallery attachments={post.media} />
         </div>
       )}
 
-      <footer class="mt-6 pt-4 border-t text-sm text-muted-foreground">
+      <footer
+        class="mt-6 pt-4 border-t text-sm text-muted-foreground"
+        data-post-meta
+      >
         <time class="dt-published" datetime={post.publishedAt}>
           {post.publishedAtFormatted}
         </time>

package/src/{themes/threads → ui}/pages/SearchPage.tsx

@@ -1,13 +1,13 @@
 /**
- * Threads Theme - Search Page
+ * Search Page
  *
  * Search form and results — divider-separated instead of bordered cards.
  */
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
-import type { SearchPageProps } from "../../../types.js";
-import { PagePagination as DefaultPagePagination } from "../../../theme/index.js";
+import type { SearchPageProps } from "../../types.js";
+import { PagePagination } from "../shared/Pagination.js";
 
 export const SearchPage: FC<SearchPageProps> = ({
   query,
@@ -15,7 +15,6 @@ export const SearchPage: FC<SearchPageProps> = ({
   error,
   hasMore,
   page,
-  theme,
 }) => {
   const { t } = useLingui();
   const searchTitle = t({
@@ -23,10 +22,8 @@ export const SearchPage: FC<SearchPageProps> = ({
     comment: "@context: Search page title",
   });
 
-  const PaginationComponent = theme?.PagePagination ?? DefaultPagePagination;
-
   return (
-    <div class="py-6">
+    <div class="py-6" data-page="search">
       <h1 class="text-2xl font-semibold mb-6">{searchTitle}</h1>
 
       {/* Search form */}
@@ -84,12 +81,17 @@ export const SearchPage: FC<SearchPageProps> = ({
             <>
               <div class="divide-y divide-border">
                 {results.map((result) => (
-                  <article key={result.post.id} class="py-4">
+                  <article
+                    key={result.post.id}
+                    class="py-4"
+                    data-post
+                    data-format={result.post.format}
+                  >
                     <a href={result.post.permalink} class="block">
                       <h2 class="font-medium hover:underline">
                         {result.post.title ||
                           result.post.excerpt?.slice(0, 60) ||
-                          `Post #${result.post.id}`}
+                          "Post #" + result.post.id}
                       </h2>
 
                       {result.snippet && (
@@ -110,8 +112,8 @@ export const SearchPage: FC<SearchPageProps> = ({
                 ))}
               </div>
 
-              <PaginationComponent
-                baseUrl={`/search?q=${encodeURIComponent(query)}`}
+              <PagePagination
+                baseUrl={"/search?q=" + encodeURIComponent(query)}
                 currentPage={page}
                 hasMore={hasMore}
               />

package/src/{themes/threads → ui}/pages/SinglePage.tsx

@@ -1,15 +1,15 @@
 /**
- * Threads Theme - Single Page
+ * Single Page (Custom Page)
  *
- * Custom page (type "page") view — clean centered content.
+ * Custom page view — clean centered content.
  */
 
 import type { FC } from "hono/jsx";
-import type { SinglePageProps } from "../../../types.js";
+import type { SinglePageProps } from "../../types.js";
 
 export const SinglePage: FC<SinglePageProps> = ({ page }) => {
   return (
-    <article class="h-entry py-6">
+    <article class="h-entry py-6" data-page="single-page">
       {page.title && (
         <h1 class="p-name text-2xl font-semibold mb-6">{page.title}</h1>
       )}

package/src/{theme/components → ui/shared}/MediaGallery.tsx

@@ -2,7 +2,7 @@
  * Media Gallery Component
  *
  * Renders media attachments in a horizontal scrollable row,
- * similar to Threads.net's image carousel.
+ * similar to an image carousel.
  */
 
 import type { FC } from "hono/jsx";

package/src/{theme/components → ui/shared}/Pagination.tsx

@@ -6,6 +6,7 @@
 
 import type { FC } from "hono/jsx";
 import { useLingui } from "@lingui/react/macro";
+import { getPageNumbers } from "../../lib/pagination.js";
 
 export interface PaginationProps {
   /** Base URL for pagination links (e.g., "/archive", "/search?q=test") */
@@ -115,15 +116,20 @@ export const LoadMore: FC<LoadMoreProps> = ({ href, hasMore, text }) => {
 };
 
 /**
- * Page-based pagination (for search results etc.)
+ * Page-based pagination with optional numbered pages.
+ *
+ * When `totalPages` is provided, renders numbered page links with ellipsis.
+ * Otherwise falls back to simple Previous/Next navigation.
  */
 export interface PagePaginationProps {
   /** Base URL (query params will be added) */
   baseUrl: string;
   /** Current page (1-indexed) */
   currentPage: number;
-  /** Whether there are more pages */
-  hasMore: boolean;
+  /** Whether there are more pages (used when totalPages is unknown) */
+  hasMore?: boolean;
+  /** Total number of pages (enables numbered pagination) */
+  totalPages?: number;
   /** Page parameter name (default: "page") */
   pageParam?: string;
 }
@@ -132,11 +138,12 @@ export const PagePagination: FC<PagePaginationProps> = ({
   baseUrl,
   currentPage,
   hasMore,
+  totalPages,
   pageParam = "page",
 }) => {
   const { t } = useLingui();
   const hasPrev = currentPage > 1;
-  const hasNext = hasMore;
+  const hasNext = totalPages ? currentPage < totalPages : (hasMore ?? false);
 
   if (!hasPrev && !hasNext) {
     return null;
@@ -161,6 +168,62 @@ export const PagePagination: FC<PagePaginationProps> = ({
     message: "Next",
     comment: "@context: Pagination button - next page",
   });
+
+  // Numbered pagination when totalPages is known
+  if (totalPages && totalPages > 1) {
+    const pageNumbers = getPageNumbers(currentPage, totalPages);
+
+    return (
+      <nav
+        class="flex items-center justify-center gap-4 py-6 text-sm"
+        aria-label="Pagination"
+      >
+        {hasPrev ? (
+          <a
+            href={buildUrl(currentPage - 1)}
+            class="underline text-muted-foreground hover:text-foreground"
+          >
+            {prevText}
+          </a>
+        ) : (
+          <span class="text-muted-foreground/50">{prevText}</span>
+        )}
+
+        {pageNumbers.map((page, i) =>
+          page === 0 ? (
+            <span key={`ellipsis-${i}`} class="text-muted-foreground">
+              ...
+            </span>
+          ) : page === currentPage ? (
+            <span key={page} aria-current="page">
+              {page}
+            </span>
+          ) : (
+            <a
+              key={page}
+              href={buildUrl(page)}
+              class="underline text-muted-foreground hover:text-foreground"
+            >
+              {page}
+            </a>
+          ),
+        )}
+
+        {hasNext ? (
+          <a
+            href={buildUrl(currentPage + 1)}
+            class="underline text-muted-foreground hover:text-foreground"
+          >
+            {nextText}
+          </a>
+        ) : (
+          <span class="text-muted-foreground/50">{nextText}</span>
+        )}
+      </nav>
+    );
+  }
+
+  // Simple prev/next fallback when totalPages is unknown
   const pageText = t({
     message: "Page {page}",
     comment: "@context: Pagination - current page indicator",

package/src/{theme/components → ui/shared}/ThreadView.tsx

@@ -35,7 +35,7 @@ const ThreadPost: FC<{
       {post.title && (
         <h2 class="p-name text-lg font-medium mb-2">
           <a
-            href={`${post.slug ? `/${post.slug}` : `/p/${sqid.encode(post.id)}`}`}
+            href={`${post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`}`}
             class="u-url hover:underline"
           >
             {post.title}
@@ -65,7 +65,7 @@ const ThreadPost: FC<{
         )}
         {!isCurrent && (
           <a
-            href={`${post.slug ? `/${post.slug}` : `/p/${sqid.encode(post.id)}`}`}
+            href={`${post.path ? `/${post.path}` : `/p/${sqid.encode(post.id)}`}`}
             class="text-xs hover:underline"
           >
             {t({

package/src/ui/shared/__tests__/pagination.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import { getPageNumbers } from "../../../lib/pagination.js";
+
+describe("getPageNumbers", () => {
+  it("returns all pages when totalPages <= 7", () => {
+    expect(getPageNumbers(1, 1)).toEqual([1]);
+    expect(getPageNumbers(1, 5)).toEqual([1, 2, 3, 4, 5]);
+    expect(getPageNumbers(3, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  it("shows ellipsis for gaps in large page ranges", () => {
+    // Page 1 of 20: 1, 2, ..., 20
+    const result = getPageNumbers(1, 20);
+    expect(result).toEqual([1, 2, 0, 20]);
+  });
+
+  it("shows ellipsis on both sides for middle pages", () => {
+    // Page 10 of 20: 1, ..., 9, 10, 11, ..., 20
+    const result = getPageNumbers(10, 20);
+    expect(result).toEqual([1, 0, 9, 10, 11, 0, 20]);
+  });
+
+  it("shows ellipsis only on right for early pages", () => {
+    // Page 3 of 20: 1, 2, 3, 4, ..., 20
+    const result = getPageNumbers(3, 20);
+    expect(result).toEqual([1, 2, 3, 4, 0, 20]);
+  });
+
+  it("shows ellipsis only on left for late pages", () => {
+    // Page 18 of 20: 1, ..., 17, 18, 19, 20
+    const result = getPageNumbers(18, 20);
+    expect(result).toEqual([1, 0, 17, 18, 19, 20]);
+  });
+
+  it("handles last page", () => {
+    // Page 20 of 20: 1, ..., 19, 20
+    const result = getPageNumbers(20, 20);
+    expect(result).toEqual([1, 0, 19, 20]);
+  });
+
+  it("handles page 2 of large range", () => {
+    // Page 2 of 20: 1, 2, 3, ..., 20
+    const result = getPageNumbers(2, 20);
+    expect(result).toEqual([1, 2, 3, 0, 20]);
+  });
+});

package/src/ui/shared/index.ts

@@ -0,0 +1,12 @@
+export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
+export { MediaGallery, type MediaGalleryProps } from "./MediaGallery.js";
+export {
+  Pagination,
+  LoadMore,
+  PagePagination,
+  type PaginationProps,
+  type LoadMoreProps,
+  type PagePaginationProps,
+} from "./Pagination.js";
+export { getPageNumbers } from "../../lib/pagination.js";
+export { ThreadView, type ThreadViewProps } from "./ThreadView.js";