@jant/core 0.6.2 → 0.6.4

package/src/styles/ui.css

@@ -611,12 +611,12 @@
   }
 
   .site-logo-avatar {
-    width: calc(var(--avatar-size) + 2px);
-    height: calc(var(--avatar-size) + 2px);
+    box-sizing: border-box;
+    width: calc(var(--avatar-size) + 4px);
+    height: calc(var(--avatar-size) + 4px);
     border-radius: var(--avatar-radius);
     object-fit: cover;
-    box-shadow: 0 0 0 1px
-      color-mix(in srgb, var(--site-divider) 82%, transparent);
+    border: 1px solid color-mix(in srgb, var(--site-divider) 82%, transparent);
   }
 
   .jant-brand-mark {
@@ -1115,6 +1115,10 @@
     flex: 1 1 18rem;
   }
 
+  .collections-page-heading .page-intro-title-row {
+    align-items: center;
+  }
+
   .collections-page-actions {
     display: flex;
     align-items: center;
@@ -1129,7 +1133,7 @@
   }
 
   .collections-page-action-group[data-collections-toolbar] {
-    gap: 0.2rem;
+    gap: 0.25rem;
   }
 
   .collections-page-toolbar-button {
@@ -1137,13 +1141,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    width: 2.25rem;
+    height: 2.25rem;
     padding: 0;
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: var(--foreground);
+    color: var(--site-text-secondary);
     cursor: pointer;
     transition:
       background-color 0.16s ease,
@@ -1152,41 +1156,15 @@
       border-color 0.16s ease;
   }
 
