fix: missing go back button on squads page

packages/shared/src/components/MainLayout.tsx

@@ -42,6 +42,7 @@ import { MarketingCtaVariant } from './cards/MarketingCta/common';
 import { useLazyModal } from '../hooks/useLazyModal';
 import { LazyModal } from './modals/common/types';
 import { useMobileUxExperiment } from '../hooks/useMobileUxExperiment';
+import { GoBackHeaderMobile } from './post/GoBackHeaderMobile';
 
 export interface MainLayoutProps
   extends Omit<MainLayoutHeaderProps, 'onMobileSidebarToggle'>,
@@ -57,6 +58,7 @@ export interface MainLayoutProps
   enableSearch?: () => void;
   onNavTabClick?: (tab: string) => void;
   onShowDndClick?: () => unknown;
+  canGoBack?: string;
 }
 
 const feeds = Object.values(SharedFeedPage);
@@ -76,6 +78,7 @@ function MainLayoutComponent({
   onNavTabClick,
   enableSearch,
   onShowDndClick,
+  canGoBack,
 }: MainLayoutProps): ReactElement {
   const router = useRouter();
   const { trackEvent } = useContext(AnalyticsContext);
@@ -205,6 +208,7 @@ function MainLayoutComponent({
 
   return (
     <div className="antialiased">
+      {canGoBack && <GoBackHeaderMobile />}
       {customBanner}
       {isBannerAvailable && <PromotionalBanner />}
       <InAppNotificationElement />

packages/shared/src/components/post/BasePostContent.tsx

@@ -1,9 +1,11 @@
 import dynamic from 'next/dynamic';
 import React, { ReactElement } from 'react';
+import classNames from 'classnames';
 import PostNavigation from './PostNavigation';
 import PostEngagements from './PostEngagements';
 import { BasePostContentProps } from './common';
-import { PostContentHeaderMobile } from './PostContentHeaderMobile';
+import { GoBackHeaderMobile } from './GoBackHeaderMobile';
+import { PostHeaderActions } from './PostHeaderActions';
 
 const ShareModal = dynamic(
   () => import(/* webpackChunkName: "shareModal" */ '../modals/ShareModal'),
@@ -37,11 +39,14 @@ export function BasePostContent({
   return (
     <>
       {isPostPage ? (
-        <PostContentHeaderMobile
-          post={post}
-          className={className.header}
-          onReadArticle={navigationProps.onReadArticle}
-        />
+        <GoBackHeaderMobile className={classNames(className.header, '-mx-4')}>
+          <PostHeaderActions
+            post={post}
+            className="ml-auto"
+            contextMenuId="post-page-header-actions"
+            onReadArticle={navigationProps.onReadArticle}
+          />
+        </GoBackHeaderMobile>
       ) : (
         <PostNavigation {...navigationProps} className={className.navigation} />
       )}

packages/shared/src/components/post/GoBackHeaderMobile.tsx

@@ -0,0 +1,53 @@
+import React, { PropsWithChildren, ReactElement } from 'react';
+import { useRouter } from 'next/router';
+import classNames from 'classnames';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { ArrowIcon } from '../icons';
+import { WithClassNameProps } from '../utilities';
+import { isDevelopment } from '../../lib/constants';
+
+const checkSameSite = () => {
+  const referrer = globalThis?.document?.referrer;
+  const origin = globalThis?.window?.location.origin;
+
+  if (!referrer) {
+    return true; // empty referrer means you are from the same site
+  }
+
+  return (
+    referrer === origin || origin === referrer.substring(0, referrer.length - 1) // remove trailing slash
+  );
+};
+
+export function GoBackHeaderMobile({
+  children,
+  className,
+}: PropsWithChildren<WithClassNameProps>): ReactElement {
+  const router = useRouter();
+  const canGoBack =
+    !!globalThis?.history?.length && (checkSameSite() || isDevelopment);
+
+  if (!canGoBack && !children) {
+    return null;
+  }
+
+  return (
+    <span
+      className={classNames(
+        'flex flex-row items-center border-b border-border-subtlest-tertiary px-4 py-2 tablet:hidden',
+        className,
+      )}
+    >
+      {canGoBack && (
+        <Button
+          icon={<ArrowIcon className="-rotate-90" />}
+          size={ButtonSize.Small}
+          variant={ButtonVariant.Tertiary}
+          onClick={router.back}
+          className={!canGoBack && 'invisible'}
+        />
+      )}
+      {children}
+    </span>
+  );
+}

packages/webapp/pages/squads/[handle]/index.tsx

@@ -211,7 +211,7 @@ const SquadPage = ({
 };
 
 SquadPage.getLayout = getLayout;
-SquadPage.layoutProps = mainFeedLayoutProps;
+SquadPage.layoutProps = { ...mainFeedLayoutProps, canGoBack: true };
 
 export default SquadPage;