@jant/core 0.3.35 → 0.3.37

package/src/lib/view.ts

@@ -8,22 +8,21 @@
 import type {
   Post,
   PostWithMedia,
-  Page,
   Media,
   MediaView,
   PostView,
-  PageView,
+  CollectionTagView,
   NavItemView,
   NavItem,
   SearchResult,
   SearchResultView,
   ArchiveGroup,
+  Collection,
   Format,
   Status,
   NavItemType,
   AppConfig,
 } from "../types.js";
-import { encode } from "./sqid.js";
 import {
   toISOString,
   formatDate,
@@ -32,6 +31,9 @@ import {
 } from "./time.js";
 import { getMediaUrl, getImageUrl, getPublicUrlForProvider } from "./image.js";
 import { getHtmlExcerpt } from "./excerpt.js";
+import { highlightText } from "./search-snippet.js";
+import { renderCollectionIcon } from "./icons.js";
+import { escapeHtml } from "./html.js";
 
 // =============================================================================
 // Media Context
@@ -78,13 +80,29 @@ export function toMediaView(media: Media, ctx: MediaContext): MediaView {
     ctx.s3PublicUrl,
   );
   const url = getMediaUrl(media.storageKey, publicUrl);
-  const thumbnailUrl = getImageUrl(url, ctx.imageTransformUrl, {
-    width: 1200,
-    height: 768,
-    quality: 80,
-    format: "auto",
-    fit: "scale-down",
-  });
+
+  // Only apply image transforms for image MIME types
+  const thumbnailUrl = media.mimeType.startsWith("image/")
+    ? getImageUrl(url, ctx.imageTransformUrl, {
+        width: 1200,
+        height: 768,
+        quality: 80,
+        format: "auto",
+        fit: "scale-down",
+      })
+    : url;
+
+  const posterRawUrl = media.posterKey
+    ? getMediaUrl(media.posterKey, publicUrl)
+    : undefined;
+  const posterUrl = posterRawUrl
+    ? getImageUrl(posterRawUrl, ctx.imageTransformUrl, {
+        width: 640,
+        quality: 80,
+        format: "auto",
+        fit: "scale-down",
+      })
+    : undefined;
 
   return {
     id: media.id,
@@ -95,6 +113,10 @@ export function toMediaView(media: Media, ctx: MediaContext): MediaView {
     width: media.width ?? undefined,
     height: media.height ?? undefined,
     size: media.size,
+    blurhash: media.blurhash ?? undefined,
+    waveform: media.waveform ?? undefined,
+    posterUrl,
+    chars: media.chars ?? undefined,
   };
 }
 
@@ -107,10 +129,19 @@ export function toMediaView(media: Media, ctx: MediaContext): MediaView {
  *
  * @param post - Post with media attachments from database
  * @param _ctx - Media context with URL configuration
+ * @param postCollections - Optional collections this post belongs to
  * @returns Render-ready PostView with pre-computed fields
  */
-export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
-  const permalink = post.path ? `/${post.path}` : `/p/${encode(post.id)}`;
+export function toPostView(
+  post: PostWithMedia,
+  _ctx: MediaContext,
+  postCollections?: Collection[],
+  threadRootPermalink?: string,
+  isLastInThread?: boolean,
+): PostView {
+  const id = post.id;
+  const permalink = `/${post.slug}`;
+  const publishedAt = post.publishedAt ?? post.updatedAt;
 
   // Pre-compute excerpt from raw body
   let excerpt: string | undefined;
@@ -124,20 +155,36 @@ export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
   let summaryHasMore: boolean | undefined;
   let bodyHtmlWithAnchor = post.bodyHtml;
   if (post.title && post.bodyHtml) {
-    const result = getHtmlExcerpt(post.bodyHtml);
-    summaryHtml = result.excerpt;
-    summaryHasMore = result.hasMore;
-
-    // Inject #continue anchor at the excerpt boundary for scroll targeting
-    if (result.hasMore) {
-      const pos = result.excerptEnd;
-      bodyHtmlWithAnchor =
-        post.bodyHtml.slice(0, pos) +
-        '<span id="continue"></span>' +
-        post.bodyHtml.slice(pos);
+    if (post.summary) {
+      // Use stored summary (generated from Tiptap JSON)
+      summaryHtml = post.summary
+        .split("\n\n")
+        .map((p) => `<p>${escapeHtml(p)}</p>`)
+        .join("");
+      summaryHasMore = true;
+    } else {
+      // Fallback: extract from rendered HTML
+      const result = getHtmlExcerpt(post.bodyHtml);
+      summaryHtml = result.excerpt;
+      summaryHasMore = result.hasMore;
+
+      // Inject #continue anchor at the excerpt boundary for scroll targeting
+      if (result.hasMore) {
+        const pos = result.excerptEnd;
+        bodyHtmlWithAnchor =
+          post.bodyHtml.slice(0, pos) +
+          '<span id="continue"></span>' +
+          post.bodyHtml.slice(pos);
+      }
     }
   }
 
+  // Convert collection tags
+  const collections: CollectionTagView[] = (postCollections ?? []).map((c) => {
+    const iconHtml = renderCollectionIcon(c.icon, { size: 12 }) || undefined;
+    return { slug: c.slug, title: c.title, iconHtml };
+  });
+
   // Convert media attachments
   const media: MediaView[] = post.mediaAttachments.map((m) => ({
     id: m.id,
@@ -147,12 +194,19 @@ export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
     altText: m.alt ?? undefined,
     width: m.width ?? undefined,
     height: m.height ?? undefined,
+    size: m.size ?? undefined,
+    blurhash: m.blurhash ?? undefined,
+    waveform: m.waveform ?? undefined,
+    posterUrl: m.posterUrl ?? undefined,
+    originalName: m.originalName ?? undefined,
+    summary: m.summary ?? undefined,
+    chars: m.chars ?? undefined,
   }));
 
   return {
-    id: post.id,
+    id,
     permalink,
-    path: post.path ?? undefined,
+    slug: post.slug,
     title: post.title ?? undefined,
     bodyHtml: bodyHtmlWithAnchor ?? undefined,
     excerpt,
@@ -162,36 +216,69 @@ export function toPostView(post: PostWithMedia, _ctx: MediaContext): PostView {
     quoteText: post.quoteText ?? undefined,
     format: post.format as Format,
     status: post.status as Status,
-    featured: post.featured === 1,
-    pinned: post.pinned === 1,
+    visibility: post.visibility,
+    pinned: post.pinnedAt !== null,
+    featured: post.featuredAt !== null,
     rating: post.rating ?? undefined,
-    publishedAt: toISOString(post.publishedAt),
-    publishedAtFormatted: formatDate(post.publishedAt),
-    publishedAtTime: formatTime(post.publishedAt),
-    publishedAtRelative: formatRelativeTime(post.publishedAt),
+    publishedAt: toISOString(publishedAt),
+    publishedAtFormatted: formatDate(publishedAt),
+    publishedAtTime: formatTime(publishedAt),
+    publishedAtRelative: formatRelativeTime(publishedAt),
     updatedAt: toISOString(post.updatedAt),
     media,
+    collections,
     replyToId: post.replyToId ?? undefined,
-    threadRootId: post.threadId ?? undefined,
+    threadRootId: post.replyToId ? post.threadId : undefined,
+    threadRootPermalink,
+    isLastInThread: isLastInThread ?? true,
     body: post.body ?? undefined,
   };
 }
 
 /**
  * Batch converts PostWithMedia[] to PostView[].
+ *
+ * @param posts - Posts with media attachments
+ * @param ctx - Media context with URL configuration
+ * @param threadRootPermalinkMap - Optional map of thread root ID → permalink
+ * @returns Render-ready PostView[]
  */
 export function toPostViews(
   posts: PostWithMedia[],
   ctx: MediaContext,
+  threadRootPermalinkMap?: Map<string, string>,
+  isLastInThreadMap?: Map<string, boolean>,
 ): PostView[] {
-  return posts.map((p) => toPostView(p, ctx));
+  return posts.map((p) => {
+    const rootPermalink = p.replyToId
+      ? threadRootPermalinkMap?.get(p.threadId)
+      : undefined;
+    return toPostView(
+      p,
+      ctx,
+      undefined,
+      rootPermalink,
+      isLastInThreadMap?.get(p.id),
+    );
+  });
 }
 
 /**
  * Converts a bare Post (no media) to a PostView with empty media array.
  */
-export function toPostViewFromPost(post: Post, ctx: MediaContext): PostView {
-  return toPostView({ ...post, mediaAttachments: [] }, ctx);
+export function toPostViewFromPost(
+  post: Post,
+  ctx: MediaContext,
+  threadRootPermalink?: string,
+  isLastInThread?: boolean,
+): PostView {
+  return toPostView(
+    { ...post, mediaAttachments: [] },
+    ctx,
+    undefined,
+    threadRootPermalink,
+    isLastInThread,
+  );
 }
 
 /**
@@ -200,27 +287,54 @@ export function toPostViewFromPost(post: Post, ctx: MediaContext): PostView {
 export function toPostViewsFromPosts(
   posts: Post[],
   ctx: MediaContext,
+  threadRootPermalinkMap?: Map<string, string>,
+  isLastInThreadMap?: Map<string, boolean>,
 ): PostView[] {
-  return posts.map((p) => toPostViewFromPost(p, ctx));
+  return posts.map((p) => {
+    const rootPermalink = p.replyToId
+      ? threadRootPermalinkMap?.get(p.threadId)
+      : undefined;
+    return toPostViewFromPost(
+      p,
+      ctx,
+      rootPermalink,
+      isLastInThreadMap?.get(p.id),
+    );
+  });
 }
 
 // =============================================================================
-// Page Conversions
+// Thread Helpers
 // =============================================================================
 
 /**
- * Converts a Page to a render-ready PageView.
+ * Builds a map of thread root ID → permalink for posts that are thread replies.
+ *
+ * @param posts - Posts to inspect for thread membership
+ * @param getById - Lookup function to fetch a post by ID
+ * @returns Map of thread root ID → permalink string (e.g. `/{slug}`)
+ *
+ * @example
+ * ```ts
+ * const map = await loadThreadRootPermalinks(posts, services.posts.getById);
+ * const views = toPostViews(postsWithMedia, mediaCtx, map);
+ * ```
  */
-export function toPageView(page: Page): PageView {
-  return {
-    id: page.id,
-    slug: page.slug,
-    title: page.title ?? undefined,
-    bodyHtml: page.bodyHtml ?? undefined,
-    status: page.status as Status,
-    createdAt: toISOString(page.createdAt),
-    updatedAt: toISOString(page.updatedAt),
-  };
+export async function loadThreadRootPermalinks(
+  posts: Post[],
+  getById: (id: string) => Promise<Post | null>,
+): Promise<Map<string, string>> {
+  const threadRootIds = [
+    ...new Set(posts.filter((p) => p.replyToId).map((p) => p.threadId)),
+  ];
+  const map = new Map<string, string>();
+  if (threadRootIds.length > 0) {
+    const roots = await Promise.all(threadRootIds.map(getById));
+    for (const root of roots) {
+      if (root) map.set(root.id, `/${root.slug}`);
+    }
+  }
+  return map;
 }
 
 // =============================================================================
@@ -232,7 +346,7 @@ export function toPageView(page: Page): PageView {
  *
  * @param item - Raw nav item from database
  * @param currentPath - Current URL path for active state
- * @param isAuthenticated - Whether the user is logged in (affects system dashboard item)
+ * @param isAuthenticated - Whether the user is logged in (affects system settings item)
  */
 export function toNavItemView(
   item: NavItem,
@@ -242,9 +356,13 @@ export function toNavItemView(
   let url = item.url;
   let label = item.label;
 
-  // System dashboard item: resolve URL and label based on auth
-  if (item.type === "system" && item.url === "/dash") {
-    url = isAuthenticated ? "/dash" : "/signin";
+  // System settings item: resolve URL and label based on auth
+  // Also handles legacy "/dash" URLs from existing DB data
+  if (
+    item.type === "system" &&
+    (item.url === "/settings" || item.url === "/dash")
+  ) {
+    url = isAuthenticated ? "/settings" : "/signin";
     if (!isAuthenticated) {
       label = "Sign in";
     }
@@ -266,7 +384,6 @@ export function toNavItemView(
     type: item.type as NavItemType,
     label,
     url,
-    pageId: item.pageId ?? undefined,
     isActive,
     isExternal,
   };
@@ -293,26 +410,57 @@ export function toNavItemViews(
 
 /**
  * Converts a SearchResult to a SearchResultView with PostView.
+ *
+ * @param result - Raw search result with post and FTS metadata
+ * @param ctx - Media context for URL computation
+ * @param query - Original search query for client-side title/quote highlighting
  */
 export function toSearchResultView(
   result: SearchResult,
   ctx: MediaContext,
+  query?: string,
 ): SearchResultView {
+  const post = toPostViewFromPost(result.post, ctx);
+
+  let titleHighlighted: string | undefined;
+  let quoteHighlighted: string | undefined;
+
+  if (query) {
+    if (post.title) {
+      titleHighlighted = highlightText(post.title, query);
+    }
+    if (post.quoteText) {
+      // Truncate before highlighting to avoid splitting inside <mark> tags
+      const truncated =
+        post.quoteText.length > 120
+          ? post.quoteText.slice(0, 120) + "..."
+          : post.quoteText;
+      quoteHighlighted = highlightText(truncated, query);
+    }
+  }
+
   return {
-    post: toPostViewFromPost(result.post, ctx),
+    post,
     rank: result.rank,
     snippet: result.snippet,
+    titleHighlighted,
+    quoteHighlighted,
   };
 }
 
 /**
  * Batch converts SearchResult[] to SearchResultView[].
+ *
+ * @param results - Raw search results
+ * @param ctx - Media context for URL computation
+ * @param query - Original search query for title/quote highlighting
  */
 export function toSearchResultViews(
   results: SearchResult[],
   ctx: MediaContext,
+  query?: string,
 ): SearchResultView[] {
-  return results.map((r) => toSearchResultView(r, ctx));
+  return results.map((r) => toSearchResultView(r, ctx, query));
 }
 
 // =============================================================================
@@ -346,3 +494,36 @@ export function toArchiveGroups(
   }
   return groups;
 }
+
+/**
+ * Converts a grouped PostWithMedia map to typed ArchiveGroup[].
+ * Unlike toArchiveGroups, this preserves media attachments on each post.
+ *
+ * @param grouped - Map of "YYYY-MM" keys to PostWithMedia arrays
+ * @param ctx - Media context for URL computation
+ * @returns ArchiveGroup[] with full media data on each PostView
+ */
+export function toArchiveGroupsWithMedia(
+  grouped: Map<string, PostWithMedia[]>,
+  ctx: MediaContext,
+): ArchiveGroup[] {
+  const groups: ArchiveGroup[] = [];
+  for (const [yearMonth, posts] of grouped) {
+    const [year, month] = yearMonth.split("-");
+    if (!year || !month) continue;
+
+    const date = new Date(parseInt(year, 10), parseInt(month, 10) - 1);
+    const label = date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+    });
+
+    groups.push({
+      year,
+      month,
+      label,
+      posts: toPostViews(posts, ctx),
+    });
+  }
+  return groups;
+}