better organizing the conversations

packages/desktop/src/components/FooterControls.tsx

@@ -91,28 +91,32 @@ export default function FooterControls() {
         </Stack>
 
         {selectedConversation && (
-          <Stack
+          <>
-            direction={'row'}
+            <Stack
-            sx={{
+              direction={'row'}
-              flex: 1,
+              sx={{
-              mx: 'auto',
+                flex: 1,
-              WebkitAppRegion: 'drag',
+                mx: 'auto',
-              cursor: 'pointer',
-            }}
-            alignItems={'center'}
-            justifyContent={'flex-start'}
-          >
-            <IconButton color="primary" size="small">
-              <FiSun />
-            </IconButton>
 
-            <Box sx={{ color: 'GrayText' }}>
+                WebkitAppRegion: 'drag',
-              <ConversationLabel
+                cursor: 'pointer',
-                users={selectedConversation.userCache ?? []}
+              }}
-                conversationName={selectedConversation.name}
+              alignItems={'center'}
-                isSelected={true}
+              justifyContent={'center'}
-              />
+              spacing={1}
-            </Box>
+            >
+              <IconButton color="primary" size="small">
+                <FiSun />
+              </IconButton>
+
+              <Box sx={{ color: 'GrayText' }}>
+                <ConversationLabel
+                  users={selectedConversation.userCache ?? []}
+                  conversationName={selectedConversation.name}
+                  isSelected={true}
+                />
+              </Box>
+            </Stack>
 
             <AvatarGroup variant={'rounded'}>
               {selectedConversation.userCache?.map((conversationUser, index) => (
@@ -130,7 +134,7 @@ export default function FooterControls() {
                 />
               ))}
             </AvatarGroup>
-          </Stack>
+          </>
         )}
 
         {/* todo: add a third mode which is when toggle broadcasting */}