feat(mobile): the phone shell

packages/shared/package.json

@@ -15,6 +15,7 @@
   "peerDependencies": {
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.35.3",
+    "aria-hidden": "^1.2.6",
     "classnames": "^2.3.1",
     "date-fns": "^2.22.1",
     "date-fns-tz": "1.2.2",

packages/shared/src/components/BookmarkFeedLayout.tsx

@@ -7,7 +7,9 @@ import React, {
   useState,
 } from 'react';
 import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
 import classNames from 'classnames';
+import { webappUrl } from '../lib/constants';
 import {
   BookmarkSort,
   BOOKMARKS_FEED_QUERY,
@@ -25,9 +27,13 @@ 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 { useIsPhone } from '../hooks/useViewSize';
 import { useLayoutVariant } from '../hooks/layout/useLayoutVariant';
 import { PageHeader } from './layout/PageHeader';
 import { BookmarkSection } from './sidebar/sections/BookmarkSection';
+import { ShellPage } from './shell/ShellPageContext';
+import { Segments, ShellRow } from './shell/ShellRow';
+import { useBookmarkFolderList } from '../hooks/bookmark';
 import PlusMobileEntryBanner from './marketing/banners/PlusMobileEntryBanner';
 import { DigestBookmarkBanner } from './marketing/banners/DigestBookmarkBanner';
 import {
@@ -80,6 +86,9 @@ export default function BookmarkFeedLayout({
   isReminderOnly,
 }: BookmarkFeedLayoutProps): ReactElement | null {
   const [isHydrated, setIsHydrated] = useState(false);
+  const router = useRouter();
+  const { folders: bookmarkFolders } = useBookmarkFolderList();
+  const bookmarkPath = (router.asPath ?? router.pathname ?? '').split('?')[0];
   const {
     shouldUseListFeedLayout,
     FeedPageLayoutComponent,
@@ -94,6 +103,7 @@ export default function BookmarkFeedLayout({
     DEFAULT_BOOKMARK_SORT_INDEX,
   );
   const isLaptop = useViewSize(ViewSize.Laptop);
+  const isPhone = useIsPhone();
   const { isV2 } = useLayoutVariant();
   const isV2Laptop = isV2;
   const isSearchResults = !!searchQuery;
@@ -190,29 +200,36 @@ export default function BookmarkFeedLayout({
     return null;
   }
 
+  // In the block the controls are the shell's 38px squares.
+  const blockButtonClassName = isPhone
+    ? 'shell-material !size-[2.375rem] !rounded-14 !p-0'
+    : undefined;
+
   const sortDropdown = !isSearchResults && (
     <Dropdown
       className={{
         label: 'hidden',
         chevron: 'hidden',
-        button: isV2Laptop ? undefined : '!px-1',
-        container: isV2Laptop ? 'flex' : 'ml-4 flex',
+        button: blockButtonClassName ?? (isV2Laptop ? undefined : '!px-1'),
+        container: isV2Laptop || isPhone ? '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}
+      buttonVariant={
+        isV2Laptop || isPhone ? 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'}
+      className={blockButtonClassName ?? (isV2Laptop ? undefined : 'ml-4 flex')}
       icon={
         <ShareIcon
           size={isV2Laptop ? IconSize.XSmall : IconSize.Medium}
@@ -222,7 +239,9 @@ export default function BookmarkFeedLayout({
       }
       onClick={() => setShowSharedBookmarks(true)}
       size={isV2Laptop ? ButtonSize.Small : ButtonSize.Medium}
-      variant={isV2Laptop ? ButtonVariant.Tertiary : ButtonVariant.Secondary}
+      variant={
+        isV2Laptop || isPhone ? ButtonVariant.Tertiary : ButtonVariant.Secondary
+      }
     >
       {isLaptop ? <span>Share bookmarks</span> : null}
     </Button>
@@ -292,9 +311,13 @@ export default function BookmarkFeedLayout({
               )}
             >
               {searchChildren}
-              {sortDropdown}
-              {shareButton}
-              {folderMenu}
+              {!isPhone && (
+                <span className="hidden tablet:contents">
+                  {sortDropdown}
+                  {shareButton}
+                  {folderMenu}
+                </span>
+              )}
             </CustomFeedHeader>
           </>
         )}
@@ -305,7 +328,46 @@ export default function BookmarkFeedLayout({
             onRequestClose={() => setShowSharedBookmarks(false)}
           />
         )}
-        <div className="relative mb-4 laptop:hidden">
+        <ShellPage
+          title="Bookmarks"
+          actions={
+            <div className="flex items-center gap-2">
+              {sortDropdown}
+              {shareButton}
+              {folderMenu}
+            </div>
+          }
+          row={
+            <ShellRow>
+              <Segments
+                items={[
+                  {
+                    key: 'quick-saves',
+                    label: 'Quick saves',
+                    href: `${webappUrl}bookmarks`,
+                    active: bookmarkPath === '/bookmarks',
+                    replace: true,
+                  },
+                  {
+                    key: 'later',
+                    label: 'Read it later',
+                    href: `${webappUrl}bookmarks/later`,
+                    active: bookmarkPath === '/bookmarks/later',
+                    replace: true,
+                  },
+                  ...bookmarkFolders.map((list) => ({
+                    key: list.id,
+                    label: list.name,
+                    href: `${webappUrl}bookmarks/${list.id}`,
+                    active: bookmarkPath === `/bookmarks/${list.id}`,
+                    replace: true,
+                  })),
+                ]}
+              />
+            </ShellRow>
+          }
+        />
+        <div className="relative mb-4 hidden tablet:block laptop:hidden">
           <BookmarkSection
             isItemsButton={false}
             sidebarExpanded

packages/shared/src/components/Feed.spec.tsx

@@ -195,6 +195,16 @@ const TopHeroSlotTarget = (): ReactElement => {
   return <div data-testid="top-hero-slot" ref={setSlot} />;
 };
 
+// On a phone the post menu is a two-level sheet: hide and the block rows sit
+// behind Not interested; desktop keeps them on the one level.
+const openNotInterested = async () => {
+  await screen.findByText('Share via');
+  const row = screen.queryByText('Not interested');
+  if (row) {
+    fireEvent.click(row);
+  }
+};
+
 beforeEach(() => {
   queryClient.clear();
   jest.restoreAllMocks();
@@ -961,6 +971,7 @@ describe('Feed logged in', () => {
     fireEvent.keyDown(menuBtn, {
       key: ' ',
     });
+    await openNotInterested();
     const contextBtn = await screen.findByText('Hide');
     contextBtn.click();
     await waitFor(() => expect(hideCalled).toBeTruthy());
@@ -1000,6 +1011,7 @@ describe('Feed logged in', () => {
 
     const [menuBtn] = await screen.findAllByLabelText('Options');
     fireEvent.keyDown(menuBtn, { key: ' ' });
+    await openNotInterested();
     (await screen.findByText('Hide')).click();
     const undoBtn = await screen.findByRole('button', { name: 'Undo' });
     fireEvent.click(undoBtn);
@@ -1034,6 +1046,7 @@ describe('Feed logged in', () => {
 
     const [menuBtn] = await screen.findAllByLabelText('Options');
     fireEvent.keyDown(menuBtn, { key: ' ' });
+    await openNotInterested();
     (await screen.findByText('Hide')).click();
 
     const closeBtn = await screen.findByTestId('postHiddenPanelClose');
@@ -1066,6 +1079,7 @@ describe('Feed logged in', () => {
 
     const [menuBtn] = await screen.findAllByLabelText('Options');
     fireEvent.keyDown(menuBtn, { key: ' ' });
+    await openNotInterested();
     (await screen.findByText('Hide')).click();
 
     const doneBtn = await screen.findByTestId('postHiddenPanelDone');
@@ -1121,6 +1135,7 @@ describe('Feed logged in', () => {
       );
       expect(data).toBeTruthy();
     });
+    await openNotInterested();
     (await screen.findByText('Hide')).click();
 
     fireEvent.click(await screen.findByTestId('hideBlockSourceButton'));
@@ -1211,6 +1226,7 @@ describe('Feed logged in', () => {
       );
       expect(data).toBeTruthy();
     });
+    await openNotInterested();
     (await screen.findByText('Hide')).click();
 
     fireEvent.click(await screen.findByTestId('hideBlockSourceButton'));
@@ -1264,6 +1280,7 @@ describe('Feed logged in', () => {
       );
       expect(data).toBeTruthy();
     });
+    await openNotInterested();
     const contextBtn = await screen.findByText('Block Echo JS');
     fireEvent.click(contextBtn);
     await waitForNock();
@@ -1315,6 +1332,7 @@ describe('Feed logged in', () => {
       );
       expect(data).toBeTruthy();
     });
+    await openNotInterested();
     const contextBtn = await screen.findByText('Unblock Echo JS');
     fireEvent.click(contextBtn);
 
@@ -1359,6 +1377,7 @@ describe('Feed logged in', () => {
       );
       expect(data).toBeTruthy();
     });
+    await openNotInterested();
     const contextBtn = await screen.findByText('Block #javascript');
     fireEvent.click(contextBtn);
 

packages/shared/src/components/MainFeedLayout.tsx

@@ -70,6 +70,7 @@ import {
   useViewSize,
   ViewSize,
 } from '../hooks';
+import { useIsPhone } from '../hooks/useViewSize';
 import { feedNameToHeading, v2FeedSideInsetClass } from './feeds/FeedContainer';
 import { pageHeaderClassName } from './layout/PageHeader';
 import {
@@ -105,6 +106,16 @@ import { useTrackQuestClientEvent } from '../hooks/useTrackQuestClientEvent';
 import { useLayoutVariant } from '../hooks/layout/useLayoutVariant';
 import SearchMobileFiltersButton from './search/SearchMobileFiltersButton';
 
+import { ExploreSortMenu } from './shell/ExploreSortMenu';
+import { ShellPage } from './shell/ShellPageContext';
+
+const SpotlightTrigger = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "spotlightTrigger" */ './spotlight/SpotlightTrigger'
+    ),
+);
+
 const FeedExploreHeader = dynamic(
   () =>
     import(/* webpackChunkName: "feedExploreHeader" */ './header').then(
@@ -264,6 +275,7 @@ export default function MainFeedLayout({
   });
   const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
   const isLaptop = useViewSize(ViewSize.Laptop);
+  const isPhone = useIsPhone();
   const { isV2 } = useLayoutVariant();
   const feedVersion = useFeature(feature.feedVersion);
   const { time, contentCurationFilter, postTypesFilter } =
@@ -730,7 +742,8 @@ export default function MainFeedLayout({
   // (see `enableSsrSafeLayout`), so keying the spacing to it made the
   // gap change size on navigation and settle differently on reload.
   const disableTopPadding =
-    isFinder || (shouldUseListFeedLayout && !isAnyExplore);
+    isFinder ||
+    (shouldUseListFeedLayout && (!isAnyExplore || (isPhone && hasMounted)));
   const onTabChange = useCallback(
     (clickedTab: ExploreTabs) => {
       if (clickedTab === ExploreTabs.BestOf && isExtension) {
@@ -764,22 +777,26 @@ export default function MainFeedLayout({
       );
     }
 
+    if (isPhone) {
+      return <ExploreSortMenu />;
+    }
+
     return (
       <FeedExploreHeader
         tab={tab}
         setTab={onTabChange}
         showBreadcrumbs={false}
         className={{
           container: classNames(
-            'sticky top-[calc(4.5rem+var(--mobile-app-header-offset,0px))] z-header w-full border-b border-border-subtlest-tertiary bg-background-default transition-[top] duration-200 ease-out',
+            'z-header w-full border-b border-border-subtlest-tertiary bg-background-default transition-[top] duration-200 ease-out tablet:sticky tablet:top-[calc(4.5rem+var(--mobile-app-header-offset,0px))]',
             feedGutter,
           ),
           tabBarHeader: 'no-scrollbar overflow-x-auto',
           tabBarContainer: 'min-w-0 flex-1',
         }}
       />
     );
-  }, [isLaptop, onTabChange, tab]);
+  }, [isLaptop, isPhone, onTabChange, tab]);
 
   // v2 reaches the Explore hub sections (Explore, Tags, Sources, Leaderboard,
   // Discussions) from the sidebar's Explore panel, so the page header no longer
@@ -899,7 +916,21 @@ export default function MainFeedLayout({
       >
         {isAnyExplore && !showExploreV2PageHeader && <FeedExploreComponent />}
         {isSearchOn && !isSearchPageLaptop && search}
-        {isSearchOn && !isSearchPageLaptop && (
+        {isExploreTag && isPhone && (
+          <ShellPage title={`#${router.query?.tag ?? ''}`} />
+        )}
+        {isSearchOn && !isSearchPageLaptop && isPhone && (
+          <ShellPage
+            title={searchQuery || 'Search'}
+            actions={<SearchMobileFiltersButton square />}
+            row={
+              <div className="px-2 pb-1">
+                <SpotlightTrigger />
+              </div>
+            }
+          />
+        )}
+        {isSearchOn && !isSearchPageLaptop && !isPhone && (
           <div
             className={classNames(
               'mb-3 flex justify-end px-4',