cleaning up footer with more controls and better alignment and structure

packages/desktop/src/components/FooterControls.tsx

@@ -70,34 +70,37 @@ export default function FooterControls() {
           flex: 1,
         }}
       >
-        <IconButton
+        <Stack spacing={1} direction={'row'} alignItems={'center'}>
-          onClick={handleClickProfileMenu}
-          size="small"
-          sx={{ borderRadius: 1 }}
-          aria-controls={open ? 'account-menu' : undefined}
-          aria-haspopup="true"
-          aria-expanded={open ? 'true' : undefined}
-        >
-          <Avatar alt={user.displayName} src={user.photoURL} />
-        </IconButton>
-
-        <Tooltip title="Sound configuration">
           <IconButton
-            sx={{
+            onClick={handleClickProfileMenu}
-              color: 'white',
-            }}
             size="small"
+            sx={{ borderRadius: 1 }}
+            aria-controls={open ? 'account-menu' : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? 'true' : undefined}
           >
-            <FiHeadphones />
+            <Avatar alt={user.displayName} src={user.photoURL} />
           </IconButton>
-        </Tooltip>
-        <Tooltip title={'overlay mode'}>
-          <Switch color="secondary" size="small" />
-        </Tooltip>
 
-        <Button size={'small'} color={'secondary'} variant="text">
+          <Tooltip title="Sound configuration">
-          flow
+            <IconButton
-        </Button>
+              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 && (
           <>
@@ -133,55 +136,47 @@ export default function FooterControls() {
               </Container>
             </Stack>
 
-            <AvatarGroup variant={'rounded'}>
+            <Stack sx={{ ml: 'auto' }} direction={'row'} spacing={1}>
-              {selectedConversation.userCache?.map((conversationUser, index) => (
+              <AvatarGroup variant={'rounded'}>
-                <Avatar
+                {selectedConversation.userCache?.map((conversationUser, index) => (
-                  key={`${selectedConversation.id}-${conversationUser.uid}-convoIcon`}
+                  <Avatar
-                  alt={conversationUser?.displayName}
+                    key={`${selectedConversation.id}-${conversationUser.uid}-convoIcon`}
-                  src={conversationUser?.photoUrl}
+                    alt={conversationUser?.displayName}
+                    src={conversationUser?.photoUrl}
+                    sx={{
+                      opacity: selectedConversation.membersInRoom?.includes(conversationUser.uid)
+                        ? '100%'
+                        : '20%',
+                    }}
+                  />
+                ))}
+              </AvatarGroup>
+
+              <Tooltip title="No conversation selected!">
+                <IconButton
                   sx={{
-                    opacity: selectedConversation.membersInRoom?.includes(conversationUser.uid)
+                    color: 'white',
-                      ? '100%'
-                      : '20%',
                   }}
-                />
+                  size="small"
-              ))}
+                >
-            </AvatarGroup>
+                  <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 sx={{ ml: 'auto' }} direction={'row'} spacing={1}>
-          <Tooltip title="No conversation selected!">
-            <IconButton
-              sx={{
-                color: 'white',
-              }}
-              size="small"
-            >
-              <FiLink />
-            </IconButton>
-          </Tooltip>
-
-          {/* todo: add a third mode which is when toggle broadcasting with lock on top right badge */}
-          {selectedConversation ? (
-            <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',
-                }}
-                size="small"
-              >
-                <FiSun />
-              </IconButton>
-            </Tooltip>
-          )}
-        </Stack>
       </Stack>
 
       <Menu