remove error flow from zus

go/chat/flipmanager.go

@@ -622,6 +622,7 @@ func (m *FlipManager) handleSummaryUpdate(ctx context.Context, gameID chat1.Flip
 		formatted := m.formatError(ctx, update.Err)
 		status = chat1.UICoinFlipStatus{
 			GameID:       gameID.FlipGameIDStr(),
+			ConvID:       convID.ConvIDStr(),
 			Phase:        chat1.UICoinFlipPhase_ERROR,
 			ProgressText: fmt.Sprintf("Something went wrong: %s", update.Err),
 			Participants: parts,
@@ -632,6 +633,7 @@ func (m *FlipManager) handleSummaryUpdate(ctx context.Context, gameID chat1.Flip
 	}
 	status = chat1.UICoinFlipStatus{
 		GameID: gameID.FlipGameIDStr(),
+		ConvID: convID.ConvIDStr(),
 		Phase:  chat1.UICoinFlipPhase_COMPLETE,
 	}
 	m.addResult(ctx, &status, update.Result, convID)
@@ -669,6 +671,7 @@ func (m *FlipManager) handleUpdate(ctx context.Context, update flip.GameStateUpd
 			GameID: gameID.FlipGameIDStr(),
 		}
 	}
+	status.ConvID = update.Metadata.ConversationID.ConvIDStr()
 
 	switch {
 	case update.Err != nil:

protocol/avdl/chat1/chat_ui.avdl

@@ -535,6 +535,7 @@ protocol chatUi {
   }
   record UICoinFlipStatus {
     FlipGameIDStr gameID;
+    ConvIDStr convID;
     UICoinFlipPhase phase;
     string progressText;
     string resultText;

shared/chat/conversation/messages/reaction-tooltip.tsx

@@ -225,11 +225,13 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       userContainer: {
+        alignSelf: 'stretch',
         backgroundColor: Kb.Styles.globalColors.white,
         paddingBottom: Kb.Styles.globalMargins.xtiny,
         paddingLeft: Kb.Styles.globalMargins.small,
         paddingRight: Kb.Styles.globalMargins.small,
         paddingTop: Kb.Styles.globalMargins.xtiny,
+        width: '100%',
       },
     }) as const
 )

shared/chat/conversation/messages/special-top-message.tsx

@@ -9,12 +9,13 @@ import MakeTeamCard from './cards/make-team'
 import NewChatCard from './cards/new-chat'
 import ProfileResetNotice from './system-profile-reset-notice'
 import RetentionNotice from './retention-notice'
+import {useChatThreadRouteParams} from '../thread-search-route'
 import {usingFlashList} from '../list-area/flashlist-config'
 import * as FS from '@/constants/fs'
 import {useCurrentUserState} from '@/stores/current-user'
 
 const ErrorMessage = () => {
-  const createConversationError = Chat.useChatState(s => s.createConversationError)
+  const createConversationError = useChatThreadRouteParams()?.createConversationError
   const createConversation = Chat.useChatState(s => s.dispatch.createConversation)
 
   const _onCreateWithoutThem = (allowedUsers: ReadonlyArray<string>) => {

shared/chat/conversation/messages/text/coinflip/index.tsx

@@ -20,7 +20,7 @@ function CoinFlipContainer() {
       return {flipGameID, isSendError, message, sendMessage, text}
     })
   )
-  const status = Chat.useChatState(s => s.flipStatusMap.get(flipGameID))
+  const status = Chat.useChatContext(s => s.flipStatusMap.get(flipGameID))
   const onFlipAgain = () => {
     text && sendMessage(text.stringValue())
   }

shared/chat/conversation/messages/wrapper/wrapper.tsx

@@ -260,7 +260,7 @@ const getCommonMessageData = ({
   message: T.Chat.Message
   messageCenterOrdinal: ConvoState['messageCenterOrdinal']
   ordinal: T.Chat.Ordinal
-  paymentStatusMap: ReturnType<typeof Chat.useChatState.getState>['paymentStatusMap']
+  paymentStatusMap: ConvoState['paymentStatusMap']
   unfurlPrompt: ConvoState['unfurlPrompt']
   you: string
 }) => {
@@ -375,7 +375,7 @@ export const useMessageData = (ordinal: T.Chat.Ordinal, isCenteredHighlight?: bo
         message,
         messageCenterOrdinal: s.messageCenterOrdinal,
         ordinal,
-        paymentStatusMap: Chat.useChatState.getState().paymentStatusMap,
+        paymentStatusMap: s.paymentStatusMap,
         unfurlPrompt: s.unfurlPrompt,
         you,
       })
