separating out the navbar

packages/desktop/src/components/Navbar.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 
 import {
   Avatar,
+  CircularProgress,
   Divider,
   IconButton,
+  Input,
   ListItemIcon,
   Menu,
   Stack,
@@ -11,127 +13,85 @@ import {
   Typography,
 } from '@mui/material';
 import NirvanaLogo from './NirvanaLogo';
-import { FiHeadphones, FiLogOut, FiMonitor, FiWind } from 'react-icons/fi';
+import { FiHeadphones, FiLogOut, FiMonitor, FiSearch, FiUsers, FiWind } from 'react-icons/fi';
 
 import MenuItem from '@mui/material/MenuItem';
 import useAuth from '../providers/AuthProvider';
+import { blueGrey } from '@mui/material/colors';
+import KeyboardShortcutLabel from './KeyboardShortcutLabel';
+import { useSnackbar } from 'notistack';
+import { useKeyPressEvent } from 'react-use';
 
-const Navbar = () => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
+const Navbar = ({
+  handleChangeSearchInput,
+  searchVal,
+  isSearching,
+}: {
+  handleChangeSearchInput: React.ChangeEventHandler;
+  searchVal: string;
+  isSearching: boolean;
+}) => {
   const { logout, user } = useAuth();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const searchRef = useRef<HTMLInputElement>(null);
+  const onSearchFocus = useCallback(() => {
+    enqueueSnackbar('search focused');
+    if (searchRef?.current) searchRef.current.focus();
+  }, [enqueueSnackbar, searchRef]);
+
+  useKeyPressEvent('Shift', onSearchFocus);
 
   return (
-    <>
-      <Stack
-        direction="row"
-        justifyContent={'flex-start'}
-        alignItems={'center'}
-        sx={{
-          WebkitAppRegion: 'drag',
-          cursor: 'pointer',
-          pb: 1,
-        }}
-      >
-        <NirvanaLogo />
+    <Stack
+      direction="row"
+      justifyContent={'flex-start'}
+      alignItems={'center'}
+      spacing={2}
+      sx={{
+        WebkitAppRegion: 'drag',
+        cursor: 'pointer',
+        pb: 1,
+      }}
+    >
+      <NirvanaLogo />
 
-        <Stack
-          spacing={1}
-          direction={'row'}
-          alignItems={'center'}
-          sx={{
-            ml: 'auto',
-            mr: 1,
-            color: 'GrayText',
-          }}
-        >
-          <Tooltip title="Sound configuration">
-            <IconButton color="inherit" size="small">
-              <FiHeadphones />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="Desktop modes">
-            <IconButton color="inherit" size="small">
-              <FiMonitor />
-            </IconButton>
-          </Tooltip>
-          <Tooltip title="Flow state">
-            <IconButton color="inherit" size="small">
-              <FiWind />
-            </IconButton>
-          </Tooltip>
-        </Stack>
-        <IconButton
-          onClick={handleClick}
-          size="small"
-          sx={{ ml: 1, borderRadius: 1 }}
-          aria-controls={open ? 'account-menu' : undefined}
-          aria-haspopup="true"
-          aria-expanded={open ? 'true' : undefined}
-        >
-          <Avatar alt={user.displayName} src={user.photoURL} />
-        </IconButton>
+      <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={handleChangeSearchInput}
+          value={searchVal}
+          placeholder={'Find or start a conversation'}
+          inputRef={searchRef}
+        />
+
+        {isSearching && <CircularProgress size={20} />}
+
+        <KeyboardShortcutLabel label="Shift" />
       </Stack>
 
-      <Menu
-        anchorEl={anchorEl}
-        id="account-menu"
-        open={open}
-        onClose={handleClose}
-        onClick={handleClose}
-        PaperProps={{
-          elevation: 0,
-          sx: {
-            overflow: 'visible',
-            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-            mt: 1.5,
-            '& .MuiAvatar-root': {
-              width: 32,
-              height: 32,
-              ml: -0.5,
-              mr: 1,
-            },
-            '&:before': {
-              content: '""',
-              display: 'block',
-              position: 'absolute',
-              top: 0,
-              right: 14,
-              width: 10,
-              height: 10,
-              bgcolor: 'background.paper',
-              transform: 'translateY(-50%) rotate(45deg)',
-              zIndex: 0,
-            },
-          },
-        }}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      >
-        <MenuItem>
-          <Avatar /> Profile
-        </MenuItem>
-        <MenuItem>
-          <Avatar /> My account
-        </MenuItem>
-
-        <Divider />
-
-        <MenuItem onClick={logout}>
-          <ListItemIcon>
-            <FiLogOut />
-          </ListItemIcon>
-          <Typography color="warning">Logout</Typography>
-        </MenuItem>
-      </Menu>
-    </>
+      <Tooltip title={'Group conversation'}>
+        <IconButton color="default" size={'small'}>
+          <FiUsers />
+        </IconButton>
+      </Tooltip>
+    </Stack>
   );
 };
 

packages/desktop/src/components/Terminal.tsx

@@ -78,6 +78,7 @@ import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 import Channels from '../electron/constants';
 import { uploadAudioClip } from '../firebase/firebaseStorage';
 import { ContentBlock, ContentType } from '@nirvana/core/src/models/content.model';
+import Navbar from './Navbar';
 type ConversationMap = {
   [conversationId: string]: Conversation;
 };
@@ -351,22 +352,10 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
     [userMap, updateUserMap],
   );
 
