more stuff including the shortcut

packages/desktop/package.json

@@ -94,6 +94,7 @@
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.1",
     "electron-squirrel-startup": "^1.0.0",
+    "notistack": "^2.0.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.3.1"

packages/desktop/src/app.tsx

@@ -4,42 +4,16 @@ import * as React from 'react';
 import ReactDOM from 'react-dom/client';
 import Terminal from './components/Terminal';
 
-const theme = createTheme({
-  typography: {
-    fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
-    overline: {
-      letterSpacing: 2,
-    },
-  },
-  palette: {
-    primary: {
-      main: '#438E86',
-    },
-    secondary: {
-      main: '#FFB6B6',
-    },
-  },
-  components: {
-    // Name of the component
-    MuiButtonBase: {
-      defaultProps: {
-        // The props to change the default for.
-        disableRipple: true, // No more ripple, on the whole application 💣!
-      },
-    },
-    MuiAvatar: {
-      defaultProps: {
-        variant: 'rounded',
-      },
-    },
-  },
-});
+import { SnackbarProvider } from 'notistack';
+import { NirvanaTheme } from './mui/NirvanaTheme';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <Terminal />
+    <ThemeProvider theme={NirvanaTheme}>
+      <SnackbarProvider maxSnack={3}>
+        <Terminal />
+      </SnackbarProvider>
     </ThemeProvider>
   </React.StrictMode>,
 );

packages/desktop/src/components/KeyboardShortcutLabel.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, styled, Typography } from '@mui/material';
+import { blueGrey } from '@mui/material/colors';
+
+const StyledBox = styled(Box)(({ theme }) => ({
+  px: theme.spacing(1),
+  py: theme.spacing(0.5),
+  border: `1px solid`,
+  borderColor: blueGrey[50],
+}));
+
+export default function KeyboardShortcutLabel({ label }: { label: string }) {
+  return (
+    <Box
+      sx={{
+        px: 1,
+        py: 0.25,
+        border: `1px solid`,
+        borderColor: blueGrey[50],
+        color: blueGrey[50],
+      }}
+    >
+      <Typography variant="caption">{label}</Typography>
+    </Box>
+  );
+}

packages/desktop/src/components/Terminal.tsx

@@ -1,21 +1,11 @@
 import React from 'react';
 
 import { Container } from '@mui/system';
-import {
-  alpha,
-  Avatar,
-  Box,
-  Button,
-  Grid,
-  InputBase,
-  Paper,
-  Stack,
-  styled,
-  Typography,
-} from '@mui/material';
+import { Avatar, Box, Grid, Input, Stack, Typography } from '@mui/material';
 import NirvanaLogo from './NirvanaLogo';
-import { grey } from '@mui/material/colors';
+import { blueGrey } from '@mui/material/colors';
 import { FiSearch } from 'react-icons/fi';
+import KeyboardShortcutLabel from './KeyboardShortcutLabel';
 
 export default function Terminal() {
   return (
@@ -23,7 +13,7 @@ export default function Terminal() {
       <Grid
         item
         xs={4}
-        sx={{ backgroundColor: '#f3f4f6', boxShadow: 3, borderRight: '1px solid lightgray' }}
+        sx={{ backgroundColor: blueGrey[50], boxShadow: 3, borderRight: `1px solid ${blueGrey}` }}
       >
         <Stack
           direction={'column'}
@@ -47,17 +37,26 @@ export default function Terminal() {
             />
           </Stack>
 
-          <Box
+          <Stack
+            direction={'row'}
             sx={{
               position: 'relative',
               display: 'flex',
               flexDirection: 'row',
-              backgroundColor: grey,
-              padding: 1,
+              bgcolor: blueGrey[100],
+              borderRadius: 1,
+              px: 1,
+              py: 0.5,
             }}
+            alignItems={'center'}
+            spacing={1}
           >
-            <FiSearch />
-          </Box>
+            <FiSearch style={{ color: blueGrey[500] }} />
+
+            <Input placeholder={'Find or start a conversation'} />
+
+            <KeyboardShortcutLabel label="tab" />
+          </Stack>
         </Stack>
       </Grid>
       <Grid item xs={8} sx={{ backgroundColor: 'white', padding: 1 }}>

packages/desktop/src/mui/NirvanaTheme.ts

@@ -0,0 +1,43 @@
+import { createTheme } from '@mui/material';
+
+export const NirvanaTheme = createTheme({
+  typography: {
+    fontFamily: ['IBM Plex Sans', 'sans-serif'].join(','),
+    overline: {
+      letterSpacing: 2,
+    },
+  },
+  palette: {
+    primary: {
+      main: '#438E86',
+    },
+    secondary: {
+      main: '#FFB6B6',
+    },
+  },
+  components: {
+    // Name of the component
+    MuiButtonBase: {
+      defaultProps: {
+        // The props to change the default for.
+        disableRipple: true, // No more ripple, on the whole application 💣!
+      },
+    },
+    MuiAvatar: {
+      defaultProps: {
+        variant: 'rounded',
+      },
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.9em',
+        },
+      },
+      defaultProps: {
+        disableUnderline: true,
+        fullWidth: true,
+      },
+    },
+  },
+});