cleaning and showing stuff

packages/desktop/src/components/Terminal.tsx

@@ -495,6 +495,52 @@ function MainPanel() {
   return (
     <Grid item xs={8} sx={{ backgroundColor: 'white', display: 'flex', flexDirection: 'column' }}>
       {selectedConversation ? (
+        <ConversationDetails />
+      ) : (
+        <Container
+          maxWidth={false}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 2,
+            flex: 1,
+            background: blueGrey[50],
+          }}
+        >
+          <Typography variant="h6">{`Hi ${
+            user.displayName?.split(' ')[0] ?? 'there'
+          }!`}</Typography>
+          <Typography variant="caption">Take a deep breath in.</Typography>
+        </Container>
+      )}
+    </Grid>
+  );
+}
+
+function ConversationDetails() {
+  const { user } = useAuth();
+
+  const { getUser, selectedConversation, selectConversation } = useTerminal();
+
+  const [conversationUsers, setConversationUsers] = useImmer<User[]>([]);
+
+  useEffect(() => {
+    (async () => {
+      const userPromises = selectedConversation.membersList
+        .filter((memberId) => memberId !== user.uid)
+        .map(async (memberId) => await getUser(memberId));
+
+      const userSettled = await Promise.all(userPromises);
+
+      setConversationUsers(userSettled);
+    })();
+
+    return;
+  }, [selectedConversation.membersList, getUser, user, setConversationUsers]);
+
+  return (
     <>
       <Stack
         direction={'row'}
@@ -510,10 +556,20 @@ function MainPanel() {
         justifyContent={'flex-start'}
       >
         <Stack spacing={2} direction={'row'} alignItems={'center'}>
-              <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
+          <AvatarGroup variant={'rounded'}>
+            {conversationUsers.map((conversationUser, index) => (
+              <Avatar
+                key={`${selectedConversation.id}-${conversationUser.uid}-convoIcon`}
+                alt={conversationUser?.displayName}
+                src={conversationUser?.photoUrl}
+                sx={{ width: 30, height: 30 }}
+              />
+            ))}
+          </AvatarGroup>
 
-              <Typography color={'GrayText'} variant="overline">
+          <Typography sx={{ color: 'GrayText' }} variant={'overline'}>
-                {'Viet Phan'}
+            {selectedConversation.name ??
+              conversationUsers.map((conversationUser) => conversationUser.displayName).join(', ')}
           </Typography>
         </Stack>
 
@@ -538,10 +594,7 @@ function MainPanel() {
             <Paper elevation={1} sx={{ p: 1, width: '100%' }}>
               <Stack direction={'row'} alignItems="center">
                 <Stack spacing={2} direction={'row'} alignItems={'center'}>
-                      <Avatar
+                  <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
-                        alt={'Arjun Patel'}
-                        src="https://mui.com/static/images/avatar/2.jpg"
-                      />
 
                   <Typography color={'GrayText'} variant="overline">
                     {'Viet Phan'}
@@ -572,10 +625,7 @@ function MainPanel() {
             <Paper elevation={8} sx={{ p: 1, width: '100%' }}>
               <Stack direction={'row'} alignItems="center">
                 <Stack spacing={2} direction={'row'} alignItems={'center'}>
-                      <Avatar
+                  <Avatar alt={'Arjun Patel'} src="https://mui.com/static/images/avatar/2.jpg" />
-                        alt={'Arjun Patel'}
-                        src="https://mui.com/static/images/avatar/2.jpg"
-                      />
 
                   <Typography color={'GrayText'} variant="overline">
                     {'Viet Phan'}
@@ -644,25 +694,5 @@ function MainPanel() {
         </Box>
       </Container>
     </>
-      ) : (
-        <Container
-          maxWidth={false}
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: 2,
-            flex: 1,
-            background: blueGrey[50],
-          }}
-        >
-          <Typography variant="h6">{`Hi ${
-            user.displayName?.split(' ')[0] ?? 'there'
-          }!`}</Typography>
-          <Typography variant="caption">Take a deep breath in.</Typography>
-        </Container>
-      )}
-    </Grid>
   );
 }