adding in navbar and other components

packages/desktop/src/tree/Navbar.tsx

@@ -0,0 +1,89 @@
+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 useTerminal from './Terminal';
+
+const Navbar = () => {
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  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>) => {
+      setSearchQuery(e.target.value);
+    },
+    [setSearchQuery],
+  );
+
+  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'}>
+          <FiUsers />
+        </IconButton>
+      </Tooltip>
+    </Stack>
+  );
+};
+
+export default Navbar;

packages/desktop/src/tree/Terminal.tsx

@@ -1,5 +1,6 @@
 import { Container, Grid } from '@mui/material';
 
+import Navbar from './Navbar';
 import React from 'react';
 import { blueGrey } from '@mui/material/colors';
 
@@ -16,7 +17,7 @@ export default function Terminal() {
     >
       <Grid container spacing={0}>
         <Grid item xs={4}>
-          This is the sidepanel
+          <Navbar />
         </Grid>
 
         <Grid item xs={8}>