Differential D6745 Diff 23680 web/chat/thread-top-bar.react.js

Changeset View

Standalone View

web/chat/thread-top-bar.react.js

This file was copied to web/navigation-panels/nav-state-info-bar.react.js.

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';

	import { threadIsPending } from 'lib/shared/thread-utils.js';			import { threadIsPending } from 'lib/shared/thread-utils.js';
	import type { ThreadInfo } from 'lib/types/thread-types.js';			import type { ThreadInfo } from 'lib/types/thread-types.js';
	import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.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 ThreadMenu from './thread-menu.react.js';
	import css from './thread-top-bar.css';			import css from './thread-top-bar.css';

	type threadTopBarProps = {			type ThreadTopBarProps = {
	+threadInfo: ThreadInfo,			+threadInfo: ThreadInfo,
	};			};
	function ThreadTopBar(props: threadTopBarProps): React.Node {			function ThreadTopBar(props: ThreadTopBarProps): React.Node {
	const { threadInfo } = props;			const { threadInfo } = props;
	const threadBackgroundColorStyle = React.useMemo(			const threadBackgroundColorStyle = React.useMemo(
	() => ({			() => ({
	background: `#${threadInfo.color}`,			background: `#${threadInfo.color}`,
	}),			}),
	[threadInfo.color],			[threadInfo.color],
	);			);

	let threadMenu = null;			let threadMenu = null;
	if (!threadIsPending(threadInfo.id)) {			if (!threadIsPending(threadInfo.id)) {
	threadMenu = <ThreadMenu threadInfo={threadInfo} />;			threadMenu = <ThreadMenu threadInfo={threadInfo} />;
	}			}

	const { uiName } = useResolvedThreadInfo(threadInfo);			const { uiName } = useResolvedThreadInfo(threadInfo);
	return (			return (
	<div className={css.topBarContainer}>			<div className={css.topBarContainer}>
	<div className={css.topBarThreadInfo}>			<div className={css.topBarThreadInfo}>
	<div			<div
	className={css.threadColorSquare}			className={css.threadColorSquare}
	style={threadBackgroundColorStyle}			style={threadBackgroundColorStyle}
	/>			/>
	<p className={css.threadTitle}>{uiName}</p>			<p className={css.threadTitle}>{uiName}</p>
	<ThreadAncestors threadInfo={threadInfo} />
	</div>			</div>
	{threadMenu}			{threadMenu}
	</div>			</div>
	);			);
	}			}

	export default ThreadTopBar;			export default ThreadTopBar;