feat(layout-v2): single-panel Linear-style sidebar

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

@@ -301,19 +301,25 @@ function MainLayoutComponent({
         />
       )}
       <main
+        data-resizable-pane
         className={classNames(
           'flex flex-col',
           animateContentPadding &&
             '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'),
+            // v2 collapses to a narrow icon rail (laptop:pl-14); expanded, the
+            // padding tracks the resizable panel width below. Tablet keeps the
+            // icon SidebarTablet width.
+            (isV2 ? 'tablet:pl-16 laptop:pl-14' : 'tablet:pl-16 laptop:pl-11'),
           className,
           isAuthReady &&
             showSidebar &&
             (sidebarExpanded || forceSidebarExpanded) &&
             (isV2
-              ? 'laptop:!pl-[19rem]'
+              ? // Matches the resizable sidebar width (see SidebarDesktopV2);
+                // the var is updated live while dragging so content tracks it.
+                'laptop:!pl-[var(--sidebar-width,19rem)]'
               : !isScreenCentered && 'laptop:!pl-60'),
           isBannerAvailable && !sidebarOwnsHeader && 'laptop:pt-24',
         )}

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

@@ -63,7 +63,7 @@ export const ProfileSectionItem = ({
       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,
@@ -81,7 +81,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/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>
+  );
+}

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

@@ -0,0 +1,62 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useRouter } from 'next/router';
+import { Dropdown } from '../fields/Dropdown';
+import { CalendarIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { ButtonSize, ButtonVariant } from '../buttons/Button';
+import { ExploreTabs, tabToUrl, urlToTab } from './FeedExploreHeader';
+import { QueryStateKeys, useQueryState } from '../../hooks/utils/useQueryState';
+import { periodTexts } from '../layout/common';
+
+const sortLabels = Object.values(ExploreTabs);
+const sortsWithPeriod: ExploreTabs[] = [
+  ExploreTabs.MostUpvoted,
+  ExploreTabs.BestDiscussions,
+];
+
+// v2 Explore: switch the feed's ranking via a "Sort" dropdown rather than a
+// second row of tabs — sorting a feed isn't navigating to a sibling page, so
+// a dropdown reads cleaner (Reddit/GitHub pattern). Each sort is still its
+// own route, so selecting one navigates.
+export function ExploreSortDropdown(): ReactElement {
+  const router = useRouter();
+  const currentPath = (router.asPath || router.pathname).split('?')[0];
+  const activeTab = urlToTab[currentPath] ?? ExploreTabs.Popular;
+  const selectedIndex = Math.max(0, sortLabels.indexOf(activeTab));
+  const [period, setPeriod] = useQueryState({
+    key: [QueryStateKeys.FeedPeriod],
+    defaultValue: 0,
+  });
+
+  return (
+    <span className="ml-auto flex items-center gap-2">
+      {sortsWithPeriod.includes(activeTab) && (
+        <Dropdown
+          iconOnly
+          shouldIndicateSelected
+          icon={<CalendarIcon size={IconSize.Small} />}
+          buttonSize={ButtonSize.Small}
+          buttonVariant={ButtonVariant.Float}
+          selectedIndex={period}
+          options={periodTexts}
+          onChange={(_, index) => setPeriod(index)}
+          buttonAriaLabel="Filter by date range"
+        />
+      )}
+      <Dropdown
+        selectedIndex={selectedIndex}
+        options={sortLabels}
+        buttonSize={ButtonSize.Small}
+        buttonVariant={ButtonVariant.Float}
+        buttonAriaLabel="Sort posts"
+        onChange={(value) => {
+          const url = tabToUrl[value as ExploreTabs];
+          if (url) {
+            router.push(url).catch(() => undefined);
+          }
+        }}
+      />
+    </span>
+  );
+}

packages/shared/src/components/icons/Compose/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const ComposeIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);