feat(agent): split-screen agent workspace wired to the interest history

packages/shared/__tests__/helpers/media.ts

@@ -0,0 +1,28 @@
+// The global stub in `setup.ts` never matches and carries only the legacy
+// `addListener`, which libraries calling `addEventListener` blow up on.
+export const mockMatchMedia = (
+  matches: (query: string) => boolean = () => false,
+): void => {
+  (global.matchMedia as jest.Mock).mockImplementation((query: string) => ({
+    media: query,
+    matches: matches(query),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+    onchange: null,
+  }));
+};
+
+export const laptopQuery = '(min-width: 1020px)';
+export const noHoverQuery = '(hover: none)';
+
+// A 1020px window matches every width breakpoint at or below laptop, so
+// answering only the laptop query reports a desktop that is not a tablet.
+export const mockDesktop = (): void =>
+  mockMatchMedia((query) => {
+    const [, min] = /min-width:\s*(\d+)px/.exec(query) ?? [];
+
+    return !!min && Number(min) <= 1020;
+  });

packages/shared/package.json

@@ -125,6 +125,7 @@
     "@tiptap/extension-placeholder": "^3.22.5",
     "@tiptap/react": "^3.22.5",
     "@tiptap/starter-kit": "^3.22.5",
+    "border-beam": "1.3.0",
     "check-password-strength": "^2.0.10",
     "cmdk": "^1.0.0",
     "edge-aura": "0.6.0",

packages/shared/src/components/cards/article/ArticleList.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import type { NextRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import post from '../../../../__tests__/fixture/post';
+import { TestBootProvider } from '../../../../__tests__/helpers/boot';
+import { mockDesktop } from '../../../../__tests__/helpers/media';
+import { ArticleList } from './ArticleList';
+
+jest.mock('next/router', () => ({ useRouter: jest.fn() }));
+
+const renderCard = (isNarrow?: boolean) =>
+  render(
+    <TestBootProvider client={new QueryClient()}>
+      <ArticleList post={post} isNarrow={isNarrow} />
+    </TestBootProvider>,
+  );
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockDesktop();
+  jest
+    .mocked(useRouter)
+    .mockImplementation(() => ({ pathname: '/' } as unknown as NextRouter));
+});
+
+describe('ArticleList in a narrow column', () => {
+  it('stacks the cover under the title', () => {
+    renderCard(true);
+
+    // Found by alt text: the testid sits on the wrapper, not on the image.
+    const cover = screen.getByAltText('Post Cover image');
+
+    expect(cover).toHaveClass('!w-full');
+    expect(cover).toHaveClass('self-stretch');
+  });
+
+  it('drops the gutter that separated the title from the cover beside it', () => {
+    renderCard(true);
+
+    expect(screen.getByText(post.title as string).closest('.mr-4')).toBeNull();
+  });
+
+  it('leaves the wide card exactly as it was', () => {
+    renderCard();
+
+    const cover = screen.getByAltText('Post Cover image');
+
+    expect(cover).not.toHaveClass('!w-full');
+    expect(
+      screen.getByText(post.title as string).closest('.mr-4'),
+    ).not.toBeNull();
+  });
+});

packages/shared/src/components/cards/article/ArticleList.tsx

@@ -45,7 +45,14 @@ export const ArticleList = forwardRef(function ArticleList(
     domProps = {},
     onShare,
     eagerLoadImage = false,
-  }: PostCardProps,
+    isNarrow = false,
+  }: PostCardProps & {
+    /**
+     * Takes the phone's stacked layout at any viewport, for a card in a dragged
+     * column the window's breakpoints know nothing about.
+     */
+    isNarrow?: boolean;
+  },
   ref: Ref<HTMLElement>,
 ): ReactElement {
   const { className, style } = domProps;
@@ -55,6 +62,7 @@ export const ArticleList = forwardRef(function ArticleList(
   const onPostCardClick = (event: React.MouseEvent<HTMLAnchorElement>) =>
     onPostClick?.(post, event);
   const isMobile = useViewSize(ViewSize.MobileL);
+  const isStacked = isMobile || isNarrow;
   const { showFeedback } = usePostFeedback({ post });
   const { isHidden, content: hiddenPanel } = useHiddenFeedbackPanel(post);
   const isFeedPreview = useFeedPreviewMode();
@@ -165,8 +173,13 @@ export const ArticleList = forwardRef(function ArticleList(
               )}
             </PostCardHeader>
 
-            <CardContent>
-              <div className="mr-4 flex flex-1 flex-col">
+            <CardContent className={isNarrow ? '!flex-col' : undefined}>
+              <div
+                className={classNames(
+                  'flex flex-1 flex-col',
+                  !isNarrow && 'mr-4',
+                )}
+              >
                 <CardTitle
                   lineClamp={undefined}
                   className={post.read ? 'text-text-tertiary' : undefined}
@@ -181,7 +194,7 @@ export const ArticleList = forwardRef(function ArticleList(
                   <PostTags post={post} />
                 </div>
                 <div className="hidden flex-1 tablet:flex" />
-                {!isMobile && actionButtons}
+                {!isStacked && actionButtons}
               </div>
 
               <CardCoverList
@@ -194,19 +207,24 @@ export const ArticleList = forwardRef(function ArticleList(
                   className: classNames(
                     'mobileXXL:self-start',
                     !isVideoType && 'mt-4',
+                    // `mobileXL:w-60` on the image would otherwise cap it.
+                    isNarrow && '!w-full self-stretch',
                   ),
                   ...(eagerLoadImage
                     ? HIGH_PRIORITY_IMAGE_PROPS
                     : { loading: 'lazy' }),
                   src: post.image,
                 }}
                 videoProps={{
-                  className: 'mt-4 mobileXL:w-40 mobileXXL:w-56 !h-fit',
+                  className: classNames(
+                    'mt-4 !h-fit mobileXL:w-40 mobileXXL:w-56',
+                    isNarrow && '!w-full',
+                  ),
                 }}
               />
             </CardContent>
           </CardContainer>
-          {isMobile && actionButtons}
+          {isStacked && actionButtons}
           {children}
         </>
       )}

packages/shared/src/components/notifications/utils.ts

@@ -219,6 +219,7 @@ export const notificationTypeTheme: Partial<Record<NotificationType, string>> =
     [NotificationType.UserAwardThanks]: 'text-brand-default',
     [NotificationType.BriefingReady]: 'text-brand-default',
     [NotificationType.DigestReady]: 'text-brand-default',
+    [NotificationType.InterestContentBatch]: 'text-brand-default',
     [NotificationType.UserFollow]: 'text-brand-default',
   };
 

packages/shared/src/features/giveback/useGivebackMotion.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
-const usePrefersReducedMotion = (): boolean => {
+export const usePrefersReducedMotion = (): boolean => {
   const [reduced, setReduced] = useState(false);
 
   useEffect(() => {