diff --git a/shared/chat/inbox/index.tsx b/shared/chat/inbox/index.tsx
index a9163c7bd50a..d51a3e56207a 100644
--- a/shared/chat/inbox/index.tsx
+++ b/shared/chat/inbox/index.tsx
@@ -447,8 +447,13 @@ function NativeInboxBody(p: ControlledInboxProps) {
}
}, [])
- const {showFloating, showUnread, unreadCount, scrollToUnread, applyUnreadAndFloating} =
- useUnreadShortcut({listRef, rows, unreadIndices, unreadTotal, getSize})
+ const {showFloating, showUnread, unreadCount, scrollToUnread, applyUnreadAndFloating} = useUnreadShortcut({
+ listRef,
+ rows,
+ unreadIndices,
+ unreadTotal,
+ getSize,
+ })
const onScrollUnbox = useScrollUnbox(onUntrustedInboxVisible, 1000)
const itemHeight = {getSize, type: 'perItem' as const}
@@ -492,7 +497,7 @@ function NativeInboxBody(p: ControlledInboxProps) {
Alert.prompt(
'Change shown',
'Number of conversations to show above this button',
- ns => {
+ (ns: string) => {
const n = parseInt(ns, 10)
if (n > 0) {
setInboxNumSmallRows(n)
@@ -511,17 +516,8 @@ function NativeInboxBody(p: ControlledInboxProps) {
void listRef.current?.scrollToIndex({animated: true, index: inboxNumSmallRows, viewPosition: 0.5})
}, [inboxNumSmallRows, smallTeamsExpanded, toggleSmallTeamsExpanded])
- const renderFloatingDivider = React.useCallback(
- (inlineLayout = false) => (
-
- ),
- [promptSmallTeamsNum, scrollToBigTeams]
- )
const showFloatingDivider = showFloating && !isSearching && allowShowFloatingButton
+ const showUnreadBanner = showUnread && !isSearching
const noChats = !neverLoaded && !isSearching && !rows.length &&
@@ -554,14 +550,22 @@ function NativeInboxBody(p: ControlledInboxProps) {
/>
)}
{noChats}
- {showFloatingDivider ? (
- {renderFloatingDivider(true)}
+ {showFloatingDivider || showUnreadBanner ? (
+
+ {showUnreadBanner && (
+
+ )}
+ {showFloatingDivider && (
+
+ )}
+
) : (
rows.length === 0 && !neverLoaded &&
)}
- {showUnread && !isSearching && !showFloating && (
-
- )}
@@ -696,6 +700,7 @@ const desktopStyles = Kb.Styles.styleSheetCreate(
const nativeStyles = Kb.Styles.styleSheetCreate(
() =>
({
+ accessoryRow: {flex: 1},
button: {width: '100%'},
container: Kb.Styles.platformStyles({
common: {
diff --git a/shared/chat/inbox/row/big-teams-divider.tsx b/shared/chat/inbox/row/big-teams-divider.tsx
index e51437c99c00..ff260771f729 100644
--- a/shared/chat/inbox/row/big-teams-divider.tsx
+++ b/shared/chat/inbox/row/big-teams-divider.tsx
@@ -25,25 +25,41 @@ const BigTeamsDivider = (props: Props) => {
}}
style={containerStyle}
>
-
-
- {badgeCount > 0 && }
-
-
+ {inlineLayout ? (
+
+
+ Big teams
+ {badgeCount > 0 && }
- {onEdit ? (
-
-
-
-
-
- ) : null}
-
+ ) : (
+
+
+ {badgeCount > 0 && }
+
+
+
+ {onEdit ? (
+
+
+
+
+
+ ) : null}
+
+ )}
)
}
@@ -76,13 +92,22 @@ const styles = Kb.Styles.styleSheetCreate(
}),
inlineContainer: Kb.Styles.platformStyles({
isMobile: {
+ backgroundColor: 'transparent',
bottom: undefined,
+ flex: 1,
+ flexShrink: 1,
+ height: '100%',
left: undefined,
position: 'relative',
right: undefined,
- width: '100%',
},
}),
+ dividerBoxInline: {
+ flex: 1,
+ height: '100%',
+ paddingLeft: Kb.Styles.globalMargins.small,
+ paddingRight: Kb.Styles.globalMargins.small,
+ },
dividerBox: Kb.Styles.platformStyles({
common: {
alignItems: 'center',
diff --git a/shared/chat/inbox/unread-shortcut.tsx b/shared/chat/inbox/unread-shortcut.tsx
index 9d7a1bbfd8f3..5279b87033dc 100644
--- a/shared/chat/inbox/unread-shortcut.tsx
+++ b/shared/chat/inbox/unread-shortcut.tsx
@@ -2,22 +2,25 @@ import * as Kb from '@/common-adapters'
import {pluralize} from '@/util/string'
type Props = {
+ inlineLayout?: boolean
onClick: () => void
unreadCount: number
}
const UnreadShortcut = (props: Props) => (
-
+
- {props.unreadCount} unread {pluralize('message', props.unreadCount)}
+ {props.inlineLayout
+ ? `${props.unreadCount} unread`
+ : `${props.unreadCount} unread ${pluralize('message', props.unreadCount)}`}
@@ -32,6 +35,10 @@ const styles = Kb.Styles.styleSheetCreate(
position: 'absolute',
right: 0,
},
+ containerInline: {
+ flex: 1,
+ height: '100%',
+ },
unreadShortcut: Kb.Styles.platformStyles({
common: {
backgroundColor: Kb.Styles.globalColors.orange_90,
@@ -41,6 +48,12 @@ const styles = Kb.Styles.styleSheetCreate(
isElectron: {height: 32},
isMobile: {height: 40},
}),
+ unreadShortcutInline: {
+ backgroundColor: Kb.Styles.globalColors.orange_90,
+ flex: 1,
+ paddingBottom: Kb.Styles.globalMargins.tiny,
+ paddingTop: Kb.Styles.globalMargins.tiny,
+ },
}) as const
)
diff --git a/shared/common-adapters/bottom-accessory.tsx b/shared/common-adapters/bottom-accessory.tsx
index 2e15652f87ad..1e6e620d704a 100644
--- a/shared/common-adapters/bottom-accessory.tsx
+++ b/shared/common-adapters/bottom-accessory.tsx
@@ -1,5 +1,6 @@
import * as C from '@/constants'
import * as React from 'react'
+import {View} from 'react-native'
import {useNavigation} from '@react-navigation/native'
import {useIsFocused} from '@react-navigation/core'
import type {BottomTabNavigationProp} from '@react-navigation/bottom-tabs'
@@ -15,7 +16,13 @@ const BottomAccessoryMobile = ({children}: {children: React.ReactNode}) => {
React.useEffect(() => {
if (!isFocused) return
const parent = navigation.getParent() as BottomTabNavigationProp | undefined
- parent?.setOptions({bottomAccessory: (): React.ReactNode => children})
+ parent?.setOptions({
+ bottomAccessory: (): React.ReactNode => (
+
+ {children}
+
+ ),
+ })
return () => {
parent?.setOptions({bottomAccessory: undefined})
}
diff --git a/shared/router-v2/left-tab-navigator.desktop.tsx b/shared/router-v2/left-tab-navigator.desktop.tsx
index e80ac4e5d099..935f2fc2b763 100644
--- a/shared/router-v2/left-tab-navigator.desktop.tsx
+++ b/shared/router-v2/left-tab-navigator.desktop.tsx
@@ -1,6 +1,7 @@
import * as React from 'react'
import * as Kb from '@/common-adapters'
import TabBar from './tab-bar.desktop'
+import './router.css'
import {useNavigationBuilder, TabRouter, createNavigatorFactory} from '@react-navigation/core'
import type {TypedNavigator, NavigatorTypeBagBase} from '@react-navigation/native'
import type * as Tabs from '@/constants/tabs'