Show a 'not available for mobile web' screen (temporary)

src/view/com/util/ViewHeader.tsx

@@ -35,7 +35,7 @@ export const ViewHeader = observer(function ViewHeader({
     canGoBack = store.nav.tab.canGoBack
   }
   if (isDesktopWeb) {
-    return undefined
+    return <></>
   }
   return (
     <Container hideOnScroll={hideOnScroll || false}>

src/view/shell/web/index.tsx

@@ -12,15 +12,22 @@ import {Login} from '../../screens/Login'
 import {ErrorBoundary} from '../../com/util/ErrorBoundary'
 import {Lightbox} from '../../com/lightbox/Lightbox'
 import {Modal} from '../../com/modals/Modal'
+import {Text} from 'view/com/util/text/Text'
 import {Composer} from './Composer'
+import {usePalette} from 'lib/hooks/usePalette'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {s, colors} from 'lib/styles'
+import {isMobileWeb} from 'platform/detection'
 
 export const WebShell: React.FC = observer(() => {
   const pageBg = useColorSchemeStyle(styles.bgLight, styles.bgDark)
   const store = useStores()
   const screenRenderDesc = constructScreenRenderDesc(store.nav)
 
+  if (isMobileWeb) {
+    return <NoMobileWeb />
+  }
+
   if (!store.session.hasSession) {
     return (
       <View style={styles.outerContainer}>
@@ -64,17 +71,6 @@ export const WebShell: React.FC = observer(() => {
       <Lightbox />
     </View>
   )
-  // TODO
-  // <Modal />
-  // <Lightbox />
-  // <Composer
-  //   active={store.shell.isComposerActive}
-  //   onClose={() => store.shell.closeComposer()}
-  //   winHeight={winDim.height}
-  //   replyTo={store.shell.composerOpts?.replyTo}
-  //   imagesOpen={store.shell.composerOpts?.imagesOpen}
-  //   onPost={store.shell.composerOpts?.onPost}
-  // />
 })
 
 /**
@@ -126,6 +122,21 @@ function constructScreenRenderDesc(nav: NavigationModel): {
   }
 }
 
+function NoMobileWeb() {
+  const pal = usePalette('default')
+  return (
+    <View style={[pal.view, styles.noMobileWeb]}>
+      <Text type="title-2xl" style={{paddingBottom: 20}}>
+        We're so sorry!
+      </Text>
+      <Text type="lg">
+        This app is not available for mobile Web yet. Please open it on your
+        desktop or download the iOS app.
+      </Text>
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   outerContainer: {
     height: '100%',
@@ -142,4 +153,10 @@ const styles = StyleSheet.create({
   hidden: {
     display: 'none',
   },
+  noMobileWeb: {
+    height: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+  },
 })