cleaning up footer with more controls and better alignment and structure

packages/desktop/src/components/FooterControls.tsx

@@ -70,6 +70,7 @@ export default function FooterControls() {
           flex: 1,
         }}
       >
+        <Stack spacing={1} direction={'row'} alignItems={'center'}>
           <IconButton
             onClick={handleClickProfileMenu}
             size="small"
@@ -91,6 +92,7 @@ export default function FooterControls() {
               <FiHeadphones />
             </IconButton>
           </Tooltip>
+
           <Tooltip title={'overlay mode'}>
             <Switch color="secondary" size="small" />
           </Tooltip>
@@ -98,6 +100,7 @@ export default function FooterControls() {
           <Button size={'small'} color={'secondary'} variant="text">
             flow
           </Button>
+        </Stack>
 
         {selectedConversation && (
           <>
@@ -133,6 +136,7 @@ export default function FooterControls() {
               </Container>
             </Stack>
 
+            <Stack sx={{ ml: 'auto' }} direction={'row'} spacing={1}>
               <AvatarGroup variant={'rounded'}>
                 {selectedConversation.userCache?.map((conversationUser, index) => (
                   <Avatar
@@ -147,10 +151,7 @@ export default function FooterControls() {
                   />
                 ))}
               </AvatarGroup>
-          </>
-        )}
 
-        <Stack sx={{ ml: 'auto' }} direction={'row'} spacing={1}>
               <Tooltip title="No conversation selected!">
                 <IconButton
                   sx={{
@@ -162,15 +163,8 @@ export default function FooterControls() {
                 </IconButton>
               </Tooltip>
 
-          {/* todo: add a third mode which is when toggle broadcasting with lock on top right badge */}
-          {selectedConversation ? (
+              {/* todo: not speaking mode, speaking mode, locked in mode */}
               <Tooltip title="Speak or toggle by clicking here!">
-              <Fab color="primary" aria-label="add" size="medium">
-                <FiSun />
-              </Fab>
-            </Tooltip>
-          ) : (
-            <Tooltip title="No conversation selected!">
                 <IconButton
                   sx={{
                     color: 'white',
@@ -180,8 +174,9 @@ export default function FooterControls() {
                   <FiSun />
                 </IconButton>
               </Tooltip>
-          )}
             </Stack>
+          </>
+        )}
       </Stack>
 
       <Menu