Changeset View
Changeset View
Standalone View
Standalone View
web/navigation-panels/topbar.react.js
// @flow | // @flow | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { useModalContext } from 'lib/components/modal-provider.react.js'; | import { useModalContext } from 'lib/components/modal-provider.react.js'; | ||||
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; | import SWMansionIcon from 'lib/components/SWMansionIcon.react.js'; | ||||
import AppSwitcher from './app-switcher.react.js'; | import AppSwitcher from './app-switcher.react.js'; | ||||
import NavStateInfoBar from './nav-state-info-bar.react.js'; | |||||
import css from './topbar.css'; | import css from './topbar.css'; | ||||
import Button from '../components/button.react.js'; | import Button from '../components/button.react.js'; | ||||
import AppsDirectory from '../modals/apps/apps-directory-modal.react.js'; | import AppsDirectory from '../modals/apps/apps-directory-modal.react.js'; | ||||
import { useDrawerSelectedThreadID } from '../selectors/thread-selectors.js'; | |||||
import { useThreadInfoForPossiblyPendingThread } from '../utils/thread-utils.js'; | |||||
function Topbar(): React.Node { | function Topbar(): React.Node { | ||||
const { pushModal } = useModalContext(); | const { pushModal } = useModalContext(); | ||||
const onClickApps = React.useCallback( | const onClickApps = React.useCallback( | ||||
() => pushModal(<AppsDirectory />), | () => pushModal(<AppsDirectory />), | ||||
[pushModal], | [pushModal], | ||||
); | ); | ||||
const appNavigationItem = React.useMemo( | const appNavigationItem = React.useMemo( | ||||
() => ( | () => ( | ||||
<Button className={css.plusButton} onClick={onClickApps}> | <Button className={css.plusButton} onClick={onClickApps}> | ||||
<SWMansionIcon icon="plus-small" size={24} /> | <SWMansionIcon icon="plus-small" size={24} /> | ||||
</Button> | </Button> | ||||
), | ), | ||||
[onClickApps], | [onClickApps], | ||||
); | ); | ||||
const activeChatThreadID = useDrawerSelectedThreadID(); | |||||
const threadInfo = useThreadInfoForPossiblyPendingThread(activeChatThreadID); | |||||
return ( | return ( | ||||
<> | |||||
<NavStateInfoBar threadInfoInput={threadInfo} /> | |||||
<div className={css.container}> | <div className={css.container}> | ||||
<div className={css.tabs}> | <div className={css.tabs}> | ||||
<AppSwitcher /> | <AppSwitcher /> | ||||
</div> | </div> | ||||
{appNavigationItem} | {appNavigationItem} | ||||
</div> | </div> | ||||
</> | |||||
); | ); | ||||
} | } | ||||
const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar); | const MemoizedTopbar: React.ComponentType<{}> = React.memo<{}>(Topbar); | ||||
export default MemoizedTopbar; | export default MemoizedTopbar; |