@@ -406,7 +406,7 @@ const useMessageDataWithMessage = (ordinal: T.Chat.Ordinal, isCenteredHighlight?
         message,
         messageCenterOrdinal: s.messageCenterOrdinal,
         ordinal,
-        paymentStatusMap: Chat.useChatState.getState().paymentStatusMap,
+        paymentStatusMap: s.paymentStatusMap,
         unfurlPrompt: s.unfurlPrompt,
         you,
       })
@@ -460,7 +460,7 @@ type WrapperMessageProps = {
 
 const successfulInlinePaymentStatuses = ['completed', 'claimable']
 const hasSuccessfulInlinePayments = (
-  paymentStatusMap: Chat.State['paymentStatusMap'],
+  paymentStatusMap: ConvoState['paymentStatusMap'],
   message: T.Chat.Message
 ): boolean => {
   if (message.type !== 'text' || !message.inlinePaymentIDs) {

shared/chat/conversation/thread-search-route.ts

@@ -1,16 +1,30 @@
-import {getRouteParamsFromRoute, type RootRouteProps} from '@/router-v2/route-params'
+import type * as T from '@/constants/types'
+import {getRouteParamsFromRoute, type RootParamList, type RootRouteProps} from '@/router-v2/route-params'
 import {useRoute} from '@react-navigation/native'
 
 export type ThreadSearchRoute = {
   query?: string
 }
 
 export type ThreadSearchRouteProps = {
+  createConversationError?: T.Chat.CreateConversationError
   threadSearch?: ThreadSearchRoute
 }
 
-export const useThreadSearchRoute = (): ThreadSearchRoute | undefined => {
+const isThreadSearchRouteParams = (
+  params: RootParamList['chatConversation'] | RootParamList['chatRoot'] | undefined
+): params is ThreadSearchRouteProps =>
+  !!params &&
+  typeof params === 'object' &&
+  (Object.prototype.hasOwnProperty.call(params, 'threadSearch') ||
+    Object.prototype.hasOwnProperty.call(params, 'createConversationError'))
+
+export const useChatThreadRouteParams = (): ThreadSearchRouteProps | undefined => {
   const route = useRoute<RootRouteProps<'chatConversation'> | RootRouteProps<'chatRoot'>>()
   const params = getRouteParamsFromRoute<'chatConversation' | 'chatRoot'>(route)
-  return params && typeof params === 'object' && 'threadSearch' in params ? params.threadSearch : undefined
+  return isThreadSearchRouteParams(params) ? params : undefined
+}
+
+export const useThreadSearchRoute = (): ThreadSearchRoute | undefined => {
+  return useChatThreadRouteParams()?.threadSearch
 }

shared/chat/inbox-search/index.tsx

@@ -309,9 +309,9 @@ export default function InboxSearchContainer(ownProps: OwnProps) {
     [
       botsResults.length,
       nameResults.length,
-      nameResultsUnread,
       openTeamsResults.length,
       textCollapsed,
+      nameResultsUnread,
       _textResults.length,
     ]
   )

shared/chat/inbox/index.desktop.tsx

@@ -14,7 +14,7 @@ import {
 import BigTeamsDivider from './row/big-teams-divider'
 import BuildTeam from './row/build-team'
 import InboxSearch from '../inbox-search'
-import TeamsDivider from './row/teams-divider'
+import ConnectedTeamsDivider from './row/teams-divider-container'
 import UnreadShortcut from './unread-shortcut'
 import * as Kb from '@/common-adapters'
 import type {LegendListRef} from '@/common-adapters'
@@ -52,6 +52,7 @@ const FakeRemovingRow = () => <Kb.Box2 direction="horizontal" style={styles.fake
 const dragKey = 'application/keybase_inbox'
 
 const DragLine = (p: {
+  rows: ReadonlyArray<RowItem>
   scrollDiv: React.RefObject<HTMLDivElement | null>
   inboxNumSmallRows: number
   showButton: boolean
@@ -60,7 +61,7 @@ const DragLine = (p: {
   toggleSmallTeamsExpanded: () => void
   setInboxNumSmallRows: (n: number) => void
 }) => {
-  const {inboxNumSmallRows, showButton, scrollDiv, hiddenCount} = p
+  const {rows, inboxNumSmallRows, showButton, scrollDiv, hiddenCount} = p
   const {smallTeamsExpanded, toggleSmallTeamsExpanded, setInboxNumSmallRows} = p
   const [dragY, setDragY] = React.useState(-1)
   const [dividerVisualTop, setDividerVisualTop] = React.useState(0)
@@ -183,7 +184,8 @@ const DragLine = (p: {
           <Kb.Box2 direction="vertical" style={styles.spacer} />
         </>
       )}
-      <TeamsDivider
+      <ConnectedTeamsDivider
+        rows={rows}
         hiddenCountDelta={newSmallRows !== 0 ? -newSmallRows : 0}
         key="divider"
         toggle={toggleSmallTeamsExpanded}
@@ -276,6 +278,7 @@ function InboxBody(props: ControlledInboxProps) {
     if (item.type === 'divider') {
       return (
         <DragLine
+          rows={rows}
           scrollDiv={scrollDiv}
           inboxNumSmallRows={inboxNumSmallRows}
           showButton={item.showButton}

shared/chat/inbox/index.native.tsx

@@ -6,9 +6,9 @@ import {PerfProfiler} from '@/perf/react-profiler'
 import * as RowSizes from './row/sizes'
 import BigTeamsDivider from './row/big-teams-divider'
 import BuildTeam from './row/build-team'
+import ConnectedTeamsDivider from './row/teams-divider-container'
 import SearchRow from './search-row'
 import InboxSearch from '../inbox-search'
-import TeamsDivider from './row/teams-divider'
 import UnreadShortcut from './unread-shortcut'
 import type * as T from '@/constants/types'
 import {Alert} from 'react-native'
@@ -101,7 +101,8 @@ function InboxBody(p: ControlledInboxProps) {
     let element: React.ReactElement | null
     if (row.type === 'divider') {
       element = (
-        <TeamsDivider
+        <ConnectedTeamsDivider
+          rows={rows}
           showButton={row.showButton}
           hiddenCount={row.hiddenCount}
           toggle={toggleSmallTeamsExpanded}

shared/chat/inbox/row/teams-divider-container.tsx

@@ -0,0 +1,43 @@
+import * as C from '@/constants'
+import * as Chat from '@/stores/chat'
+import * as React from 'react'
+import type {ChatInboxRowItem} from '../rowitem'
+import TeamsDivider from './teams-divider'
+
+type Props = Omit<React.ComponentProps<typeof TeamsDivider>, 'badgeCount'> & {
+  rows: ReadonlyArray<ChatInboxRowItem>
+}
+
+const TeamsDividerContainer = React.memo(function TeamsDividerContainer(props: Props) {
+  const {rows, ...rest} = props
+  const {badgeStateVersion, smallTeamBadgeCount} = Chat.useChatState(
+    C.useShallow(s => ({
+      badgeStateVersion: s.badgeStateVersion,
+      smallTeamBadgeCount: s.smallTeamBadgeCount,
+    }))
+  )
+
+  const visibleSmallConvIDs = React.useMemo(() => {
+    const ids: Array<string> = []
+    for (const row of rows) {
+      if (row.type === 'small') {
+        ids.push(row.conversationIDKey)
+      }
+    }
+    return ids
+  }, [rows])
+
+  const visibleBadges = React.useMemo(() => {
+    void badgeStateVersion // we need to trigger on this also
+    let total = 0
+    for (const conversationIDKey of visibleSmallConvIDs) {
+      total += Chat.getConvoState(conversationIDKey).badge
+    }
+    return total
+  }, [badgeStateVersion, visibleSmallConvIDs])
+
+  const hiddenSmallBadgeCount = Math.max(0, smallTeamBadgeCount - visibleBadges)
+  return <TeamsDivider {...rest} badgeCount={hiddenSmallBadgeCount} />
+})
+
+export default TeamsDividerContainer

shared/chat/inbox/row/teams-divider.tsx

@@ -1,9 +1,9 @@
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
-import * as Chat from '@/stores/chat'
 import * as RowSizes from './sizes'
 
 type Props = {
+  badgeCount?: number
   hiddenCountDelta?: number
   smallTeamsExpanded: boolean
   showButton: boolean
@@ -13,24 +13,13 @@ type Props = {
 }
 
 function TeamsDivider(props: Props) {
-  const {showButton, style, hiddenCountDelta, toggle, smallTeamsExpanded} = props
+  const {badgeCount = 0, showButton, style, hiddenCountDelta, toggle, smallTeamsExpanded} = props
   let {hiddenCount} = props
 
   if (!Kb.Styles.isMobile) {
     hiddenCount += hiddenCountDelta ?? 0
   }
 
-  // Read badge count, subtracting visible small team badges so we only count hidden ones
-  const badgeCount = Chat.useChatState(s => {
-    let visibleBadges = 0
-    for (const row of s.inboxRows) {
-      if (row.type === 'small') {
-        visibleBadges += Chat.getConvoState(row.conversationIDKey).badge
-      }
-    }
-    return Math.max(0, s.smallTeamBadgeCount - visibleBadges)
-  })
-
   // only show if there's more to load
   const reallyShow = showButton && !!hiddenCount
   const loadMore = async () => T.RPCChat.localRequestInboxSmallIncreaseRpcPromise().catch(() => {})