adding in footer controls component wokring pretty much out of the box

packages/desktop/src/tree/FooterControls.tsx

@@ -0,0 +1,209 @@
+import {
+  Avatar,
+  AvatarGroup,
+  Box,
+  Button,
+  Container,
+  Divider,
+  Fab,
+  IconButton,
+  ListItemIcon,
+  Menu,
+  MenuItem,
+  Stack,
+  Switch,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import { FiHeadphones, FiHelpCircle, FiLink, FiLogOut, FiSun } from 'react-icons/fi';
+import React, { useCallback } from 'react';
+
+import ConversationLabel from '../subcomponents/ConversationLabel';
+import { SUPPORT_DISPLAY_NAME } from '../util/support';
+import { blueGrey } from '@mui/material/colors';
+import useAuth from '../providers/AuthProvider';
+import useConversations from '../providers/ConversationProvider';
+import useSearch from '../providers/SearchProvider';
+
+export default function FooterControls() {
+  const { omniSearch } = useSearch();
+  const { selectedConversation } = useConversations();
+  const { user, handleLogout } = useAuth();
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClickProfileMenu = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleCloseProfileMenu = () => {
+    setAnchorEl(null);
+  };
+
+  const handleQuickDialSupport = useCallback(() => {
+    omniSearch(SUPPORT_DISPLAY_NAME);
+  }, [omniSearch]);
+
+  return (
+    <Box
+      sx={{
+        mt: 'auto',
+        borderTop: '1px solid',
+        borderTopColor: blueGrey[100],
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        width: '100%',
+
+        zIndex: 10,
+        boxShadow: 10,
+
+        bgcolor: blueGrey[800],
+      }}
+    >
+      <Stack
+        direction={'row'}
+        alignItems={'center'}
+        justifyContent={'flex-start'}
+        sx={{
+          color: 'GrayText',
+          p: 1,
+          flex: 1,
+        }}
+      >
+        <Stack spacing={1} direction={'row'} alignItems={'center'}>
+          <IconButton
+            onClick={handleClickProfileMenu}
+            size="small"
+            sx={{ borderRadius: 1 }}
+            aria-controls={open ? 'account-menu' : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? 'true' : undefined}
+          >
+            <Avatar alt={user.givenName} src={user.picture} />
+          </IconButton>
+
+          <Tooltip title="Sound configuration">
+            <IconButton
+              sx={{
+                color: 'white',
+              }}
+              size="small"
+            >
+              <FiHeadphones />
+            </IconButton>
+          </Tooltip>
+
+          <Tooltip title={'overlay mode'}>
+            <Switch color="secondary" size="small" />
+          </Tooltip>
+
+          <Button size={'small'} color={'secondary'} variant="text">
+            flow
+          </Button>
+        </Stack>
+
+        {selectedConversation && (
+          <>
+            <Stack
+              direction={'row'}
+              sx={{
+                flex: 1,
+                mx: 'auto',
+
+                WebkitAppRegion: 'drag',
+                cursor: 'pointer',
+              }}
+              alignItems={'center'}
+              justifyContent={'center'}
+              spacing={1}
+            >
+              <Container
+                maxWidth={'sm'}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                <IconButton color="primary" size="small">
+                  <FiSun />
+                </IconButton>
+
+                <ConversationLabel
+                  users={selectedConversation.members ?? []}
+                  conversationName={selectedConversation.name}
+                  isSelected={true}
+                />
+              </Container>
+            </Stack>
+
+            <Stack sx={{ ml: 'auto' }} direction={'row'} spacing={1}>
+              <AvatarGroup variant={'rounded'}>
+                {selectedConversation.members?.map((conversationUser, index) => (
+                  <Avatar
+                    key={`${selectedConversation._id.toString()}-${conversationUser._id.toString()}-convoIcon`}
+                    alt={conversationUser?.givenName}
+                    src={conversationUser?.picture}
+                    sx={{
+                      opacity: selectedConversation.tunedInUsers?.includes(
+                        conversationUser._id.toString(),
+                      )
+                        ? '100%'
+                        : '20%',
+                    }}
+                  />
+                ))}
+              </AvatarGroup>
+
+              <Tooltip title="Paste image or link!">
+                <IconButton
+                  sx={{
+                    color: 'white',
+                  }}
+                  size="small"
+                >
+                  <FiLink />
+                </IconButton>
+              </Tooltip>
+
+              {/* todo: not speaking mode, speaking mode, locked in mode */}
+              <Tooltip title="Speak or toggle by clicking here!">
+                <IconButton
+                  sx={{
+                    color: 'white',
+                  }}
+                  size="small"
+                >
+                  <FiSun />
+                </IconButton>
+              </Tooltip>
+            </Stack>
+          </>
+        )}
+      </Stack>
+
+      <Menu
+        anchorEl={anchorEl}
+        id="account-menu"
+        open={open}
+        onClose={handleCloseProfileMenu}
+        transformOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
+      >
+        <MenuItem onClick={handleQuickDialSupport}>
+          <ListItemIcon>
+            <FiHelpCircle />
+          </ListItemIcon>
+          <Typography>Help</Typography>
+        </MenuItem>
+
+        <Divider />
+        <MenuItem onClick={handleLogout}>
+          <ListItemIcon>
+            <FiLogOut />
+          </ListItemIcon>
+          <Typography color="warning">Logout</Typography>
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+}

packages/desktop/src/tree/Terminal.tsx

@@ -1,6 +1,7 @@
 import { Box, Container, Grid } from '@mui/material';
 
 import { ConversationList } from './ConversationList';
+import FooterControls from './FooterControls';
 import MainPanel from './MainPanel';
 import Navbar from './Navbar';
 import NewConversationDialog from './NewConversationDialog';
@@ -57,17 +58,7 @@ export default function Terminal() {
         </Grid>
       </Grid>
 
-      <Box
-        sx={{
-          p: 2,
-          zIndex: 10,
-          boxShadow: 10,
-
-          bgcolor: blueGrey[800],
-        }}
-      >
-        This is the footer controls
-      </Box>
+      <FooterControls />
 
       {/* create chat dialog */}
       <NewConversationDialog />