From 197f6b24d127c2485b3689fa2af0d8b5086ede30 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 1 Oct 2026 10:00:53 +0300
Subject: [PATCH 1/2] fix(mobile): the four step-0 shell fixes

Step 0 of the mobile shell work (Storybook, Mobile UX / 10. The build):
the fixes that need no design decision, shipped together.

TabContainer's swipe decided from the total movement at touch end with a
40px threshold, so a thumb scrolling at a slight angle switched the
Highlights channel. The swipe now locks its axis on the first 10px, commits
past 56px inside a 27 degree cone or on a fast flick past 32px, and the
surface takes touch-action: pan-y. The numbers live in shell/constants.ts.

FooterNavBarLayout waited for the window load event before rendering the
bar; it renders once hydrated. The footer tabs fire a click with the footer
as target and the tab in extra, and Activity fires click notification icon
with NotificationTarget.Footer, which existed and was never used.

HighlightCardOptions and SquadOptionsButton were hidden until hover on
every device, so their actions did not exist on phones; they use the
laptop-and-mouse-only hover class the post cards use. The Explore period
drawer gets a Close, the notification menu icon stops being rotated,
Unfollow uses the remove-user icon, "Manade Ad" is "Manage ad" and the
settings menu labels match their page titles.

shell.css carries the shell's two curves and four durations and the press
class (scale 0.96, 150ms) applied to the footer tabs, the plus button, the
header controls, the feed chips and the post bar; the post titles balance.

Two pre-existing strict type errors in the touched files are fixed so the
strict guard passes.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../ProfileMenu/sections/AccountSection.tsx   |   2 +-
 .../cards/common/SquadOptionsButton.tsx       |  13 ++-
 .../cards/highlight/HighlightCardOptions.tsx  |   6 +-
 .../comments/CommentActionButtons.tsx         |   3 +-
 .../comments/CommentActionButtons.v2.tsx      |   3 +-
 .../components/feeds/MobileFeedActions.tsx    |   3 +-
 .../components/feeds/UnifiedMobileFeedNav.tsx |   2 +-
 .../components/header/FeedExploreHeader.tsx   |   1 +
 .../notifications/NotificationItem.tsx        |   2 +-
 .../components/post/MobilePostFloatingBar.tsx |   7 +-
 .../src/components/post/PostContent.tsx       |   2 +-
 .../post/collection/CollectionPostContent.tsx |   2 +-
 .../components/post/focus/PostFocusCard.tsx   |   2 +-
 .../profile/ProfileSettingsMenu.tsx           |  10 +-
 .../shared/src/components/shell/constants.ts  |  21 ++++
 .../components/sidebar/SidebarDesktopV2.tsx   |   2 +-
 .../sidebar/sections/SettingsPanelSection.tsx |  10 +-
 .../src/components/tabs/TabContainer.spec.tsx | 108 ++++++++++++++++++
 .../src/components/tabs/TabContainer.tsx      |  46 +++++++-
 packages/shared/src/styles/globals.css        |   1 +
 packages/shared/src/styles/shell.css          |  36 ++++++
 .../webapp/__tests__/MobileFooterNavbar.tsx   |  72 ++++++++++++
 .../components/footer/FooterNavBarTabs.tsx    |  10 +-
 .../components/footer/FooterPlusButton.tsx    |   2 +-
 .../components/footer/MobileFooterNavbar.tsx  |  27 ++++-
 packages/webapp/components/footer/common.ts   |   4 +-
 .../components/layouts/FooterNavBarLayout.tsx |  11 +-
 27 files changed, 361 insertions(+), 47 deletions(-)
 create mode 100644 packages/shared/src/components/shell/constants.ts
 create mode 100644 packages/shared/src/styles/shell.css
 create mode 100644 packages/webapp/__tests__/MobileFooterNavbar.tsx

diff --git a/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx b/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx
index b20f9f8c61..9fb96afdda 100644
--- a/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx
+++ b/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx
@@ -25,7 +25,7 @@ export const AccountSection = (): ReactElement => {
       icon: SettingsIcon,
     },
     {
-      title: 'Subscriptions',
+      title: 'Payment & Subscription',
       href: `${settingsUrl}/subscription`,
       icon: CreditCardIcon,
     },
diff --git a/packages/shared/src/components/cards/common/SquadOptionsButton.tsx b/packages/shared/src/components/cards/common/SquadOptionsButton.tsx
index 23e2cc32b2..313d64b2be 100644
--- a/packages/shared/src/components/cards/common/SquadOptionsButton.tsx
+++ b/packages/shared/src/components/cards/common/SquadOptionsButton.tsx
@@ -27,6 +27,7 @@ import useFeedSettings from '../../../hooks/useFeedSettings';
 import { useShareOrCopyLink } from '../../../hooks/useShareOrCopyLink';
 import { LogEvent } from '../../../lib/log';
 import { plusUrl } from '../../../lib/constants';
