Add desktop shell

src/platform/desktop-web/left-column.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {Pressable, View, StyleSheet} from 'react-native'
+import {Link} from '@react-navigation/native'
+import {useRoute} from '@react-navigation/native'
+
+export const NavItem: React.FC<{label: string; screen: string}> = ({
+  label,
+  screen,
+}) => {
+  const route = useRoute()
+  return (
+    <View>
+      <Pressable
+        style={state => [
+          // @ts-ignore it does exist! (react-native-web) -prf
+          state.hovered && styles.navItemHovered,
+        ]}>
+        <Link
+          style={[
+            styles.navItemLink,
+            route.name === screen && styles.navItemLinkSelected,
+          ]}
+          to={{screen, params: {}}}>
+          {label}
+        </Link>
+      </Pressable>
+    </View>
+  )
+}
+
+export const DesktopLeftColumn: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <NavItem screen="Home" label="Home" />
+      <NavItem screen="Search" label="Search" />
+      <NavItem screen="Notifications" label="Notifications" />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 'calc(50vw - 500px)',
+    width: '200px',
+    height: '100%',
+  },
+  navItemHovered: {
+    backgroundColor: 'gray',
+  },
+  navItemLink: {
+    padding: '1rem',
+  },
+  navItemLinkSelected: {
+    color: 'blue',
+  },
+})

src/platform/desktop-web/right-column.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {Text, View, StyleSheet} from 'react-native'
+
+export const DesktopRightColumn: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Text>Right Column</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: 'calc(50vw - 500px)',
+    width: '200px',
+    height: '100%',
+  },
+})

src/platform/desktop-web/shell.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {View, StyleSheet} from 'react-native'
+import {DesktopLeftColumn} from './left-column'
+import {DesktopRightColumn} from './right-column'
+import {useStores} from '../../state'
+
+export const DesktopWebShell: React.FC = observer(({children}) => {
+  const store = useStores()
+  return (
+    <View style={styles.outerContainer}>
+      {store.session.isAuthed ? (
+        <>
+          <DesktopLeftColumn />
+          <View style={styles.innerContainer}>{children}</View>
+          <DesktopRightColumn />
+        </>
+      ) : (
+        <View style={styles.innerContainer}>{children}</View>
+      )}
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    height: '100%',
+  },
+  innerContainer: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: '600px',
+    height: '100%',
+  },
+})

src/platform/detection.ts

@@ -0,0 +1,11 @@
+import {Platform} from 'react-native'
+
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+export const isNative = isIOS || isAndroid
+export const isWeb = !isNative
+export const isMobileWeb =
+  isWeb &&
+  // @ts-ignore we know window exists -prf
+  global.window.matchMedia('only screen and (max-width: 1000px)')?.matches
+export const isDesktopWeb = isWeb && !isMobileWeb

src/platform/shell.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import {SafeAreaView} from 'react-native'
+import {isDesktopWeb} from './detection'
+import {DesktopWebShell} from './desktop-web/shell'
+
+export const Shell: React.FC = ({children}) => {
+  return isDesktopWeb ? (
+    <DesktopWebShell>{children}</DesktopWebShell>
+  ) : (
+    <SafeAreaView>{children}</SafeAreaView>
+  )
+}