diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css index f124a0bb4..d882131cd 100644 --- a/web/navigation-panels/nav-state-info-bar.css +++ b/web/navigation-panels/nav-state-info-bar.css @@ -1,27 +1,39 @@ div.topBarContainer { display: flex; background-color: var(--bg); align-items: center; justify-content: space-between; - padding: 16px; + padding: 0 16px; color: var(--thread-top-bar-color); - border-bottom: 1px solid var(--border); + height: 56px; } div.topBarThreadInfo { height: 24px; display: flex; align-items: center; column-gap: 8px; } div.threadColorSquare { width: 24px; height: 24px; border-radius: 4px; } p.threadTitle { font-size: var(--m-font-16); font-weight: var(--bold); } + +div.hide { + height: 0px; + opacity: 0; + transition: height 200ms ease-in-out, opacity 200ms ease-in-out; +} + +div.show { + height: 56px; + opacity: 1; + transition: height 200ms ease-in-out, opacity 200ms ease-in-out; +} diff --git a/web/navigation-panels/nav-state-info-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js index 313795a19..731d3cafb 100644 --- a/web/navigation-panels/nav-state-info-bar.react.js +++ b/web/navigation-panels/nav-state-info-bar.react.js @@ -1,38 +1,78 @@ // @flow +import classnames from 'classnames'; import * as React from 'react'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js'; import ThreadAncestors from './chat-thread-ancestors.react.js'; import css from './nav-state-info-bar.css'; type NavStateInfoBarProps = { +threadInfo: ThreadInfo, }; function NavStateInfoBar(props: NavStateInfoBarProps): React.Node { const { threadInfo } = props; + const threadBackgroundColorStyle = React.useMemo( () => ({ background: `#${threadInfo.color}`, }), [threadInfo.color], ); const { uiName } = useResolvedThreadInfo(threadInfo); return ( -
+ <>

{uiName}

-
+ ); } -export default NavStateInfoBar; +type PossiblyEmptyNavStateInfoBarProps = { + +threadInfoInput: ?ThreadInfo, +}; +function PossiblyEmptyNavStateInfoBar( + props: PossiblyEmptyNavStateInfoBarProps, +): React.Node { + const { threadInfoInput } = props; + + const [threadInfo, setThreadInfo] = React.useState(threadInfoInput); + + React.useEffect(() => { + if (threadInfoInput !== threadInfo) { + if (threadInfoInput) { + setThreadInfo(threadInfoInput); + } else { + const timeout = setTimeout(() => { + setThreadInfo(null); + }, 200); + return () => clearTimeout(timeout); + } + } + }, [threadInfoInput, threadInfo]); + + const content = React.useMemo(() => { + if (threadInfo) { + return ; + } else { + return null; + } + }, [threadInfo]); + + const classes = classnames(css.topBarContainer, { + [css.hide]: !threadInfoInput, + [css.show]: threadInfoInput, + }); + return
{content}
; +} + +export default PossiblyEmptyNavStateInfoBar;