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,
+      },
+    },
+  },
+});

yarn.lock

@@ -1825,7 +1825,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.1.1:
+clsx@^1.1.0, clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -3576,7 +3576,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4747,6 +4747,14 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+notistack@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/notistack/-/notistack-2.0.5.tgz#8eb53720453f6e02182cd0e6784ced630a7bb7e6"
+  integrity sha512-Ig2T1Muqkc1PaSQcEDrK7diKv6cBxw02Iq6uv074ySfgq524TV5lK41diAb6OSsaiWfp3aRt+T3+0MF8m2EcJQ==
+  dependencies:
+    clsx "^1.1.0"
+    hoist-non-react-statics "^3.3.0"
+
 npm-conf@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"