diff --git a/lib/utils/message-pinning-utils.js b/lib/utils/message-pinning-utils.js --- a/lib/utils/message-pinning-utils.js +++ b/lib/utils/message-pinning-utils.js @@ -19,4 +19,10 @@ return isValidMessage && hasManagePinsPermission; } -export { canToggleMessagePin }; +function pinnedMessageCountText(pinnedCount: number): string { + const messageNoun = pinnedCount === 1 ? 'message' : 'messages'; + + return `${pinnedCount} pinned ${messageNoun}`; +} + +export { canToggleMessagePin, pinnedMessageCountText }; diff --git a/native/chat/message-list-container.react.js b/native/chat/message-list-container.react.js --- a/native/chat/message-list-container.react.js +++ b/native/chat/message-list-container.react.js @@ -19,6 +19,7 @@ } from 'lib/shared/thread-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { AccountUserInfo, UserListItem } from 'lib/types/user-types.js'; +import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js'; import { type MessagesMeasurer, useHeightMeasurer } from './chat-context.js'; import { ChatInputBar } from './chat-input-bar.react.js'; @@ -361,13 +362,9 @@ state => threadInfoSelector(state)[genesis.id], ); - let bannerText; - if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) { - bannerText = ''; - } else { - const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages'; - bannerText = `${threadInfo.pinnedCount} pinned ${messageNoun}`; - } + const bannerText = + !!threadInfo.pinnedCount && + pinnedMessageCountText(threadInfo.pinnedCount); const navigateToMessageResults = React.useCallback(() => { props.navigation.navigate<'MessageResultsScreen'>({ diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js --- a/web/chat/thread-top-bar.react.js +++ b/web/chat/thread-top-bar.react.js @@ -8,6 +8,7 @@ import { threadIsPending } from 'lib/shared/thread-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; +import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js'; import ThreadMenu from './thread-menu.react.js'; import css from './thread-top-bar.css'; @@ -29,15 +30,9 @@ threadMenu = ; } - const bannerText = React.useMemo(() => { - if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) { - return ''; - } - - const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages'; - - return `${threadInfo.pinnedCount} pinned ${messageNoun}`; - }, [threadInfo.pinnedCount]); + const bannerText = threadInfo.pinnedCount + ? pinnedMessageCountText(threadInfo.pinnedCount) + : ''; const inputState = React.useContext(InputStateContext); const pushThreadPinsModal = React.useCallback(() => {