feat(layout-v2): label rail icons and pin streak/cores/reputation

packages/shared/src/components/MainFeedLayout.tsx

@@ -88,6 +88,8 @@ import { useReadingReminderHero } from '../hooks/notifications/useReadingReminde
 import { useTrackQuestClientEvent } from '../hooks/useTrackQuestClientEvent';
 import { useReadingReminderVariation } from '../hooks/notifications/useReadingReminderVariation';
 import { useLayoutVariant } from '../hooks/layout/useLayoutVariant';
+import { ExploreSectionTabs } from './header/ExploreSectionTabs';
+import { ExploreSortDropdown } from './header/ExploreSortDropdown';
 
 const FeedExploreHeader = dynamic(
   () =>
@@ -263,6 +265,7 @@ export default function MainFeedLayout({
     isPopular,
     isAnyExplore,
     isExploreLatest,
+    isDiscussed,
     isSortableFeed,
     isCustomFeed,
     isSearch: isSearchPage,
@@ -726,7 +729,10 @@ export default function MainFeedLayout({
   // page-header strip (matching the SquadDirectoryLayout pattern). The
   // inline FeedExploreComponent is suppressed below to avoid showing
   // the same tabs twice.
-  const showExploreV2PageHeader = isAnyExplore && isV2;
+  // The Discussions feed (/discussed) is part of the Explore hub — show the
+  // same section tabs there so the hub persists. The Sort dropdown is only
+  // for the actual Explore sorts, so it stays gated on isAnyExplore.
+  const showExploreV2PageHeader = (isAnyExplore || isDiscussed) && isV2;
 
   // v2 also hoists the regular page-header strip up here, OUTSIDE
   // `FeedPageLayoutComponent`, so it can span the full floating-card
@@ -765,13 +771,8 @@ export default function MainFeedLayout({
     <>
       {showExploreV2PageHeader && (
         <header className={classNames(pageHeaderClassName, '!py-0')}>
-          <FeedExploreHeader
-            directoryTabs
-            tab={tab}
-            setTab={onTabChange}
-            showBreadcrumbs={false}
-            className={{ container: 'min-w-0 flex-1' }}
-          />
+          <ExploreSectionTabs />
+          {isAnyExplore && <ExploreSortDropdown />}
         </header>
       )}
       {showFeedV2PageHeader && (

packages/shared/src/components/MainLayout.tsx

@@ -38,6 +38,7 @@ import { SpotlightHost } from './spotlight/SpotlightHost';
 import { FeedbackWidget } from './feedback';
 import { isExtension } from '../lib/func';
 import { useLayoutVariant } from '../hooks/layout/useLayoutVariant';
+import { useRecordRecentPages } from '../hooks/useRecentPages';
 import { isSidebarSettingsPath } from './sidebar/sidebarCategory';
 import {
   HomepageTopBanners,
@@ -105,8 +106,15 @@ function MainLayoutComponent({
   const { growthbook } = useGrowthBookContext();
   const { sidebarRendered } = useSidebarRendered();
   const { isAvailable: isBannerAvailable } = useBanner();
-  const { sidebarExpanded, autoDismissNotifications, loadedSettings } =
+  const { sidebarExpanded, autoDismissNotifications, loadedSettings, flags } =
     useContext(SettingsContext);
+  const isSidebarCompact = !!flags?.sidebarCompact;
+  const v2CollapsedPadding = isSidebarCompact
+    ? 'tablet:pl-16 laptop:pl-16'
+    : 'tablet:pl-16 laptop:pl-20';
+  const v2ExpandedPadding = isSidebarCompact
+    ? 'laptop:!pl-[19rem]'
+    : 'laptop:!pl-[20rem]';
   const [hasLoggedImpression, setHasLoggedImpression] = useState(false);
   const { feedName } = useActiveFeedNameContext();
   const page = router?.route?.substring(1).trim() as SharedFeedPage;
@@ -120,6 +128,7 @@ function MainLayoutComponent({
   const { screenCenteredOnMobileLayout } = useFeedLayout();
   const { isNotificationsReady, unreadCount } = useNotificationContext();
   const { isV2, isLoading: isLayoutVariantLoading } = useLayoutVariant();
+  useRecordRecentPages(isV2);
   useNotificationParams();
 
   // Settings pages render their navigation only inside the v2 context panel,
@@ -148,6 +157,18 @@ function MainLayoutComponent({
       setContentTransitionsEnabled(true);
     }
   }, [layoutSettled]);
+  // The v2 page uses a tinted background; the document root stays
+  // `background-default`, so overscroll past the feed reveals a darker strip.
+  // Flag the root while v2 is active so it can paint the same tint (laptop+,
+  // matching where the tinted page background applies — see base.css).
+  useEffect(() => {
+    if (!isV2) {
+      return undefined;
+    }
+    const root = globalThis.document?.documentElement;
+    root?.classList.add('layout-v2');
+    return () => root?.classList.remove('layout-v2');
+  }, [isV2]);
   // v2 (experiment) snaps the initial settle into place (transitions enable
   // one commit later, so only genuine toggles animate). The control variant
   // keeps animating on `layoutSettled` exactly as before.
@@ -307,14 +328,12 @@ function MainLayoutComponent({
             'transition-[padding] duration-300 ease-in-out',
           !sidebarOwnsHeader && 'laptop:pt-16',
           showSidebar &&
-            (isV2 ? 'tablet:pl-16 laptop:pl-16' : 'tablet:pl-16 laptop:pl-11'),
+            (isV2 ? v2CollapsedPadding : 'tablet:pl-16 laptop:pl-11'),
           className,
           isAuthReady &&
             showSidebar &&
             (sidebarExpanded || forceSidebarExpanded) &&
-            (isV2
-              ? 'laptop:!pl-[19rem]'
-              : !isScreenCentered && 'laptop:!pl-60'),
+            (isV2 ? v2ExpandedPadding : !isScreenCentered && 'laptop:!pl-60'),
           isBannerAvailable && !sidebarOwnsHeader && 'laptop:pt-24',
         )}
       >
@@ -341,7 +360,9 @@ function MainLayoutComponent({
                 // card without establishing a scroll container, so descendant
                 // `position: sticky` elements (e.g. the post action bar) stick
                 // to the viewport instead of being inert.
-                'laptop:overflow-clip laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5 laptop:shadow-2',
+                // No drop shadow — the subtle border defines the floating card
+                // in both themes; shadow-2 cast a heavy bottom shadow.
+                'laptop:overflow-clip laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5',
                 !hasTopBanners &&
                   !topBanner &&
                   'laptop:min-h-[calc(100vh-1.5rem)]',

packages/shared/src/components/ProfileMenu/ProfileMenuHeader.tsx

@@ -27,10 +27,14 @@ export const ProfileMenuHeader = ({
   className,
   shouldOpenProfile = false,
   profileImageSize = ProfileImageSize.Large,
-}: Props): ReactElement => {
+}: Props): ReactElement | null => {
   const { user } = useAuthContext();
   const { isPlus } = usePlusSubscription();
 
+  if (!user) {
+    return null;
+  }
+
   return (
     <ConditionalWrapper
       condition={shouldOpenProfile}
@@ -51,7 +55,7 @@ export const ProfileMenuHeader = ({
           className="!rounded-10 border-background-default"
         />
 
-        <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
           <div className="flex items-center gap-1">
             <Typography
               type={TypographyType.Subhead}

packages/shared/src/components/ProfileMenu/ProfileSectionItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import classNames from 'classnames';
+import { useRouter } from 'next/router';
 import type { WithClassNameProps } from '../utilities';
 import Link from '../utilities/Link';
 import {
@@ -53,23 +54,35 @@ export const ProfileSectionItem = ({
   isActive,
   typography,
 }: ProfileSectionItemProps): ReactElement => {
+  const router = useRouter();
   const isMobile = useViewSize(ViewSize.MobileL);
   const tag = href ? TypographyTag.Link : TypographyTag.Button;
   const showLinkIcon = href && external;
   const openNewTab = showLinkIcon && !href.startsWith(webappUrl);
+  // Warm the destination chunk while the cursor is on the row so the click
+  // resolves fast. The dropdown is conditionally mounted, so Next's default
+  // viewport prefetch never gets a chance before the click otherwise.
+  const isInternal = !!href && !external && href.startsWith(webappUrl);
+  const prefetch = () => {
+    if (isInternal) {
+      router.prefetch(href).catch(() => undefined);
+    }
+  };
   const content = (
     <Typography<typeof tag>
       tag={tag}
       color={typography?.color ?? TypographyColor.Tertiary}
       type={typography?.type ?? TypographyType.Subhead}
       className={classNames(
-        'flex h-10 cursor-pointer items-center gap-2 rounded-10 px-1 tablet:h-8',
+        'group flex h-10 cursor-pointer items-center gap-2 rounded-10 px-1 tablet:h-8',
         (href || onClick) && 'hover:bg-surface-float',
         isActive ? 'bg-surface-active' : undefined,
         className,
       )}
       {...combinedClicks(() => onClick?.())}
       {...(openNewTab && { target: '_blank', rel: anchorDefaultRel })}
+      onMouseEnter={prefetch}
+      onFocus={prefetch}
     >
       {Icon && (
         <Icon
@@ -81,7 +94,7 @@ export const ProfileSectionItem = ({
 
       {!isMobile && showLinkIcon && (
         <OpenLinkIcon
-          className="ml-auto text-text-quaternary"
+          className="ml-auto text-text-quaternary opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100"
           size={IconSize.Size16}
         />
       )}

packages/shared/src/components/cards/squad/SquadsDirectoryFeed.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import { useInView } from 'react-intersection-observer';
 import type { Squad } from '../../../graphql/sources';
 import type { SourcesQueryProps } from '../../../hooks/source/useSources';
@@ -26,6 +27,7 @@ import type { Ad } from '../../../graphql/posts';
 import { AdPixel } from '../ad/common/AdPixel';
 import { TargetType } from '../../../lib/log';
 import { useAdQuery } from '../../../features/monetization/useAdQuery';
+import { useLayoutVariant } from '../../../hooks/layout/useLayoutVariant';
 
 interface SquadHorizontalListProps {
   title: HorizontalScrollTitleProps;
@@ -88,11 +90,12 @@ export function SquadsDirectoryFeed({
   className,
   children,
   firstItemShouldBeAd = false,
-}: SquadHorizontalListProps): ReactElement {
+}: SquadHorizontalListProps): ReactElement | null {
   const { ref, inView } = useInView({
     triggerOnce: true,
   });
   const { user, isAuthReady } = useAuthContext();
+  const { isV2 } = useLayoutVariant();
   const { result } = useSources<Squad>({ query, isEnabled: inView });
   const { isFetched } = result;
   const isMobile = useViewSize(ViewSize.MobileL);
@@ -107,7 +110,9 @@ export function SquadsDirectoryFeed({
     ),
     enabled: firstItemShouldBeAd && isAuthReady && !user?.isPlus,
   });
-  const { squad: squadAd } = useSquad({ handle: ad?.data?.source?.handle });
+  const { squad: squadAd } = useSquad({
+    handle: ad?.data?.source?.handle ?? '',
+  });
   const flatSources = useMemo(() => {
     const map = getFlatteredNodes(result);
 
@@ -148,8 +153,8 @@ export function SquadsDirectoryFeed({
           const isAd = ad && index === 0;
 
           return (
-            <SquadItemLogExtraContext key={node.id} ad={ad}>
-              <SquadList squad={node} ad={isAd ? ad : undefined}>
+            <SquadItemLogExtraContext key={node.id} ad={ad ?? undefined}>
+              <SquadList squad={node} ad={isAd ? ad ?? undefined : undefined}>
                 {!!ad?.pixel && <AdPixel pixel={ad.pixel} />}
               </SquadList>
             </SquadItemLogExtraContext>
@@ -163,7 +168,13 @@ export function SquadsDirectoryFeed({
   return (
     <HorizontalScroll
       ref={ref}
-      className={{ container: className, scroll: 'gap-6' }}
+      className={{
+        container: className,
+        // v2: bleed the scroll row past the page gutters (laptop:px-6) so the
+        // cards run continuously to the edge of the feed area instead of being
+        // clipped inside the padding. Re-pad so the first card stays aligned.
+        scroll: classNames('gap-6', isV2 && 'laptop:-mx-6 laptop:px-6'),
+      }}
       scrollProps={{ title, linkToSeeAll }}
     >
       {children}
@@ -175,12 +186,12 @@ export function SquadsDirectoryFeed({
             (node.flags?.featured && linkToSeeAll.includes('featured'));
 
           return showFeaturedCard ? (
-            <SquadItemLogExtraContext key={node.id} ad={ad}>
+            <SquadItemLogExtraContext key={node.id} ad={ad ?? undefined}>
               <SquadGrid
                 source={node}
                 className="w-80"
                 border={shouldShowAd ? SourceCardBorderColor.Pepper : undefined}
-                ad={shouldShowAd ? ad : undefined}
+                ad={shouldShowAd ? ad ?? undefined : undefined}
               >
                 {!!ad?.pixel && <AdPixel pixel={ad.pixel} />}
               </SquadGrid>

packages/shared/src/components/fields/Dropdown.tsx

@@ -143,12 +143,14 @@ export function Dropdown({
       size={buttonSize}
       disabled={disabled}
       className={classNames(
-        // `!pl-4 !pr-2.5` overrides the Button's built-in Large padding (px-6)
-        // so the value lines up with the other fields' 16px text inset and the
-        // chevron sits tight to the right edge instead of floating 24px in.
-        'group flex w-full items-center !pl-4 !pr-2.5 font-normal text-text-secondary typo-body hover:bg-surface-hover hover:text-text-primary',
+        'group flex items-center font-normal text-text-secondary typo-body hover:bg-surface-hover hover:text-text-primary',
+        // Value dropdowns get `!pl-4 !pr-2.5` so the value lines up with other
+        // fields' 16px text inset and the chevron sits tight to the right edge.
+        // Icon-only dropdowns drop that and render as a square instead.
+        iconOnly
+          ? 'aspect-square justify-center !px-0'
+          : 'w-full !pl-4 !pr-2.5',
         className?.button,
-        iconOnly && 'items-center justify-center',
       )}
       onClick={fullScreen ? handleMenuTrigger : undefined}
       onKeyDown={handleKeyboard}

packages/shared/src/components/header/ExploreHubHeader.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import { PageHeader } from '../layout/PageHeader';
+import { ExploreSectionTabs } from './ExploreSectionTabs';
+
+// Shared v2 header for the Explore hub's directory pages (Tags, Sources,
+// Leaderboard, Best of). Keeps the section-tab strip and its height
+// (`!py-0`) consistent in one place. Optional children render as header
+// actions (e.g. the "Suggest source" button).
+export function ExploreHubHeader({
+  children,
+}: {
+  children?: ReactNode;
+}): ReactElement {
+  return (
+    <PageHeader title={<ExploreSectionTabs />} className="!py-0">
+      {children}
+    </PageHeader>
+  );
+}

packages/shared/src/components/header/ExploreSectionTabs.tsx

@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useRouter } from 'next/router';
+import {
+  SquadDirectoryNavbar,
+  SquadDirectoryNavbarItem,
+} from '../squads/layout/SquadDirectoryNavbar';
+import { ButtonSize } from '../buttons/Button';
+
+type ExploreSection = {
+  label: string;
+  path: string;
+  // The tab is active when the current path equals `match` or sits under it
+  // (e.g. /tags/react keeps the Tags tab active).
+  match: string;
+};
+
+const sections: ExploreSection[] = [
+  { label: 'Explore', path: '/posts', match: '/posts' },
+  { label: 'Tags', path: '/tags', match: '/tags' },
+  { label: 'Sources', path: '/sources', match: '/sources' },
+  { label: 'Leaderboard', path: '/users', match: '/users' },
+  { label: 'Discussions', path: '/discussed', match: '/discussed' },
+];
+
+// Primary navbar for the unified Explore hub (v2). Sits above the Explore
+// feed's sort tabs and on the Tags/Sources/Leaderboard/Discussions pages so
+// the sections stay one click apart after Discover was folded into Home.
+export function ExploreSectionTabs(): ReactElement {
+  const router = useRouter();
+  const currentPath = (router.asPath || router.pathname).split('?')[0];
+
+  return (
+    <SquadDirectoryNavbar
+      aria-label="Explore sections"
+      className="!mx-0 min-w-0 flex-1 !border-0 !px-0"
+    >
+      {sections.map((section) => (
+        <SquadDirectoryNavbarItem
+          key={section.label}
+          buttonSize={ButtonSize.Small}
+          isActive={
+            currentPath === section.match ||
+            currentPath.startsWith(`${section.match}/`)
+          }
+          label={section.label}
+          ariaLabel={`Show ${section.label}`}
+          path={section.path}
+        />
+      ))}
+    </SquadDirectoryNavbar>
+  );
+}