feat: layout v2 dual-sidebar experiment

packages/extension/src/newtab/ExtensionTopBanners.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { TopHero } from '@dailydotdev/shared/src/components/marketing/banners/HeroBottomBanner';
+import { useReadingReminderHero } from '@dailydotdev/shared/src/hooks/notifications/useReadingReminderHero';
+
+export const ExtensionTopBanners = (): ReactElement | null => {
+  // The extension's top hero row is the only place this card appears
+  // on the new tab, so we evaluate the reminder regardless of viewport
+  // (the webapp-only `requireMobile` heuristic would hide it on desktop
+  // new tabs, which is where the extension lives).
+  const reminder = useReadingReminderHero({ requireMobile: false });
+
+  if (!reminder.shouldShow) {
+    return null;
+  }
+
+  return (
+    <div className="mx-4 mb-3 grid grid-cols-1 gap-3 laptop:mx-0">
+      <TopHero
+        title={reminder.title}
+        subtitle={reminder.subtitle}
+        onCtaClick={() => {
+          reminder.onEnable();
+        }}
+        onClose={() => {
+          reminder.onDismiss();
+        }}
+      />
+    </div>
+  );
+};

packages/extension/src/newtab/MainFeedPage.tsx

@@ -31,6 +31,7 @@ import { isFocusActiveAt } from '@dailydotdev/shared/src/features/customizeNewTa
 import { normaliseNewTabMode } from '@dailydotdev/shared/src/features/customizeNewTab/lib/newTabMode';
 import { DndBanner } from '@dailydotdev/shared/src/components/DndBanner';
 import ShortcutLinks from './ShortcutLinks/ShortcutLinks';
+import { ExtensionTopBanners } from './ExtensionTopBanners';
 import { CompanionPopupButton } from '../companion/CompanionPopupButton';
 import { useCompanionSettings } from '../companion/useCompanionSettings';
 import { getDefaultLink } from './dnd';
