terminal provider and heirarchy for implementation

packages/desktop/src/app.tsx

@@ -2,7 +2,7 @@ import { ThemeProvider } from '@mui/material';
 import * as React from 'react';
 
 import ReactDOM from 'react-dom/client';
-import Terminal from './components/Terminal';
+import { TerminalProvider } from './components/Terminal';
 
 import { SnackbarProvider } from 'notistack';
 import { NirvanaTheme } from './mui/NirvanaTheme';
@@ -20,7 +20,7 @@ root.render(
         <ErrorParent>
           <ElectronProvider>
             <AuthProvider>
-              <Terminal />
+              <TerminalProvider />
             </AuthProvider>
           </ElectronProvider>
         </ErrorParent>

packages/desktop/src/components/Conversations.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import {
   Avatar,
@@ -10,15 +10,52 @@ import {
   ListItemButton,
   ListItemText,
   ListSubheader,
+  Stack,
   Typography,
+  Input,
 } from '@mui/material';
 import { blueGrey } from '@mui/material/colors';
-import { FiActivity, FiInbox } from 'react-icons/fi';
+import { FiActivity, FiInbox, FiSearch } from 'react-icons/fi';
 import NirvanaAvatar from './NirvanaAvatar';
+import { useKey } from 'react-use';
+import { useSnackbar } from 'notistack';
+import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 
 const Conversations = () => {
+  const { enqueueSnackbar } = useSnackbar();
+
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const onSearch = useCallback(() => {
+    enqueueSnackbar('search focused');
+    if (searchRef?.current) searchRef.current.focus();
+  }, []);
+
+  useKey('Shift', onSearch);
+
   return (
     <>
+      <Stack
+        direction={'row'}
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'row',
+          bgcolor: blueGrey[100],
+          borderRadius: 1,
+          px: 1,
+          py: 0.5,
+        }}
+        alignItems={'center'}
+        spacing={1}
+      >
+        <FiSearch style={{ color: blueGrey[500] }} />
+
+        <Input placeholder={'Find or start a conversation'} inputRef={searchRef} />
+
+        <KeyboardShortcutLabel label="Shift" />
+      </Stack>
+
       <List
         sx={{
           pt: 2,

packages/desktop/src/components/Terminal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useContext } from 'react';
 
 import { Container } from '@mui/system';
 import {
@@ -37,10 +37,17 @@ import useAuth from '../providers/AuthProvider';
 import Conversations from './Conversations';
 import Navbar from './Navbar';
 
-export default function Terminal() {
+interface ITerminalContext {
+  selectedConversation?: string;
+}
+
+const TerminalContext = React.createContext<ITerminalContext>({});
+
+export function TerminalProvider({ children }: { children?: React.ReactNode }) {
   const { enqueueSnackbar } = useSnackbar();
 
   return (
+    <TerminalContext.Provider value={{ selectedConversation: undefined }}>
       <Grid container spacing={0}>
         <Grid
           item
@@ -62,13 +69,15 @@ export default function Terminal() {
           >
             <Navbar />
 
-          <SecondNavbar />
-
             <Conversations />
           </Stack>
         </Grid>
 
-      <Grid item xs={8} sx={{ backgroundColor: 'white', display: 'flex', flexDirection: 'column' }}>
+        <Grid
+          item
+          xs={8}
+          sx={{ backgroundColor: 'white', display: 'flex', flexDirection: 'column' }}
+        >
           <Stack
             direction={'row'}
             sx={{
@@ -111,7 +120,10 @@ export default function Terminal() {
                 <Paper elevation={1} sx={{ p: 1, width: '100%' }}>
                   <Stack direction={'row'} alignItems="center">
                     <Stack spacing={2} direction={'row'} alignItems={'center'}>
-                    <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+                      <Avatar
+                        alt={'Arjun Patel'}
+                        src="https://mui.com/static/images/avatar/2.jpg"
+                      />
 
                       <Typography color={'GrayText'} variant="overline">
                         {'Viet Phan'}
@@ -142,7 +154,10 @@ export default function Terminal() {
                 <Paper elevation={8} sx={{ p: 1, width: '100%' }}>
                   <Stack direction={'row'} alignItems="center">
                     <Stack spacing={2} direction={'row'} alignItems={'center'}>
-                    <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+                      <Avatar
+                        alt={'Arjun Patel'}
+                        src="https://mui.com/static/images/avatar/2.jpg"
+                      />
 
                       <Typography color={'GrayText'} variant="overline">
                         {'Viet Phan'}
@@ -212,42 +227,12 @@ export default function Terminal() {
           </Container>
         </Grid>
       </Grid>
+
+      {children}
+    </TerminalContext.Provider>
   );
 }
 
-const searchShortcut = 'Shift';
+export default function useTerminal() {
-const SecondNavbar = () => {
+  return useContext(TerminalContext);
-  const { enqueueSnackbar } = useSnackbar();
+}
-
-  const searchRef = useRef<HTMLInputElement>(null);
-
-  const onSearch = useCallback(() => {
-    enqueueSnackbar('search focused');
-    if (searchRef?.current) searchRef.current.focus();
-  }, []);
-
-  useKey('Shift', onSearch);
-
-  return (
-    <Stack
-      direction={'row'}
-      sx={{
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'row',
-        bgcolor: blueGrey[100],
-        borderRadius: 1,
-        px: 1,
-        py: 0.5,
-      }}
-      alignItems={'center'}
-      spacing={1}
-    >
-      <FiSearch style={{ color: blueGrey[500] }} />
-
-      <Input placeholder={'Find or start a conversation'} inputRef={searchRef} />
-
-      <KeyboardShortcutLabel label="Shift" />
-    </Stack>
-  );
-};

packages/desktop/src/util/keyboard.ts

@@ -0,0 +1 @@
+const searchShortcut = 'Shift';