@jant/core 0.6.16 → 0.7.0

package/src/ui/shared/CollectionsManager.tsx

@@ -2,21 +2,32 @@ import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
 import type { CollectionDirectoryItem } from "../../types.js";
-import {
-  getCollectionsDirectoryPath,
-  getNewCollectionPath,
-} from "../../lib/collection-paths.js";
-import { toPublicPath } from "../../lib/url.js";
 import { CollectionDirectory } from "./CollectionDirectory.js";
-import { getCollectionMutationLabels } from "./collection-management-labels.js";
+import {
+  getCollectionDialogLabels,
+  getCollectionMutationLabels,
+} from "./collection-management-labels.js";
+import {
+  getSmartCollectionDialogLabels,
+  getSmartCollectionLabels,
+} from "./smart-collection-labels.js";
+import { getIconSvg } from "../../lib/icons.js";
 
 const escapeJson = (data: unknown) =>
   JSON.stringify(data).replace(/</g, "\\u003c");
 
 export interface CollectionsManagerProps {
   items: CollectionDirectoryItem[];
+  /** Collections and smart collections already in the site navigation. */
   navigationCollectionIds?: string[];
   sitePathPrefix?: string;
+  /**
+   * Site path prefix plus the language prefix of the view being rendered.
+   * Collection pages exist once per language, so a reader on `/en/collections`
+   * must land on `/en/{slug}` rather than being dropped into the primary view.
+   * Required for the same reason as on {@link CollectionDirectoryProps}.
+   */
+  basePath: string;
   siteOrigin?: string;
 }
 
@@ -24,19 +35,13 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
   items,
   navigationCollectionIds = [],
   sitePathPrefix = "",
