@jant/core 0.6.15 → 0.6.16

package/src/types/entities.ts

@@ -66,8 +66,13 @@ export interface Post {
   previewProvider: string | null;
   replyToId: string | null;
   threadId: string;
+  /** Reply published without announcing it on Latest. Always false on roots. */
+  quietReply: boolean;
   publishedAt: number | null;
+  /** Root only: newest published post in the Thread, quiet replies excluded. */
   lastActivityAt: number;
+  /** Root only: newest published post in the Thread, quiet replies included. */
+  threadUpdatedAt: number;
   createdAt: number;
   updatedAt: number;
 }

package/src/types/props.ts

@@ -52,6 +52,16 @@ export type ArchiveVisibility =
 /** View mode for the archive page. */
 export type ArchiveView = "grid" | "list";
 
+/**
+ * Time axis for the archive page.
+ *
+ * `published` (default) orders and buckets by when a thread was first
+ * published — the stable historical record. `updated` switches the whole axis
+ * to thread activity, so a thread moves to the month it last gained a post.
+ * Edits are not activity.
+ */
+export type ArchiveSort = "published" | "updated";
+
 /** Filters currently active on the archive page */
 export interface ArchiveFilters {
   year?: number;
@@ -65,6 +75,8 @@ export interface ArchiveFilters {
   hasReplies?: boolean;
   visibility?: ArchiveVisibility;
   view?: ArchiveView;
+  /** Omitted when the default `published` axis is active */
+  sort?: ArchiveSort;
 }
 
 /** Props for the archive page component */

package/src/types/views.ts

@@ -102,6 +102,12 @@ export interface PostView {
   threadRootId?: string;
   /** Whether this post is the last (most recent) in its thread. Controls reply button visibility. */
   isLastInThread: boolean;
+  /**
+   * TypeID of an unpublished draft that already ends this thread, set only for
+   * the signed-in author on surfaces that do not render drafts. Replying here
+   * would fork the chain, so the reply affordance resumes that draft instead.
+   */
+  draftTailId?: string;
   /** Number of published replies in this thread when relevant to the current view. */
   replyCount?: number;
 

package/src/ui/compose/ComposeDialog.tsx

@@ -126,8 +126,9 @@ export const ComposeForm: FC<ComposeFormProps> = ({
     ),
     titlePlaceholder: i18n._(
       msg({
-        message: "Title",
-        comment: "@context: Compose note title placeholder",
+        message: "Untitled",
+        comment:
+          "@context: Compose note title placeholder. States what the note is while the field is empty rather than asking for a title — untitled notes are a normal kind of note here, and Archive files them under this same word.",
       }),
     ),
     bodyPlaceholder: i18n._(
@@ -237,7 +238,7 @@ export const ComposeForm: FC<ComposeFormProps> = ({
     title: i18n._(
       msg({
         message: "Title",
-        comment: "@context: Compose toolbar - title tooltip",
+        comment: "@context: Compose toolbar - show or hide the title field",
       }),
     ),
     fullscreen: i18n._(
@@ -649,9 +650,9 @@ export const ComposeForm: FC<ComposeFormProps> = ({
     ),
     publishDateSummaryNow: i18n._(
       msg({
-        message: "Publish now",
+        message: "Now",
         comment:
-          "@context: Compose summary shown near the submit controls when an edited post no longer has a custom publish date",
+          "@context: Value shown on a post's date control when it will publish at the current time",
       }),
     ),
     publishDateSummaryAction: i18n._(
@@ -688,9 +689,9 @@ export const ComposeForm: FC<ComposeFormProps> = ({
     ),
     publishSlugSummaryAuto: i18n._(
       msg({
-        message: "Auto link",
+        message: "/…",
         comment:
-          "@context: Compose summary shown near the submit controls when a manual custom link is cleared",
+          "@context: Value shown on a post's permalink control when the link is generated automatically — a stand-in for the path the server will assign. Sits next to real permalinks rendered as /my-post, so keep the leading slash",
       }),
     ),
     publishSlugSummaryAction: i18n._(
@@ -794,24 +795,24 @@ export const ComposeForm: FC<ComposeFormProps> = ({
           "@context: Toast shown when a local draft is restored on compose open",
       }),
     ),
-    newThread: i18n._(
+    closeCompose: i18n._(
       msg({
-        message: "New Thread",
+        message: "Close compose",
         comment:
-          "@context: Compose dialog header title when composing a thread",
+          "@context: Post options row that leaves the composer; prompts to save a draft first if there is unsaved work",
       }),
     ),
-    replyTitle: i18n._(
+    editing: i18n._(
       msg({
-        message: "Reply",
+        message: "Editing",
         comment:
-          "@context: Compose dialog header title when replying to a post",
+          "@context: Marker above the composer when changing a post that is already published",
       }),
     ),
-    editTitle: i18n._(
+    composeDialogLabel: i18n._(
       msg({
-        message: "Edit",
-        comment: "@context: Compose dialog header title when editing a post",
+        message: "Compose",
+        comment: "@context: Accessible name for the compose dialog",
       }),
     ),
     slashHint: i18n._(
@@ -920,7 +921,6 @@ export const ComposeForm: FC<ComposeFormProps> = ({
     >
       {/* SSR fallback skeleton */}
       <div class="compose-dialog-inner">
-        <div class="compose-dialog-header" />
         <div class="compose-body skel-section-md" />
       </div>
     </jant-compose-dialog>

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/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/pages/ArchivePage.tsx

@@ -62,6 +62,7 @@ function buildFilterUrl(
     );
   }
   if (merged.view && merged.view !== "grid") params.set("view", merged.view);
+  if (merged.sort === "updated") params.set("sort", "updated");
 
   const qs = params.toString();
   return qs
@@ -127,7 +128,7 @@ function getFormatLabelPlural(format: string): string {
 const FORMAT_ICONS: Record<string, string> = {
   note: "notepad-text",
   link: "external-link",
-  quote: "text-quote",
+  quote: "quote",
 };
 
 /** Icon name mapping for media kinds. */
@@ -463,34 +464,118 @@ const ChipMediaSelect: FC<{
 // View Toggle
 // =============================================================================
 
+/**
+ * One option in a toolbar toggle. `label` is used for both the hover tooltip
+ * and the accessible name — an icon-only control has to explain itself to
+ * both audiences, and one string keeps them from drifting apart.
+ */
+const ToggleOption: FC<{
+  href: string;
+  icon: string;
+  label: string;
+  active: boolean;
+}> = ({ href, icon, label, active }) => (
+  <a
+    href={href}
+    class={`archive-view-btn${active ? " archive-view-btn-active" : ""}`}
+    role="radio"
+    aria-checked={active ? "true" : "false"}
+    aria-label={label}
+    title={label}
+  >
+    <Icon name={icon} class="[&>svg]:size-4" />
+  </a>
+);
+
 const ViewToggle: FC<{
   filters: ArchiveFilters;
   sitePathPrefix?: string;
 }> = ({ filters, sitePathPrefix = "" }) => {
+  const { i18n } = useLingui();
   const currentView: ArchiveView = filters.view ?? "grid";
-  const gridUrl = buildFilterUrl(filters, { view: undefined }, sitePathPrefix);
-  const listUrl = buildFilterUrl(filters, { view: "list" }, sitePathPrefix);
 
   return (
-    <div class="archive-view-toggle" role="radiogroup" aria-label="View mode">
-      <a
-        href={gridUrl}
-        class={`archive-view-btn${currentView === "grid" ? " archive-view-btn-active" : ""}`}
-        role="radio"
-        aria-checked={currentView === "grid" ? "true" : "false"}
-        aria-label="Grid view"
-      >
-        <Icon name="layout-grid" class="[&>svg]:size-4" />
-      </a>
-      <a
-        href={listUrl}
-        class={`archive-view-btn${currentView === "list" ? " archive-view-btn-active" : ""}`}
-        role="radio"
-        aria-checked={currentView === "list" ? "true" : "false"}
-        aria-label="List view"
-      >
-        <Icon name="list" class="[&>svg]:size-4" />
-      </a>
+    <div
+      class="archive-view-toggle"
+      role="radiogroup"
+      aria-label={i18n._(
+        msg({
+          message: "View mode",
+          comment: "@context: Archive grid/list toggle group label",
+        }),
+      )}
+    >
+      <ToggleOption
+        href={buildFilterUrl(filters, { view: undefined }, sitePathPrefix)}
+        icon="layout-grid"
+        active={currentView === "grid"}
+        label={i18n._(
+          msg({
+            message: "Show as a grid of tiles",
+            comment: "@context: Archive view option - grid",
+          }),
+        )}
+      />
+      <ToggleOption
+        href={buildFilterUrl(filters, { view: "list" }, sitePathPrefix)}
+        icon="list"
+        active={currentView === "list"}
+        label={i18n._(
+          msg({
+            message: "Show as a list with full posts",
+            comment: "@context: Archive view option - list",
+          }),
+        )}
+      />
+    </div>
+  );
+};
+
+/**
+ * Time-axis toggle. Sits next to the view toggle because it changes how the
+ * page is arranged, not which threads it contains — unlike the filter chips.
+ */
+const SortToggle: FC<{
+  filters: ArchiveFilters;
+  sitePathPrefix?: string;
+}> = ({ filters, sitePathPrefix = "" }) => {
+  const { i18n } = useLingui();
+  const sortsByActivity = filters.sort === "updated";
+
+  return (
+    <div
+      class="archive-view-toggle"
+      role="radiogroup"
+      aria-label={i18n._(
+        msg({
+          message: "Sort order",
+          comment: "@context: Archive sort toggle group label",
+        }),
+      )}
+    >
+      <ToggleOption
+        href={buildFilterUrl(filters, { sort: undefined }, sitePathPrefix)}
+        icon="clock"
+        active={!sortsByActivity}
+        label={i18n._(
+          msg({
+            message: "Sort by when each thread was published",
+            comment: "@context: Archive sort option - newest published first",
+          }),
+        )}
+      />
+      <ToggleOption
+        href={buildFilterUrl(filters, { sort: "updated" }, sitePathPrefix)}
+        icon="history"
+        active={sortsByActivity}
+        label={i18n._(
+          msg({
+            message: "Sort by when each thread was last added to",
+            comment:
+              "@context: Archive sort option - threads that recently gained a post first",
+          }),
+        )}
+      />
     </div>
   );
 };
@@ -948,7 +1033,10 @@ const FilterBar: FC<{
         )}
       </div>
 
-      <ViewToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+      <div class="archive-toolbar-toggles">
+        <SortToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+        <ViewToggle filters={filters} sitePathPrefix={sitePathPrefix} />
+      </div>
     </div>
   );
 };
@@ -1258,6 +1346,7 @@ export const ArchivePage: FC<ArchivePageProps> = ({
 }) => {
   const { i18n } = useLingui();
   const currentView: ArchiveView = filters.view ?? "grid";
+  const sortsByActivity = filters.sort === "updated";
   const paginationBaseUrl = buildFilterUrl(filters, {}, sitePathPrefix);
   const totalCountUnit =
     totalCount === 1
@@ -1295,6 +1384,18 @@ export const ArchivePage: FC<ArchivePageProps> = ({
         >
           <span class="archive-page-summary-count">{totalCount}</span>{" "}
           {totalCountUnit}
+          {sortsByActivity && (
+            <>
+              {" · "}
+              {i18n._(
+                msg({
+                  message: "newest changes first",
+                  comment:
+                    "@context: Archive page meta note explaining the active sort order",
+                }),
+              )}
+            </>
+          )}
           {feedHref && (
             <>
               {" "}
@@ -1347,7 +1448,13 @@ export const ArchivePage: FC<ArchivePageProps> = ({
                 <div key={`grid-${group.year}-${group.month}`} class="contents">
                   <ArchiveMonthHeader
                     class={`archive-month-header${groupIndex > 0 ? " archive-month-header-spaced" : ""}`}
-                    label={group.label}
+                    // Not translated, on purpose: `group.label` is built with
+                    // a hardcoded en-US month name, so a translated wrapper
+                    // would only produce "更新于 August 2026". Both halves
+                    // become translatable together, or neither does.
+                    label={
+                      sortsByActivity ? `Updated ${group.label}` : group.label
+                    }
                     count={group.totalCount}
                   />
                   {group.posts.map((post) => (

package/src/ui/pages/__tests__/ArchivePage.test.tsx

@@ -107,10 +107,73 @@ describe("ArchivePage", () => {
     expect(html).toContain("Single posts");
   });
 
+  it("uses a recognizable quote mark for the quote format filter", () => {
+    const html = renderArchivePage({ filters: { format: "quote" } });
+
+    expect(html).toContain('class="lucide lucide-quote"');
+    expect(html).not.toContain('class="lucide lucide-text-quote"');
+  });
+
   it("renders the feed button only when a feed href is provided", () => {
     expect(renderArchivePage()).not.toContain('class="feed-link"');
     expect(renderArchivePage({ feedHref: "/archive/feed" })).toContain(
       'class="feed-link"',
     );
   });
+
+  it("offers the updated sort and marks published as the default", () => {
+    const html = renderArchivePage();
+
+    expect(html).toContain('aria-label="Sort order"');
+    expect(html).toContain("sort=updated");
+    expect(html).toContain(
+      '<a href="/archive" class="archive-view-btn archive-view-btn-active" role="radio" aria-checked="true" aria-label="Sort by when each thread was published"',
+    );
+  });
+
+  it("marks the updated sort active and keeps a way back", () => {
+    const html = renderArchivePage({ filters: { sort: "updated" } });
+
+    expect(html).toContain(
+      '<a href="/archive?sort=updated" class="archive-view-btn archive-view-btn-active" role="radio" aria-checked="true" aria-label="Sort by when each thread was last added to"',
+    );
+    expect(html).toContain('<a href="/archive" class="archive-view-btn"');
+  });
+
+  // Icon-only controls need a hover tooltip too — aria-label only reaches
+  // assistive tech, and a bare clock/history pair is unreadable without one.
+  it("gives every toolbar toggle a tooltip matching its accessible name", () => {
+    const html = renderArchivePage();
+
+    for (const label of [
+      "Sort by when each thread was published",
+      "Sort by when each thread was last added to",
+      "Show as a grid of tiles",
+      "Show as a list with full posts",
+    ]) {
+      expect(html).toContain(`aria-label="${label}" title="${label}"`);
+    }
+  });
+
+  it("labels month headers as update months in the updated sort", () => {
+    expect(renderArchivePage()).toContain(
+      '<span class="archive-month-header-label">March 2026</span>',
+    );
+
+    const updated = renderArchivePage({ filters: { sort: "updated" } });
+    expect(updated).toContain(
+      '<span class="archive-month-header-label">Updated March 2026</span>',
+    );
+    expect(updated).toContain("newest changes first");
+  });
+
+  it("keeps the sort selection in filter and view links", () => {
+    const html = renderArchivePage({
+      filters: { sort: "updated" },
+      availableCollections: [{ slug: "tech", title: "Tech" }],
+    });
+
+    expect(html).toContain("collection=tech&amp;sort=updated");
+    expect(html).toContain("view=list&amp;sort=updated");
+  });
 });

package/src/ui/shared/DraftPreviewBar.tsx

@@ -2,8 +2,12 @@ import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
 
+interface DraftPreviewBarProps {
+  editHref: string;
+}
+
 /** Persistent page chrome that distinguishes an authenticated draft preview. */
-export const DraftPreviewBar: FC = () => {
+export const DraftPreviewBar: FC<DraftPreviewBarProps> = ({ editHref }) => {
   const { i18n } = useLingui();
   const label = i18n._(
     msg({
@@ -15,18 +19,30 @@ export const DraftPreviewBar: FC = () => {
   return (
     <aside class="draft-preview-bar" aria-label={label} data-preview-status>
       <div class="draft-preview-bar-inner">
-        <span class="draft-preview-bar-label">
-          <span class="draft-preview-bar-dot" aria-hidden="true" />
-          {label}
-        </span>
-        <span class="draft-preview-bar-description">
+        <div class="draft-preview-bar-copy">
+          <span class="draft-preview-bar-label">
+            <span class="draft-preview-bar-dot" aria-hidden="true" />
+            {label}
+          </span>
+          <span class="draft-preview-bar-description">
+            {i18n._(
+              msg({
+                message: "This post isn’t published.",
+                comment:
+                  "@context: Explanation in the draft preview status bar",
+              }),
+            )}
+          </span>
+        </div>
+        <a class="draft-preview-bar-action" href={editHref}>
           {i18n._(
             msg({
-              message: "This post isn’t published.",
-              comment: "@context: Explanation in the draft preview status bar",
+              message: "Edit draft",
+              comment:
+                "@context: Action in the draft preview status bar that opens the editor",
             }),
           )}
-        </span>
+        </a>
       </div>
     </aside>
   );

package/src/ui/shared/PostFooter.tsx

@@ -97,7 +97,11 @@ export const CompactCollectionTags: FC<{
 interface PostPublishedLinkProps {
   post: Pick<
     PostView,
-    "permalink" | "publishedAt" | "publishedAtFormatted" | "publishedAtTime"
+    | "permalink"
+    | "publishedAt"
+    | "publishedAtFormatted"
+    | "publishedAtTime"
+    | "status"
   >;
   className: string;
 }
@@ -107,17 +111,33 @@ export const PostPublishedLink: FC<PostPublishedLinkProps> = ({
   className,
 }) => {
   const { i18n } = useLingui();
-  const publishedLabel = i18n._(
-    msg({
-      message: "Published on {date} at {time}",
-      comment:
-        "@context: Tooltip text for the published timestamp in post metadata",
-    }),
-    {
-      date: post.publishedAtFormatted,
-      time: post.publishedAtTime,
-    },
-  );
+  // A draft has never been published; `publishedAt` is standing in for its
+  // last edit. The link still matters (it is how you open the post), so keep
+  // it and tell the truth about what the date means.
+  const publishedLabel =
+    post.status === "draft"
+      ? i18n._(
+          msg({
+            message: "Last edited on {date} at {time}",
+            comment:
+              "@context: Tooltip text for the timestamp on an unpublished draft",
+          }),
+          {
+            date: post.publishedAtFormatted,
+            time: post.publishedAtTime,
+          },
+        )
+      : i18n._(
+          msg({
+            message: "Published on {date} at {time}",
+            comment:
+              "@context: Tooltip text for the published timestamp in post metadata",
+          }),
+          {
+            date: post.publishedAtFormatted,
+            time: post.publishedAtTime,
+          },
+        );
 
   return (
     <a href={post.permalink} class={className}>
@@ -180,6 +200,9 @@ export const PostFooter: FC<PostFooterProps> = ({ post, detail, display }) => {
         );
   const safeExternalUrl =
     post.format === "link" && post.url ? sanitizeUrl(post.url) : "";
+  // Drafts get an ordinary footer — the Draft badge above already says what
+  // they are, and their lifecycle actions live in the post menu next to Edit
+  // and Delete rather than in a bespoke button row.
   const showTimestamp = !display?.hideTimestamp;
   const hideActions = !!display?.hideActions;
   const hideReply = !!display?.hideReply;

package/src/ui/shared/custom-icons.ts

@@ -106,6 +106,11 @@ export const CUSTOM_SYMBOLS: Record<string, CustomSymbol> = {
     viewBox: "0 0 24 24",
     inner: `<line ${STROKE_POST_BADGE} x1="12" x2="12" y1="17" y2="22" /><path ${STROKE_POST_BADGE} d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" />`,
   },
+  // Post status badge: draft (lucide pencil-line, thin 1.75 stroke).
+  "post-status-draft": {
+    viewBox: "0 0 24 24",
+    inner: `<path ${STROKE_POST_BADGE} d="M12 20h9" /><path ${STROKE_POST_BADGE} d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z" />`,
+  },
   // Post status badge: private (lucide eye-off, thin 1.75 stroke).
   "post-status-private": {
     viewBox: "0 0 24 24",