about summary refs log tree commit diff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/build.md4
-rw-r--r--package.json2
-rw-r--r--src/Navigation.tsx7
-rw-r--r--src/lib/hooks/useSetTitle.ts8
-rw-r--r--src/lib/hooks/useUnreadCountLabel.ts19
-rw-r--r--src/lib/icons.tsx29
-rw-r--r--src/view/com/lightbox/Lightbox.web.tsx5
-rw-r--r--src/view/com/util/forms/Button.tsx17
-rw-r--r--src/view/com/util/forms/DropdownButton.tsx2
-rw-r--r--src/view/screens/SearchMobile.tsx2
-rw-r--r--src/view/shell/Drawer.tsx6
-rw-r--r--src/view/shell/bottom-bar/BottomBar.tsx9
-rw-r--r--src/view/shell/index.web.tsx12
-rw-r--r--yarn.lock8
14 files changed, 89 insertions, 41 deletions
diff --git a/docs/build.md b/docs/build.md
index 3fc3b123a..33e7f6751 100644
--- a/docs/build.md
+++ b/docs/build.md
@@ -21,7 +21,7 @@
 - If you are cloning or forking this repo as an open source developer, please check the tips below as well
 - Run e2e tests
   - Start in various console tabs:
-    - `yarn e2e:server`
+    - `yarn e2e:mock-server`
     - `yarn e2e:metro`
   - Run once: `yarn e2e:build`
   - Each test run: `yarn e2e:run`
@@ -31,7 +31,7 @@
   - `npx react-native info` Checks what has been installed.
   - The android simulator won't be able to access localhost services unless you run `adb reverse tcp:{PORT} tcp:{PORT}`
     - For instance, the localhosted dev-wallet will need `adb reverse tcp:3001 tcp:3001`
-  - For some reason, the typescript compiler chokes on platform-specific files (e.g. `foo.native.ts`) but only when compiling for Web thus far. Therefore we always have one version of the file which doesn't use a platform specifier, and that should bee the Web version. ([More info](https://stackoverflow.com/questions/44001050/platform-specific-import-component-in-react-native-with-typescript).)
+  - For some reason, the typescript compiler chokes on platform-specific files (e.g. `foo.native.ts`) but only when compiling for Web thus far. Therefore we always have one version of the file which doesn't use a platform specifier, and that should be the Web version. ([More info](https://stackoverflow.com/questions/44001050/platform-specific-import-component-in-react-native-with-typescript).)
 
 ## Go-Server Build
 
diff --git a/package.json b/package.json
index 5c5f30574..aeeac30a4 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "expo-constants": "~14.2.1",
     "expo-dev-client": "~2.1.1",
     "expo-device": "~5.2.1",
-    "expo-image": "^1.2.1",
+    "expo-image": "^1.2.3",
     "expo-image-manipulator": "^11.1.1",
     "expo-image-picker": "^14.1.1",
     "expo-localization": "~14.1.1",
diff --git a/src/Navigation.tsx b/src/Navigation.tsx
index 17bb3c159..09631701f 100644
--- a/src/Navigation.tsx
+++ b/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
diff --git a/src/lib/hooks/useSetTitle.ts b/src/lib/hooks/useSetTitle.ts
index 85ba44d29..c5c7a5ca1 100644
--- a/src/lib/hooks/useSetTitle.ts
+++ b/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)})
diff --git a/src/lib/hooks/useUnreadCountLabel.ts b/src/lib/hooks/useUnreadCountLabel.ts
deleted file mode 100644
index e2bf77885..000000000
--- a/src/lib/hooks/useUnreadCountLabel.ts
+++ /dev/null
@@ -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
-}
diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx
index 606d27ea4..06f195011 100644
--- a/src/lib/icons.tsx
+++ b/src/lib/icons.tsx
@@ -322,6 +322,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({
   style,
   size,
diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx
index eff9af2d2..d389279b1 100644
--- a/src/view/com/lightbox/Lightbox.web.tsx
+++ b/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
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index a8f1f363f..6a5f19f99 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/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"
diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
index 10076360f..36ef1f409 100644
--- a/src/view/com/util/forms/DropdownButton.tsx
+++ b/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',
diff --git a/src/view/screens/SearchMobile.tsx b/src/view/screens/SearchMobile.tsx
index 6152038d3..f9b4864b2 100644
--- a/src/view/screens/SearchMobile.tsx
+++ b/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}
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 680b60ba1..79c713e2d 100644
--- a/src/view/shell/Drawer.tsx
+++ b/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}
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index c11a0128c..ef9499f9f 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/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"
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 349376436..68ce370ed 100644
--- a/src/view/shell/index.web.tsx
+++ b/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}>
diff --git a/yarn.lock b/yarn.lock
index 54006d89d..541f58702 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8738,10 +8738,10 @@ expo-image-picker@^14.1.1:
   dependencies:
     expo-image-loader "~4.1.0"
 
-expo-image@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.2.1.tgz#3f377cb3142de2107903f4e4f88a7f44785dee18"
-  integrity sha512-pYZFN0ctuIBA+sqUiw70rHQQ04WDyEcF549ObArdj0MNgSUCBJMFmu/jrWDmxOpEMF40lfLVIZKigJT7Bw+GYA==
+expo-image@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/expo-image/-/expo-image-1.2.3.tgz#f3582d725ffb7437f8ce946ad44fe33f0aa0603d"
+  integrity sha512-+Mnx6rcneWSUGfHkUDV3cQ3R4lVwoIDFs/tcXVqnlxyNJdNxpW2cge9pS2Hpj3UDoZVhZPLR8LHS8E9wEaC0NA==
 
 expo-json-utils@~0.5.0:
   version "0.5.1"
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 19:47:50 +0000