-  const searchRef = useRef<HTMLInputElement>(null);
-  const [searchVal, setSearchVal] = useState<string>('');
-
-  const onSearchFocus = useCallback(() => {
-    enqueueSnackbar('search focused');
-    if (searchRef?.current) searchRef.current.focus();
-  }, [enqueueSnackbar, searchRef]);
-
-  const [searchUsersResults, setSearchUsersResults] = useState<User[]>([]);
-  const [searching, setSearching] = useState<boolean>(false);
-
   const handleEscape = useCallback(() => {
     setSelectedConversationId(undefined);
   }, [setSelectedConversationId]);
 
-  useKeyPressEvent('Shift', onSearchFocus);
   useKeyPressEvent('Escape', handleEscape);
 
   const [isUserSpeaking, setIsUserSpeaking] = useState<boolean>(false);
@@ -487,6 +476,10 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
 
   useKeyPressEvent('`', handleBroadcast, handleStopBroadcast);
 
+  const [searchVal, setSearchVal] = useState<string>('');
+  const [searchUsersResults, setSearchUsersResults] = useState<User[]>([]);
+  const [searching, setSearching] = useState<boolean>(false);
+
   const [, cancel] = useDebounce(
     async () => {
       if (searchVal) {
@@ -560,56 +553,11 @@ export function TerminalProvider({ children }: { children?: React.ReactNode }) {
               height: 'inherit',
             }}
           >
-            {/* navbar */}
-            <Stack
-              direction="row"
-              justifyContent={'flex-start'}
-              alignItems={'center'}
-              spacing={2}
-              sx={{
-                WebkitAppRegion: 'drag',
-                cursor: 'pointer',
-                pb: 1,
-              }}
-            >
-              <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={handleChangeSearchInput}
-                  value={searchVal}
-                  placeholder={'Find or start a conversation'}
-                  inputRef={searchRef}
-                />
-
-                {searching && <CircularProgress size={20} />}
-
-                <KeyboardShortcutLabel label="Shift" />
-              </Stack>
-
-              <Tooltip title={'Group conversation'}>
-                <IconButton color="default" size={'small'}>
-                  <FiUsers />
-                </IconButton>
-              </Tooltip>
-            </Stack>
+            <Navbar
+              searchVal={searchVal}
+              isSearching={searching}
+              handleChangeSearchInput={handleChangeSearchInput}
+            />
 
             {searchVal ? (
               <ListPeople people={searchUsersResults} />