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 @@ -6,7 +6,6 @@ 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'; @@ -36,7 +35,6 @@ style={threadBackgroundColorStyle} />

{uiName}

- {threadMenu} diff --git a/web/chat/chat-thread-ancestors.css b/web/navigation-panels/chat-thread-ancestors.css 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 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 --- /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 copy from web/chat/thread-top-bar.react.js copy to web/navigation-panels/nav-state-info-bar.react.js --- a/web/chat/thread-top-bar.react.js +++ b/web/navigation-panels/nav-state-info-bar.react.js @@ -2,18 +2,16 @@ 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 = { +threadInfo: ThreadInfo, }; -function ThreadTopBar(props: threadTopBarProps): React.Node { +function NavStateInfoBar(props: threadTopBarProps): React.Node { const { threadInfo } = props; const threadBackgroundColorStyle = React.useMemo( () => ({ @@ -22,11 +20,6 @@ [threadInfo.color], ); - let threadMenu = null; - if (!threadIsPending(threadInfo.id)) { - threadMenu = ; - } - const { uiName } = useResolvedThreadInfo(threadInfo); return (
@@ -38,9 +31,8 @@

{uiName}

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