Merge branch 'main' into inherit_system_theme

src/Navigation.tsx

@@ -28,7 +28,6 @@ import {isNative} from 'platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {router} from './routes'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useUnreadCountLabel} from 'lib/hooks/useUnreadCountLabel'
 import {useStores} from './state'
 
 import {HomeScreen} from './view/screens/Home'
@@ -296,9 +295,9 @@ const MyProfileTabNavigator = observer(() => {
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
  */
-function FlatNavigator() {
+const FlatNavigator = observer(() => {
   const pal = usePalette('default')
-  const unreadCountLabel = useUnreadCountLabel()
+  const unreadCountLabel = useStores().me.notifications.unreadCountLabel
   const title = (page: string) => bskyTitle(page, unreadCountLabel)
   return (
     <Flat.Navigator
@@ -327,7 +326,7 @@ function FlatNavigator() {
       {commonScreens(Flat as typeof HomeTab, unreadCountLabel)}
     </Flat.Navigator>
   )
-}
+})
 
 /**
  * The RoutesContainer should wrap all components which need access

src/lib/hooks/useSetTitle.ts

@@ -3,11 +3,15 @@ import {useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from 'lib/routes/types'
 import {bskyTitle} from 'lib/strings/headings'
-import {useUnreadCountLabel} from './useUnreadCountLabel'
+import {useStores} from 'state/index'
 
+/**
+ * Requires consuming component to be wrapped in `observer`:
+ * https://stackoverflow.com/a/71488009
+ */
 export function useSetTitle(title?: string) {
   const navigation = useNavigation<NavigationProp>()
-  const unreadCountLabel = useUnreadCountLabel()
+  const {unreadCountLabel} = useStores().me.notifications
   useEffect(() => {
     if (title) {
       navigation.setOptions({title: bskyTitle(title, unreadCountLabel)})

src/lib/hooks/useUnreadCountLabel.ts

@@ -1,19 +0,0 @@
-import {useEffect, useReducer} from 'react'
-import {DeviceEventEmitter} from 'react-native'
-import {useStores} from 'state/index'
-
-export function useUnreadCountLabel() {
-  // HACK: We don't have anything like Redux selectors,
-  // and we don't want to use <RootStoreContext.Consumer />
-  // to react to the whole store
-  const [, forceUpdate] = useReducer(x => x + 1, 0)
-  useEffect(() => {
-    const subscription = DeviceEventEmitter.addListener(
-      'unread-notifications',
-      forceUpdate,
-    )
-    return () => subscription?.remove()
-  }, [forceUpdate])
-
-  return useStores().me.notifications.unreadCountLabel
-}

src/lib/icons.tsx

@@ -320,6 +320,35 @@ export function MoonIcon({
   )
 }
 
+// Copyright (c) 2020 Refactoring UI Inc.
+// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
+export function SunIcon({
+  style,
+  size,
+  strokeWidth = 1.5,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+  strokeWidth?: number
+}) {
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      width={size || 32}
+      height={size || 32}
+      strokeWidth={strokeWidth}
+      stroke="currentColor"
+      style={style}>
+      <Path
+        d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  )
+}
+
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function UserIcon({

src/view/com/lightbox/Lightbox.web.tsx

@@ -21,6 +21,9 @@ interface Img {
 
 export const Lightbox = observer(function Lightbox() {
   const store = useStores()
+
+  const onClose = useCallback(() => store.shell.closeLightbox(), [store.shell])
+
   if (!store.shell.isLightboxActive) {
     return null
   }
@@ -29,8 +32,6 @@ export const Lightbox = observer(function Lightbox() {
   const initialIndex =
     activeLightbox instanceof models.ImagesLightbox ? activeLightbox.index : 0
 
-  const onClose = () => store.shell.closeLightbox()
-
   let imgs: Img[] | undefined
   if (activeLightbox instanceof models.ProfileImageLightbox) {
     const opts = activeLightbox

src/view/com/util/forms/Button.tsx

@@ -128,6 +128,7 @@ export function Button({
       },
     },
   )
+
   const onPressWrapped = React.useCallback(
     (event: Event) => {
       event.stopPropagation()
@@ -136,9 +137,23 @@ export function Button({
     },
     [onPress],
   )
+
+  const getStyle = React.useCallback(
+    state => {
+      const arr = [typeOuterStyle, styles.outer, style]
+      if (state.pressed) {
+        arr.push({opacity: 0.6})
+      } else if (state.hovered) {
+        arr.push({opacity: 0.8})
+      }
+      return arr
+    },
+    [typeOuterStyle, style],
+  )
+
   return (
     <Pressable
-      style={[typeOuterStyle, styles.outer, style]}
+      style={getStyle}
       onPress={onPressWrapped}
       testID={testID}
       accessibilityRole="button"

src/view/com/util/forms/DropdownButton.tsx

@@ -209,7 +209,7 @@ export function PostDropdownBtn({
       },
     },
     {sep: true},
-    {
+    !isAuthor && {
       testID: 'postDropdownReportBtn',
       icon: 'circle-exclamation',
       label: 'Report post',

src/view/screens/SearchMobile.tsx

@@ -121,7 +121,7 @@ export const SearchScreen = withAuthRequired(
       <TouchableWithoutFeedback onPress={onPress} accessible={false}>
         <View style={[pal.view, styles.container]}>
           <HeaderWithInput
-            isInputFocused={true}
+            isInputFocused={isInputFocused}
             query={query}
             setIsInputFocused={setIsInputFocused}
             onChangeQuery={onChangeQuery}

src/view/shell/Drawer.tsx

@@ -215,7 +215,11 @@ export const DrawerContent = observer(() => {
             }
             label="Notifications"
             accessibilityLabel="Notifications"
-            accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
+            accessibilityHint={
+              notifications.unreadCountLabel === ''
+                ? ''
+                : `${notifications.unreadCountLabel} unread`
+            }
             count={notifications.unreadCountLabel}
             bold={isAtNotifications}
             onPress={onPressNotifications}

src/view/shell/bottom-bar/BottomBar.tsx

@@ -38,6 +38,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
     useNavigationTabState()
 
   const {footerMinimalShellTransform} = useMinimalShellMode()
+  const {notifications} = store.me
 
   const onPressTab = React.useCallback(
     (tab: string) => {
@@ -138,11 +139,15 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
           )
         }
         onPress={onPressNotifications}
-        notificationCount={store.me.notifications.unreadCountLabel}
+        notificationCount={notifications.unreadCountLabel}
         accessible={true}
         accessibilityRole="tab"
         accessibilityLabel="Notifications"
-        accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
+        accessibilityHint={
+          notifications.unreadCountLabel === ''
+            ? ''
+            : `${notifications.unreadCountLabel} unread`
+        }
       />
       <Btn
         testID="bottomBarProfileBtn"

src/view/shell/index.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {View, StyleSheet, TouchableOpacity} from 'react-native'
 import {useStores} from 'state/index'
@@ -14,11 +14,21 @@ import {RoutesContainer, FlatNavigator} from '../../Navigation'
 import {DrawerContent} from './Drawer'
 import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
+import {useNavigation} from '@react-navigation/native'
+import {NavigationProp} from 'lib/routes/types'
 
 const ShellInner = observer(() => {
   const store = useStores()
   const {isDesktop} = useWebMediaQueries()
 
+  const navigator = useNavigation<NavigationProp>()
+
+  useEffect(() => {
+    navigator.addListener('state', () => {
+      store.shell.closeAnyActiveElement()
+    })
+  }, [navigator, store.shell])
+
   return (
     <>
       <View style={s.hContentRegion}>