@jant/core 0.6.14 → 0.6.16

package/src/ui/dash/settings/__tests__/ConfigEditorContent.test.tsx

@@ -0,0 +1,98 @@
+import type { Context } from "hono";
+import { renderToString } from "hono/jsx/dom/server";
+import { describe, expect, it } from "vitest";
+import { I18nProvider } from "../../../../i18n/context.js";
+import { createI18n } from "../../../../i18n/i18n.js";
+import type { ConfigEditorFieldState } from "../../../../types.js";
+import { ConfigEditorContent } from "../ConfigEditorContent.js";
+
+function renderConfigEditorContent(fields: ConfigEditorFieldState[]): string {
+  const i18n = createI18n("en");
+  const c = {
+    get(key: string) {
+      if (key === "i18n") return i18n;
+      return undefined;
+    },
+  } as unknown as Context;
+
+  I18nProvider({ c, children: "" });
+  return renderToString(
+    ConfigEditorContent({
+      fields,
+      endpoint: "/api/settings",
+      sitePathPrefix: "/notes",
+    }),
+  );
+}
+
+describe("ConfigEditorContent", () => {
+  it("renders the page, endpoint, and a useful server fallback", () => {
+    const html = renderConfigEditorContent([
+      {
+        key: "SITE_NAME",
+        mode: "edit",
+        type: "string",
+        value: "My Jant",
+        fallbackValue: "Jant",
+        modified: true,
+        locked: false,
+        maxLength: 120,
+      },
+      {
+        key: "NOINDEX",
+        mode: "edit",
+        type: "boolean",
+        value: "false",
+        fallbackValue: "false",
+        modified: false,
+        locked: false,
+      },
+      {
+        key: "CUSTOM_CSS",
+        mode: "link",
+        type: "string",
+        value: "true",
+        fallbackValue: "false",
+        modified: true,
+        locked: false,
+        settingsPath: "/settings/custom-css",
+        display: "configured",
+      },
+    ]);
+
+    expect(html).toContain("Config Editor");
+    expect(html).toContain("Changes apply immediately;");
+    expect(html).toContain('endpoint="/api/settings"');
+    expect(html).toContain("SITE_NAME");
+    expect(html).toContain("My Jant");
+    expect(html).toContain("Modified");
+    expect(html).toContain("Configured");
+    expect(html).toContain('href="/notes/settings/custom-css"');
+    expect(html).toContain('class="config-editor-open-control"');
+    expect(html).toContain("3 settings shown");
+    expect(html).not.toContain("config-editor-guidance");
+    expect(html).not.toContain("Save change");
+    expect(html).not.toContain('target="_blank"');
+  });
+
+  it("keeps user-controlled values inert in JSON attributes and fallback HTML", () => {
+    const html = renderConfigEditorContent([
+      {
+        key: "SITE_NAME",
+        mode: "edit",
+        type: "string",
+        value: "</script><script>alert(1)</script>",
+        fallbackValue: "",
+        modified: true,
+        locked: false,
+        maxLength: 120,
+      },
+    ]);
+
+    expect(html).not.toContain("<script>alert(1)</script>");
+    expect(html).toContain("\\u003c/script&gt;");
+    expect(html).toContain(
+      "&lt;/script&gt;&lt;script&gt;alert(1)&lt;/script&gt;",
+    );
+  });
+});

package/src/ui/dash/settings/__tests__/SettingsRootContent.test.tsx

