fix(mobile): the four step-0 shell fixes

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,
     },

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>

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>

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 = {

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 = {

packages/shared/src/components/feeds/MobileFeedActions.tsx

@@ -66,6 +66,7 @@ export function MobileFeedActions(): ReactElement {
             <Button
               icon={<SettingsIcon />}
               variant={ButtonVariant.Tertiary}
+              className="shell-press"
               onClick={() => setIsMenuOpen(true)}
             />
             <RootPortal>
@@ -75,7 +76,7 @@ export function MobileFeedActions(): ReactElement {
               />
             </RootPortal>
             <Link href={`${webappUrl}${user.username}`} passHref>
-              <a>
+              <a className="shell-press">
                 <ProfilePictureWithIndicator user={user} />
               </a>
             </Link>

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 =

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)}
               />
             )}

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>

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>
   );

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}>

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}

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.

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`,
             },

packages/shared/src/components/shell/constants.ts

@@ -0,0 +1,8 @@
+// The numbers of the phone shell (Mobile UX review, chapter 10).
+export const swipe = {
+  lockDistance: 10,
+  commitDistance: 56,
+  coneRatio: 2,
+  velocity: 0.3,
+  velocityDistance: 32,
+};

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,
     },

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} />} />