97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
import { CircularProgress, IconButton, Input, Stack, Tooltip } from '@mui/material';
|
|
import { FiSearch, FiUsers } from 'react-icons/fi';
|
|
import React, { useCallback, useRef, useState } from 'react';
|
|
import { useKeyPressEvent, useRendersCount } from 'react-use';
|
|
|
|
import KeyboardShortcutLabel from '../subcomponents/KeyboardShortcutLabel';
|
|
import { KeyboardShortcuts } from '../util/keyboard';
|
|
import NirvanaLogo from '../subcomponents/NirvanaLogo';
|
|
import { blueGrey } from '@mui/material/colors';
|
|
import useRouter from '../providers/RouterProvider';
|
|
import useSearch from '../providers/SearchProvider';
|
|
import useTerminal from './Terminal';
|
|
|
|
const Navbar = () => {
|
|
const { handleSetPage } = useRouter();
|
|
const { searchQuery, omniSearch, conversationResults, userResults, isSearching } = useSearch();
|
|
|
|
const searchRef = useRef<HTMLInputElement>(null);
|
|
const onSearchFocus = useCallback(() => {
|
|
if (searchRef?.current) searchRef.current.focus();
|
|
}, [searchRef]);
|
|
|
|
useKeyPressEvent(KeyboardShortcuts.search.shortcutKey, onSearchFocus);
|
|
|
|
const handleSearchChange = useCallback(
|
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
omniSearch(e.target.value);
|
|
},
|
|
[omniSearch],
|
|
);
|
|
|
|
const rendersCount = useRendersCount();
|
|
// console.warn('RENDER COUNT | NAVBAR | ', rendersCount);
|
|
|
|
return (
|
|
<Stack
|
|
direction="row"
|
|
justifyContent={'flex-start'}
|
|
alignItems={'center'}
|
|
spacing={2}
|
|
sx={{
|
|
WebkitAppRegion: 'drag',
|
|
cursor: 'pointer',
|
|
p: 2,
|
|
}}
|
|
>
|
|
<NirvanaLogo />
|
|
|
|
<Stack
|
|
direction={'row'}
|
|
sx={{
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
bgcolor: blueGrey[100],
|
|
opacity: '50%',
|
|
borderRadius: 1,
|
|
px: 1,
|
|
py: 0.5,
|
|
flex: 1,
|
|
}}
|
|
alignItems={'center'}
|
|
spacing={1}
|
|
>
|
|
<FiSearch style={{ color: blueGrey[500] }} />
|
|
|
|
<Input
|
|
onChange={handleSearchChange}
|
|
value={searchQuery}
|
|
placeholder={'Find or start a conversation'}
|
|
inputRef={searchRef}
|
|
/>
|
|
|
|
{isSearching && <CircularProgress size={20} />}
|
|
|
|
{searchQuery ? (
|
|
<KeyboardShortcutLabel label={KeyboardShortcuts.escape.label} />
|
|
) : (
|
|
<KeyboardShortcutLabel label={KeyboardShortcuts.search.label} />
|
|
)}
|
|
</Stack>
|
|
|
|
<Tooltip title={'Group conversation'}>
|
|
<IconButton
|
|
color="default"
|
|
size={'small'}
|
|
onClick={handleSetPage('START_NEW_CONVERSATION')}
|
|
>
|
|
<FiUsers />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|