-  .collections-page-toolbar-button:hover {
-    background: color-mix(in srgb, var(--accent) 42%, transparent);
-  }
-
-  .collections-page-toolbar-button:focus-visible {
-    outline: none;
-    background: color-mix(in srgb, var(--accent) 46%, transparent);
-    box-shadow: 0 0 0 3px
-      color-mix(in srgb, var(--site-accent) 12%, transparent);
-  }
-
-  .collections-page-more-btn {
-    min-width: 2.1rem;
-    width: 2.1rem;
-    height: 2.1rem;
-    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
-    background: color-mix(
-      in srgb,
-      var(--background) 90%,
-      var(--site-page-bg) 10%
-    );
-    color: var(--site-text-secondary);
-    box-shadow: 0 12px 24px -24px rgba(15, 23, 42, 0.26);
-  }
-
-  .collections-page-more-btn:hover,
-  .collections-page-more-btn[aria-expanded="true"] {
-    border-color: color-mix(in srgb, var(--site-accent) 18%, var(--border));
-    background: color-mix(in srgb, var(--accent) 34%, var(--background));
+  .collections-page-toolbar-button:hover,
+  .collections-page-toolbar-button[aria-expanded="true"] {
+    background: var(--accent);
     color: var(--foreground);
   }
 
-  .collections-page-more-btn:focus-visible {
+  .collections-page-toolbar-button:focus-visible {
     outline: none;
-    border-color: color-mix(in srgb, var(--site-accent) 26%, var(--border));
+    background: var(--accent);
     box-shadow: 0 0 0 3px
       color-mix(in srgb, var(--site-accent) 12%, transparent);
   }
@@ -1377,7 +1355,6 @@
     line-height: var(--collection-directory-title-line-height);
     letter-spacing: -0.02em;
     text-wrap: pretty;
-    user-select: all;
   }
 
   .collection-directory-title-marker {
@@ -2210,7 +2187,6 @@
 
   .feed-link-title-link {
     text-decoration: none;
-    user-select: all;
   }
 
   .feed-link-title-link:hover {
@@ -2228,10 +2204,6 @@
     text-wrap: pretty;
   }
 
-  .feed-note-title a {
-    user-select: all;
-  }
-
   .feed-continue-link {
     display: inline-block;
     margin-top: 0.5rem;
@@ -7002,10 +6974,15 @@
     opacity: 0.82;
   }
 
-  /* Single image: constrain to container width */
+  /* Single image: constrain to container width. min-width keeps the preview
+     wide enough for the remove button; a very long image overflows it and is
+     cropped from the top (object-fit: cover) instead of shrinking to a sliver. */
   .compose-attachment:only-child .compose-attachment-img {
     max-width: 100%;
     max-height: min(200px, 22dvh);
+    min-width: 48px;
+    object-fit: cover;
+    object-position: center top;
   }
 
   .compose-attachment:only-child .compose-attachment-preview-fallback {

package/src/ui/feed/ThreadPreview.tsx

@@ -11,7 +11,10 @@ import { useLingui } from "../../i18n/context.js";
 import type { ThreadPreviewProps } from "../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
 import { TimelineItemFromPost } from "./TimelineItem.js";
-import { getThreadPreviewState } from "./thread-preview-state.js";
+import {
+  getThreadPreviewState,
+  threadContextAssumesOverflow,
+} from "./thread-preview-state.js";
 
 const ROOT_CONTEXT_DISPLAY = {
   footer: {
@@ -42,6 +45,10 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
     latestReply,
     totalReplyCount,
   });
+  const assumeOverflow = threadContextAssumesOverflow({
+    rootPost,
+    totalReplyCount,
+  });
   const hiddenPostsLabel = i18n._(
     msg({
       message: "{count, plural, one {# more post} other {# more posts}}",
@@ -75,14 +82,14 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
       : undefined;
   const gapHref = renderedSecondReply?.permalink ?? latestReply.permalink;
 
-  // Always render the collapsible shell for thread previews. Structural
-  // signals (how many ancestor posts exist) aren't a reliable proxy for
-  // visual height — a single long root article will push the hero far
-  // off-screen just as much as several short replies would. The server
-  // assumes overflow (the common case) and renders the cap + fade + toggle
-  // immediately; client-side measurement removes the affordance when the
-  // content actually fits inside the cap, so users never see a no-op
-  // "Show more" button.
+  // Always render the collapsible shell + toggle: the cap and fade are a
+  // constant "this is context" affordance. The toggle's *initial* visibility
+  // is a server-side guess (threadContextAssumesOverflow) — the real rendered
+  // height is unknown until the client measures. Guessing matters because a
+  // 2-post thread's shell holds only the root, and a short root genuinely
+  // fits the cap; rendering the toggle visible anyway makes it flash in then
+  // out on load. Client-side measurement (thread-context.ts) re-measures and
+  // corrects, so the guess only ever affects that first paint.
 
   const rootItem = (
     <div class="thread-item thread-item-context">
@@ -138,6 +145,7 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
         data-label-more={showMoreLabel}
         data-label-less={showLessLabel}
         aria-expanded="false"
+        hidden={!assumeOverflow}
       >
         <span class="thread-context-toggle-label">{showMoreLabel}</span>
         <svg

package/src/ui/feed/__tests__/thread-preview.test.ts

@@ -7,7 +7,10 @@ import { createI18n } from "../../../i18n/i18n.js";
 import type { PostView, TimelineItemView } from "../../../types.js";
 import { CuratedThreadPreview } from "../CuratedThreadPreview.js";
 import { ThreadPreview } from "../ThreadPreview.js";
-import { getThreadPreviewState } from "../thread-preview-state.js";
+import {
+  getThreadPreviewState,
+  threadContextAssumesOverflow,
+} from "../thread-preview-state.js";
 
 function createPostView(overrides: Partial<PostView> = {}): PostView {
   return {
@@ -48,6 +51,13 @@ function renderWithI18n(
   return renderToString(render());
 }
 
+/** The opening tag of the show-more toggle button, for attribute assertions. */
+function toggleTag(html: string): string {
+  return (
+    html.match(/<button[^>]*\bdata-thread-context-toggle\b[^>]*>/)?.[0] ?? ""
+  );
+}
+
 describe("getThreadPreviewState", () => {
   it("has no hidden posts for a 2-post thread", () => {
     const latestReply = createPostView({
@@ -236,13 +246,17 @@ describe("getThreadPreviewState", () => {
     expect(html).toMatch(/data-label-less="[^"]+"/);
   });
 
-  it("still wraps a root-only preview in the shell so the cap applies to long single posts", () => {
-    // root + hero — no second/penultimate/gap. The server can't know the
-    // root's rendered height, so it always renders the shell + toggle and
-    // lets client-side measurement strip them when the root actually fits.
+  it("hides the show-more toggle on first paint for a short lone root that fits the cap", () => {
+    // 2-post thread: the shell holds only the root. A short root genuinely
+    // fits the height cap, so the toggle is rendered hidden to avoid flashing
+    // it in then out. Client-side measurement (thread-context.ts) re-reveals
+    // it if the rendered height actually overflows.
     const html = renderWithI18n(() =>
       ThreadPreview({
-        rootPost: createPostView({ bodyHtml: "<p>Root</p>" }),
+        rootPost: createPostView({
+          bodyHtml: "<p>Root</p>",
+          summary: "Root",
+        }),
         latestReply: createPostView({
           id: "post-2",
           permalink: "/post-2",
@@ -257,10 +271,35 @@ describe("getThreadPreviewState", () => {
     expect(html).toContain("thread-context-shell");
     expect(html).toContain("data-collapsed");
     expect(html).toContain("data-thread-context-toggle");
+    expect(toggleTag(html)).toContain("hidden");
     expect(html).toContain("<p>Root</p>");
     expect(html).toContain("<p>Latest</p>");
   });
 
+  it("shows the show-more toggle on first paint for a long lone root", () => {
+    // 2-post thread with a long root — the shell almost certainly overflows
+    // the cap, so the toggle is rendered visible immediately (no flash).
+    const html = renderWithI18n(() =>
+      ThreadPreview({
+        rootPost: createPostView({
+          bodyHtml: "<p>Root</p>",
+          summary: "word ".repeat(60),
+        }),
+        latestReply: createPostView({
+          id: "post-2",
+          permalink: "/post-2",
+          slug: "post-2",
+          bodyHtml: "<p>Latest</p>",
+          isLastInThread: true,
+        }),
+        totalReplyCount: 1,
+      }),
+    );
+
+    expect(html).toContain("data-thread-context-toggle");
+    expect(toggleTag(html)).not.toContain("hidden");
+  });
+
   it("renders the collapsible shell even when just one extra item precedes the latest reply", () => {
     // root + secondReply + hero — one extra context item. The server can't
     // measure actual height, so it renders the shell assuming overflow (the
@@ -292,6 +331,9 @@ describe("getThreadPreviewState", () => {
     expect(html).toContain("<p>Root</p>");
     expect(html).toContain("<p>Second</p>");
     expect(html).toContain("<p>Latest</p>");
+    // 3-post thread (totalReplyCount 2): the shell stacks 2 cards, so the
+    // toggle is rendered visible on first paint.
+    expect(toggleTag(html)).not.toContain("hidden");
   });
 
   it("points the hidden-posts gap link to the second reply so the detail page opens just above the hidden range", () => {
@@ -352,6 +394,22 @@ describe("getThreadPreviewState", () => {
     );
   });
 
+  it("renders curated thread previews without a collapsible context shell", () => {
+    // Curated previews render each segment in flow — no shell, no toggle —
+    // so the overflow heuristic never applies to them.
+    const post = createPostView({ summary: "Curated note" });
+    const html = renderWithI18n(() =>
+      CuratedThreadPreview({
+        curatedThread: {
+          rootPost: post,
+          segments: [{ post, hiddenBeforeCount: 0, highlighted: true }],
+        },
+      }),
+    );
+
+    expect(html).not.toContain("data-thread-context-toggle");
+  });
+
   it("renders article summaries in curated thread previews", () => {
     const articlePost = createPostView({
       title: "Curated article",
@@ -381,3 +439,70 @@ describe("getThreadPreviewState", () => {
     expect(html).not.toContain('id="continue"');
   });
 });
+
+describe("threadContextAssumesOverflow", () => {
+  it("assumes overflow for 3+ post threads (the shell stacks 2+ cards)", () => {
+    expect(
+      threadContextAssumesOverflow({
+        rootPost: createPostView({ summary: "short" }),
+        totalReplyCount: 2,
+      }),
+    ).toBe(true);
+  });
+
+  it("assumes a short lone root fits the cap (2-post thread)", () => {
+    expect(
+      threadContextAssumesOverflow({
+        rootPost: createPostView({
+          summary: "Took the long way home because the light was good.",
+        }),
+        totalReplyCount: 1,
+      }),
+    ).toBe(false);
+  });
+
+  it("assumes overflow for a long lone root", () => {
+    expect(
+      threadContextAssumesOverflow({
+        rootPost: createPostView({ summary: "x".repeat(200) }),
+        totalReplyCount: 1,
+      }),
+    ).toBe(true);
+  });
+
+  it("assumes overflow for a short lone root that carries media", () => {
+    expect(
+      threadContextAssumesOverflow({
+        rootPost: createPostView({
+          summary: "short",
+          media: [{} as PostView["media"][number]],
+        }),
+        totalReplyCount: 1,
+      }),
+    ).toBe(true);
+  });
+
+  it("assumes overflow for a short lone root with a link preview image", () => {
+    expect(
+      threadContextAssumesOverflow({
+        rootPost: createPostView({
+          format: "link",
+          summary: "short",
+          previewImageUrl: "https://example.com/cover.jpg",
+        }),
+        totalReplyCount: 1,
+      }),
+    ).toBe(true);
+  });
+
+  it("counts plain-text code points, not UTF-16 units, against the limit", () => {
+    // 130 CJK code points — comfortably over the 120 limit even though each
+    // is a single BMP character. Confirms the threshold reads real length.
+    expect(
+      threadContextAssumesOverflow({
+        rootPost: createPostView({ summary: "字".repeat(130) }),
+        totalReplyCount: 1,
+      }),
+    ).toBe(true);
+  });
+});

package/src/ui/feed/thread-preview-state.ts

@@ -22,3 +22,46 @@ export function getThreadPreviewState({
     hiddenCount,
   };
 }
+
+/**
+ * A lone root post shorter than this (plain-text code points) comfortably
+ * fits the thread-context height cap. Pairs with the
+ * `--site-thread-context-max-height` token (160px) in tokens.css — revisit
+ * both together if that cap changes.
+ */
+const SHORT_ROOT_CHAR_LIMIT = 120;
+
+/**
+ * First-paint guess for whether the thread-context shell will overflow its
+ * height cap, used to pick the initial "Show more" toggle visibility.
+ *
+ * The client (thread-context.ts) always re-measures and corrects this, so a
+ * wrong guess costs at most a one-time flash on load — never a wrong final
+ * state. Kept deliberately coarse:
+ *
+ * - 3+ post threads stack 2+ cards in the shell — effectively always overflow.
+ * - A lone root carrying media is tall regardless of its text length.
+ * - Otherwise fall back to a plain-text length threshold. Only clearly short
+ *   roots flip to "fits"; anything at or above the limit keeps the historical
+ *   "assume overflow" default, so this can only remove flashes, never add them.
+ *
+ * @param rootPost - the thread's root post (the only post in a 2-post thread's
+ *   shell)
+ * @param totalReplyCount - replies in the thread; `>= 2` means 3+ posts total
+ * @returns whether to render the toggle visible on first paint
+ */
+export function threadContextAssumesOverflow({
+  rootPost,
+  totalReplyCount,
+}: {
+  rootPost: PostView;
+  totalReplyCount: number;
+}): boolean {
+  if (totalReplyCount >= 2) return true;
+  if (rootPost.media.length > 0 || Boolean(rootPost.previewImageUrl)) {
+    return true;
+  }
+  // `summary` is format-normalized at the viewmodel layer: quote text for
+  // quotes, body text for notes, the URL for bare links.
+  return [...(rootPost.summary ?? "")].length >= SHORT_ROOT_CHAR_LIMIT;
+}

package/src/ui/pages/CollectionsPage.tsx

@@ -11,37 +11,18 @@ import type { CollectionsPageProps } from "../../types.js";
 import { CollectionDirectory } from "../shared/CollectionDirectory.js";
 import { CollectionsManager } from "../shared/CollectionsManager.js";
 
-const countCollections = (items: CollectionsPageProps["items"]) =>
-  items.filter((item) => item.type === "collection" && item.collection).length;
-
 export const CollectionsPage: FC<CollectionsPageProps> = ({
   items,
   isAuthenticated,
   sitePathPrefix = "",
 }) => {
   const { i18n } = useLingui();
-  const collectionCount = countCollections(items);
   const emptyMessage = i18n._(
     msg({
       message: "No collections yet. Start one to organize posts by topic.",
       comment: "@context: Empty state message on collections page",
     }),
   );
-  const collectionCountLabel = `${collectionCount} ${
-    collectionCount === 1
-      ? i18n._(
-          msg({
-            message: "collection",
-            comment: "@context: Singular collection count label",
-          }),
-        )
-      : i18n._(
-          msg({
-            message: "collections",
-            comment: "@context: Plural collection count label",
-          }),
-        )
-  }`;
 
   if (isAuthenticated) {
     return (
@@ -66,9 +47,6 @@ export const CollectionsPage: FC<CollectionsPageProps> = ({
                 )}
               </h1>
             </div>
-            <div class="page-intro-meta-row">
-              <p class="page-intro-meta">{collectionCountLabel}</p>
-            </div>
           </div>
         </header>
 

package/src/ui/shared/CollectionsManager.tsx

@@ -13,9 +13,6 @@ import { getCollectionMutationLabels } from "./collection-management-labels.js";
 const escapeJson = (data: unknown) =>
   JSON.stringify(data).replace(/</g, "\\u003c");
 
-const countCollections = (items: CollectionDirectoryItem[]) =>
-  items.filter((item) => item.type === "collection" && item.collection).length;
-
 export interface CollectionsManagerProps {
   items: CollectionDirectoryItem[];
   sitePathPrefix?: string;
@@ -34,22 +31,6 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
     `${getNewCollectionPath()}?returnTo=${encodeURIComponent(collectionsHref)}`,
     sitePathPrefix,
   );
-  const collectionCount = countCollections(items);
-  const collectionCountLabel = `${collectionCount} ${
-    collectionCount === 1
-      ? i18n._(
-          msg({
-            message: "collection",
-            comment: "@context: Singular collection count label",
-          }),
-        )
-      : i18n._(
-          msg({
-            message: "collections",
-            comment: "@context: Plural collection count label",
-          }),
-        )
-  }`;
   const mutationLabels = getCollectionMutationLabels(i18n);
 
   const labels = {
@@ -59,18 +40,6 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
         comment: "@context: Collections page heading",
       }),
     ),
-    collectionSingular: i18n._(
-      msg({
-        message: "collection",
-        comment: "@context: Singular collection count label",
-      }),
-    ),
-    collectionPlural: i18n._(
-      msg({
-        message: "collections",
-        comment: "@context: Plural collection count label",
-      }),
-    ),
     organize: i18n._(
       msg({
         message: "Organize",
@@ -164,11 +133,6 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
         <div class="collections-page-heading page-intro">
           <div class="page-intro-title-row">
             <h1 class="page-intro-title">{labels.collectionsTitle}</h1>
-          </div>
-          <div class="page-intro-meta-row">
-            <p class="page-intro-meta" data-collections-count>
-              {collectionCountLabel}
-            </p>
             <div class="collections-page-actions">
               <div
                 class="collections-page-action-group"
@@ -202,14 +166,15 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
+                    width="18"
+                    height="18"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="currentColor"
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round"
+                    aria-hidden="true"
                   >
                     <path d="M12 5v14" />
                     <path d="M5 12h14" />
@@ -218,7 +183,7 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
                 <div class="relative">
                   <button
                     type="button"
-                    class="collections-page-toolbar-button collections-page-more-btn"
+                    class="collections-page-toolbar-button"
                     aria-label={labels.moreActions}
                     aria-expanded="false"
                     aria-haspopup="menu"
@@ -227,8 +192,8 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
                   >
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
+                      width="18"
+                      height="18"
                       viewBox="0 0 24 24"
                       fill="currentColor"
                     >

package/dist/app-CUZaVgsC.js

@@ -1,6 +0,0 @@
-import "./url-XF0GbKGO.js";
-import { t as createApp } from "./app-Ct9c4zYF.js";
-import "./export-O2w3AsZX.js";
-import "./env-CoSe-1y4.js";
-import "./github-sync-D49RADci.js";
-export { createApp };