+import { visibleOnGroupHover } from './common';
 
 interface SquadOptionsButtonProps {
   squad: Squad;
@@ -39,7 +40,7 @@ export function SquadOptionsButton({
 }: SquadOptionsButtonProps): ReactElement {
   const { openModal } = useLazyModal();
   const { user } = useAuthContext();
-  const { data: campaign } = useCampaignById(squad.flags.campaignId);
+  const { data: campaign } = useCampaignById(squad.flags?.campaignId ?? '');
   const isBooster = campaign && user?.id === campaign.user.id;
   const [, onShareOrCopy] = useShareOrCopyLink({
     link: squad.permalink,
@@ -57,7 +58,11 @@ export function SquadOptionsButton({
   const options = useMemo(() => {
     const blockAction = isSourceBlocked ? unblockSource : blockSource;
     const list: MenuItemProps[] = [
-      { label: 'Share via', icon: <ShareIcon />, action: onShareOrCopy },
+      {
+        label: 'Share via',
+        icon: <ShareIcon />,
+        action: () => onShareOrCopy(),
+      },
       {
         label: 'Hide',
         icon: <EyeIcon />,
@@ -81,7 +86,7 @@ export function SquadOptionsButton({
 
     if (isBooster) {
       list.unshift({
-        label: 'Manade Ad',
+        label: 'Manage ad',
         icon: <TrendingIcon />,
         action: () =>
           openModal({
@@ -110,7 +115,7 @@ export function SquadOptionsButton({
           variant={ButtonVariant.Tertiary}
           icon={<MenuIcon />}
           size={ButtonSize.Small}
-          className={classNames('invisible z-1 group-hover:visible', className)}
+          className={classNames(visibleOnGroupHover, 'z-1', className)}
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
diff --git a/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx b/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx
index 0f8e49352c..d930163b7c 100644
--- a/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx
+++ b/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx
@@ -5,6 +5,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { EyeCancelIcon, MenuIcon as KebabIcon, PinIcon } from '../../icons';
 import { MenuIcon } from '../../MenuIcon';
+import { visibleOnGroupHover } from '../common/common';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -70,10 +71,7 @@ const HighlightCardOptionsContent = ({
           variant={ButtonVariant.Tertiary}
           size={ButtonSize.Small}
           icon={<KebabIcon />}
-          className={classNames(
-            'invisible z-1 my-auto group-hover:visible',
-            className,
-          )}
+          className={classNames(visibleOnGroupHover, 'z-1 my-auto', className)}
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
diff --git a/packages/shared/src/components/comments/CommentActionButtons.tsx b/packages/shared/src/components/comments/CommentActionButtons.tsx
index 39080de456..5fd6d3f317 100644
--- a/packages/shared/src/components/comments/CommentActionButtons.tsx
+++ b/packages/shared/src/components/comments/CommentActionButtons.tsx
@@ -12,6 +12,7 @@ import {
   FlagIcon,
   DownvoteIcon,
   AddUserIcon,
+  RemoveUserIcon,
   BlockIcon,
   GiftIcon,
   MenuIcon,
@@ -258,7 +259,7 @@ function CommentActionButtonsV1({
     const isFollowingUser = isFollowingContent(author?.contentPreference);
 
     commentOptions.push({
-      icon: <AddUserIcon />,
+      icon: isFollowingUser ? <RemoveUserIcon /> : <AddUserIcon />,
       label: `${isFollowingUser ? 'Unfollow' : 'Follow'} ${authorName}`,
       action: () => {
         const opts = {
diff --git a/packages/shared/src/components/comments/CommentActionButtons.v2.tsx b/packages/shared/src/components/comments/CommentActionButtons.v2.tsx
index 53cd6e9f48..cbc4ecce6e 100644
--- a/packages/shared/src/components/comments/CommentActionButtons.v2.tsx
+++ b/packages/shared/src/components/comments/CommentActionButtons.v2.tsx
@@ -12,6 +12,7 @@ import {
   FlagIcon,
   DownvoteIcon,
   AddUserIcon,
+  RemoveUserIcon,
   BlockIcon,
   GiftIcon,
   MenuIcon,
@@ -258,7 +259,7 @@ export default function CommentActionButtons({
     const isFollowingUser = isFollowingContent(author?.contentPreference);
 
     commentOptions.push({
-      icon: <AddUserIcon />,
+      icon: isFollowingUser ? <RemoveUserIcon /> : <AddUserIcon />,
       label: `${isFollowingUser ? 'Unfollow' : 'Follow'} ${authorName}`,
       action: () => {
         const opts = {
diff --git a/packages/shared/src/components/feeds/MobileFeedActions.tsx b/packages/shared/src/components/feeds/MobileFeedActions.tsx
index ec59b59d7e..02b8ea5e01 100644
--- a/packages/shared/src/components/feeds/MobileFeedActions.tsx
+++ b/packages/shared/src/components/feeds/MobileFeedActions.tsx
@@ -55,6 +55,7 @@ export function MobileFeedActions(): ReactElement {
             <Button
               icon={<SettingsIcon />}
               variant={ButtonVariant.Tertiary}
+              className="shell-press"
               onClick={() => setIsMenuOpen(true)}
             />
             <RootPortal>
@@ -64,7 +65,7 @@ export function MobileFeedActions(): ReactElement {
               />
             </RootPortal>
             <Link href={`${webappUrl}${user.username}`} passHref>
-              <a>
+              <a className="shell-press">
                 <ProfilePictureWithIndicator user={user} />
               </a>
             </Link>
diff --git a/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx b/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
index 02c3ed275d..f2e160c5bd 100644
--- a/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
+++ b/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
@@ -37,7 +37,7 @@ interface ChipItem {
 const GROUP_ORDER: ChipGroup[] = ['forYou', 'categories', 'rest'];
 
 const chipBaseClass =
-  'shrink-0 rounded-10 border px-2.5 py-1.5 font-bold transition-colors typo-callout';
+  'shell-press shrink-0 rounded-10 border px-2.5 py-1.5 font-bold typo-callout';
 const chipActiveClass =
   'border-border-subtlest-tertiary bg-surface-float text-text-primary hover:bg-surface-hover';
 const chipInactiveClass =
diff --git a/packages/shared/src/components/header/FeedExploreHeader.tsx b/packages/shared/src/components/header/FeedExploreHeader.tsx
index b52c13b45c..6b76352661 100644
--- a/packages/shared/src/components/header/FeedExploreHeader.tsx
+++ b/packages/shared/src/components/header/FeedExploreHeader.tsx
@@ -133,6 +133,7 @@ export function FeedExploreHeader({
                 icon={<CalendarIcon size={IconSize.Medium} />}
                 selectedIndex={period}
                 options={periodTexts}
+                drawerProps={{ displayCloseButton: true }}
                 onChange={(_, index) => setPeriod(index)}
               />
             )}
diff --git a/packages/shared/src/components/notifications/NotificationItem.tsx b/packages/shared/src/components/notifications/NotificationItem.tsx
index cc70a88de8..aaabd2e585 100644
--- a/packages/shared/src/components/notifications/NotificationItem.tsx
+++ b/packages/shared/src/components/notifications/NotificationItem.tsx
@@ -160,7 +160,7 @@ const NotificationOptionsButton = ({
           // Tertiary is the flat variant — transparent, no background or
           // border (Float carries a faint surface-float background).
           variant={ButtonVariant.Tertiary}
-          icon={<MenuIcon className="rotate-90" />}
+          icon={<MenuIcon />}
           size={ButtonSize.XSmall}
         />
       </DropdownMenuTrigger>
diff --git a/packages/shared/src/components/post/MobilePostFloatingBar.tsx b/packages/shared/src/components/post/MobilePostFloatingBar.tsx
index 4f595daff2..fb3ee45d77 100644
--- a/packages/shared/src/components/post/MobilePostFloatingBar.tsx
+++ b/packages/shared/src/components/post/MobilePostFloatingBar.tsx
@@ -121,6 +121,7 @@ function MobilePostFloatingBarV1({
         variant={ButtonVariant.Tertiary}
         color={ButtonColor.Avocado}
         size={ButtonSize.Medium}
+        className="shell-press"
       >
         {upvoteCount > 0 && (
           <InteractionCounter className={counterClasses} value={upvoteCount} />
@@ -135,6 +136,7 @@ function MobilePostFloatingBarV1({
         variant={ButtonVariant.Tertiary}
         color={ButtonColor.Ketchup}
         size={ButtonSize.Medium}
+        className="shell-press"
       />
       <QuaternaryButton
         id="mobile-comment-post-btn"
@@ -143,7 +145,7 @@ function MobilePostFloatingBarV1({
         onClick={() => onCommentClick(LogOrigin.PostCommentButton)}
         icon={<CommentIcon secondary={post.commented} />}
         size={ButtonSize.Medium}
-        className="btn-tertiary-blueCheese"
+        className="shell-press btn-tertiary-blueCheese"
       >
         {commentCount > 0 && (
           <InteractionCounter className={counterClasses} value={commentCount} />
@@ -157,7 +159,7 @@ function MobilePostFloatingBarV1({
           pressed: post.bookmarked,
           onClick: onToggleBookmark,
           size: ButtonSize.Medium,
-          className: 'btn-tertiary-bun',
+          className: 'shell-press btn-tertiary-bun',
         }}
       />
       <QuaternaryButton
@@ -168,6 +170,7 @@ function MobilePostFloatingBarV1({
         variant={ButtonVariant.Tertiary}
         color={ButtonColor.Cabbage}
         size={ButtonSize.Medium}
+        className="shell-press"
       />
     </div>
   );
diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index 385f490c70..0be30c3cc1 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -200,7 +200,7 @@ export function PostContentRaw({
             />
           </div>
           <h1
-            className="break-words font-bold typo-large-title"
+            className="text-balance break-words font-bold typo-large-title"
             data-testid="post-modal-title"
           >
             <ArticleLink href={post.permalink} onClick={onReadArticle}>
diff --git a/packages/shared/src/components/post/collection/CollectionPostContent.tsx b/packages/shared/src/components/post/collection/CollectionPostContent.tsx
index 6d27467424..0045e87648 100644
--- a/packages/shared/src/components/post/collection/CollectionPostContent.tsx
+++ b/packages/shared/src/components/post/collection/CollectionPostContent.tsx
@@ -159,7 +159,7 @@ export const CollectionPostContentRaw = ({
               />
             </div>
             <h1
-              className="break-words font-bold typo-large-title"
+              className="text-balance break-words font-bold typo-large-title"
               data-testid="post-modal-title"
             >
               {post.title}
diff --git a/packages/shared/src/components/post/focus/PostFocusCard.tsx b/packages/shared/src/components/post/focus/PostFocusCard.tsx
index f0162b2b82..606485b2b9 100644
--- a/packages/shared/src/components/post/focus/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/focus/PostFocusCard.tsx
@@ -684,7 +684,7 @@ const PostFocusCardRaw = ({
                 <div className="flex min-w-0 flex-1 flex-col gap-4">
                   <h1
                     className={classNames(
-                      'break-words font-bold text-text-primary typo-title3 tablet:typo-title1',
+                      'text-balance break-words font-bold text-text-primary typo-title3 tablet:typo-title1',
                       // On the post page the reader came to read, so the title is
                       // always shown in full and the button flows below it; only
                       // the modal (a feed preview) clamps it.
diff --git a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
index 00e5d52a5d..917856a648 100644
--- a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
+++ b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
@@ -99,7 +99,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
           title: null,
           items: {
             profile: {
-              title: 'Profile details',
+              title: 'Profile',
               icon: UserIcon,
               href: `${settingsUrl}/profile`,
             },
@@ -139,7 +139,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
               href: `${settingsUrl}/composition`,
             },
             invite: {
-              title: 'Invite Friends',
+              title: 'Invite friends',
               icon: InviteIcon,
               href: `${settingsUrl}/invite`,
             },
@@ -199,7 +199,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
               href: `${settingsUrl}/profile/experience/certification`,
             },
             openSource: {
-              title: 'Open Source',
+              title: 'Open source',
               icon: TerminalIcon,
               href: `${settingsUrl}/profile/experience/opensource`,
             },
@@ -227,7 +227,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
               },
             }),
             gamification: {
-              title: 'Feature visibility',
+              title: 'Streaks & gamification',
               icon: EyeIcon,
               href: `${settingsUrl}/customization/gamification`,
             },
@@ -275,7 +275,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
           title: 'Billing and Monetization',
           items: {
             subscription: {
-              title: 'Subscriptions',
+              title: 'Payment & Subscription',
               icon: CreditCardIcon,
               href: `${settingsUrl}/subscription`,
             },
diff --git a/packages/shared/src/components/shell/constants.ts b/packages/shared/src/components/shell/constants.ts
new file mode 100644
index 0000000000..48d1c0a992
--- /dev/null
+++ b/packages/shared/src/components/shell/constants.ts
@@ -0,0 +1,21 @@
+// The numbers of the phone shell, from the Mobile UX review in Storybook
+// (stories/mobile-ux/spec.ts, chapter 10). Components read them from here
+// so no file carries its own copy.
+
+export const swipe = {
+  lockDistance: 10,
+  commitDistance: 56,
+  coneRatio: 2,
+  velocity: 0.3,
+  velocityDistance: 32,
+};
+
+export const motion = {
+  interaction: 'cubic-bezier(0.2, 0, 0, 1)',
+  travel: 'cubic-bezier(0.32, 0.72, 0, 1)',
+  feedback: 150,
+  enter: 300,
+  exit: 200,
+  snap: 220,
+  press: 0.96,
+};
diff --git a/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx b/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx
index 0906f85fe9..2678f908a6 100644
--- a/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx
+++ b/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx
@@ -599,7 +599,7 @@ const SidebarSettingsButton = (): ReactElement => {
 
   const billingItems: ProfileSectionItemProps[] = [
     {
-      title: 'Subscriptions',
+      title: 'Payment & Subscription',
       href: `${settingsUrl}/subscription`,
       icon: CreditCardIcon,
     },
diff --git a/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx b/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx
index 20a0c411b2..be8abd9170 100644
--- a/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx
@@ -58,7 +58,7 @@ export const SettingsPanelSection = ({
         key: 'main',
         items: [
           {
-            title: 'Profile details',
+            title: 'Profile',
             path: settingsDefaultPath,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <UserIcon secondary={active} />} />
@@ -109,7 +109,7 @@ export const SettingsPanelSection = ({
             ),
           },
           {
-            title: 'Invite Friends',
+            title: 'Invite friends',
             path: `${settingsUrl}/invite`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <InviteIcon secondary={active} />} />
@@ -191,7 +191,7 @@ export const SettingsPanelSection = ({
             ),
           },
           {
-            title: 'Open Source',
+            title: 'Open source',
             path: `${settingsUrl}/profile/experience/opensource`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <TerminalIcon secondary={active} />} />
@@ -220,7 +220,7 @@ export const SettingsPanelSection = ({
           {
             // The streak settings live on this same combined page, so there's
             // no separate "Streaks" entry.
-            title: 'Feature visibility',
+            title: 'Streaks & gamification',
             path: `${settingsUrl}/customization/gamification`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <EyeIcon secondary={active} />} />
@@ -253,7 +253,7 @@ export const SettingsPanelSection = ({
         title: 'Billing and Monetization',
         items: [
           {
-            title: 'Subscriptions',
+            title: 'Payment & Subscription',
             path: `${settingsUrl}/subscription`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <CreditCardIcon secondary={active} />} />
diff --git a/packages/shared/src/components/tabs/TabContainer.spec.tsx b/packages/shared/src/components/tabs/TabContainer.spec.tsx
index b8a7ddfb08..29b9cffea4 100644
--- a/packages/shared/src/components/tabs/TabContainer.spec.tsx
+++ b/packages/shared/src/components/tabs/TabContainer.spec.tsx
@@ -206,3 +206,111 @@ describe('tab container component', () => {
     });
   });
 });
+
+describe('swipeable tab container', () => {
+  const touch = (x: number, y: number) => ({
+    touches: [{ clientX: x, clientY: y }],
+  });
+
+  const swipeOn = (
+    element: HTMLElement,
+    points: [number, number][],
+    durationMs: number,
+  ) => {
+    const [start, ...rest] = points;
+    fireEvent.touchStart(element, touch(...start));
+    rest.forEach((point) => fireEvent.touchMove(element, touch(...point)));
+    jest.advanceTimersByTime(durationMs);
+    fireEvent.touchEnd(element, { changedTouches: [] });
+  };
+
+  // A Tab without a className renders its children straight into the swipe
+  // surface, so the element holding the text is the surface itself.
+  const mountSwipeable = () => {
+    renderComponent({ swipeable: true });
+    return screen.getByText('Sample');
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('ignores a scroll that drifts sideways past the old threshold', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [100, 100],
+        [96, 112],
+        [70, 180],
+        [55, 260],
+      ],
+      400,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).not.toHaveBeenCalled();
+  });
+
+  it('moves to the next tab on a horizontal swipe inside the cone', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [200, 100],
+        [188, 101],
+        [150, 104],
+        [130, 108],
+      ],
+      400,
+    );
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+    expect(onActiveClick).toHaveBeenCalledWith('Second', undefined);
+  });
+
+  // jsdom stamps events with real time, so a drag here is always fast; the
+  // nudge stays under the distance the fast path needs too.
+  it('does nothing on a horizontal nudge that stops short', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [200, 100],
+        [188, 100],
+        [170, 100],
+      ],
+      600,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).not.toHaveBeenCalled();
+  });
+
+  it('moves to the previous tab on a short fast flick', () => {
+    renderComponent({ swipeable: true });
+    fireEvent.click(screen.getByText('Second'));
+    const surface = screen.getByText('Test');
+    onActiveClick.mockClear();
+
+    swipeOn(
+      surface,
+      [
+        [100, 100],
+        [112, 100],
+        [136, 101],
+      ],
+      50,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).toHaveBeenCalledWith('First', undefined);
+  });
+});
diff --git a/packages/shared/src/components/tabs/TabContainer.tsx b/packages/shared/src/components/tabs/TabContainer.tsx
index 215ca7e7cb..a6002b1f96 100644
--- a/packages/shared/src/components/tabs/TabContainer.tsx
+++ b/packages/shared/src/components/tabs/TabContainer.tsx
@@ -9,6 +9,7 @@ import React, {
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import { useSwipeable } from 'react-swipeable';
+import { swipe } from '../shell/constants';
 import type { AllowedTabTags, TabListProps } from './TabList';
 import TabList from './TabList';
 import type { RenderTab } from './common';
@@ -163,11 +164,43 @@ export function TabContainer<T extends string = string>({
     [tabs, currentActive, labels, navigateToUrl, onActiveChange],
   );
 
+  // The axis is decided once, on the first movement past the lock distance:
+  // a gesture that starts vertical is a scroll and is ignored to the end,
+  // whatever it does afterwards. A horizontal one changes the tab only when
+  // it travels far enough inside the cone, or fast enough.
+  const swipeAxis = useRef<'x' | 'y' | null>(null);
   const swipeHandlers = useSwipeable({
-    onSwipedLeft: () => navigateTab('next'),
-    onSwipedRight: () => navigateTab('previous'),
+    onSwipeStart: () => {
+      swipeAxis.current = null;
+    },
+    onSwiping: ({ absX, absY }) => {
+      if (swipeAxis.current || Math.max(absX, absY) < swipe.lockDistance) {
+        return;
+      }
+
+      swipeAxis.current = absX > absY ? 'x' : 'y';
+    },
+    onSwiped: ({ deltaX, absX, absY, velocity }) => {
+      const axis = swipeAxis.current;
+      swipeAxis.current = null;
+
+      if (axis !== 'x') {
+        return;
+      }
+
+      const inCone = absX > swipe.coneRatio * absY;
+      const farEnough = absX > swipe.commitDistance && inCone;
+      const fastEnough =
+        velocity > swipe.velocity && absX > swipe.velocityDistance;
+
+      if (!farEnough && !fastEnough) {
+        return;
+      }
+
+      navigateTab(deltaX < 0 ? 'next' : 'previous');
+    },
     trackTouch: true,
-    delta: 40,
+    delta: swipe.lockDistance,
   });
 
   const isTabActive = ({
@@ -245,7 +278,12 @@ export function TabContainer<T extends string = string>({
         />
         {extraHeaderContent}
       </header>
-      <div {...(swipeable ? swipeHandlers : {})}>{render}</div>
+      <div
+        {...(swipeable ? swipeHandlers : {})}
+        className={classNames(swipeable && 'touch-pan-y')}
+      >
+        {render}
+      </div>
     </div>
   );
 }
diff --git a/packages/shared/src/styles/globals.css b/packages/shared/src/styles/globals.css
index cc4297ecf7..6e44e49718 100644
--- a/packages/shared/src/styles/globals.css
+++ b/packages/shared/src/styles/globals.css
@@ -8,3 +8,4 @@
 @import './utilities.css';
 
 @import './safeArea.css';
+@import './shell.css';
diff --git a/packages/shared/src/styles/shell.css b/packages/shared/src/styles/shell.css
new file mode 100644
index 0000000000..49bcb0fb2c
--- /dev/null
+++ b/packages/shared/src/styles/shell.css
@@ -0,0 +1,36 @@
+/*
+ * The phone shell: motion tokens and press feedback (Mobile UX review,
+ * chapters 9l and 10). Two curves for the whole shell: interaction for what
+ * the finger drives or toggles, travel for what crosses the screen.
+ */
+:root {
+  --shell-ease-interaction: cubic-bezier(0.2, 0, 0, 1);
+  --shell-ease-travel: cubic-bezier(0.32, 0.72, 0, 1);
+  --shell-duration-feedback: 150ms;
+  --shell-duration-enter: 300ms;
+  --shell-duration-exit: 200ms;
+  --shell-duration-snap: 220ms;
+}
+
+/*
+ * Press feedback for tappable chrome: the control scales to 0.96 under the
+ * finger and eases back on release. `scale` is listed beside the button
+ * transitions so a `.btn` keeps its colour transitions.
+ */
+.shell-press {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: var(--shell-duration-feedback) ease-out;
+  transition-property: border-color, background-color, box-shadow, color,
+    scale;
+}
+
+.shell-press:active {
+  scale: 0.96;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shell-press {
+    transition-duration: 0s;
+  }
+}
diff --git a/packages/webapp/__tests__/MobileFooterNavbar.tsx b/packages/webapp/__tests__/MobileFooterNavbar.tsx
new file mode 100644
index 0000000000..d50547325d
--- /dev/null
+++ b/packages/webapp/__tests__/MobileFooterNavbar.tsx
@@ -0,0 +1,72 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import type { NextRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import type { AuthContextData } from '@dailydotdev/shared/src/contexts/AuthContext';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import { useNotificationContext } from '@dailydotdev/shared/src/contexts/NotificationsContext';
+import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
+import MobileFooterNavbar from '../components/footer/MobileFooterNavbar';
+
+const mockLogEvent = jest.fn();
+
+jest.mock('@dailydotdev/shared/src/contexts/LogContext', () => ({
+  useLogContext: () => ({ logEvent: mockLogEvent }),
+}));
+
+jest.mock('@dailydotdev/shared/src/contexts/NotificationsContext', () => ({
+  useNotificationContext: jest.fn(),
+}));
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+
+const user = { id: 'u1', username: 'ido' } as LoggedUser;
+
+const renderNavbar = () =>
+  render(
+    <AuthContext.Provider
+      value={{ user, squads: [] } as unknown as AuthContextData}
+    >
+      <MobileFooterNavbar />
+    </AuthContext.Provider>,
+  );
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.mocked(useRouter).mockReturnValue({
+    pathname: '/',
+    asPath: '/',
+    query: {},
+  } as unknown as NextRouter);
+  jest.mocked(useNotificationContext).mockReturnValue({
+    unreadCount: 3,
+  } as unknown as ReturnType<typeof useNotificationContext>);
+});
+
+describe('MobileFooterNavbar', () => {
+  it('logs a click per tab with the footer as the target', () => {
+    renderNavbar();
+
+    fireEvent.click(screen.getByText('Explore'));
+
+    expect(mockLogEvent).toHaveBeenCalledWith({
+      event_name: 'click',
+      target_id: 'mobile footer',
+      extra: JSON.stringify({ tab: 'explore' }),
+    });
+  });
+
+  it('logs the notification icon click from the footer with the unread count', () => {
+    renderNavbar();
+
+    fireEvent.click(screen.getByText('Activity'));
+
+    expect(mockLogEvent).toHaveBeenCalledWith({
+      event_name: 'click notification icon',
+      target_id: 'footer',
+      extra: JSON.stringify({ notifications_number: 3 }),
+    });
+  });
+});
diff --git a/packages/webapp/components/footer/FooterNavBarTabs.tsx b/packages/webapp/components/footer/FooterNavBarTabs.tsx
index 159b5df0e3..2a4b70d628 100644
--- a/packages/webapp/components/footer/FooterNavBarTabs.tsx
+++ b/packages/webapp/components/footer/FooterNavBarTabs.tsx
@@ -24,26 +24,26 @@ const Tab = ({ tab, isActive }: TabProps) => {
         href={
           !user && tab.requiresLogin
             ? '/onboarding'
-            : getNavPath(tab.path, user)
+            : getNavPath(tab.path, user) ?? '/'
         }
         passHref
       >
         <a
           className={classNames(
-            'flex flex-col items-center justify-center',
+            'shell-press flex flex-col items-center justify-center',
             !isActive && 'text-text-tertiary',
           )}
           onClick={tab.onClick}
           role="link"
           tabIndex={0}
           onKeyDown={(e) => {
-            if ((e.key === 'Enter' || e.key === ' ') && tab.onClick) {
+            if (e.key === ' ') {
               e.preventDefault();
-              tab.onClick();
+              e.currentTarget.click();
             }
           }}
         >
-          {tab.icon(isActive)}
+          {tab.icon?.(!!isActive)}
           <span className="typo-caption2">{tab.title}</span>
         </a>
       </Link>
diff --git a/packages/webapp/components/footer/FooterPlusButton.tsx b/packages/webapp/components/footer/FooterPlusButton.tsx
index d34bdb37d1..21a2263170 100644
--- a/packages/webapp/components/footer/FooterPlusButton.tsx
+++ b/packages/webapp/components/footer/FooterPlusButton.tsx
@@ -61,7 +61,7 @@ export function FooterPlusButton({
         icon={<PlusIcon />}
         variant={ButtonVariant.Primary}
         className={classNames(
-          'border border-border-subtlest-tertiary',
+          'shell-press border border-border-subtlest-tertiary',
           className,
         )}
       />
diff --git a/packages/webapp/components/footer/MobileFooterNavbar.tsx b/packages/webapp/components/footer/MobileFooterNavbar.tsx
index 05ef58dc9b..19d143e7f6 100644
--- a/packages/webapp/components/footer/MobileFooterNavbar.tsx
+++ b/packages/webapp/components/footer/MobileFooterNavbar.tsx
@@ -19,6 +19,12 @@ import { getFeedName } from '@dailydotdev/shared/src/lib/feed';
 import { useNotificationContext } from '@dailydotdev/shared/src/contexts/NotificationsContext';
 import { Bubble } from '@dailydotdev/shared/src/components/tooltips/utils';
 import { getUnreadText } from '@dailydotdev/shared/src/components/notifications/utils';
+import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
+import {
+  LogEvent,
+  NotificationTarget,
+  TargetId,
+} from '@dailydotdev/shared/src/lib/log';
 import type { FooterTab } from './common';
 import { blurClasses } from './common';
 import { FooterNavBarTabs } from './FooterNavBarTabs';
@@ -58,8 +64,17 @@ const MobileFooterNavbar = (): ReactElement => {
   const squadsUrl = hasSquads
     ? squadCategoriesPaths['My Squads']
     : squadCategoriesPaths.discover;
+  const { logEvent } = useLogContext();
+  const { unreadCount } = useNotificationContext();
 
   const tabs: (FooterTab | ReactNode)[] = useMemo(() => {
+    const logTabClick = (tab: string) =>
+      logEvent({
+        event_name: LogEvent.Click,
+        target_id: TargetId.MobileFooter,
+        extra: JSON.stringify({ tab }),
+      });
+
     return [
       {
         requiresLogin: true,
@@ -68,6 +83,7 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <HomeIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('home'),
       },
       {
         requiresLogin: false,
@@ -76,6 +92,7 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <AiIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('explore'),
       },
       {
         requiresLogin: false,
@@ -84,12 +101,19 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <MegaphoneIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('headlines'),
       },
       {
         requiresLogin: true,
         path: '/notifications',
         title: 'Activity',
         icon: (active: boolean) => <Notifications active={active} />,
+        onClick: () =>
+          logEvent({
+            event_name: LogEvent.ClickNotificationIcon,
+            target_id: NotificationTarget.Footer,
+            extra: JSON.stringify({ notifications_number: unreadCount }),
+          }),
       },
       {
         path: squadsUrl,
@@ -97,9 +121,10 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <SourceIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('squads'),
       },
     ];
-  }, [squadsUrl]);
+  }, [logEvent, squadsUrl, unreadCount]);
 
   const activeTab = useMemo(() => {
     const tabTitles = new Set(
diff --git a/packages/webapp/components/footer/common.ts b/packages/webapp/components/footer/common.ts
index 995354d3e3..180011a159 100644
--- a/packages/webapp/components/footer/common.ts
+++ b/packages/webapp/components/footer/common.ts
@@ -17,13 +17,13 @@ export interface FooterNavBarContainerProps {
 
 export const getNavPath = (
   path: FooterTab['path'],
-  user: LoggedUser,
+  user?: LoggedUser,
 ): string | undefined => {
   if (typeof path === 'string') {
     return path;
   }
 
-  return path?.(user);
+  return user ? path?.(user) : undefined;
 };
 
 export const blurClasses = 'bg-blur-baseline backdrop-blur-[2.5rem]';
diff --git a/packages/webapp/components/layouts/FooterNavBarLayout.tsx b/packages/webapp/components/layouts/FooterNavBarLayout.tsx
index 296d7a68af..54af248702 100644
--- a/packages/webapp/components/layouts/FooterNavBarLayout.tsx
+++ b/packages/webapp/components/layouts/FooterNavBarLayout.tsx
@@ -1,7 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
-import React, { useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
-import ProgressiveEnhancementContext from '@dailydotdev/shared/src/contexts/ProgressiveEnhancementContext';
 import { useViewSize, ViewSize } from '@dailydotdev/shared/src/hooks';
 import type { Post } from '@dailydotdev/shared/src/graphql/posts';
 import {
@@ -36,10 +35,14 @@ export default function FooterNavBarLayout({
   children,
   post,
 }: FooterNavBarLayoutProps): ReactElement {
-  const { windowLoaded } = useContext(ProgressiveEnhancementContext);
   const isMobile = useViewSize(ViewSize.MobileL);
+  const [hasHydrated, setHasHydrated] = useState(false);
 
-  const showNav = windowLoaded && isMobile;
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const showNav = hasHydrated && isMobile;
 
   return (
     <MobileAppFooterProvider>

From ddf92419d44c4aae85ca1018f14d2f504325fa20 Mon Sep 17 00:00:00 2001
From: Tsahi Matsliah <tsmatliah@gmail.com>
Date: Thu, 1 Oct 2026 16:34:11 +0300
Subject: [PATCH 2/2] fix(mobile): the swipe cone gates the fast path too, and
 review notes

Chris's review: a fast diagonal flick that happened to lock sideways in
its first 10px could still change the channel through the velocity path,
which skipped the cone. The cone now gates both paths, with a spec for
that flick; the swipe specs stamp event.timeStamp (react-swipeable's
clock) so the distance and speed paths are each tested on their own.

Also from the review: the swipe surface keeps pinch zoom
(touch-pinch-zoom); the footer tabs log their own target
(mobile footer nav) with whether the tap was a member's, so they separate
from the app footer's events; the shell constants and stylesheet carry
only what this PR consumes (the motion values come with their consumers
in the shell PR), and the explanatory blocks moved to the PR description.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../shared/src/components/shell/constants.ts  | 15 +---
 .../src/components/tabs/TabContainer.spec.tsx | 78 +++++++++++++------
 .../src/components/tabs/TabContainer.tsx      | 12 ++-
 packages/shared/src/lib/log.ts                |  1 +
 packages/shared/src/styles/shell.css          | 25 +-----
 .../webapp/__tests__/MobileFooterNavbar.tsx   |  4 +-
 .../components/footer/MobileFooterNavbar.tsx  |  6 +-
 7 files changed, 69 insertions(+), 72 deletions(-)

diff --git a/packages/shared/src/components/shell/constants.ts b/packages/shared/src/components/shell/constants.ts
index 48d1c0a992..e0950311a7 100644
--- a/packages/shared/src/components/shell/constants.ts
+++ b/packages/shared/src/components/shell/constants.ts
@@ -1,7 +1,4 @@
-// The numbers of the phone shell, from the Mobile UX review in Storybook
-// (stories/mobile-ux/spec.ts, chapter 10). Components read them from here
-// so no file carries its own copy.
-
+// The numbers of the phone shell (Mobile UX review, chapter 10).
 export const swipe = {
   lockDistance: 10,
   commitDistance: 56,
@@ -9,13 +6,3 @@ export const swipe = {
   velocity: 0.3,
   velocityDistance: 32,
 };
-
-export const motion = {
-  interaction: 'cubic-bezier(0.2, 0, 0, 1)',
-  travel: 'cubic-bezier(0.32, 0.72, 0, 1)',
-  feedback: 150,
-  enter: 300,
-  exit: 200,
-  snap: 220,
-  press: 0.96,
-};
diff --git a/packages/shared/src/components/tabs/TabContainer.spec.tsx b/packages/shared/src/components/tabs/TabContainer.spec.tsx
index 29b9cffea4..6bfbd46df0 100644
--- a/packages/shared/src/components/tabs/TabContainer.spec.tsx
+++ b/packages/shared/src/components/tabs/TabContainer.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, createEvent } from '@testing-library/react';
 import nock from 'nock';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
@@ -208,9 +208,23 @@ describe('tab container component', () => {
 });
 
 describe('swipeable tab container', () => {
-  const touch = (x: number, y: number) => ({
-    touches: [{ clientX: x, clientY: y }],
-  });
+  // react-swipeable reads event.timeStamp, which jsdom fills with real
+  // time; stamping it puts the velocity under the test's control.
+  const stamped = (
+    type: 'touchStart' | 'touchMove' | 'touchEnd',
+    element: HTMLElement,
+    x: number,
+    y: number,
+    at: number,
+  ) => {
+    const init =
+      type === 'touchEnd'
+        ? { changedTouches: [] }
+        : { touches: [{ clientX: x, clientY: y }] };
+    const event = createEvent[type](element, init);
+    Object.defineProperty(event, 'timeStamp', { value: at });
+    fireEvent(element, event);
+  };
 
   const swipeOn = (
     element: HTMLElement,
@@ -218,10 +232,18 @@ describe('swipeable tab container', () => {
     durationMs: number,
   ) => {
     const [start, ...rest] = points;
-    fireEvent.touchStart(element, touch(...start));
-    rest.forEach((point) => fireEvent.touchMove(element, touch(...point)));
-    jest.advanceTimersByTime(durationMs);
-    fireEvent.touchEnd(element, { changedTouches: [] });
+    stamped('touchStart', element, start[0], start[1], 1000);
+    rest.forEach(([x, y], index) =>
+      stamped(
+        'touchMove',
+        element,
+        x,
+        y,
+        1000 + (durationMs * (index + 1)) / rest.length,
+      ),
+    );
+    const [lastX, lastY] = points[points.length - 1];
+    stamped('touchEnd', element, lastX, lastY, 1000 + durationMs);
   };
 
   // A Tab without a className renders its children straight into the swipe
@@ -231,14 +253,6 @@ describe('swipeable tab container', () => {
     return screen.getByText('Sample');
   };
 
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
   it('ignores a scroll that drifts sideways past the old threshold', () => {
     const surface = mountSwipeable();
 
@@ -257,7 +271,7 @@ describe('swipeable tab container', () => {
     expect(onActiveClick).not.toHaveBeenCalled();
   });
 
-  it('moves to the next tab on a horizontal swipe inside the cone', () => {
+  it('moves to the next tab on a slow swipe past the commit distance', () => {
     const surface = mountSwipeable();
 
     swipeOn(
@@ -265,19 +279,17 @@ describe('swipeable tab container', () => {
       [
         [200, 100],
         [188, 101],
-        [150, 104],
-        [130, 108],
+        [160, 104],
+        [136, 108],
       ],
-      400,
+      600,
     );
 
     expect(screen.getByText('Test')).toBeInTheDocument();
     expect(onActiveClick).toHaveBeenCalledWith('Second', undefined);
   });
 
-  // jsdom stamps events with real time, so a drag here is always fast; the
-  // nudge stays under the distance the fast path needs too.
-  it('does nothing on a horizontal nudge that stops short', () => {
+  it('does nothing on a slow horizontal nudge that stops short', () => {
     const surface = mountSwipeable();
 
     swipeOn(
@@ -285,7 +297,7 @@ describe('swipeable tab container', () => {
       [
         [200, 100],
         [188, 100],
-        [170, 100],
+        [160, 100],
       ],
       600,
     );
@@ -313,4 +325,22 @@ describe('swipeable tab container', () => {
     expect(screen.getByText('Sample')).toBeInTheDocument();
     expect(onActiveClick).toHaveBeenCalledWith('First', undefined);
   });
+
+  it('ignores a fast diagonal flick that locked sideways', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [100, 100],
+        [111, 108],
+        [125, 150],
+        [140, 190],
+      ],
+      100,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/shared/src/components/tabs/TabContainer.tsx b/packages/shared/src/components/tabs/TabContainer.tsx
index a6002b1f96..f284abfd84 100644
--- a/packages/shared/src/components/tabs/TabContainer.tsx
+++ b/packages/shared/src/components/tabs/TabContainer.tsx
@@ -164,10 +164,8 @@ export function TabContainer<T extends string = string>({
     [tabs, currentActive, labels, navigateToUrl, onActiveChange],
   );
 
-  // The axis is decided once, on the first movement past the lock distance:
-  // a gesture that starts vertical is a scroll and is ignored to the end,
-  // whatever it does afterwards. A horizontal one changes the tab only when
-  // it travels far enough inside the cone, or fast enough.
+  // The axis locks on the first movement; only a horizontal gesture that
+  // stays inside the cone can change the tab, by distance or by speed.
   const swipeAxis = useRef<'x' | 'y' | null>(null);
   const swipeHandlers = useSwipeable({
     onSwipeStart: () => {
@@ -189,11 +187,11 @@ export function TabContainer<T extends string = string>({
       }
 
       const inCone = absX > swipe.coneRatio * absY;
-      const farEnough = absX > swipe.commitDistance && inCone;
+      const farEnough = absX > swipe.commitDistance;
       const fastEnough =
         velocity > swipe.velocity && absX > swipe.velocityDistance;
 
-      if (!farEnough && !fastEnough) {
+      if (!inCone || (!farEnough && !fastEnough)) {
         return;
       }
 
@@ -280,7 +278,7 @@ export function TabContainer<T extends string = string>({
       </header>
       <div
         {...(swipeable ? swipeHandlers : {})}
-        className={classNames(swipeable && 'touch-pan-y')}
+        className={classNames(swipeable && 'touch-pan-y touch-pinch-zoom')}
       >
         {render}
       </div>
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
index e1053d04ea..fea25de681 100644
--- a/packages/shared/src/lib/log.ts
+++ b/packages/shared/src/lib/log.ts
@@ -721,6 +721,7 @@ export enum TargetId {
   ReaderInstallPrompt = 'reader install prompt',
   ReaderPermissionPrompt = 'reader permission prompt',
   MobileFooter = 'mobile footer',
+  MobileFooterNav = 'mobile footer nav',
   MobileSheet = 'mobile sheet',
 }
 
diff --git a/packages/shared/src/styles/shell.css b/packages/shared/src/styles/shell.css
index 49bcb0fb2c..27aa428074 100644
--- a/packages/shared/src/styles/shell.css
+++ b/packages/shared/src/styles/shell.css
@@ -1,28 +1,9 @@
-/*
- * The phone shell: motion tokens and press feedback (Mobile UX review,
- * chapters 9l and 10). Two curves for the whole shell: interaction for what
- * the finger drives or toggles, travel for what crosses the screen.
- */
-:root {
-  --shell-ease-interaction: cubic-bezier(0.2, 0, 0, 1);
-  --shell-ease-travel: cubic-bezier(0.32, 0.72, 0, 1);
-  --shell-duration-feedback: 150ms;
-  --shell-duration-enter: 300ms;
-  --shell-duration-exit: 200ms;
-  --shell-duration-snap: 220ms;
-}
-
-/*
- * Press feedback for tappable chrome: the control scales to 0.96 under the
- * finger and eases back on release. `scale` is listed beside the button
- * transitions so a `.btn` keeps its colour transitions.
- */
+/* Press feedback for the phone shell's tappable chrome. */
 .shell-press {
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
-  transition: var(--shell-duration-feedback) ease-out;
-  transition-property: border-color, background-color, box-shadow, color,
-    scale;
+  transition: 150ms ease-out;
+  transition-property: border-color, background-color, box-shadow, color, scale;
 }
 
 .shell-press:active {
diff --git a/packages/webapp/__tests__/MobileFooterNavbar.tsx b/packages/webapp/__tests__/MobileFooterNavbar.tsx
index d50547325d..a65a25e7eb 100644
--- a/packages/webapp/__tests__/MobileFooterNavbar.tsx
+++ b/packages/webapp/__tests__/MobileFooterNavbar.tsx
@@ -53,8 +53,8 @@ describe('MobileFooterNavbar', () => {
 
     expect(mockLogEvent).toHaveBeenCalledWith({
       event_name: 'click',
-      target_id: 'mobile footer',
-      extra: JSON.stringify({ tab: 'explore' }),
+      target_id: 'mobile footer nav',
+      extra: JSON.stringify({ tab: 'explore', logged_in: true }),
     });
   });
 
diff --git a/packages/webapp/components/footer/MobileFooterNavbar.tsx b/packages/webapp/components/footer/MobileFooterNavbar.tsx
index 19d143e7f6..b102dd0a7a 100644
--- a/packages/webapp/components/footer/MobileFooterNavbar.tsx
+++ b/packages/webapp/components/footer/MobileFooterNavbar.tsx
@@ -71,8 +71,8 @@ const MobileFooterNavbar = (): ReactElement => {
     const logTabClick = (tab: string) =>
       logEvent({
         event_name: LogEvent.Click,
-        target_id: TargetId.MobileFooter,
-        extra: JSON.stringify({ tab }),
+        target_id: TargetId.MobileFooterNav,
+        extra: JSON.stringify({ tab, logged_in: !!user }),
       });
 
     return [
@@ -124,7 +124,7 @@ const MobileFooterNavbar = (): ReactElement => {
         onClick: () => logTabClick('squads'),
       },
     ];
-  }, [logEvent, squadsUrl, unreadCount]);
+  }, [logEvent, squadsUrl, unreadCount, user]);
 
   const activeTab = useMemo(() => {
     const tabTitles = new Set(