Mobile Web (#427)

* WIP * WIP * Fix header offset on web * Remove debug * Fix web mobile feed and FAB layout * Fix modals on mobile web * Remove dead code * Remove ios config that shouldnt be committed now * Move bottom bar into its own folder * Fix web drawer navigation and state behaviors * Remove dark mode toggle from web drawer for now * Fix search on mobile web * Fix the logged out splash screen on mobile web * Fixes to detox simulator --------- Co-authored-by: Paul Frazee <pfrazee@gmail.com>
2023-04-12 20:27:55 -05:00 · 2023-04-12 20:27:55 -05:00 · f6769b283f
commit f6769b283f
parent 2fed6c4021
30 changed files with 4343 additions and 319 deletions
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@ -0,0 +1,101 @@
+import React from 'react'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Animated} from 'react-native'
+import {useNavigationState} from '@react-navigation/native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {getCurrentRoute, isTab} from 'lib/routes/helpers'
+import {styles} from './BottomBarStyles'
+import {clamp} from 'lib/numbers'
+import {
+  BellIcon,
+  BellIconSolid,
+  HomeIcon,
+  HomeIconSolid,
+  MagnifyingGlassIcon2,
+  MagnifyingGlassIcon2Solid,
+  UserIcon,
+} from 'lib/icons'
+import {Link} from 'view/com/util/Link'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+
+export const BottomBarWeb = observer(() => {
+  const store = useStores()
+  const pal = usePalette('default')
+  const safeAreaInsets = useSafeAreaInsets()
+  const {footerMinimalShellTransform} = useMinimalShellMode()
+
+  return (
+    <Animated.View
+      style={[
+        styles.bottomBar,
+        pal.view,
+        pal.border,
+        {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)},
+        footerMinimalShellTransform,
+      ]}>
+      <NavItem routeName="Home" href="/">
+        {({isActive}) => {
+          const Icon = isActive ? HomeIconSolid : HomeIcon
+          return (
+            <Icon
+              strokeWidth={4}
+              size={24}
+              style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
+            />
+          )
+        }}
+      </NavItem>
+      <NavItem routeName="Search" href="/search">
+        {({isActive}) => {
+          const Icon = isActive
+            ? MagnifyingGlassIcon2Solid
+            : MagnifyingGlassIcon2
+          return (
+            <Icon
+              size={25}
+              style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+              strokeWidth={1.8}
+            />
+          )
+        }}
+      </NavItem>
+      <NavItem routeName="Notifications" href="/notifications">
+        {({isActive}) => {
+          const Icon = isActive ? BellIconSolid : BellIcon
+          return (
+            <Icon
+              size={24}
+              strokeWidth={1.9}
+              style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+            />
+          )
+        }}
+      </NavItem>
+      <NavItem routeName="Profile" href={`/profile/${store.me.handle}`}>
+        {() => (
+          <UserIcon
+            size={28}
+            strokeWidth={1.5}
+            style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
+          />
+        )}
+      </NavItem>
+    </Animated.View>
+  )
+})
+
+const NavItem: React.FC<{
+  children: (props: {isActive: boolean}) => React.ReactChild
+  href: string
+  routeName: string
+}> = ({children, href, routeName}) => {
+  const currentRoute = useNavigationState(getCurrentRoute)
+  const isActive = isTab(currentRoute.name, routeName)
+  return (
+    <Link href={href} style={styles.ctrl}>
+      {children({isActive})}
+    </Link>
+  )
+}