feat: introduce dual desktop sidebar

packages/extension/src/newtab/App.tsx

@@ -38,7 +38,6 @@ import { ExtensionContextProvider } from '../contexts/ExtensionContext';
 import CustomRouter from '../lib/CustomRouter';
 import { version } from '../../package.json';
 import MainFeedPage from './MainFeedPage';
-import HijackingLoginStrip from './HijackingLoginStrip';
 import { BootDataProvider } from '../../../shared/src/contexts/BootProvider';
 import { getContentScriptPermissionAndRegister } from '../lib/extensionScripts';
 import { useContentScriptStatus } from '../../../shared/src/hooks';
@@ -67,7 +66,7 @@ const feedErrorFallback: ReactElement = (
   </div>
 );
 
-function HijackingPage({
+function OnboardingHijackPage({
   onPageChanged,
 }: {
   onPageChanged: (page: string) => void;
@@ -87,7 +86,6 @@ function HijackingPage({
       onPageChanged={onPageChanged}
       initialPage="/"
       shouldInitializeCurrentPage={false}
-      shortcuts={<HijackingLoginStrip />}
     />
   );
 }
@@ -108,8 +106,12 @@ function InternalApp(): ReactElement {
   const { growthbook } = useGrowthBookContext();
   const isPageReady =
     (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
+  // Logged-out users now stay on the regular MainFeedPage (with the
+  // sticky sign-in strip up top + the public Popular feed). Only users
+  // who have signed up but haven't finished onboarding still get the
+  // onboarding hijack so we keep nudging them through the flow.
   const shouldRedirectOnboarding =
-    isPageReady && (!user || !isOnboardingComplete) && !isTesting;
+    isPageReady && !!user && !isOnboardingComplete && !isTesting;
 
   useCheckLocation();
   useCheckCoresRole();
@@ -150,7 +152,7 @@ function InternalApp(): ReactElement {
     return (
       <ErrorBoundary feature="extension-feed" fallback={feedErrorFallback}>
         <DndContextProvider>
-          <HijackingPage onPageChanged={onPageChanged} />
+          <OnboardingHijackPage onPageChanged={onPageChanged} />
         </DndContextProvider>
       </ErrorBoundary>
     );

packages/extension/src/newtab/MainFeedPage.tsx

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import React, {
   useCallback,
   useContext,
@@ -18,7 +18,6 @@ import { useSettingsContext } from '@dailydotdev/shared/src/contexts/SettingsCon
 import { SearchProviderEnum } from '@dailydotdev/shared/src/graphql/search';
 import { LogEvent } from '@dailydotdev/shared/src/lib/log';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
-import { useFeedLayout } from '@dailydotdev/shared/src/hooks';
 import { useDndContext } from '@dailydotdev/shared/src/contexts/DndContext';
 import { FeedLayoutProvider } from '@dailydotdev/shared/src/contexts/FeedContext';
 import useCustomDefaultFeed from '@dailydotdev/shared/src/hooks/feed/useCustomDefaultFeed';
@@ -30,6 +29,9 @@ import { CustomizeNewTabSidebar } from '@dailydotdev/shared/src/features/customi
 import { isFocusActiveAt } from '@dailydotdev/shared/src/features/customizeNewTab/lib/focusSchedule';
 import { normaliseNewTabMode } from '@dailydotdev/shared/src/features/customizeNewTab/lib/newTabMode';
 import { DndBanner } from '@dailydotdev/shared/src/components/DndBanner';
+import { ExtensionTopBanners } from '@dailydotdev/shared/src/features/extensionMockupPreview/ExtensionTopBanners';
+import { ExtensionSignInStrip } from '@dailydotdev/shared/src/features/extensionMockupPreview/ExtensionSignInStrip';
+import { ExtensionMockupPanel } from '@dailydotdev/shared/src/features/extensionMockupPreview/ExtensionMockupPanel';
 import ShortcutLinks from './ShortcutLinks/ShortcutLinks';
 import { CompanionPopupButton } from '../companion/CompanionPopupButton';
 import { useCompanionSettings } from '../companion/useCompanionSettings';
@@ -50,7 +52,6 @@ export type MainFeedPageProps = {
   onPageChanged: (page: string) => unknown;
   initialPage?: string;
   shouldInitializeCurrentPage?: boolean;
-  shortcuts?: ReactNode;
 };
 
 const normalizePage = (page: string): string =>
@@ -100,7 +101,6 @@ const MainFeedPageInner = ({
   onPageChanged,
   initialPage,
   shouldInitializeCurrentPage = true,
-  shortcuts,
 }: MainFeedPageProps): ReactElement => {
   const { logEvent } = useLogContext();
   const [isSearchOn, setIsSearchOn] = useState(false);
@@ -109,7 +109,6 @@ const MainFeedPageInner = ({
     getInitialFeedName(initialPage),
   );
   const [searchQuery, setSearchQuery] = useState<string>();
-  const { shouldUseListFeedLayout } = useFeedLayout({ feedRelated: false });
   useCompanionSettings();
   const { isActive: isDndActive, showDnd, setShowDnd } = useDndContext();
   const { isCustomDefaultFeed } = useCustomDefaultFeed();
@@ -176,6 +175,7 @@ const MainFeedPageInner = ({
   // visual signal that customizer changes affect THEIR feed, not just
   // a panel-shaped overlay.
   const { panelWidth } = useCustomizeNewTab();
+  const shortcutLinks = <ShortcutLinks shouldUseListFeedLayout={false} />;
 
   return (
     <>
@@ -195,6 +195,15 @@ const MainFeedPageInner = ({
           onNavTabClick={onNavTabClick}
           screenCentered={false}
           customBanner={isDndActive && <DndBanner />}
+          topBanner={
+            <>
+              <ExtensionSignInStrip />
+              <div className="mx-4 flex justify-center pt-2 laptop:mx-0 [&:empty]:hidden">
+                {shortcutLinks}
+              </div>
+              <ExtensionTopBanners />
+            </>
+          }
           additionalButtons={
             !loadingUser && !optOutCompanion && <CompanionPopupButton />
           }
@@ -224,19 +233,13 @@ const MainFeedPageInner = ({
                   }}
                 />
               }
-              shortcuts={
-                shortcuts ?? (
-                  <ShortcutLinks
-                    shouldUseListFeedLayout={shouldUseListFeedLayout}
-                  />
-                )
-              }
             />
           </FeedLayoutProvider>
           <DndModal isOpen={showDnd} onRequestClose={() => setShowDnd(false)} />
         </MainLayout>
       </div>
       <CustomizeNewTabSidebar />
+      <ExtensionMockupPanel />
     </>
   );
 };