feat(snapshot): credit the post title on text snapshots

packages/shared/src/components/highlights/HighlightItem.tsx

@@ -98,6 +98,7 @@ export const HighlightItem = ({
             <HighlightShareActions
               highlight={highlight}
               source={snapshotSource(post)}
+              title={post.title ?? highlight.headline}
               tldr={tldr}
               tldrRef={tldrRef}
             />

packages/shared/src/features/snapshot/HighlightShareActions.tsx

@@ -36,11 +36,14 @@ export function HighlightShareActions({
   highlight,
   tldr,
   tldrRef,
+  title,
   source,
 }: {
   highlight: PostHighlightFeed;
   tldr: string;
   tldrRef: RefObject<HTMLElement>;
+  /** The article the TLDR summarizes, credited on both cards. */
+  title?: string;
   /** Who wrote the TLDR, credited on both cards. */
   source?: { name: string; image?: string };
 }): ReactElement {
@@ -86,6 +89,7 @@ export function HighlightShareActions({
             ref={cardRef}
             seed={highlight.id}
             source={source}
+            title={title}
           />
         </div>
       )}
@@ -96,6 +100,7 @@ export function HighlightShareActions({
         onShare={logSelectionShare}
         seed={highlight.id}
         source={source}
+        title={title}
       />
     </>
   );

packages/shared/src/features/snapshot/HighlightTextSnapshotCard.tsx

@@ -19,6 +19,8 @@ export interface HighlightTextSnapshotCardProps {
    * leaves the paragraph unmarked rather than guessing at one.
    */
   highlight?: HighlightRange;
+  /** The post the passage came from, so the card says what it is quoting. */
+  title?: string;
   source?: { name: string; image?: string };
   /** The surface's own label, on the logo row. */
   label?: ReactNode;
@@ -29,6 +31,8 @@ export interface HighlightTextSnapshotCardProps {
 const CONTEXT = 'rgba(255, 255, 255, 0.42)';
 /** A marker tint, kept low enough that the bold copy stays the loud part. */
 const MARK_BACKGROUND = 'rgba(217, 126, 254, 0.22)';
+/** A long headline is cut so the passage, not the title, fills the card. */
+const TITLE_LIMIT = 140;
 
 /**
  * The reader's selection shown where it came from: the whole paragraph, set
@@ -45,7 +49,14 @@ const MARK_BACKGROUND = 'rgba(217, 126, 254, 0.22)';
  * unclickable in an image.
  */
 function HighlightTextSnapshotCardComponent(
-  { passage, highlight, source, label, seed }: HighlightTextSnapshotCardProps,
+  {
+    passage,
+    highlight,
+    title,
+    source,
+    label,
+    seed,
+  }: HighlightTextSnapshotCardProps,
   ref: React.Ref<HTMLDivElement>,
 ): ReactElement {
   const trimmed = passage.trim();
@@ -54,6 +65,7 @@ function HighlightTextSnapshotCardComponent(
     highlight.start >= 0 &&
     highlight.end > highlight.start &&
     highlight.end <= trimmed.length;
+  const heading = title && truncateAtWord(title, TITLE_LIMIT);
   const windowed = isValid
     ? windowAroundHighlight(trimmed, highlight)
     : undefined;
@@ -99,8 +111,12 @@ function HighlightTextSnapshotCardComponent(
           </p>
         </div>
 
-        {source?.name && (
-          <SnapshotCredit image={source.image} name={source.name} />
+        {(source?.name || heading) && (
+          <SnapshotCredit
+            image={source?.image}
+            name={source?.name}
+            title={heading}
+          />
         )}
       </div>
     </SnapshotFrame>

packages/shared/src/features/snapshot/SelectionSnapshotBar.tsx

@@ -69,6 +69,8 @@ export interface SelectionShareBarProps {
   link: string;
   /** Seeds the card's gradient and names the downloaded file. */
   seed: string;
+  /** The post the quote was selected from, credited on the card. */
+  title?: string;
   source?: { name: string; image?: string };
   /** The surface's own label on the card's logo row. */
   label?: ReactNode;
@@ -80,6 +82,7 @@ export function SelectionShareBar({
   containerRef,
   link,
   seed,
+  title,
   source,
   label,
   onShare,
@@ -187,6 +190,7 @@ export function SelectionShareBar({
           passage={quote.passage}
           seed={seed}
           source={source}
+          title={title}
         />
       </div>
     </>,
@@ -227,6 +231,7 @@ export function SelectionSnapshotBar({
       onShare={onShare}
       seed={post.id}
       source={snapshotSource(post)}
+      title={post.title}
     />
   );
 }

packages/shared/src/features/snapshot/SnapshotCredit.tsx

@@ -6,8 +6,10 @@ const MUTED = colors.salt['90'];
 const DIVIDER = colors.pepper['10'];
 
 export interface SnapshotCreditProps {
-  name: string;
+  name?: string;
   image?: string;
+  /** The post the copy was lifted from, named above who wrote it. */
+  title?: string;
 }
 
 /**
@@ -21,27 +23,40 @@ export interface SnapshotCreditProps {
 export function SnapshotCredit({
   name,
   image,
+  title,
 }: SnapshotCreditProps): ReactElement {
   return (
     <div
-      className="flex items-center gap-4"
+      className="flex flex-col gap-5"
       style={{
         marginTop: 44,
         paddingTop: 32,
         borderTop: `1px solid ${DIVIDER}`,
       }}
     >
-      {image && (
-        <img
-          src={image}
-          alt=""
-          crossOrigin="anonymous"
-          className="block size-14 rounded-full object-cover"
-        />
+      {title && (
+        <span
+          className="font-bold text-white"
+          style={{ fontSize: 30, lineHeight: 1.3, overflowWrap: 'break-word' }}
+        >
+          {title}
+        </span>
+      )}
+      {name && (
+        <div className="flex items-center gap-4">
+          {image && (
+            <img
+              src={image}
+              alt=""
+              crossOrigin="anonymous"
+              className="block size-14 rounded-full object-cover"
+            />
+          )}
+          <span style={{ color: MUTED, fontSize: 28, lineHeight: 1.2 }}>
+            {name}
+          </span>
+        </div>
       )}
-      <span style={{ color: MUTED, fontSize: 28, lineHeight: 1.2 }}>
-        {name}
-      </span>
     </div>
   );
 }

packages/shared/src/features/snapshot/TextSnapshotButton.spec.tsx

@@ -44,4 +44,12 @@ describe('TextSnapshotButton', () => {
 
     expect(cardCopies()).toBe(1);
   });
+
+  it('credits the post title on the card', () => {
+    renderButton();
+
+    fireEvent.focus(screen.getByLabelText('Snapshot'));
+
+    expect(screen.getByText(post.title as string)).toBeInTheDocument();
+  });
 });

packages/shared/src/features/snapshot/TextSnapshotButton.tsx

@@ -84,6 +84,7 @@ export function TextSnapshotButton({
               ref={cardRef}
               seed={post.id}
               source={snapshotSource(post)}
+              title={post.title}
             />
           </div>,
           document.body,

packages/shared/src/graphql/highlights.ts

@@ -28,11 +28,13 @@ export interface PostHighlightFeed {
     id: string;
     type: string;
     commentsPermalink: string;
+    title?: string;
     summary?: string;
     contentHtml?: string;
     domain?: string;
     source?: HighlightFeedSource;
     sharedPost?: {
+      title?: string;
       summary?: string;
       contentHtml?: string;
       domain?: string;
@@ -123,6 +125,7 @@ export const POST_HIGHLIGHT_FEED_FRAGMENT = gql`
       id
       type
       commentsPermalink
+      title
       summary
       contentHtml
       domain
@@ -131,6 +134,7 @@ export const POST_HIGHLIGHT_FEED_FRAGMENT = gql`
         image
       }
       sharedPost {
+        title
         summary
         contentHtml
         domain