Merge branch 'main' into inherit_system_theme

2023-05-30 18:25:29 -07:00 · 2023-05-30 18:25:29 -07:00 · 09ade363fd
commit 09ade363fd
parent 7f76c2d67e e224569a11
136 changed files with 5771 additions and 2428 deletions
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@ -2,6 +2,7 @@ import React, {ComponentProps} from 'react'
 import {
  Linking,
  SafeAreaView,
+  ScrollView,
  StyleProp,
  StyleSheet,
  TouchableOpacity,
@ -27,6 +28,8 @@ import {
  MagnifyingGlassIcon2,
  MagnifyingGlassIcon2Solid,
  UserIconSolid,
+  SatelliteDishIcon,
+  SatelliteDishIconSolid,
  HandIcon,
 } from 'lib/icons'
 import {UserAvatar} from 'view/com/util/UserAvatar'
@ -39,7 +42,7 @@ import {getTabState, TabState} from 'lib/routes/helpers'
 import {NavigationProp} from 'lib/routes/types'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 import {isWeb} from 'platform/detection'
-import {formatCount} from 'view/com/util/numeric/format'
+import {formatCount, formatCountShortOnly} from 'view/com/util/numeric/format'

 export const DrawerContent = observer(() => {
  const theme = useTheme()
@ -47,7 +50,7 @@ export const DrawerContent = observer(() => {
  const store = useStores()
  const navigation = useNavigation<NavigationProp>()
  const {track} = useAnalytics()
-  const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile} =
+  const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
    useNavigationTabState()

  const {notifications} = store.me
@ -94,6 +97,11 @@ export const DrawerContent = observer(() => {
    onPressTab('MyProfile')
  }, [onPressTab])

+  const onPressMyFeeds = React.useCallback(
+    () => onPressTab('Feeds'),
+    [onPressTab],
+  )
+
  const onPressModeration = React.useCallback(() => {
    track('Menu:ItemClicked', {url: 'Moderation'})
    navigation.navigate('Moderation')
@ -140,19 +148,18 @@ export const DrawerContent = observer(() => {
              type="xl"
              style={[pal.textLight, styles.profileCardFollowers]}>
              <Text type="xl-medium" style={pal.text}>
-                {formatCount(store.me.followersCount ?? 0)}
+                {formatCountShortOnly(store.me.followersCount ?? 0)}
              </Text>{' '}
              {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
              <Text type="xl-medium" style={pal.text}>
-                {formatCount(store.me.followsCount ?? 0)}
+                {formatCountShortOnly(store.me.followsCount ?? 0)}
              </Text>{' '}
              following
            </Text>
          </TouchableOpacity>
        </View>
        <InviteCodes />
-        <View style={s.flex1} />
-        <View style={styles.main}>
+        <ScrollView style={styles.main}>
          <MenuItem
            icon={
              isAtSearch ? (
@ -226,12 +233,27 @@ export const DrawerContent = observer(() => {
          />
          <MenuItem
            icon={
-              <HandIcon
-                strokeWidth={5}
-                style={pal.text as FontAwesomeIconStyle}
-                size={24}
-              />
+              isAtFeeds ? (
+                <SatelliteDishIconSolid
+                  strokeWidth={1.5}
+                  style={pal.text as FontAwesomeIconStyle}
+                  size={24}
+                />
+              ) : (
+                <SatelliteDishIcon
+                  strokeWidth={1.5}
+                  style={pal.text as FontAwesomeIconStyle}
+                  size={24}
+                />
+              )
            }
+            label="My Feeds"
+            accessibilityLabel="My Feeds"
+            accessibilityHint=""
+            onPress={onPressMyFeeds}
+          />
+          <MenuItem
+            icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
            label="Moderation"
            accessibilityLabel="Moderation"
            accessibilityHint=""
@ -271,8 +293,8 @@ export const DrawerContent = observer(() => {
            accessibilityHint=""
            onPress={onPressSettings}
          />
-        </View>
-        <View style={s.flex1} />
+          <View style={styles.smallSpacer} />
+        </ScrollView>
        <View style={styles.footer}>
          <TouchableOpacity
            accessibilityRole="link"
@ -405,6 +427,10 @@ const styles = StyleSheet.create({
  },
  main: {
    paddingLeft: 20,
+    paddingTop: 20,
+  },
+  smallSpacer: {
+    height: 20,
  },

  profileCardDisplayName: {
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@ -18,23 +18,24 @@ import {
  HomeIconSolid,
  MagnifyingGlassIcon2,
  MagnifyingGlassIcon2Solid,
+  SatelliteDishIcon,
+  SatelliteDishIconSolid,
  BellIcon,
  BellIconSolid,
-  UserIcon,
-  UserIconSolid,
 } from 'lib/icons'
 import {usePalette} from 'lib/hooks/usePalette'
 import {getTabState, TabState} from 'lib/routes/helpers'
 import {styles} from './BottomBarStyles'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
+import {UserAvatar} from 'view/com/util/UserAvatar'

 export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
  const store = useStores()
  const pal = usePalette('default')
  const safeAreaInsets = useSafeAreaInsets()
  const {track} = useAnalytics()
-  const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile} =
+  const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
    useNavigationTabState()

  const {footerMinimalShellTransform} = useMinimalShellMode()
@ -60,6 +61,10 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
    () => onPressTab('Search'),
    [onPressTab],
  )
+  const onPressFeeds = React.useCallback(
+    () => onPressTab('Feeds'),
+    [onPressTab],
+  )
  const onPressNotifications = React.useCallback(
    () => onPressTab('Notifications'),
    [onPressTab],
@ -121,6 +126,28 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
        accessibilityLabel="Search"
        accessibilityHint=""
      />
+      <Btn
+        testID="bottomBarFeedsBtn"
+        icon={
+          isAtFeeds ? (
+            <SatelliteDishIconSolid
+              size={25}
+              style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+              strokeWidth={1.8}
+            />
+          ) : (
+            <SatelliteDishIcon
+              size={25}
+              style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+              strokeWidth={1.8}
+            />
+          )
+        }
+        onPress={onPressFeeds}
+        accessibilityRole="tab"
+        accessibilityLabel="Feeds"
+        accessibilityHint=""
+      />
      <Btn
        testID="bottomBarNotificationsBtn"
        icon={
@ -154,17 +181,19 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
        icon={
          <View style={styles.ctrlIconSizingWrapper}>
            {isAtMyProfile ? (
-              <UserIconSolid
-                size={28}
-                strokeWidth={1.5}
-                style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
-              />
+              <View
+                style={[
+                  styles.ctrlIcon,
+                  pal.text,
+                  styles.profileIcon,
+                  styles.onProfile,
+                ]}>
+                <UserAvatar avatar={store.me.avatar} size={27} />
+              </View>
            ) : (
-              <UserIcon
-                size={28}
-                strokeWidth={1.5}
-                style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
-              />
+              <View style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
+                <UserAvatar avatar={store.me.avatar} size={28} />
+              </View>
            )}
          </View>
        }
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@ -58,4 +58,9 @@ export const styles = StyleSheet.create({
  profileIcon: {
    top: -4,
  },
+  onProfile: {
+    borderColor: colors.black,
+    borderWidth: 1,
+    borderRadius: 100,
+  },
 })
--- a/src/view/shell/bottom-bar/BottomBarWeb.tsx
+++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx
@ -15,6 +15,8 @@ import {
  HomeIconSolid,
  MagnifyingGlassIcon2,
  MagnifyingGlassIcon2Solid,
+  SatelliteDishIcon,
+  SatelliteDishIconSolid,
  UserIcon,
 } from 'lib/icons'
 import {Link} from 'view/com/util/Link'
@ -61,6 +63,18 @@ export const BottomBarWeb = observer(() => {
          )
        }}
      </NavItem>
+      <NavItem routeName="Feeds" href="/feeds">
+        {({isActive}) => {
+          const Icon = isActive ? SatelliteDishIconSolid : SatelliteDishIcon
+          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
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@ -30,6 +30,8 @@ import {
  CogIconSolid,
  ComposeIcon2,
  HandIcon,
+  SatelliteDishIcon,
+  SatelliteDishIconSolid,
 } from 'lib/icons'
 import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
 import {NavigationProp} from 'lib/routes/types'
@ -89,14 +91,17 @@ const NavItem = observer(
    const pal = usePalette('default')
    const store = useStores()
    const [pathName] = React.useMemo(() => router.matchPath(href), [href])
-    const currentRouteName = useNavigationState(state => {
+    const currentRouteInfo = useNavigationState(state => {
      if (!state) {
-        return 'Home'
+        return {name: 'Home'}
      }
-      return getCurrentRoute(state).name
+      return getCurrentRoute(state)
    })
-
-    const isCurrent = isTab(currentRouteName, pathName)
+    let isCurrent =
+      currentRouteInfo.name === 'Profile'
+        ? isTab(currentRouteInfo.name, pathName) &&
+          currentRouteInfo.params.name === store.me.handle
+        : isTab(currentRouteInfo.name, pathName)
    const {onPress} = useLinkProps({to: href})
    const onPressWrapped = React.useCallback(
      (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@ -195,6 +200,24 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
        }
        label="Search"
      />
+      <NavItem
+        href="/feeds"
+        icon={
+          <SatelliteDishIcon
+            strokeWidth={1.75}
+            style={pal.text as FontAwesomeIconStyle}
+            size={24}
+          />
+        }
+        iconFilled={
+          <SatelliteDishIconSolid
+            strokeWidth={1.75}
+            style={pal.text as FontAwesomeIconStyle}
+            size={24}
+          />
+        }
+        label="My Feeds"
+      />
      <NavItem
        href="/notifications"
        count={store.me.notifications.unreadCountLabel}
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@ -36,7 +36,7 @@ const ShellInner = observer(() => {
          <FlatNavigator />
        </ErrorBoundary>
      </View>
-      {isDesktop && (
+      {isDesktop && store.session.hasSession && (
        <>
          <DesktopLeftNav />
          <DesktopRightNav />