feat: introduce dual desktop sidebar

packages/shared/src/components/MainFeedLayout.tsx

@@ -730,9 +730,6 @@ export default function MainFeedLayout({
             {...feedProps}
             shortcuts={shortcuts}
             disableBriefCard={disableBriefCard}
-            className={classNames(
-              shouldUseListFeedLayout && !isFinder && 'laptop:px-6',
-            )}
           />
         )
       )}

packages/shared/src/components/MainLayout.tsx

@@ -24,7 +24,6 @@ import {
   ActiveFeedNameContextProvider,
   useActiveFeedNameContext,
 } from '../contexts';
-import { useFeedLayout, useViewSize, ViewSize } from '../hooks';
 import { BootPopups } from './modals/BootPopups';
 import { SmartComposerHotkey } from './post/SmartComposerHotkey';
 import { SmartComposerDevToggle } from './post/SmartComposerDevToggle';
@@ -76,7 +75,6 @@ function MainLayoutComponent({
   isNavItemsButton,
   customBanner,
   additionalButtons,
-  screenCentered = true,
   showSidebar = true,
   className,
   onLogoClick,
@@ -86,20 +84,24 @@ function MainLayoutComponent({
 }: MainLayoutProps): ReactElement | null {
   const router = useRouter();
   const { logEvent } = useLogContext();
-  const { user, isAuthReady, showLogin } = useAuthContext();
+  const { user, isAuthReady, isLoggedIn, showLogin } = useAuthContext();
   const { growthbook } = useGrowthBookContext();
   const { sidebarRendered } = useSidebarRendered();
   const { isAvailable: isBannerAvailable } = useBanner();
   const { sidebarExpanded, autoDismissNotifications } =
     useContext(SettingsContext);
+  // The dual-sidebar layout takes ownership of the global header chrome
+  // (logo + search + user actions) for authenticated users on laptop+.
+  // When that's the case we hide the global header and switch the main
+  // content over to the floating card treatment (rounded, bordered, shadow)
+  // and hide the global feedback widget (the rail provides its own).
+  const sidebarOwnsHeader = isLoggedIn && showSidebar && sidebarRendered;
   const [hasLoggedImpression, setHasLoggedImpression] = useState(false);
   const { feedName } = useActiveFeedNameContext();
   const page = router?.route?.substring(1).trim() as SharedFeedPage;
   const currentFeedName = feedName ?? page ?? SharedFeedPage.Popular;
   const { isCustomFeed } = useFeedName({ feedName: currentFeedName });
   const { plusEntryAnnouncementBar } = usePlusEntry();
-  const isLaptopXL = useViewSize(ViewSize.LaptopXL);
-  const { screenCenteredOnMobileLayout } = useFeedLayout();
   const { isNotificationsReady, unreadCount } = useNotificationContext();
   useNotificationParams();
 
@@ -177,11 +179,8 @@ function MainLayoutComponent({
     return null;
   }
 
-  const isScreenCentered =
-    isLaptopXL && screenCenteredOnMobileLayout ? true : screenCentered;
-
   return (
-    <div className="antialiased">
+    <div className="antialiased laptop:bg-[color-mix(in_srgb,var(--theme-surface-secondary)_3%,var(--theme-background-default))]">
       {canGoBack && <GoBackHeaderMobile />}
       {customBanner}
       {isBannerAvailable && <PromotionalBanner />}
@@ -203,33 +202,41 @@ function MainLayoutComponent({
 
       <MainLayoutHeader
         hasBanner={isBannerAvailable}
-        sidebarRendered={sidebarRendered}
+        sidebarRendered={showSidebar && sidebarRendered}
         additionalButtons={additionalButtons}
         onLogoClick={onLogoClick}
       />
       <main
         className={classNames(
-          'flex flex-col transition-[padding] duration-300 ease-in-out laptop:pt-16',
-          showSidebar && 'tablet:pl-16 laptop:pl-11',
+          'flex flex-col transition-[padding] duration-300 ease-in-out',
+          showSidebar && 'tablet:pl-16 laptop:pl-16',
+          !sidebarOwnsHeader && 'laptop:pt-16',
+          isBannerAvailable && !sidebarOwnsHeader && 'laptop:pt-24',
           className,
-          isAuthReady &&
-            !isScreenCentered &&
-            sidebarExpanded &&
-            'laptop:!pl-60',
-          isBannerAvailable && 'laptop:pt-24',
+          isAuthReady && showSidebar && sidebarExpanded && 'laptop:!pl-[19rem]',
         )}
       >
         {isAuthReady && showSidebar && (
           <Sidebar
+            additionalButtons={additionalButtons}
             isNavButtons={isNavItemsButton}
+            showFeedbackWidget={!hideFeedbackWidget}
             onNavTabClick={onNavTabClick}
             onLogoClick={onLogoClick}
             activePage={activePage ?? router.asPath ?? router.pathname}
           />
         )}
-        {children}
+        <div
+          className={classNames(
+            'flex min-h-0 flex-1 flex-col',
+            sidebarOwnsHeader &&
+              'laptop:my-3 laptop:ml-1 laptop:mr-3 laptop:min-h-[calc(100vh-1.5rem)] laptop:overflow-hidden laptop:rounded-24 laptop:border laptop:border-border-subtlest-quaternary laptop:bg-background-default laptop:p-0.5 laptop:shadow-2',
+          )}
+        >
+          {children}
+        </div>
       </main>
-      {!hideFeedbackWidget && <FeedbackWidget />}
+      {!hideFeedbackWidget && !sidebarOwnsHeader && <FeedbackWidget />}
     </div>
   );
 }

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

@@ -12,16 +12,12 @@ import { checkIsExtension } from '../../lib/func';
 import { LogoutReason } from '../../lib/user';
 import { TargetId } from '../../lib/log';
 
-import { ProfileMenuFooter } from './ProfileMenuFooter';
 import { UpgradeToPlus } from '../UpgradeToPlus';
 import { ProfileMenuHeader } from './ProfileMenuHeader';
+import { ProfileMenuStats } from './ProfileMenuStats';
 import { HorizontalSeparator } from '../utilities';
 
 import { ProfileSection } from './ProfileSection';
-import { ResourceSection } from './sections/ResourceSection';
-import { AccountSection } from './sections/AccountSection';
-import { MainSection } from './sections/MainSection';
-import { ThemeSection } from './sections/ThemeSection';
 import { FeedbackButtonSection } from './sections/FeedbackButtonSection';
 import { useCustomizeNewTabMenuItem } from './sections/ExtensionSection';
 import { ProfileCompletion } from '../../features/profile/components/ProfileWidgets/ProfileCompletion';
@@ -35,10 +31,12 @@ const ExtensionSection = dynamic(() =>
 
 interface ProfileMenuProps {
   onClose: () => void;
+  position?: InteractivePopupPosition;
 }
 
 export default function ProfileMenu({
   onClose,
+  position = InteractivePopupPosition.ProfileMenu,
 }: ProfileMenuProps): ReactElement | null {
   const { events } = useRouter();
   const { user, logout } = useAuthContext();
@@ -62,11 +60,12 @@ export default function ProfileMenu({
     <InteractivePopup
       onClose={onClose}
       closeOutsideClick
-      position={InteractivePopupPosition.ProfileMenu}
+      position={position}
       className="flex max-h-[calc(100vh-4rem)] w-full max-w-80 flex-col gap-3 overflow-y-auto !rounded-10 border border-border-subtlest-tertiary !bg-accent-pepper-subtlest p-3"
     >
       {showProfileCompletion && <ProfileCompletion />}
       <ProfileMenuHeader />
+      <ProfileMenuStats />
 
       <UpgradeToPlus
         target={TargetId.ProfileDropdown}
@@ -77,21 +76,16 @@ export default function ProfileMenu({
       <HorizontalSeparator />
 
       <nav className="flex flex-col gap-2">
-        <MainSection />
+        {checkIsExtension() && (
+          <>
+            {customizeMenuItem && (
+              <ProfileSection items={[customizeMenuItem]} />
+            )}
+            <ExtensionSection />
+            <HorizontalSeparator />
+          </>
+        )}
 
-        <HorizontalSeparator />
-
-        <ThemeSection className="px-1" />
-
-        <HorizontalSeparator />
-
-        <AccountSection prepended={customizeMenuItem} />
-
-        {checkIsExtension() && <ExtensionSection />}
-
-        <HorizontalSeparator />
-
-        <ResourceSection />
         <FeedbackButtonSection className="px-1" />
 
         <HorizontalSeparator />
@@ -106,8 +100,6 @@ export default function ProfileMenu({
           ]}
         />
       </nav>
-
-      <ProfileMenuFooter />
     </InteractivePopup>
   );
 }

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

@@ -0,0 +1,41 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { ReputationUserBadge } from '../ReputationUserBadge';
+import { CoreIcon } from '../icons';
+import { IconSize } from '../Icon';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useHasAccessToCores } from '../../hooks/useCoresFeature';
+import Link from '../utilities/Link';
+import { walletUrl } from '../../lib/constants';
+import { largeNumberFormat } from '../../lib';
+
+export const ProfileMenuStats = (): ReactElement | null => {
+  const { user } = useAuthContext();
+  const hasCoresAccess = useHasAccessToCores();
+
+  if (!user) {
+    return null;
+  }
+
+  if (!hasCoresAccess && !user.reputation) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <ReputationUserBadge
+        className="h-8 rounded-8 px-2 hover:bg-surface-hover"
+        user={{ reputation: user.reputation }}
+        iconProps={{ size: IconSize.XSmall }}
+      />
+      {hasCoresAccess && (
+        <Link href={walletUrl} passHref>
+          <a className="focus-outline flex h-8 items-center gap-1 rounded-8 px-2 font-bold text-text-primary typo-footnote hover:bg-surface-hover">
+            <CoreIcon size={IconSize.XSmall} aria-hidden />
+            {largeNumberFormat(user.balance?.amount ?? 0)}
+          </a>
+        </Link>
+      )}
+    </div>
+  );
+};