add back btn for mobile view (#1861)

src/app/components/BackRouteHandler.tsx

@@ -0,0 +1,86 @@
+import { ReactNode, useCallback } from 'react';
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import {
+  getDirectPath,
+  getExplorePath,
+  getHomePath,
+  getInboxPath,
+  getSpacePath,
+} from '../pages/pathUtils';
+import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
+
+type BackRouteHandlerProps = {
+  children: (onBack: () => void) => ReactNode;
+};
+export function BackRouteHandler({ children }: BackRouteHandlerProps) {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const goBack = useCallback(() => {
+    if (
+      matchPath(
+        {
+          path: HOME_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getHomePath());
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: DIRECT_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getDirectPath());
+      return;
+    }
+    const spaceMatch = matchPath(
+      {
+        path: SPACE_PATH,
+        caseSensitive: true,
+        end: false,
+      },
+      location.pathname
+    );
+    if (spaceMatch?.params.spaceIdOrAlias) {
+      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: EXPLORE_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getExplorePath());
+      return;
+    }
+    if (
+      matchPath(
+        {
+          path: INBOX_PATH,
+          caseSensitive: true,
+          end: false,
+        },
+        location.pathname
+      )
+    ) {
+      navigate(getInboxPath());
+    }
+  }, [navigate, location]);
+
+  return children(goBack);
+}

src/app/components/page/Page.tsx

@@ -87,15 +87,17 @@ export const Page = as<'div'>(({ className, ...props }, ref) => (
   />
 ));
 
-export const PageHeader = as<'div'>(({ className, ...props }, ref) => (
-  <Header
-    as="header"
-    size="600"
-    className={classNames(css.PageHeader, className)}
-    {...props}
-    ref={ref}
-  />
-));
+export const PageHeader = as<'div', css.PageHeaderVariants>(
+  ({ className, balance, ...props }, ref) => (
+    <Header
+      as="header"
+      size="600"
+      className={classNames(css.PageHeader({ balance }), className)}
+      {...props}
+      ref={ref}
+    />
+  )
+);
 
 export const PageContent = as<'div'>(({ className, ...props }, ref) => (
   <div className={classNames(css.PageContent, className)} {...props} ref={ref} />

src/app/components/page/style.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 
 export const PageNav = style({
@@ -33,11 +34,21 @@ export const PageNavContent = style({
   paddingBottom: config.space.S700,
 });
 
-export const PageHeader = style({
-  paddingLeft: config.space.S400,
-  paddingRight: config.space.S200,
-  borderBottomWidth: config.borderWidth.B300,
+export const PageHeader = recipe({
+  base: {
+    paddingLeft: config.space.S400,
+    paddingRight: config.space.S200,
+    borderBottomWidth: config.borderWidth.B300,
+  },
+  variants: {
+    balance: {
+      true: {
+        paddingLeft: config.space.S200,
+      },
+    },
+  },
 });
+export type PageHeaderVariants = RecipeVariants<typeof PageHeader>;
 
 export const PageContent = style([
   DefaultReset,