diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css --- a/web/chat/thread-top-bar.css +++ b/web/chat/thread-top-bar.css @@ -37,3 +37,28 @@ cursor: pointer; color: var(--thread-top-bar-menu-color); } + +.pinnedCountBanner { + background-color: var(--pinned-count-banner-color); + height: 40px; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} + +span.pinnedCountText { + color: var(--pinned-count-text-color); + font-size: 12px; + display: inline-flex; + align-items: center; +} + +span.pinnedCountText:hover { + cursor: pointer; + text-decoration: underline; +} + +.chevronRight { + vertical-align: middle; +} 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 @@ -1,6 +1,7 @@ // @flow import * as React from 'react'; +import { ChevronRight } from 'react-feather'; import { threadIsPending } from 'lib/shared/thread-utils.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; @@ -26,18 +27,39 @@ threadMenu = ; } + const pinnedCountBanner = React.useMemo(() => { + if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) { + return null; + } + + const singleOrPlural = + threadInfo.pinnedCount === 1 ? 'message' : 'messages'; + + return ( +
+ + {threadInfo.pinnedCount} pinned {singleOrPlural} + + +
+ ); + }, [threadInfo.pinnedCount]); + const { uiName } = useResolvedThreadInfo(threadInfo); return ( -
-
-
-
{uiName}
+ <> +
+
+
+
{uiName}
+
+ {threadMenu}
- {threadMenu} -
+ {pinnedCountBanner} + ); } diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -214,4 +214,6 @@ --topbar-lines: rgba(255, 255, 255, 0.08); --pin-message-information-text-color: var(--shades-white-60); --pin-message-modal-border-color: var(--shades-black-80); + --pinned-count-banner-color: var(--shades-black-90); + --pinned-count-text-color: var(--shades-white-90); }