feat(onboarding): redesign onboarding v2 page

packages/shared/src/components/MainLayout.tsx

@@ -58,6 +58,7 @@ export interface MainLayoutProps
   screenCentered?: boolean;
   customBanner?: ReactNode;
   showSidebar?: boolean;
+  sidebarDisabled?: boolean;
   onNavTabClick?: (tab: string) => void;
   canGoBack?: string;
   hideBackButton?: boolean;
@@ -71,8 +72,10 @@ function MainLayoutComponent({
   isNavItemsButton,
   customBanner,
   additionalButtons,
+  hideSearchField,
   screenCentered = true,
   showSidebar = true,
+  sidebarDisabled = true,
   className,
   onLogoClick,
   onNavTabClick,
@@ -192,6 +195,7 @@ function MainLayoutComponent({
         hasBanner={isBannerAvailable}
         sidebarRendered={sidebarRendered}
         additionalButtons={additionalButtons}
+        hideSearchField={hideSearchField}
         onLogoClick={onLogoClick}
       />
       <main
@@ -202,6 +206,7 @@ function MainLayoutComponent({
           isAuthReady &&
             !isScreenCentered &&
             sidebarExpanded &&
+            !sidebarDisabled &&
             'laptop:!pl-60',
           isBannerAvailable && 'laptop:pt-24',
         )}
@@ -212,6 +217,7 @@ function MainLayoutComponent({
             onNavTabClick={onNavTabClick}
             onLogoClick={onLogoClick}
             activePage={activePage}
+            disabled={sidebarDisabled}
           />
         )}
         {children}

packages/shared/src/components/layout/MainLayoutHeader.tsx

@@ -20,6 +20,7 @@ export interface MainLayoutHeaderProps {
   sidebarRendered?: boolean;
   additionalButtons?: ReactNode;
   onLogoClick?: (e: React.MouseEvent) => unknown;
+  hideSearchField?: boolean;
 }
 
 const SearchPanel = dynamic(
@@ -39,6 +40,7 @@ function MainLayoutHeader({
   sidebarRendered,
   additionalButtons,
   onLogoClick,
+  hideSearchField,
 }: MainLayoutHeaderProps): ReactElement {
   const { loadedSettings } = useSettingsContext();
   const { streak, isStreaksEnabled } = useReadingStreak();
@@ -56,6 +58,7 @@ function MainLayoutHeader({
 
   const RenderSearchPanel = useCallback(
     () =>
+      !hideSearchField &&
       loadedSettings && (
         <SearchPanel
           className={{
@@ -70,7 +73,7 @@ function MainLayoutHeader({
           }}
         />
       ),
-    [loadedSettings, isSearchPage, hasBanner],
+    [loadedSettings, isSearchPage, hasBanner, hideSearchField],
   );
 
   if (loadedSettings && !isLaptop) {

packages/shared/src/components/sidebar/Sidebar.tsx

@@ -21,13 +21,15 @@ interface SidebarProps {
   isNavButtons?: boolean;
   onNavTabClick?: (tab: string) => void;
   onLogoClick?: (e: React.MouseEvent) => unknown;
+  disabled?: boolean;
 }
 
 export const Sidebar = ({
   isNavButtons,
   onNavTabClick,
   onLogoClick,
   activePage,
+  disabled,
 }: SidebarProps): ReactElement => {
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isTablet = useViewSize(ViewSize.Tablet);
@@ -39,6 +41,7 @@ export const Sidebar = ({
         activePage={activePage}
         onLogoClick={onLogoClick}
         featureTheme={featureTheme}
+        disabled={disabled}
       />
     );
   }
@@ -52,6 +55,7 @@ export const Sidebar = ({
         featureTheme={featureTheme}
         isNavButtons={isNavButtons}
         onNavTabClick={onNavTabClick}
+        disabled={disabled}
       />
     );
   }

packages/shared/src/components/sidebar/SidebarDesktop.tsx

@@ -22,58 +22,70 @@ type SidebarDesktopProps = {
   };
   isNavButtons?: boolean;
   onNavTabClick?: (tab: string) => void;
+  disabled?: boolean;
 };
 export const SidebarDesktop = ({
   activePage: activePageProp,
   featureTheme,
   isNavButtons,
   onNavTabClick,
+  disabled,
 }: SidebarDesktopProps): ReactElement => {
   const router = useRouter();
   const { sidebarExpanded } = useSettingsContext();
   const { isAvailable: isBannerAvailable } = useBanner();
   const activePage = activePageProp || router.asPath || router.pathname;
 
+  const effectiveExpanded = disabled ? false : sidebarExpanded;
+
   const defaultRenderSectionProps = useMemo(
     () => ({
-      sidebarExpanded,
-      shouldShowLabel: sidebarExpanded,
+      sidebarExpanded: effectiveExpanded,
+      shouldShowLabel: effectiveExpanded,
       activePage,
     }),
-    [sidebarExpanded, activePage],
+    [effectiveExpanded, activePage],
   );
 
   return (
     <SidebarAside
       data-testid="sidebar-aside"
       className={classNames(
-        sidebarExpanded ? 'laptop:w-60' : 'laptop:w-11',
+        effectiveExpanded ? 'laptop:w-60' : 'laptop:w-11',
         isBannerAvailable
           ? 'laptop:top-24 laptop:h-[calc(100vh-theme(space.24))]'
           : 'laptop:top-16 laptop:h-[calc(100vh-theme(space.16))]',
         featureTheme && 'bg-transparent',
+        disabled && 'pointer-events-none select-none',
       )}
+      aria-disabled={disabled || undefined}
     >
       <SidebarScrollWrapper>
-        <Nav>
-          <SidebarMenuIcon />
-          {/* Primary Action */}
-          <div
-            className={classNames(
-              'mb-2 flex items-center justify-center transition-[padding] duration-300',
-              sidebarExpanded ? 'px-2' : 'px-1',
-            )}
-          >
-            <CreatePostButton
+        <Nav
+          className={classNames(
+            disabled &&
+              '[&_a]:!text-text-disabled [&_button]:!text-text-disabled [&_span]:!text-text-disabled [&_svg]:!text-text-disabled',
+          )}
+        >
+          {!disabled && <SidebarMenuIcon />}
+          {!disabled && (
+            <div
               className={classNames(
-                '!flex whitespace-nowrap',
-                sidebarExpanded ? 'w-full justify-start' : 'justify-center',
+                'mb-2 flex items-center justify-center transition-[padding] duration-300',
+                effectiveExpanded ? 'px-2' : 'px-1',
               )}
-              compact={!sidebarExpanded}
-              size={ButtonSize.Small}
-              showIcon
-            />
-          </div>
+            >
+              <CreatePostButton
+                className={classNames(
+                  '!flex whitespace-nowrap',
+                  effectiveExpanded ? 'w-full justify-start' : 'justify-center',
+                )}
+                compact={!effectiveExpanded}
+                size={ButtonSize.Small}
+                showIcon
+              />
+            </div>
+          )}
 
           {/* Primary Navigation - Always visible */}
           <MainSection
@@ -82,32 +94,33 @@ export const SidebarDesktop = ({
             isItemsButton={isNavButtons}
           />
 
-          {/* User Content Sections */}
-          <CustomFeedSection
-            {...defaultRenderSectionProps}
-            onNavTabClick={onNavTabClick}
-            title="Feeds"
-            isItemsButton={false}
-          />
-          <NetworkSection
-            {...defaultRenderSectionProps}
-            title="Squads"
-            isItemsButton={isNavButtons}
-            key="network-section"
-          />
-          <BookmarkSection
-            {...defaultRenderSectionProps}
-            title="Saved"
-            isItemsButton={false}
-            key="bookmark-section"
-          />
-
-          {/* Discovery Section */}
-          <DiscoverSection
-            {...defaultRenderSectionProps}
-            title="Discover"
-            isItemsButton={isNavButtons}
-          />
+          {!disabled && (
+            <>
+              <CustomFeedSection
+                {...defaultRenderSectionProps}
+                onNavTabClick={onNavTabClick}
+                title="Feeds"
+                isItemsButton={false}
+              />
+              <NetworkSection
+                {...defaultRenderSectionProps}
+                title="Squads"
+                isItemsButton={isNavButtons}
+                key="network-section"
+              />
+              <BookmarkSection
+                {...defaultRenderSectionProps}
+                title="Saved"
+                isItemsButton={false}
+                key="bookmark-section"
+              />
+              <DiscoverSection
+                {...defaultRenderSectionProps}
+                title="Discover"
+                isItemsButton={isNavButtons}
+              />
+            </>
+          )}
         </Nav>
       </SidebarScrollWrapper>
     </SidebarAside>

packages/shared/src/components/sidebar/SidebarTablet.tsx

@@ -46,13 +46,15 @@ export const SidebarTablet = ({
   activePage,
   featureTheme,
   onLogoClick,
+  disabled,
 }: {
   activePage: string;
   featureTheme?: {
     logo?: string;
     logoText?: string;
   };
   onLogoClick?: (e: React.MouseEvent) => unknown;
+  disabled?: boolean;
 }): ReactElement => {
   const { alerts } = useAlertsContext();
   const { user, isLoggedIn, squads } = useAuthContext();
@@ -91,6 +93,8 @@ export const SidebarTablet = ({
       className={classNames(
         'w-16 items-center gap-4',
         featureTheme && 'bg-transparent',
+        disabled &&
+          'pointer-events-none select-none [&_a]:!text-text-disabled [&_button]:!text-text-disabled [&_span]:!text-text-disabled [&_svg]:!text-text-disabled',
       )}
     >
       <HeaderLogo

packages/shared/src/lib/constants.ts

@@ -33,6 +33,7 @@ export const slackIntegration = 'https://r.daily.dev/slack';
 export const statusPage = 'https://r.daily.dev/status';
 export const businessWebsiteUrl = 'https://r.daily.dev/business';
 export const appsUrl = 'https://daily.dev/apps';
+export const mobileAppUrl = 'https://app.daily.dev';
 export const timezoneSettingsUrl = 'https://r.daily.dev/timezone';
 export const isDevelopment = process.env.NODE_ENV === 'development';
 export const isProductionAPI =

packages/webapp/components/footer/FooterWrapper.tsx

@@ -42,6 +42,7 @@ export default function FooterWrapper({
   post,
 }: FooterNavBarProps): ReactElement {
   const router = useRouter();
+  const isOnboardingV2 = router?.pathname === '/onboarding-v2';
 
   const showPlusButton =
     !router?.pathname?.startsWith('/settings') &&
@@ -55,9 +56,11 @@ export default function FooterWrapper({
           'bg-gradient-to-t from-background-subtle from-70% to-transparent px-2 pt-2',
       )}
     >
-      <div className="hidden tablet:block">
-        <ScrollToTopButton />
-      </div>
+      {!isOnboardingV2 && (
+        <div className="hidden tablet:block">
+          <ScrollToTopButton />
+        </div>
+      )}
       {post && post.type !== PostType.Brief && (
         <div className="my-2 w-full px-2 tablet:hidden">
           <NewComment