better organizing the conversations

packages/desktop/src/components/FooterControls.tsx

@@ -91,16 +91,19 @@ export default function FooterControls() {
         </Stack>
 
         {selectedConversation && (
+          <>
             <Stack
               direction={'row'}
               sx={{
                 flex: 1,
                 mx: 'auto',
+
                 WebkitAppRegion: 'drag',
                 cursor: 'pointer',
               }}
               alignItems={'center'}
-            justifyContent={'flex-start'}
+              justifyContent={'center'}
+              spacing={1}
             >
               <IconButton color="primary" size="small">
                 <FiSun />
@@ -113,6 +116,7 @@ export default function FooterControls() {
                   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 */}