diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js index 7d3d01b58..a3c6e850e 100644 --- a/web/chat/thread-top-bar.react.js +++ b/web/chat/thread-top-bar.react.js @@ -1,46 +1,44 @@ // @flow import * as React from 'react'; 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 ThreadAncestors from './chat-thread-ancestors.react.js'; import ThreadMenu from './thread-menu.react.js'; import css from './thread-top-bar.css'; -type threadTopBarProps = { +type ThreadTopBarProps = { +threadInfo: ThreadInfo, }; -function ThreadTopBar(props: threadTopBarProps): React.Node { +function ThreadTopBar(props: ThreadTopBarProps): React.Node { const { threadInfo } = props; const threadBackgroundColorStyle = React.useMemo( () => ({ background: `#${threadInfo.color}`, }), [threadInfo.color], ); let threadMenu = null; if (!threadIsPending(threadInfo.id)) { threadMenu = ; } const { uiName } = useResolvedThreadInfo(threadInfo); return (

{uiName}

-
{threadMenu}
); } export default ThreadTopBar; diff --git a/web/chat/chat-thread-ancestors.css b/web/navigation-panels/chat-thread-ancestors.css similarity index 100% rename from web/chat/chat-thread-ancestors.css rename to web/navigation-panels/chat-thread-ancestors.css diff --git a/web/chat/chat-thread-ancestors.react.js b/web/navigation-panels/chat-thread-ancestors.react.js similarity index 100% rename from web/chat/chat-thread-ancestors.react.js rename to web/navigation-panels/chat-thread-ancestors.react.js diff --git a/web/navigation-panels/nav-state-info-bar.css b/web/navigation-panels/nav-state-info-bar.css new file mode 100644 index 000000000..f124a0bb4 --- /dev/null +++ b/web/navigation-panels/nav-state-info-bar.css @@ -0,0 +1,27 @@ +div.topBarContainer { + display: flex; + background-color: var(--bg); + align-items: center; + justify-content: space-between; + padding: 16px; + color: var(--thread-top-bar-color); + border-bottom: 1px solid var(--border); +} + +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); +} diff --git a/web/chat/thread-top-bar.react.js b/web/navigation-panels/nav-state-info-bar.react.js similarity index 67% copy from web/chat/thread-top-bar.react.js copy to web/navigation-panels/nav-state-info-bar.react.js index 7d3d01b58..313795a19 100644 --- a/web/chat/thread-top-bar.react.js +++ b/web/navigation-panels/nav-state-info-bar.react.js @@ -1,46 +1,38 @@ // @flow import * as React from 'react'; -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 ThreadAncestors from './chat-thread-ancestors.react.js'; -import ThreadMenu from './thread-menu.react.js'; -import css from './thread-top-bar.css'; +import css from './nav-state-info-bar.css'; -type threadTopBarProps = { +type NavStateInfoBarProps = { +threadInfo: ThreadInfo, }; -function ThreadTopBar(props: threadTopBarProps): React.Node { +function NavStateInfoBar(props: NavStateInfoBarProps): React.Node { const { threadInfo } = props; const threadBackgroundColorStyle = React.useMemo( () => ({ background: `#${threadInfo.color}`, }), [threadInfo.color], ); - let threadMenu = null; - if (!threadIsPending(threadInfo.id)) { - threadMenu = ; - } - const { uiName } = useResolvedThreadInfo(threadInfo); return (

{uiName}

- {threadMenu}
); } -export default ThreadTopBar; +export default NavStateInfoBar;