keybase · chrisnojima · May 19, 2026 · May 19, 2026 · May 19, 2026
diff --git 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) => (
-      <BigTeamsDivider
-        inlineLayout={inlineLayout}
-        toggle={scrollToBigTeams}
-        onEdit={isIOS ? promptSmallTeamsNum : undefined}
-      />
-    ),
-    [promptSmallTeamsNum, scrollToBigTeams]
-  )
   const showFloatingDivider = showFloating && !isSearching && allowShowFloatingButton
+  const showUnreadBanner = showUnread && !isSearching
 
   const noChats = !neverLoaded && !isSearching && !rows.length && <NativeNoChats onNewChat={onNewChat} />
 
@@ -554,14 +550,22 @@ function NativeInboxBody(p: ControlledInboxProps) {
             />
           )}
           {noChats}
-          {showFloatingDivider ? (
-            <Kb.BottomAccessory>{renderFloatingDivider(true)}</Kb.BottomAccessory>
+          {showFloatingDivider || showUnreadBanner ? (
+            <Kb.BottomAccessory>
+              {showUnreadBanner && (
+                <UnreadShortcut inlineLayout={true} onClick={scrollToUnread} unreadCount={unreadCount} />
+              )}
+              {showFloatingDivider && (
+                <BigTeamsDivider
+                  inlineLayout={true}
+                  toggle={scrollToBigTeams}
+                  onEdit={isIOS ? promptSmallTeamsNum : undefined}
+                />
+              )}
+            </Kb.BottomAccessory>
           ) : (
             rows.length === 0 && !neverLoaded && <NativeNoRowsBuildTeam />
           )}
-          {showUnread && !isSearching && !showFloating && (
-            <UnreadShortcut onClick={scrollToUnread} unreadCount={unreadCount} />
-          )}
         </Kb.Box2>
       </PerfProfiler>
     </Kb.ErrorBoundary>
@@ -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
@@ -25,25 +25,41 @@ const BigTeamsDivider = (props: Props) => {
       }}
       style={containerStyle}
     >
-      <Kb.Box2
-        direction="horizontal"
-        justifyContent="flex-start"
-        style={styles.dividerBox}
-        className="color_black_20 hover_color_black_50"
-      >
-        <BigTeamsLabel />
-        {badgeCount > 0 && <Kb.Badge badgeStyle={styles.badge} badgeNumber={badgeCount} />}
-        <Kb.Box2 direction="horizontal" alignItems="flex-start" justifyContent="center" style={styles.icon}>
-          <Kb.Icon type="iconfont-arrow-up" color="inherit" fontSize={isMobile ? 20 : 16} />
+      {inlineLayout ? (
+        <Kb.Box2
+          direction="horizontal"
+          fullWidth={true}
+          alignItems="center"
+          justifyContent="flex-start"
+          gap="xtiny"
+          style={styles.dividerBoxInline}
+          className="color_black_20 hover_color_black_50"
+        >
+          <Kb.Icon type="iconfont-arrow-up" color="inherit" fontSize={20} />
+          <Kb.Text type="BodySmallSemibold">Big teams</Kb.Text>
+          {badgeCount > 0 && <Kb.Badge badgeStyle={styles.badge} badgeNumber={badgeCount} />}
         </Kb.Box2>
-        {onEdit ? (
-          <Kb.BoxGrow2>
-            <Kb.Box2 fullWidth={true} direction="vertical" alignItems="flex-end" justifyContent="center">
-              <Kb.Icon type="iconfont-ellipsis" fontSize={isMobile ? 20 : 16} onClick={onEdit} />
-            </Kb.Box2>
-          </Kb.BoxGrow2>
-        ) : null}
-      </Kb.Box2>
+      ) : (
+        <Kb.Box2
+          direction="horizontal"
+          justifyContent="flex-start"
+          style={styles.dividerBox}
+          className="color_black_20 hover_color_black_50"
+        >
+          <BigTeamsLabel />
+          {badgeCount > 0 && <Kb.Badge badgeStyle={styles.badge} badgeNumber={badgeCount} />}
+          <Kb.Box2 direction="horizontal" alignItems="flex-start" justifyContent="center" style={styles.icon}>
+            <Kb.Icon type="iconfont-arrow-up" color="inherit" fontSize={isMobile ? 20 : 16} />
+          </Kb.Box2>
+          {onEdit ? (
+            <Kb.BoxGrow2>
+              <Kb.Box2 fullWidth={true} direction="vertical" alignItems="flex-end" justifyContent="center">
+                <Kb.Icon type="iconfont-ellipsis" fontSize={isMobile ? 20 : 16} onClick={onEdit} />
+              </Kb.Box2>
+            </Kb.BoxGrow2>
+          ) : null}
+        </Kb.Box2>
+      )}
     </Kb.ClickableBox2>
   )
 }
@@ -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
@@ -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) => (
-  <Kb.ClickableBox2 onClick={props.onClick} style={styles.container}>
+  <Kb.ClickableBox2 onClick={props.onClick} style={props.inlineLayout ? styles.containerInline : styles.container}>
     <Kb.Box2
       direction="horizontal"
       gap="tiny"
       centerChildren={true}
       fullWidth={true}
-      style={styles.unreadShortcut}
+      style={props.inlineLayout ? styles.unreadShortcutInline : styles.unreadShortcut}
     >
       <Kb.Icon type="iconfont-arrow-down" sizeType="Small" color={Kb.Styles.globalColors.white} />
       <Kb.Text negative={true} type="BodySmallSemibold">
-        {props.unreadCount} unread {pluralize('message', props.unreadCount)}
+        {props.inlineLayout
+          ? `${props.unreadCount} unread`
+          : `${props.unreadCount} unread ${pluralize('message', props.unreadCount)}`}
       </Kb.Text>
     </Kb.Box2>
   </Kb.ClickableBox2>
@@ -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
@@ -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<RootParamList> | undefined
-    parent?.setOptions({bottomAccessory: (): React.ReactNode => children})
+    parent?.setOptions({
+      bottomAccessory: (): React.ReactNode => (
+        <View style={{alignItems: 'stretch', bottom: 0, flexDirection: 'row', left: 0, position: 'absolute', right: 0, top: 0}}>
+          {children}
+        </View>
+      ),
+    })
     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
@@ -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'