Move to expo and react-navigation (#288)

* WIP - adding expo

* WIP - adding expo 2

* Fix tsc

* Finish adding expo

* Disable the 'require cycle' warning

* Tweak plist

* Modify some dependency versions to make expo happy

* Fix icon fill

* Get Web compiling for expo

* 1.7

* Switch to react-navigation in expo2 (#287)

* WIP Switch to react-navigation

* WIP Switch to react-navigation 2

* WIP Switch to react-navigation 3

* Convert all screens to react navigation

* Update BottomBar for react navigation

* Update mobile menu to be react-native drawer

* Fixes to drawer and bottombar

* Factor out some helpers

* Replace the navigation model with react-navigation

* Restructure the shell folder and fix the header positioning

* Restore the error boundary

* Fix tsc

* Implement not-found page

* Remove react-native-gesture-handler (no longer used)

* Handle notifee card presses

* Handle all navigations from the state layer

* Fix drawer behaviors

* Fix two linking issues

* Switch to our react-native-progress fork to fix an svg rendering issue

* Get Web working with react-navigation

* Refactor routes and navigation for a bit more clarity

* Remove dead code

* Rework Web shell to left/right nav to make this easier

* Fix ViewHeader for desktop web

* Hide profileheader back btn on desktop web

* Move the compose button to the left nav

* Implement reply prompt in threads for desktop web

* Composer refactors

* Factor out all platform-specific text input behaviors from the composer

* Small fix

* Update the web build to use tiptap for the composer

* Tune up the mention autocomplete dropdown

* Simplify the default avatar and banner

* Fixes to link cards in web composer

* Fix dropdowns on web

* Tweak load latest on desktop

* Add web beta message and feedback link

* Fix up links in desktop web

1 files changed, 0 insertions, 222 deletions

diff --git a/src/view/shell/web/DesktopHeader.tsx b/src/view/shell/web/DesktopHeader.tsx
deleted file mode 100644
index 8748ebbde..000000000
--- a/src/view/shell/web/DesktopHeader.tsx
+++ /dev/null
@@ -1,222 +0,0 @@
-import React from 'react'
-import {observer} from 'mobx-react-lite'
-import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native'
-import {Text} from 'view/com/util/text/Text'
-import {UserAvatar} from 'view/com/util/UserAvatar'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {useStores} from 'state/index'
-import {colors} from 'lib/styles'
-import {
-  ComposeIcon,
-  HomeIcon,
-  HomeIconSolid,
-  BellIcon,
-  BellIconSolid,
-  MagnifyingGlassIcon,
-  CogIcon,
-} from 'lib/icons'
-import {DesktopSearch} from './DesktopSearch'
-
-interface NavItemProps {
-  count?: number
-  href: string
-  icon: JSX.Element
-  iconFilled: JSX.Element
-  isProfile?: boolean
-}
-export const NavItem = observer(
-  ({count, href, icon, iconFilled}: NavItemProps) => {
-    const store = useStores()
-    const hoverBg = useColorSchemeStyle(
-      styles.navItemHoverBgLight,
-      styles.navItemHoverBgDark,
-    )
-    const isCurrent = store.nav.tab.current.url === href
-    const onPress = () => store.nav.navigate(href)
-    return (
-      <Pressable
-        style={state => [
-          styles.navItem,
-          // @ts-ignore Pressable state differs for RNW -prf
-          (state.hovered || isCurrent) && hoverBg,
-        ]}
-        onPress={onPress}>
-        <View style={[styles.navItemIconWrapper]}>
-          {isCurrent ? iconFilled : icon}
-          {typeof count === 'number' && count > 0 && (
-            <Text type="button" style={styles.navItemCount}>
-              {count}
-            </Text>
-          )}
-        </View>
-      </Pressable>
-    )
-  },
-)
-
-export const ProfileItem = observer(() => {
-  const store = useStores()
-  const hoverBg = useColorSchemeStyle(
-    styles.navItemHoverBgLight,
-    styles.navItemHoverBgDark,
-  )
-  const href = `/profile/${store.me.handle}`
-  const isCurrent = store.nav.tab.current.url === href
-  const onPress = () => store.nav.navigate(href)
-  return (
-    <Pressable
-      style={state => [
-        styles.navItem,
-        // @ts-ignore Pressable state differs for RNW -prf
-        (state.hovered || isCurrent) && hoverBg,
-      ]}
-      onPress={onPress}>
-      <View style={[styles.navItemIconWrapper]}>
-        <UserAvatar
-          handle={store.me.handle}
-          displayName={store.me.displayName}
-          avatar={store.me.avatar}
-          size={28}
-        />
-      </View>
-    </Pressable>
-  )
-})
-
-export const DesktopHeader = observer(function DesktopHeader({}: {
-  canGoBack?: boolean
-}) {
-  const store = useStores()
-  const pal = usePalette('default')
-  const onPressCompose = () => store.shell.openComposer({})
-
-  return (
-    <View style={[styles.header, pal.borderDark, pal.view]}>
-      <Text type="title-xl" style={[pal.text, styles.title]}>
-        Bluesky
-      </Text>
-      <View style={styles.space30} />
-      <NavItem
-        href="/"
-        icon={<HomeIcon size={24} />}
-        iconFilled={<HomeIconSolid size={24} />}
-      />
-      <View style={styles.space15} />
-      <NavItem
-        href="/search"
-        icon={<MagnifyingGlassIcon size={24} />}
-        iconFilled={<MagnifyingGlassIcon strokeWidth={3} size={24} />}
-      />
-      <View style={styles.space15} />
-      <NavItem
-        href="/notifications"
-        count={store.me.notifications.unreadCount}
-        icon={<BellIcon size={24} />}
-        iconFilled={<BellIconSolid size={24} />}
-      />
-      <View style={styles.spaceFlex} />
-      <TouchableOpacity style={[styles.newPostBtn]} onPress={onPressCompose}>
-        <View style={styles.newPostBtnIconWrapper}>
-          <ComposeIcon
-            size={16}
-            strokeWidth={2}
-            style={styles.newPostBtnLabel}
-          />
-        </View>
-        <Text type="md" style={styles.newPostBtnLabel}>
-          New Post
-        </Text>
-      </TouchableOpacity>
-      <View style={styles.space20} />
-      <DesktopSearch />
-      <View style={styles.space15} />
-      <ProfileItem />
-      <NavItem
-        href="/settings"
-        icon={<CogIcon strokeWidth={2} size={28} />}
-        iconFilled={<CogIcon strokeWidth={2.5} size={28} />}
-      />
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    // paddingTop: 18,
-    // paddingBottom: 18,
-    paddingLeft: 30,
-    paddingRight: 40,
-    borderBottomWidth: 1,
-    zIndex: 1,
-  },
-
-  spaceFlex: {
-    flex: 1,
-  },
-  space15: {
-    width: 15,
-  },
-  space20: {
-    width: 20,
-  },
-  space30: {
-    width: 30,
-  },
-
-  title: {},
-
-  navItem: {
-    paddingTop: 14,
-    paddingBottom: 10,
-    paddingHorizontal: 10,
-    alignItems: 'center',
-    borderBottomWidth: 2,
-    borderBottomColor: 'transparent',
-  },
-  navItemHoverBgLight: {
-    borderBottomWidth: 2,
-    borderBottomColor: colors.blue3,
-  },
-  navItemHoverBgDark: {
-    borderBottomWidth: 2,
-    backgroundColor: colors.blue3,
-  },
-  navItemIconWrapper: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 28,
-    height: 28,
-    marginBottom: 2,
-  },
-  navItemCount: {
-    position: 'absolute',
-    top: 0,
-    left: 15,
-    backgroundColor: colors.red3,
-    color: colors.white,
-    fontSize: 12,
-    fontWeight: 'bold',
-    paddingHorizontal: 4,
-    borderRadius: 6,
-  },
-
-  newPostBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 24,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingHorizontal: 18,
-    backgroundColor: colors.blue3,
-  },
-  newPostBtnIconWrapper: {
-    marginRight: 8,
-  },
-  newPostBtnLabel: {
-    color: colors.white,
-  },
-})