@@ -198,6 +199,7 @@ const MainFeedPageInner = ({
           additionalButtons={
             !loadingUser && !optOutCompanion && <CompanionPopupButton />
           }
+          topBanner={<ExtensionTopBanners />}
         >
           <FeedLayoutProvider>
             <MainFeedLayout

packages/shared/src/components/BookmarkFeedLayout.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, {
   useCallback,
   useContext,
@@ -21,11 +21,12 @@ import SearchEmptyScreen from './SearchEmptyScreen';
 import type { FeedProps } from './Feed';
 import Feed from './Feed';
 import BookmarkEmptyScreen from './BookmarkEmptyScreen';
-import type { ButtonProps } from './buttons/Button';
 import { Button, ButtonSize, ButtonVariant } from './buttons/Button';
 import { ShareIcon, SortIcon } from './icons';
 import { generateQueryKey, OtherFeedPage, RequestKey } from '../lib/query';
 import { useFeedLayout, useViewSize, ViewSize } from '../hooks';
+import { useLayoutVariant } from '../hooks/layout/useLayoutVariant';
+import { PageHeader } from './layout/PageHeader';
 import { BookmarkSection } from './sidebar/sections/BookmarkSection';
 import PlusMobileEntryBanner from './marketing/banners/PlusMobileEntryBanner';
 import { DigestBookmarkBanner } from './marketing/banners/DigestBookmarkBanner';
@@ -60,17 +61,6 @@ const SharedBookmarksModal = dynamic(
     ),
 );
 
-const ShareBookmarksButton = ({
-  children,
-  ...props
-}: PropsWithChildren<
-  Pick<ButtonProps<'button'>, 'className' | 'onClick' | 'icon'>
->) => (
-  <Button variant={ButtonVariant.Secondary} {...props}>
-    {children}
-  </Button>
-);
-
 const bookmarkSortOptions = [
   { label: 'Newest first', value: BookmarkSort.TimeDesc },
   { label: 'Oldest first', value: BookmarkSort.TimeAsc },
@@ -103,6 +93,8 @@ export default function BookmarkFeedLayout({
     DEFAULT_BOOKMARK_SORT_INDEX,
   );
   const isLaptop = useViewSize(ViewSize.Laptop);
+  const { isV2 } = useLayoutVariant();
+  const isV2Laptop = isV2;
   const isSearchResults = !!searchQuery;
   const isFolderPage = !!folder || isReminderOnly;
   const listId = folder?.id;
@@ -190,54 +182,109 @@ export default function BookmarkFeedLayout({
     return null;
   }
 
+  const sortDropdown = !isSearchResults && (
+    <Dropdown
+      className={{
+        label: 'hidden',
+        chevron: 'hidden',
+        button: isV2Laptop ? undefined : '!px-1',
+        container: isV2Laptop ? 'flex' : 'ml-4 flex',
+      }}
+      shouldIndicateSelected
+      icon={<SortIcon size={isV2Laptop ? IconSize.XSmall : IconSize.Medium} />}
+      iconOnly
+      selectedIndex={selectedSort}
+      options={bookmarkSortOptionLabels}
+      onChange={(_, index) => setSelectedSort(index)}
+      buttonVariant={isV2Laptop ? ButtonVariant.Tertiary : ButtonVariant.Float}
+      buttonSize={isV2Laptop ? ButtonSize.Small : ButtonSize.Medium}
+      drawerProps={{ displayCloseButton: true }}
+    />
+  );
+  const shareButton = !isFolderPage && (
+    <Button
+      aria-label="Share bookmarks"
+      className={isV2Laptop ? undefined : 'ml-4 flex'}
+      icon={
+        <ShareIcon
+          size={isV2Laptop ? IconSize.XSmall : IconSize.Medium}
+          secondary={showSharedBookmarks}
+          aria-hidden
+        />
+      }
+      onClick={() => setShowSharedBookmarks(true)}
+      size={isV2Laptop ? ButtonSize.Small : ButtonSize.Medium}
+      variant={isV2Laptop ? ButtonVariant.Tertiary : ButtonVariant.Secondary}
+    >
+      {isLaptop ? <span>Share bookmarks</span> : null}
+    </Button>
+  );
+  const folderMenu = folder && !isReminderOnly && (
+    <BookmarkFolderContextMenu
+      folder={folder}
+      buttonProps={
+        isV2Laptop
+          ? {
+              className: 'flex',
+              size: ButtonSize.Small,
+              variant: ButtonVariant.Tertiary,
+            }
+          : undefined
+      }
+    />
+  );
+  const headerTitleSlot = isV2Laptop ? (
+    <div className="flex min-w-0 flex-1 items-center gap-3">
+      <Typography
+        bold
+        type={TypographyType.Callout}
+        tag={TypographyTag.H1}
+        truncate
+        className="min-w-0 shrink"
+      >
+        {title}
+      </Typography>
+      {searchChildren && (
+        <div className="min-w-0 max-w-[20rem] flex-1">{searchChildren}</div>
+      )}
+    </div>
+  ) : (
+    title
+  );
+
   return (
     <FeedPageLayoutComponent>
       {children}
-      <FeedPageHeader className="mb-5">
-        <Typography bold type={TypographyType.Title3} tag={TypographyTag.H1}>
-          {title}
-        </Typography>
-      </FeedPageHeader>
-      <CustomFeedHeader
-        className={classNames(
-          'mb-6',
-          shouldUseListFeedLayout && !shouldUseListMode && 'px-4',
-        )}
-      >
-        {searchChildren}
-        {!isSearchResults && (
-          <Dropdown
-            className={{
-              label: 'hidden',
-              chevron: 'hidden',
-              button: '!px-1',
-              container: 'ml-4 flex',
-            }}
-            shouldIndicateSelected
-            icon={<SortIcon size={IconSize.Medium} />}
-            iconOnly
-            selectedIndex={selectedSort}
-            options={bookmarkSortOptionLabels}
-            onChange={(_, index) => setSelectedSort(index)}
-            buttonVariant={ButtonVariant.Float}
-            buttonSize={ButtonSize.Medium}
-            drawerProps={{ displayCloseButton: true }}
-          />
-        )}
-        {!isFolderPage && (
-          <ShareBookmarksButton
-            aria-label="Share bookmarks"
-            className="ml-4 flex"
-            icon={<ShareIcon secondary={showSharedBookmarks} aria-hidden />}
-            onClick={() => setShowSharedBookmarks(true)}
+      {isV2Laptop ? (
+        <PageHeader title={headerTitleSlot}>
+          {sortDropdown}
+          {shareButton}
+          {folderMenu}
+        </PageHeader>
+      ) : (
+        <>
+          <FeedPageHeader className="mb-5">
+            <Typography
+              bold
+              type={TypographyType.Title3}
+              tag={TypographyTag.H1}
+            >
+              {title}
+            </Typography>
+          </FeedPageHeader>
+          <CustomFeedHeader
+            className={classNames(
+              'mb-6',
+              shouldUseListFeedLayout && !shouldUseListMode && 'px-4',
+            )}
           >
-            {isLaptop ? <span>Share bookmarks</span> : null}
-          </ShareBookmarksButton>
-        )}
-        {folder && !isReminderOnly && (
-          <BookmarkFolderContextMenu folder={folder} />
-        )}
-      </CustomFeedHeader>
+            {searchChildren}
+            {sortDropdown}
+            {shareButton}
+            {folderMenu}
+          </CustomFeedHeader>
+        </>
+      )}
 
       {showSharedBookmarks && (
         <SharedBookmarksModal

packages/shared/src/components/Feed.tsx

@@ -76,6 +76,7 @@ import { BriefBannerFeed } from './cards/brief/BriefBanner/BriefBannerFeed';
 import { ActionType } from '../graphql/actions';
 import { TopHero } from './marketing/banners/HeroBottomBanner';
 import { useReadingReminderFeedHero } from '../hooks/notifications/useReadingReminderFeedHero';
+import { useLayoutVariant } from '../hooks/layout/useLayoutVariant';
 import { useLegacyPostLayoutOptOut } from './post/reader/hooks/useLegacyPostLayoutOptOut';
 import { useReaderModalEligibility } from './post/reader/hooks/useReaderModalEligibility';
 
@@ -365,6 +366,7 @@ export default function Feed<T>({
       readerEligiblePostTypes.has(post.type),
     [isReaderModalFeatureReady, isReaderModalOn, readerEligiblePostTypes],
   );
+  const { isV2 } = useLayoutVariant();
   const {
     adjustedHeroInsertIndex,
     shouldShowTopHero,
@@ -377,6 +379,9 @@ export default function Feed<T>({
     itemCount: items.length,
     itemsPerRow: virtualizedNumCards,
     firstSlotOffset: Number(showProfileCompletionCard || showBriefCard),
+    // Layout v2 hoists the top hero into MainLayout above the floating
+    // feed card, so the feed must not render or measure it here.
+    disableTopHero: isV2,
   });
 
   useMutationSubscription({