talksik/nirvana-v4
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

terminal provider and heirarchy for implementation

Browse Source
This commit is contained in:
talksik
2022-05-28 12:37:47 -05:00
parent 7b29360f8f
commit 6b0d993e1e
4 changed files with 229 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/app.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { ThemeProvider } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import Terminal from './components/Terminal'; import { TerminalProvider } from './components/Terminal';
import { SnackbarProvider } from 'notistack'; import { SnackbarProvider } from 'notistack';
import { NirvanaTheme } from './mui/NirvanaTheme'; import { NirvanaTheme } from './mui/NirvanaTheme';
@@ -20,7 +20,7 @@ root.render(
<ErrorParent> <ErrorParent>
<ElectronProvider> <ElectronProvider>
<AuthProvider> <AuthProvider>
<Terminal /> <TerminalProvider />
</AuthProvider> </AuthProvider>
</ElectronProvider> </ElectronProvider>
</ErrorParent> </ErrorParent>
packages/desktop/src/components/Conversations.tsx
+39 -2
View File
@@ -1,4 +1,4 @@
import React from 'react'; import React, { useCallback, useRef } from 'react';
import { import {
Avatar, Avatar,
@@ -10,15 +10,52 @@ import {
ListItemButton, ListItemButton,
ListItemText, ListItemText,
ListSubheader, ListSubheader,
Stack,
Typography, Typography,
Input,
} from '@mui/material'; } from '@mui/material';
import { blueGrey } from '@mui/material/colors'; 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 NirvanaAvatar from './NirvanaAvatar';
import { useKey } from 'react-use';
import { useSnackbar } from 'notistack';
import KeyboardShortcutLabel from './KeyboardShortcutLabel';
const Conversations = () => { 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 ( 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 <List
sx={{ sx={{
pt: 2, pt: 2,
packages/desktop/src/components/Terminal.tsx
+187 -202
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useRef } from 'react'; import React, { useCallback, useRef, useContext } from 'react';
import { Container } from '@mui/system'; import { Container } from '@mui/system';
import { import {
@@ -37,217 +37,202 @@ import useAuth from '../providers/AuthProvider';
import Conversations from './Conversations'; import Conversations from './Conversations';
import Navbar from './Navbar'; 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(); const { enqueueSnackbar } = useSnackbar();
return ( return (
<Grid container spacing={0}> <TerminalContext.Provider value={{ selectedConversation: undefined }}>
<Grid <Grid container spacing={0}>
item <Grid
xs={4} item
sx={{ xs={4}
zIndex: 2,
backgroundColor: blueGrey[50],
boxShadow: 3,
borderRight: `1px solid ${blueGrey}`,
}}
>
<Stack
direction={'column'}
spacing={1}
sx={{ sx={{
p: 2, zIndex: 2,
height: 'inherit', backgroundColor: blueGrey[50],
boxShadow: 3,
borderRight: `1px solid ${blueGrey}`,
}} }}
> >
<Navbar /> <Stack
direction={'column'}
<SecondNavbar /> spacing={1}
<Conversations />
</Stack>
</Grid>
<Grid item xs={8} sx={{ backgroundColor: 'white', display: 'flex', flexDirection: 'column' }}>
<Stack
direction={'row'}
sx={{
py: 2,
px: 2,
borderBottom: '1px solid',
borderBottomColor: blueGrey[100],
WebkitAppRegion: 'drag',
cursor: 'pointer',
}}
alignItems={'center'}
justifyContent={'flex-start'}
>
<Stack spacing={2} direction={'row'} alignItems={'center'}>
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
<Typography color={'GrayText'} variant="overline">
{'Viet Phan'}
</Typography>
</Stack>
<Box sx={{ ml: 'auto' }}>
<IconButton size="small">
<FiMoreVertical />
</IconButton>
</Box>
</Stack>
<Container maxWidth={false} sx={{ position: 'relative', flex: 1 }}>
<Container maxWidth="xs">
<Stack
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
pt: 2,
}}
>
<Typography variant="caption">yesterday</Typography>
<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" />
<Typography color={'GrayText'} variant="overline">
{'Viet Phan'}
</Typography>
</Stack>
<Box
sx={{
ml: 'auto',
color: 'GrayText',
}}
>
<FiPlay />
</Box>
</Stack>
</Paper>
</Stack>
<Stack
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
pt: 2,
}}
>
<Typography variant="caption">today</Typography>
<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" />
<Typography color={'GrayText'} variant="overline">
{'Viet Phan'}
</Typography>
</Stack>
<Box
sx={{
ml: 'auto',
color: 'GrayText',
}}
>
<FiPlay />
</Box>
</Stack>
</Paper>
</Stack>
<Stack
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
pt: 2,
}}
>
<Typography variant="caption">right now</Typography>
<Paper elevation={24} sx={{ p: 1, width: '100%' }}>
<Stack direction={'row'} alignItems="center">
<Stack spacing={2} direction={'row'} alignItems={'center'}>
<Avatar
alt={'Arjun Patel'}
src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
/>
<Typography color={'GrayText'} variant="overline">
{'Arjun Patel'}
</Typography>
</Stack>
<Box
sx={{
ml: 'auto',
color: 'GrayText',
}}
>
<FiPlay />
</Box>
</Stack>
</Paper>
</Stack>
</Container>
<Box
sx={{ sx={{
position: 'absolute', p: 2,
zIndex: 10, height: 'inherit',
bottom: 0,
right: 0,
padding: 3,
}} }}
> >
<Fab color="primary" aria-label="add" size="medium"> <Navbar />
<FiSun />
</Fab> <Conversations />
</Box> </Stack>
</Container> </Grid>
<Grid
item
xs={8}
sx={{ backgroundColor: 'white', display: 'flex', flexDirection: 'column' }}
>
<Stack
direction={'row'}
sx={{
py: 2,
px: 2,
borderBottom: '1px solid',
borderBottomColor: blueGrey[100],
WebkitAppRegion: 'drag',
cursor: 'pointer',
}}
alignItems={'center'}
justifyContent={'flex-start'}
>
<Stack spacing={2} direction={'row'} alignItems={'center'}>
<Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
<Typography color={'GrayText'} variant="overline">
{'Viet Phan'}
</Typography>
</Stack>
<Box sx={{ ml: 'auto' }}>
<IconButton size="small">
<FiMoreVertical />
</IconButton>
</Box>
</Stack>
<Container maxWidth={false} sx={{ position: 'relative', flex: 1 }}>
<Container maxWidth="xs">
<Stack
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
pt: 2,
}}
>
<Typography variant="caption">yesterday</Typography>
<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"
/>
<Typography color={'GrayText'} variant="overline">
{'Viet Phan'}
</Typography>
</Stack>
<Box
sx={{
ml: 'auto',
color: 'GrayText',
}}
>
<FiPlay />
</Box>
</Stack>
</Paper>
</Stack>
<Stack
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
pt: 2,
}}
>
<Typography variant="caption">today</Typography>
<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"
/>
<Typography color={'GrayText'} variant="overline">
{'Viet Phan'}
</Typography>
</Stack>
<Box
sx={{
ml: 'auto',
color: 'GrayText',
}}
>
<FiPlay />
</Box>
</Stack>
</Paper>
</Stack>
<Stack
justifyContent={'flex-start'}
alignItems={'center'}
sx={{
pt: 2,
}}
>
<Typography variant="caption">right now</Typography>
<Paper elevation={24} sx={{ p: 1, width: '100%' }}>
<Stack direction={'row'} alignItems="center">
<Stack spacing={2} direction={'row'} alignItems={'center'}>
<Avatar
alt={'Arjun Patel'}
src="https://lh3.googleusercontent.com/ogw/ADea4I6TRqnIptWNP25-iXdusoAHafj-cUPYkO53xKT2_H0=s64-c-mo"
/>
<Typography color={'GrayText'} variant="overline">
{'Arjun Patel'}
</Typography>
</Stack>
<Box
sx={{
ml: 'auto',
color: 'GrayText',
}}
>
<FiPlay />
</Box>
</Stack>
</Paper>
</Stack>
</Container>
<Box
sx={{
position: 'absolute',
zIndex: 10,
bottom: 0,
right: 0,
padding: 3,
}}
>
<Fab color="primary" aria-label="add" size="medium">
<FiSun />
</Fab>
</Box>
</Container>
</Grid>
</Grid> </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
+1
View File
@@ -0,0 +1 @@
const searchShortcut = 'Shift';