Merge branch 'bluesky-social:main' into patch-3

src/view/com/home/HomeHeaderLayout.web.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
+import Animated from 'react-native-reanimated'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
@@ -12,6 +13,8 @@ import {
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 import {CogIcon} from '#/lib/icons'
+import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
+import {useShellLayout} from '#/state/shell/shell-layout'
 
 export function HomeHeaderLayout(props: {
   children: React.ReactNode
@@ -33,6 +36,8 @@ function HomeHeaderLayoutDesktopAndTablet({
   tabBarAnchor: JSX.Element | null | undefined
 }) {
   const pal = usePalette('default')
+  const {headerMinimalShellTransform} = useMinimalShellMode()
+  const {headerHeight} = useShellLayout()
   const {_} = useLingui()
 
   return (
@@ -60,9 +65,19 @@ function HomeHeaderLayoutDesktopAndTablet({
         </Link>
       </View>
       {tabBarAnchor}
-      <View style={[pal.view, pal.border, styles.bar, styles.tabBar]}>
+      <Animated.View
+        onLayout={e => {
+          headerHeight.value = e.nativeEvent.layout.height
+        }}
+        style={[
+          pal.view,
+          pal.border,
+          styles.bar,
+          styles.tabBar,
+          headerMinimalShellTransform,
+        ]}>
         {children}
-      </View>
+      </Animated.View>
     </>
   )
 }

src/view/com/notifications/FeedItem.tsx

@@ -228,6 +228,7 @@ let FeedItem = ({
               text={sanitizeDisplayName(
                 authors[0].displayName || authors[0].handle,
               )}
+              disableMismatchWarning
             />
             {authors.length > 1 ? (
               <>

src/view/screens/Storybook/Menus.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import * as Menu from '#/components/Menu'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+// import {useDialogStateControlContext} from '#/state/dialogs'
+
+export function Menus() {
+  const t = useTheme()
+  const menuControl = Menu.useMenuControl()
+  // const {closeAllDialogs} = useDialogStateControlContext()
+
+  return (
+    <View style={[a.gap_md]}>
+      <View style={[a.flex_row, a.align_start]}>
+        <Menu.Root control={menuControl}>
+          <Menu.Trigger label="Open basic menu" style={[a.flex_1]}>
+            {({state, props}) => {
+              return (
+                <Text
+                  {...props}
+                  style={[
+                    a.py_sm,
+                    a.px_md,
+                    a.rounded_sm,
+                    t.atoms.bg_contrast_50,
+                    (state.hovered || state.focused || state.pressed) && [
+                      t.atoms.bg_contrast_200,
+                    ],
+                  ]}>
+                  Open
+                </Text>
+              )
+            }}
+          </Menu.Trigger>
+
+          <Menu.Outer>
+            <Menu.Group>
+              <Menu.Item label="Click me" onPress={() => {}}>
+                <Menu.ItemIcon icon={Search} />
+                <Menu.ItemText>Click me</Menu.ItemText>
+              </Menu.Item>
+
+              <Menu.Item
+                label="Another item"
+                onPress={() => menuControl.close()}>
+                <Menu.ItemText>Another item</Menu.ItemText>
+              </Menu.Item>
+            </Menu.Group>
+
+            <Menu.Divider />
+
+            <Menu.Group>
+              <Menu.Item label="Click me" onPress={() => {}}>
+                <Menu.ItemIcon icon={Search} />
+                <Menu.ItemText>Click me</Menu.ItemText>
+              </Menu.Item>
+
+              <Menu.Item
+                label="Another item"
+                onPress={() => menuControl.close()}>
+                <Menu.ItemText>Another item</Menu.ItemText>
+              </Menu.Item>
+            </Menu.Group>
+
+            <Menu.Divider />
+
+            <Menu.Item label="Click me" onPress={() => {}}>
+              <Menu.ItemIcon icon={Search} />
+              <Menu.ItemText>Click me</Menu.ItemText>
+            </Menu.Item>
+          </Menu.Outer>
+        </Menu.Root>
+      </View>
+    </View>
+  )
+}

src/view/screens/Storybook/index.tsx

@@ -16,6 +16,7 @@ import {Dialogs} from './Dialogs'
 import {Breakpoints} from './Breakpoints'
 import {Shadows} from './Shadows'
 import {Icons} from './Icons'
+import {Menus} from './Menus'
 
 export function Storybook() {
   const t = useTheme()
@@ -84,6 +85,7 @@ export function Storybook() {
           <Links />
           <Forms />
           <Dialogs />
+          <Menus />
           <Breakpoints />
         </View>
       </CenteredView>

src/view/shell/index.tsx

@@ -30,6 +30,7 @@ import {useCloseAnyActiveElement} from '#/state/util'
 import * as notifications from 'lib/notifications/notifications'
 import {Outlet as PortalOutlet} from '#/components/Portal'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
+import {useDialogStateContext} from '#/state/dialogs'
 
 function ShellInner() {
   const isDrawerOpen = useIsDrawerOpen()
@@ -55,6 +56,7 @@ function ShellInner() {
   const closeAnyActiveElement = useCloseAnyActiveElement()
   // start undefined
   const currentAccountDid = React.useRef<string | undefined>(undefined)
+  const {openDialogs} = useDialogStateContext()
 
   React.useEffect(() => {
     let listener = {remove() {}}
@@ -78,9 +80,21 @@ function ShellInner() {
     }
   }, [currentAccount])
 
+  /**
+   * The counterpart to `accessibilityViewIsModal` for Android. This property
+   * applies to the parent of all non-modal views, and prevents TalkBack from
+   * navigating within content beneath an open dialog.
+   *
+   * @see https://reactnative.dev/docs/accessibility#importantforaccessibility-android
+   */
+  const importantForAccessibility =
+    openDialogs.length > 0 ? 'no-hide-descendants' : undefined
+
   return (
     <>
-      <View style={containerPadding}>
+      <View
+        style={containerPadding}
+        importantForAccessibility={importantForAccessibility}>
         <ErrorBoundary>
           <Drawer
             renderDrawerContent={renderDrawerContent}