@@ -21,6 +21,21 @@ function renderSettingsRootContent(
 }
 
 describe("SettingsRootContent", () => {
+  it("places Config Editor last in Advanced and preserves the site path prefix", () => {
+    const html = renderSettingsRootContent({ sitePathPrefix: "/notes" });
+
+    const codeInjection = html.indexOf("/notes/settings/code-injection");
+    const apiTokens = html.indexOf("/notes/settings/api-tokens");
+    const configEditor = html.indexOf("/notes/settings/config");
+    const accountSection = html.indexOf(">Account<");
+
+    expect(codeInjection).toBeGreaterThan(-1);
+    expect(apiTokens).toBeGreaterThan(codeInjection);
+    expect(configEditor).toBeGreaterThan(apiTokens);
+    expect(accountSection).toBeGreaterThan(configEditor);
+    expect(html).toContain("Config Editor");
+  });
+
   it("omits Manage Hosting when no hosted site settings URL is configured", () => {
     const html = renderSettingsRootContent({});
 

package/src/ui/feed/CuratedThreadPreview.tsx

@@ -15,6 +15,14 @@ const THREAD_CONTEXT_LAST_DISPLAY = {
   hideRating: true,
 } as const;
 
+const COMPLETE_THREAD_CONTEXT_DISPLAY = {
+  footer: {
+    hideReply: true,
+  },
+} as const;
+
+const COMPLETE_THREAD_LAST_DISPLAY = {} as const;
+
 const CURATED_SEGMENT_DISPLAY = {} as const;
 
 interface CuratedThreadPreviewProps {
@@ -25,7 +33,7 @@ export const CuratedThreadPreview: FC<CuratedThreadPreviewProps> = ({
   curatedThread,
 }) => {
   const { i18n } = useLingui();
-  const { segments } = curatedThread;
+  const { segments, showContextRatings } = curatedThread;
 
   if (segments.length === 0) {
     return null;
@@ -70,9 +78,13 @@ export const CuratedThreadPreview: FC<CuratedThreadPreviewProps> = ({
               post={segment.post}
               mode="feed"
               display={
-                index === segments.length - 1
-                  ? THREAD_CONTEXT_LAST_DISPLAY
-                  : THREAD_CONTEXT_DISPLAY
+                showContextRatings
+                  ? index === segments.length - 1
+                    ? COMPLETE_THREAD_LAST_DISPLAY
+                    : COMPLETE_THREAD_CONTEXT_DISPLAY
+                  : index === segments.length - 1
+                    ? THREAD_CONTEXT_LAST_DISPLAY
+                    : THREAD_CONTEXT_DISPLAY
               }
             />
           )}

package/src/ui/feed/LinkCard.tsx

@@ -9,6 +9,7 @@
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
 import { StarRating } from "../shared/StarRating.js";
+import { getPostArticleAttributes } from "../shared/post-article-attributes.js";
 import { PostFooter } from "../shared/PostFooter.js";
 import { PostStatusBadges } from "./PostStatusBadges.js";
 import { sanitizeUrl, extractDisplayDomain } from "../../lib/url.js";
@@ -101,18 +102,7 @@ export const LinkCard: FC<TimelineCardProps> = ({
     <article
       class={articleClass}
       {...(isDetail ? { "data-page": "post" } : {})}
-      data-post
-      data-format="link"
-      data-post-id={post.id}
-      data-post-slug={post.slug}
-      data-thread-root-id={post.threadRootId ?? post.id}
-      {...(post.pinned ? { "data-post-pinned": "" } : {})}
-      {...(post.pinnedInCollection
-        ? { "data-post-pinned-in-collection": "" }
-        : {})}
-      {...(post.featured ? { "data-post-featured": "" } : {})}
-      data-post-visibility={post.visibility}
-      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
+      {...getPostArticleAttributes(post)}
     >
       {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
       {isDetail ? (

package/src/ui/feed/LinkPreview.tsx

@@ -6,6 +6,7 @@
  */
 
 import type { FC } from "hono/jsx";
+import { getLinkPreviewProviderLabel } from "../../lib/link-preview.js";
 import { Icon } from "../shared/Icon.js";
 
 interface LinkPreviewProps {
@@ -15,12 +16,6 @@ interface LinkPreviewProps {
   provider?: string;
 }
 
-const PROVIDER_LABELS: Record<string, string> = {
-  youtube: "YouTube",
-  vimeo: "Vimeo",
-  bilibili: "Bilibili",
-};
-
 export const LinkPreview: FC<LinkPreviewProps> = ({
   imageUrl,
   linkUrl,
@@ -28,7 +23,7 @@ export const LinkPreview: FC<LinkPreviewProps> = ({
   provider,
 }) => {
   const isVideo = kind === "video";
-  const providerLabel = provider ? PROVIDER_LABELS[provider] : undefined;
+  const providerLabel = getLinkPreviewProviderLabel(provider);
 
   return (
     <a

package/src/ui/feed/NoteCard.tsx

@@ -10,6 +10,7 @@ import type { FC } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
 import type { TimelineCardProps } from "../../types.js";
 import { MediaGallery } from "../shared/MediaGallery.js";
+import { getPostArticleAttributes } from "../shared/post-article-attributes.js";
 import { StarRating } from "../shared/StarRating.js";
 import { PostFooter, PostPublishedLink } from "../shared/PostFooter.js";
 import { PostStatusBadges } from "./PostStatusBadges.js";
@@ -86,18 +87,7 @@ export const NoteCard: FC<TimelineCardProps> = ({
     <article
       class={`h-entry post-menu-target${isCompact ? " feed-compact" : isDetail ? " py-6" : ""}`}
       {...(isDetail ? { "data-page": "post" } : {})}
-      data-post
-      data-format="note"
-      data-post-id={post.id}
-      data-post-slug={post.slug}
-      data-thread-root-id={post.threadRootId ?? post.id}
-      {...(post.pinned ? { "data-post-pinned": "" } : {})}
-      {...(post.pinnedInCollection
-        ? { "data-post-pinned-in-collection": "" }
-        : {})}
-      {...(post.featured ? { "data-post-featured": "" } : {})}
-      data-post-visibility={post.visibility}
-      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
+      {...getPostArticleAttributes(post)}
     >
       {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
       {isArticle &&
@@ -132,14 +122,6 @@ export const NoteCard: FC<TimelineCardProps> = ({
       {(() => {
         const tail = (
           <>
-            {!isCompact && post.media.length > 0 && (
-              <div class="mt-3" data-post-media>
-                <MediaGallery
-                  attachments={post.media}
-                  postPermalink={post.permalink}
-                />
-              </div>
-            )}
             {!isDetail &&
               !isCompact &&
               !showFullBody &&
@@ -160,6 +142,14 @@ export const NoteCard: FC<TimelineCardProps> = ({
                   {readMoreLabel}
                 </a>
               ))}
+            {!isCompact && post.media.length > 0 && (
+              <div class="mt-3" data-post-media>
+                <MediaGallery
+                  attachments={post.media}
+                  postPermalink={post.permalink}
+                />
+              </div>
+            )}
             {!isCompact && !showHeaderRating && !display?.hideRating && (
               <StarRating rating={post.rating} />
             )}

package/src/ui/feed/PostStatusBadges.tsx

@@ -8,24 +8,63 @@
  * footer meta instead.
  */
 
+import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/context.js";
 import { Icon } from "../shared/Icon.js";
 
 export const PostStatusBadges: FC = () => {
+  const { i18n } = useLingui();
+
+  const pinnedLabel = i18n._(
+    msg({
+      message: "Pinned",
+      comment: "@context: Post status badge for a pinned post",
+    }),
+  );
+
   return (
     <div class="post-status-badges">
       <span class="post-status-badge post-status-pinned">
         <Icon name="post-status-pin" />
-        Pinned
+        {pinnedLabel}
       </span>
       <span class="post-status-badge post-status-pinned-in-collection">
         <Icon name="post-status-pin" />
-        Pinned
+        {pinnedLabel}
       </span>
       <span class="post-status-badge post-status-private">
         <Icon name="post-status-private" />
-        Private
+        {i18n._(
+          msg({
+            message: "Private",
+            comment: "@context: Post status badge for a private post",
+          }),
+        )}
       </span>
+      {/* The one badge that is also a control: a draft's most likely next
+          action is "finish it", so the label itself opens the editor. */}
+      <button
+        type="button"
+        class="post-status-badge post-status-draft"
+        data-draft-continue
+        title={i18n._(
+          msg({
+            message: "Continue writing this draft",
+            comment:
+              "@context: Tooltip on the draft badge, which opens the editor",
+          }),
+        )}
+      >
+        <Icon name="post-status-draft" />
+        {i18n._(
+          msg({
+            message: "Draft",
+            comment:
+              "@context: Post status badge for an unpublished draft, shown to the author only",
+          }),
+        )}
+      </button>
     </div>
   );
 };

package/src/ui/feed/QuoteCard.tsx

@@ -18,6 +18,7 @@ import { PostStatusBadges } from "./PostStatusBadges.js";
 import { sanitizeUrl, extractDisplayDomain } from "../../lib/url.js";
 import { DecorativeQuoteMark } from "../shared/DecorativeQuoteMark.js";
 import { MediaGallery } from "../shared/MediaGallery.js";
+import { getPostArticleAttributes } from "../shared/post-article-attributes.js";
 
 export const QuoteCard: FC<TimelineCardProps> = ({
   post,
@@ -34,18 +35,7 @@ export const QuoteCard: FC<TimelineCardProps> = ({
     <article
       class={articleClass}
       {...(isDetail ? { "data-page": "post" } : {})}
-      data-post
-      data-format="quote"
-      data-post-id={post.id}
-      data-post-slug={post.slug}
-      data-thread-root-id={post.threadRootId ?? post.id}
-      {...(post.pinned ? { "data-post-pinned": "" } : {})}
-      {...(post.pinnedInCollection
-        ? { "data-post-pinned-in-collection": "" }
-        : {})}
-      {...(post.featured ? { "data-post-featured": "" } : {})}
-      data-post-visibility={post.visibility}
-      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
+      {...getPostArticleAttributes(post)}
     >
       {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
       {post.quoteText && (

package/src/ui/feed/ThreadPreview.tsx

@@ -33,15 +33,15 @@ const HERO_DISPLAY = {} as const;
 
 export const ThreadPreview: FC<ThreadPreviewProps> = ({
   rootPost,
-  secondReply,
-  penultimateReply,
+  leadingReplies,
+  trailingReplies,
   latestReply,
   totalReplyCount,
 }) => {
   const { i18n } = useLingui();
   const { hiddenCount } = getThreadPreviewState({
-    secondReply,
-    penultimateReply,
+    leadingReplies,
+    trailingReplies,
     latestReply,
     totalReplyCount,
   });
@@ -72,15 +72,16 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
         "@context: Collapse expanded thread ancestor context in the feed",
     }),
   );
-  const renderedSecondReply =
-    secondReply && secondReply.id !== latestReply.id ? secondReply : undefined;
-  const renderedPenultimateReply =
-    penultimateReply &&
-    penultimateReply.id !== latestReply.id &&
-    penultimateReply.id !== secondReply?.id
-      ? penultimateReply
-      : undefined;
-  const gapHref = renderedSecondReply?.permalink ?? latestReply.permalink;
+  const visibleReplyIds = new Set([latestReply.id]);
+  const dedupeReplies = (replies: typeof leadingReplies) =>
+    replies.filter((reply) => {
+      if (visibleReplyIds.has(reply.id)) return false;
+      visibleReplyIds.add(reply.id);
+      return true;
+    });
+  const renderedLeadingReplies = dedupeReplies(leadingReplies);
+  const renderedTrailingReplies = dedupeReplies(trailingReplies);
+  const gapHref = renderedLeadingReplies[0]?.permalink ?? latestReply.permalink;
 
   // Always render the collapsible shell + toggle: the cap and fade are a
   // constant "this is context" affordance. The toggle's *initial* visibility
@@ -101,15 +102,16 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
     </div>
   );
 
-  const secondReplyItem = renderedSecondReply ? (
-    <div class="thread-item thread-item-context">
-      <TimelineItemFromPost
-        post={renderedSecondReply}
-        mode="feed"
-        display={CONTEXT_DISPLAY}
-      />
-    </div>
-  ) : null;
+  const renderContextReplies = (replies: typeof leadingReplies) =>
+    replies.map((reply) => (
+      <div class="thread-item thread-item-context">
+        <TimelineItemFromPost
+          post={reply}
+          mode="feed"
+          display={CONTEXT_DISPLAY}
+        />
+      </div>
+    ));
 
   const gapItem =
     hiddenCount > 0 ? (
@@ -120,23 +122,13 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
       </div>
     ) : null;
 
-  const penultimateItem = renderedPenultimateReply ? (
-    <div class="thread-item thread-item-context">
-      <TimelineItemFromPost
-        post={renderedPenultimateReply}
-        mode="feed"
-        display={CONTEXT_DISPLAY}
-      />
-    </div>
-  ) : null;
-
   return (
     <div class="thread-group thread-group-preview">
       <div class="thread-context-shell" data-thread-context data-collapsed="">
         {rootItem}
-        {secondReplyItem}
+        {renderContextReplies(renderedLeadingReplies)}
         {gapItem}
-        {penultimateItem}
+        {renderContextReplies(renderedTrailingReplies)}
       </div>
       <button
         type="button"

package/src/ui/feed/TimelineFeed.tsx

@@ -27,8 +27,8 @@ export const TimelineFeedItemContent: FC<TimelineFeedItemContentProps> = ({
   ) : item.threadPreview ? (
     <ThreadPreview
       rootPost={item.post}
-      secondReply={item.threadPreview.secondReply}
-      penultimateReply={item.threadPreview.penultimateReply}
+      leadingReplies={item.threadPreview.leadingReplies}
+      trailingReplies={item.threadPreview.trailingReplies}
       latestReply={item.threadPreview.latestReply}
       totalReplyCount={item.threadPreview.totalReplyCount}
     />