@jant/core 0.3.36 → 0.3.38

package/src/ui/shared/PostFooter.tsx

@@ -0,0 +1,204 @@
+/**
+ * Post Footer
+ *
+ * Shared footer for all post cards (feed + detail page).
+ * Shows timestamp, collection tags, reply button, and menu trigger.
+ */
+
+import type { FC } from "hono/jsx";
+import { useLingui } from "@lingui/react/macro";
+import type {
+  PostView,
+  CollectionTagView,
+  PostFooterDisplayOptions,
+} from "../../types.js";
+import { sanitizeUrl } from "../../lib/url.js";
+
+interface PostFooterProps {
+  post: PostView;
+  /** Detail page variant: border-top, shows permalink */
+  detail?: boolean;
+  display?: PostFooterDisplayOptions;
+}
+
+const CollectionTags: FC<{ collections: CollectionTagView[] }> = ({
+  collections,
+}) => {
+  if (collections.length === 0) return null;
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- length checked above
+  const first = collections[0]!;
+  const rest = collections.slice(1);
+
+  return (
+    <span class="post-collection-tags">
+      <span class="post-collection-sep" aria-hidden="true">
+        &middot;
+      </span>
+      <a href={`/c/${first.slug}`} class="post-collection-tag">
+        {first.iconHtml && (
+          <span
+            class="post-collection-icon"
+            dangerouslySetInnerHTML={{ __html: first.iconHtml }}
+          />
+        )}
+        {first.title}
+      </a>
+      {rest.length > 0 && (
+        <span class="post-collection-more-wrap">
+          <button
+            type="button"
+            class="post-collection-more"
+            data-collection-popover-trigger
+          >
+            and {rest.length} more
+          </button>
+          <div class="post-collection-popover" data-collection-popover>
+            {collections.map((c) => (
+              <a
+                key={c.slug}
+                href={`/c/${c.slug}`}
+                class="post-collection-popover-item"
+              >
+                {c.iconHtml && (
+                  <span
+                    class="post-collection-icon"
+                    dangerouslySetInnerHTML={{ __html: c.iconHtml }}
+                  />
+                )}
+                {c.title}
+              </a>
+            ))}
+          </div>
+        </span>
+      )}
+    </span>
+  );
+};
+
+export const PostFooter: FC<PostFooterProps> = ({ post, detail, display }) => {
+  const { t } = useLingui();
+  const safeExternalUrl =
+    post.format === "link" && post.url ? sanitizeUrl(post.url) : "";
+
+  return (
+    <footer
+      class={`post-menu-footer${detail ? " post-footer-detail" : ""}`}
+      data-post-meta
+    >
+      <div class="post-footer-meta">
+        {detail ? (
+          <time
+            class="dt-published"
+            datetime={post.publishedAt}
+            title={`${post.publishedAtFormatted} ${post.publishedAtTime} UTC`}
+          >
+            {post.publishedAtFormatted}
+          </time>
+        ) : (
+          <a
+            href={post.permalink}
+            class="u-url text-xs text-muted-foreground hover:underline"
+          >
+            <time
+              class="dt-published"
+              datetime={post.publishedAt}
+              title={`${post.publishedAtFormatted} ${post.publishedAtTime} UTC`}
+            >
+              {post.publishedAtFormatted}
+            </time>
+          </a>
+        )}
+        {safeExternalUrl && (
+          <a
+            href={safeExternalUrl}
+            class="post-footer-external-link"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open external link"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M7 17 17 7" />
+              <path d="M9 7h8v8" />
+            </svg>
+          </a>
+        )}
+        {detail && (
+          <a href={post.permalink} class="u-url ml-4">
+            {t({
+              message: "Permalink",
+              comment: "@context: Link to permanent URL of post",
+            })}
+          </a>
+        )}
+        {post.threadRootPermalink && (
+          <span class="post-collection-sep" aria-hidden="true">
+            &middot;
+          </span>
+        )}
+        {post.threadRootPermalink && (
+          <a
+            href={post.threadRootPermalink}
+            class="text-xs text-muted-foreground hover:underline"
+          >
+            In thread &rarr;
+          </a>
+        )}
+        <CollectionTags collections={post.collections} />
+      </div>
+      {!display?.hideActions && (
+        <div class="post-menu-actions">
+          {post.isLastInThread && (
+            <button
+              type="button"
+              class="reply-trigger"
+              aria-label="Reply"
+              data-reply-trigger
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="9 17 4 12 9 7" />
+                <path d="M20 18v-2a4 4 0 0 0-4-4H4" />
+              </svg>
+            </button>
+          )}
+          <button
+            type="button"
+            class="post-menu-trigger"
+            aria-label="More actions"
+            data-post-menu-trigger
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <circle cx="5" cy="12" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="19" cy="12" r="2" />
+            </svg>
+          </button>
+        </div>
+      )}
+    </footer>
+  );
+};

package/src/ui/shared/StarRating.tsx

@@ -0,0 +1,27 @@
+/**
+ * Star Rating (read-only)
+ *
+ * Displays a 1-5 star rating inline. Returns null when no rating is set.
+ */
+
+import type { FC } from "hono/jsx";
+
+interface StarRatingProps {
+  rating?: number;
+}
+
+export const StarRating: FC<StarRatingProps> = ({ rating }) => {
+  if (!rating || rating <= 0) return null;
+
+  const stars = [1, 2, 3, 4, 5];
+
+  return (
+    <div class="post-rating" aria-label={`${rating} out of 5`}>
+      {stars.map((n) => (
+        <span class={n <= rating ? "post-star-filled" : "post-star-empty"}>
+          ★
+        </span>
+      ))}
+    </div>
+  );
+};

package/src/ui/shared/__tests__/format-chars.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { formatChars } from "../MediaGallery.js";
+
+describe("formatChars", () => {
+  it("shows raw count below 1000", () => {
+    expect(formatChars(0)).toBe("0 chars");
+    expect(formatChars(1)).toBe("1 chars");
+    expect(formatChars(500)).toBe("500 chars");
+    expect(formatChars(999)).toBe("999 chars");
+  });
+
+  it("formats thousands without trailing .0", () => {
+    expect(formatChars(1000)).toBe("1k chars");
+    expect(formatChars(4000)).toBe("4k chars");
+    expect(formatChars(4023)).toBe("4k chars");
+    expect(formatChars(10000)).toBe("10k chars");
+    expect(formatChars(100000)).toBe("100k chars");
+  });
+
+  it("keeps meaningful decimal in thousands", () => {
+    expect(formatChars(1500)).toBe("1.5k chars");
+    expect(formatChars(4500)).toBe("4.5k chars");
+    expect(formatChars(12300)).toBe("12.3k chars");
+  });
+
+  it("formats millions without trailing .0", () => {
+    expect(formatChars(1000000)).toBe("1M chars");
+    expect(formatChars(2000000)).toBe("2M chars");
+  });
+
+  it("keeps meaningful decimal in millions", () => {
+    expect(formatChars(1500000)).toBe("1.5M chars");
+    expect(formatChars(2300000)).toBe("2.3M chars");
+  });
+});

package/src/ui/shared/index.ts

@@ -9,4 +9,3 @@ export {
   type PagePaginationProps,
 } from "./Pagination.js";
 export { getPageNumbers } from "../../lib/pagination.js";
-export { ThreadView, type ThreadViewProps } from "./ThreadView.js";