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 (
);
}
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 (
);
}
-export default ThreadTopBar;
+export default NavStateInfoBar;