+  basePath,
   siteOrigin = "",
 }) => {
   const { i18n } = useLingui();
-  const collectionsHref = toPublicPath(
-    getCollectionsDirectoryPath(),
-    sitePathPrefix,
-  );
-  const newCollectionHref = toPublicPath(
-    `${getNewCollectionPath()}?returnTo=${encodeURIComponent(collectionsHref)}`,
-    sitePathPrefix,
-  );
   const mutationLabels = getCollectionMutationLabels(i18n);
 
+  const smartLabels = getSmartCollectionLabels(i18n);
   const labels = {
     collectionsTitle: i18n._(
       msg({
@@ -44,6 +49,17 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
         comment: "@context: Collections page heading",
       }),
     ),
+    smartCollectionNoun: smartLabels.noun,
+    newSmartCollection: smartLabels.newSmartCollection,
+    editSmartCollection: smartLabels.editSmartCollection,
+    deleteSmartCollection: smartLabels.deleteSmartCollection,
+    confirmDeleteSmartCollection: smartLabels.confirmDelete,
+    smartCollectionDeleted: i18n._(
+      msg({
+        message: "Smart collection deleted.",
+        comment: "@context: Confirmation after deleting a smart collection",
+      }),
+    ),
     organize: i18n._(
       msg({
         message: "Organize",
@@ -169,11 +185,12 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
                 class="collections-page-action-group"
                 data-collections-toolbar
               >
-                <a
-                  href={newCollectionHref}
+                <button
+                  type="button"
                   class="collections-page-toolbar-button"
                   aria-label={labels.newCollection}
                   title={labels.newCollection}
+                  data-collections-action="collection"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -190,7 +207,7 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
                     <path d="M12 5v14" />
                     <path d="M5 12h14" />
                   </svg>
-                </a>
+                </button>
                 <div class="relative">
                   <button
                     type="button"
@@ -250,6 +267,29 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
                         {labels.organize}
                       </span>
                     </button>
+                    {/* Beside Add link and Add divider, not a second `+`:
+                        the `+` is where a collection is created, and two plus
+                        signs would immediately raise "which plus". */}
+                    <button
+                      type="button"
+                      class="collections-page-menu-item"
+                      data-collections-action="smart-collection"
+                    >
+                      {/* Full stroke, unlike the funnel that marks a smart
+                          collection beside its title: here it sits among
+                          menu icons drawn at the same weight, and `icon-fine`
+                          would single it out as the lighter one. */}
+                      <span
+                        class="collections-page-menu-item-icon"
+                        aria-hidden="true"
+                        dangerouslySetInnerHTML={{
+                          __html: getIconSvg("funnel") ?? "",
+                        }}
+                      />
+                      <span class="collections-page-menu-item-label">
+                        {smartLabels.newSmartCollection}
+                      </span>
+                    </button>
                     <button
                       type="button"
                       class="collections-page-menu-item"
@@ -318,6 +358,18 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
         </div>
       </header>
 
+      {/* The dialog is a Lit component and cannot reach the i18n catalogs, so
+          the page that can open it carries its strings. */}
+      <div
+        hidden
+        data-collection-dialog-labels={escapeJson(
+          getCollectionDialogLabels(i18n),
+        )}
+        data-smart-collection-dialog-labels={escapeJson(
+          getSmartCollectionDialogLabels(i18n),
+        )}
+      />
+
       <jant-collections-manager
         items={escapeJson(items)}
         labels={escapeJson(labels)}
@@ -327,6 +379,7 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
           items={items}
           emptyMessage={labels.emptyState}
           sitePathPrefix={sitePathPrefix}
+          basePath={basePath}
           siteOrigin={siteOrigin}
         />
       </jant-collections-manager>

package/src/ui/shared/CopyField.tsx

@@ -0,0 +1,127 @@
+import type { FC } from "hono/jsx";
+import { getIconSvg } from "../../lib/icons.js";
+import {
+  COPY_FIELD_BUTTON_ATTR,
+  COPY_FIELD_BUTTON_CLASS,
+  COPY_FIELD_CLASS,
+  COPY_FIELD_CONTROL_CLASS,
+  COPY_FIELD_FAILED_ATTR,
+  COPY_FIELD_INPUT_CLASS,
+  COPY_FIELD_VALUE_ATTR,
+} from "../../lib/copy-field.js";
+
+export interface CopyFieldProps {
+  /** Field label, also the input's accessible name. */
+  label: string;
+  /**
+   * Optional page this address is the feed of, linked from the label.
+   *
+   * A feed lives at `{page}/feed`, so every address here has a page whose
+   * contents it carries. Linking the label lets a reader look at those posts
+   * before subscribing — the page is the only honest preview of the feed.
+   * Omitted (settings, where the author already knows the site) the label
+   * stays plain text.
+   */
+  labelHref?: string;
+  /**
+   * Tooltip for the linked label, saying what following it does. The link text
+   * is the feed's name ("Latest", "All"), which alone does not tell a reader
+   * that it leads to a page — and `title` supplements the accessible name
+   * rather than replacing it, so the visible text still wins.
+   */
+  labelTitle?: string;
+  /** The address to show and copy. Absolute — it is meant to leave this page. */
+  value: string;
+  /** Optional line under the label saying what this address gives you. */
+  description?: string;
+  /** Text on the copy button. */
+  copyLabel: string;
+  /** Toast shown after a successful copy. */
+  copiedMessage: string;
+  /** Toast shown when the clipboard is unavailable or refuses. */
+  failedMessage: string;
+}
+
+/**
+ * A read-only address with a copy button.
+ *
+ * Rendered whole on the server: the address is the content of the page this
+ * appears on, so it must not wait for JavaScript. `client/copy-field.ts` adds
+ * the copying and reveals the button, which ships hidden so that without the
+ * script the field degrades to an input the reader can select by hand rather
+ * than a button that does nothing.
+ *
+ * @param props - Label, address, and the strings the client needs for toasts
+ * @returns The field markup
+ * @example
+ * <CopyField
+ *   label="Main feed"
+ *   value="https://example.com/feed"
+ *   copyLabel="Copy"
+ *   copiedMessage="Feed URL copied."
+ *   failedMessage="Could not copy. Select the address and copy it."
+ * />
+ */
+export const CopyField: FC<CopyFieldProps> = ({
+  label,
+  labelHref,
+  labelTitle,
+  value,
+  description,
+  copyLabel,
+  copiedMessage,
+  failedMessage,
+}) => (
+  <div class={COPY_FIELD_CLASS} data-copy-field-root>
+    <p class="text-sm font-medium">
+      {labelHref ? (
+        // The affordance is the arrow, not an underline. Three underlined
+        // labels stacked over three inputs read as a mis-styled form, and the
+        // rule under a two-word label is heavy enough to compete with the
+        // address it introduces. An arrow is visible at rest — which the
+        // underline was there to be — and says where the link goes besides.
+        // The underline still arrives on hover, where it costs nothing.
+        <a
+          href={labelHref}
+          title={labelTitle}
+          class="group inline-flex items-center gap-1 underline-offset-4 hover:underline focus-visible:underline"
+        >
+          {label}
+          <span
+            class="text-muted-foreground transition-transform duration-150 group-hover:translate-x-0.5 group-focus-visible:translate-x-0.5"
+            aria-hidden="true"
+            dangerouslySetInnerHTML={{
+              __html: getIconSvg("arrow-right", "size-3.5 icon-fine") ?? "",
+            }}
+          />
+        </a>
+      ) : (
+        label
+      )}
+    </p>
+    {description ? (
+      <p class="text-sm text-muted-foreground">{description}</p>
+    ) : null}
+    <div class={COPY_FIELD_CONTROL_CLASS}>
+      <input
+        type="text"
+        class={COPY_FIELD_INPUT_CLASS}
+        value={value}
+        readonly
+        aria-label={label}
+        {...{ [COPY_FIELD_VALUE_ATTR]: "" }}
+      />
+      <button
+        type="button"
+        class={COPY_FIELD_BUTTON_CLASS}
+        hidden
+        {...{
+          [COPY_FIELD_BUTTON_ATTR]: copiedMessage,
+          [COPY_FIELD_FAILED_ATTR]: failedMessage,
+        }}
+      >
+        {copyLabel}
+      </button>
+    </div>
+  </div>
+);

package/src/ui/shared/EmptyPostContent.tsx

@@ -0,0 +1,23 @@
+/**
+ * Empty Post Content
+ *
+ * The microformats floor for a card that renders neither a name nor any
+ * content of its own.
+ *
+ * A microformats2 parser invents an h-entry's `name` from its text content
+ * whenever the entry carries no explicit `p-name`, no `e-*` property, and no
+ * nested microformat. The author's card ships every `PostStatusBadges` badge in
+ * the DOM and hides the inapplicable ones with CSS — which a parser does not
+ * run — so a card with nothing else in it publishes a title of
+ * "PinnedPinnedPrivateDraft" followed by its own date.
+ *
+ * An explicit empty `e-content` states what is true, that this entry has no
+ * text content, and that is enough to stop the guess.
+ *
+ * It carries neither `prose` nor `data-post-body` on purpose: the body-width
+ * CSS and the client scripts that look up a post's body must not see it.
+ */
+
+import type { FC } from "hono/jsx";
+
+export const EmptyPostContent: FC = () => <div class="e-content"></div>;

package/src/ui/shared/MediaGallery.tsx

@@ -4,6 +4,18 @@
  * Renders media attachments in a unified horizontal row: images with
  * lightbox support, videos with play overlay, audio/documents as 3:4
  * styled card tiles, and attached texts as summary cards.
+ *
+ * Attachments sit beside `e-content`, not inside it, so a consumer reading
+ * the h-entry would otherwise see a post with no media at all. The visual
+ * ones carry `u-photo` / `u-video` / `u-audio` — the standard microformats2
+ * properties, the same ones W3C Post Type Discovery reads — so what the
+ * timeline shows is what a parser gets. Placement follows the mf2 implied
+ * value rules: on the element whose own attribute already holds the URL,
+ * never on a wrapper that would resolve to something else.
+ *
+ * Documents and attached texts stay unmarked. There is no standard property
+ * for them, and inventing one would put a private vocabulary in public
+ * markup.
  */
 
 import type { FC } from "hono/jsx";
@@ -63,8 +75,73 @@ export function getMediaPlaceholderDataUrl(
   return blurhashToDataUrl(blurhash, decodeSize.width, decodeSize.height);
 }
 
+/**
+ * Width for a post's only visual: its natural shape, capped at 24rem tall and
+ * never wider than the reading column the post's own text gets.
+ *
+ * The cap is `--layout-reading-width`, not `--layout-content-width` — below
+ * 1024px the latter flattens to 100% and a wide picture would outgrow the body
+ * copy it sits under. See the token comments in `styles/tokens.css`.
+ *
+ * @param ratio - Aspect ratio (width / height) from `getMediaAspectRatio`.
+ * @returns A CSS `width` value.
+ * @example
+ * getSingleVisualWidth(16 / 9);
+ * // "min(100%, calc(24rem * 1.777...), var(--layout-reading-width))"
+ */
 function getSingleVisualWidth(ratio: number): string {
-  return `min(100%, calc(24rem * ${ratio}), var(--layout-content-width))`;
+  return `min(100%, calc(24rem * ${ratio}), var(--layout-reading-width))`;
+}
+
+/** Shortest a gallery strip gets, in CSS pixels. */
+const ROW_MIN = 240;
+/** Tallest a gallery strip gets — the 24rem cap a lone visual already has. */
+const ROW_MAX = 384;
+/** No single item in a strip is wider than this, in CSS pixels. */
+const ITEM_MAX_WIDTH = 520;
+/** Width the opening visual is measured at when it sets the row height. */
+const NOMINAL_ITEM_WIDTH = 320;
+
+/**
+ * Shared height for a multi-item gallery strip.
+ *
+ * Every visual in a strip gets this height and a width of
+ * `rowHeight * its own aspect ratio`, so one number decides the whole row.
+ * Three rules pick it, in order:
+ *
+ * 1. **The opener leads.** `NOMINAL_ITEM_WIDTH / leadRatio` is the height the
+ *    first visual would have at a nominal 320px width, so a portrait opener
+ *    earns a taller row than a landscape one.
+ * 2. **Nothing outgrows the strip.** The widest visual is held to
+ *    `ITEM_MAX_WIDTH`, which stops a 16:9 video following a portrait picture
+ *    from swallowing the whole content column.
+ * 3. **One band.** `ROW_MAX` matches the cap a lone visual gets on its own, so
+ *    a second attachment never makes the first picture grow.
+ *
+ * Non-visual attachments stay out of this deliberately: a text file beside a
+ * picture is no reason to resize the picture. Their cards are sized *from* the
+ * result instead.
+ *
+ * @param visualRatios - Aspect ratios of the strip's images and videos in
+ *   display order, each from {@link getMediaAspectRatio} so every value is
+ *   finite and positive. Empty when the strip holds no visuals at all.
+ * @returns Row height in CSS pixels.
+ * @example
+ * getGalleryRowHeight([0.53, 1.78]); // 292 - portrait opener, then a 16:9 video
+ * getGalleryRowHeight([0.53, 0.53]); // 384 - two portraits
+ * getGalleryRowHeight([1.78, 1.78]); // 240 - two landscapes
+ * getGalleryRowHeight([]); // 240 - documents only
+ */
+export function getGalleryRowHeight(visualRatios: number[]): number {
+  const leadRatio = visualRatios[0];
+  if (leadRatio === undefined) return ROW_MIN;
+
+  const byLead = NOMINAL_ITEM_WIDTH / leadRatio;
+  const byWidestItem = ITEM_MAX_WIDTH / Math.max(...visualRatios);
+
+  return Math.round(
+    Math.min(ROW_MAX, Math.max(ROW_MIN, Math.min(byLead, byWidestItem))),
+  );
 }
 
 /**
@@ -188,18 +265,20 @@ const FileIcon = ({
   );
 };
 
+/*
+ * No `h-*` Tailwind utility belongs on anything inside a post: a microformats2
+ * parser treats every `h-`-prefixed class as a microformat root, so `h-auto` on
+ * a single image published a phantom `h-auto` child microformat — carrying the
+ * thumbnail as its `photo` — on the h-entry of every post with a picture.
+ * Nothing was lost by dropping it: Preflight already declares
+ * `img, video { max-width: 100%; height: auto }`.
+ */
 export const MediaGallery: FC<MediaGalleryProps> = ({
   attachments,
   postPermalink,
 }) => {
   if (attachments.length === 0) return null;
 
-  // Category checks for layout decisions
-  const hasNonVisualAttachment = attachments.some((a) => {
-    const cat = getMediaCategory(a.mimeType);
-    return cat !== "image" && cat !== "video";
-  });
-
   // Build lightbox group from images + videos in position order
   // (documents/texts don't use lightbox)
   const lightboxItems = attachments
@@ -251,28 +330,13 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
     firstItem !== undefined &&
     (firstItem._kind === "image" || firstItem._kind === "video");
 
-  // When non-visual attachments are mixed with visuals, use a compact row
-  const hasNonVisual = hasNonVisualAttachment;
-  const COMPACT_HEIGHT = 220;
-
-  // Row height adapts to the first visual item's aspect ratio
-  const ROW_MIN = hasNonVisual ? 220 : 280;
-  const ROW_MAX = hasNonVisual ? 300 : 440;
-  let rowHeight = hasNonVisual ? COMPACT_HEIGHT : 360;
-  if (!singleVisual && galleryItems.length > 1) {
-    const firstVisual = galleryItems.find(
-      (item) => item._kind === "image" || item._kind === "video",
-    );
-    if (firstVisual && "width" in firstVisual && "height" in firstVisual) {
-      const firstRatio = getMediaAspectRatio(
-        firstVisual.width,
-        firstVisual.height,
-      );
-      rowHeight = Math.round(
-        Math.min(ROW_MAX, Math.max(ROW_MIN, 320 / Math.max(firstRatio, 0.5))),
-      );
-    }
-  }
+  // Strip geometry. A lone visual never reads this — it keeps its natural
+  // ratio — but every other shape does, cards included.
+  const rowHeight = getGalleryRowHeight(
+    galleryItems
+      .filter((item) => item._kind === "image" || item._kind === "video")
+      .map((item) => getMediaAspectRatio(item.width, item.height)),
+  );
 
   // Document card: 3:4 portrait, same height as row
   const DOC_RATIO = 3 / 4;
@@ -290,7 +354,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                 ? JSON.stringify(lightboxItems)
                 : undefined
             }
-            class={`flex gap-2 ${singleVisual ? "" : "overflow-x-auto scroll-smooth"}`}
+            class={`flex gap-3 ${singleVisual ? "" : "overflow-x-auto scroll-smooth"}`}
             style={
               singleVisual
                 ? undefined
@@ -349,11 +413,17 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                       width={item.width}
                       height={item.height}
                       style={imageStyle}
-                      class={
+                      /* `u-photo` here rather than on the enclosing link:
+                         `img.u-photo` resolves to `src` and carries `alt`
+                         with it, so a consumer gets the same thumbnail the
+                         timeline shows and the text describing it. The link
+                         wraps the full-size original, which is a click
+                         target rather than the post's photo. */
+                      class={`u-photo ${
                         singleVisual
-                          ? "media-visual w-full h-auto rounded-lg"
+                          ? "media-visual w-full rounded-lg"
                           : "media-visual w-full object-cover"
-                      }
+                      }`}
                       loading="lazy"
                       decoding="async"
                     />
@@ -374,6 +444,19 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                   ? undefined
                   : `${Math.round(Math.max(160, rowHeight * ratio))}px`;
                 const posterSrc = item.posterUrl || placeholder;
+                /* `video.u-photo` resolves to `poster`, which is the still
+                   the timeline already shows. Only a real poster qualifies:
+                   the blurhash fallback is a data URL, and publishing one as
+                   a photo would hand a consumer a 20-pixel smear. */
+                const posterClass = item.posterUrl ? "u-photo " : "";
+                /* Fit travels with the size, and `site-media.css` sets none.
+                   In a row the clip is cropped to the strip's height like the
+                   pictures beside it; alone its box already has the clip's
+                   shape, and `contain` letterboxes frames that disagree with
+                   the stored size. */
+                const videoClass = `${posterClass}media-visual w-full ${
+                  singleVisual ? "object-contain" : "object-cover"
+                }`;
                 const aspectRatio =
                   item.width && item.height
                     ? `${item.width}/${item.height}`
@@ -408,7 +491,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                       <a
                         href={item.url}
                         data-lightbox-index={item._lbIdx}
-                        class="media-visual-frame media-video-link"
+                        class="u-video media-visual-frame media-video-link"
                       >
                         <video
                           preload="none"
@@ -422,11 +505,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                           data-video-src={item.url}
                           data-feed-video-id={item.id}
                           style={videoStyle}
-                          class={
-                            singleVisual
-                              ? "media-visual w-full h-auto"
-                              : "media-visual w-full object-cover"
-                          }
+                          class={videoClass}
                         />
                       </a>
                       <button
@@ -468,7 +547,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                     key={item.id}
                     href={item.url}
                     data-lightbox-index={item._lbIdx}
-                    class={`${singleVisual ? "" : "shrink-0"} media-video-wrap media-visual-frame`}
+                    class={`u-video ${singleVisual ? "" : "shrink-0"} media-video-wrap media-visual-frame`}
                     style={
                       singleVisual
                         ? {
@@ -486,11 +565,7 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                       width={item.width}
                       height={item.height}
                       style={videoStyle}
-                      class={
-                        singleVisual
-                          ? "media-visual w-full h-auto"
-                          : "media-visual w-full object-cover"
-                      }
+                      class={videoClass}
                     />
                     <div class="media-video-play-overlay">
                       <svg viewBox="0 0 24 24" fill="white">
@@ -514,7 +589,11 @@ export const MediaGallery: FC<MediaGalleryProps> = ({
                   >
                     {/* Hidden audio element — JS controls it */}
                     <audio preload="none" class="media-audio-el">
-                      <source src={item.url} type={item.mimeType} />
+                      <source
+                        class="u-audio"
+                        src={item.url}
+                        type={item.mimeType}
+                      />
                     </audio>
 
                     {/* Artwork area */}

package/src/ui/shared/Pagination.tsx

@@ -8,6 +8,7 @@ import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
 import { formatPageLabel, getPageNumbers } from "../../lib/pagination.js";
+import { Icon } from "./Icon.js";
 
 export interface PaginationProps {
   /** Base URL for pagination links (e.g., "/archive", "/search?q=test") */
@@ -183,10 +184,24 @@ export const PagePagination: FC<PagePaginationProps> = ({
   // Numbered pagination when totalPages is known
   if (totalPages && totalPages > 1) {
     const pageNumbers = getPageNumbers(currentPage, totalPages);
+    // The icon shows only where the bar is too narrow for the words, and the
+    // word then stays as the link's accessible name (see `.page-pagination`).
+    const prevContent = (
+      <>
+        <Icon name="arrow-left" class="page-pagination-step-icon" />
+        <span class="page-pagination-step-label">{prevText}</span>
+      </>
+    );
+    const nextContent = (
+      <>
+        <span class="page-pagination-step-label">{nextText}</span>
+        <Icon name="arrow-right" class="page-pagination-step-icon" />
+      </>
+    );
 
     return (
       <nav
-        class="flex items-center justify-center gap-4 py-6"
+        class="page-pagination flex flex-wrap items-center justify-start gap-4 py-6"
         aria-label="Pagination"
       >
         {hasPrev ? (
@@ -194,10 +209,10 @@ export const PagePagination: FC<PagePaginationProps> = ({
             href={buildUrl(currentPage - 1)}
             class="underline text-muted-foreground hover:text-foreground"
           >
-            {prevText}
+            {prevContent}
           </a>
         ) : (
-          <span class="text-muted-foreground/50">{prevText}</span>
+          <span class="text-muted-foreground/50">{prevContent}</span>
         )}
 
         {pageNumbers.map((page, i) =>
@@ -225,10 +240,10 @@ export const PagePagination: FC<PagePaginationProps> = ({
             href={buildUrl(currentPage + 1)}
             class="underline text-muted-foreground hover:text-foreground"
           >
-            {nextText}
+            {nextContent}
           </a>
         ) : (
-          <span class="text-muted-foreground/50">{nextText}</span>
+          <span class="text-muted-foreground/50">{nextContent}</span>
         )}
       </nav>
     );