listing teams in the team chat to select different chats

src/chat/ChatDrawer.tsx

@@ -5,6 +5,8 @@ import { useMobile } from "hooks";
 import { Team } from "models";
 import Chat from "./Chat";
 import { pond } from "protobuf-ts/pond";
+import { useEffect, useState } from "react";
+import { useTeamAPI } from "providers";
 
 const useStyles = makeStyles<Theme>((theme: Theme) => ({
   chatDrawer: {
@@ -25,8 +27,8 @@ const useStyles = makeStyles<Theme>((theme: Theme) => ({
     backgroundColor: theme.palette.background.default,
     height: "100vh",
     width: "100%",
-    display: "flex",          // add this
-    flexDirection: "column",  // add this
+    display: "flex",          
+    flexDirection: "column",  
   },
   drawerHeader: {
     display: "flex",
@@ -46,9 +48,17 @@ interface Props {
 export function ChatDrawer(props: Props) {
   const { open, onClose, team } = props;
   const isMobile = useMobile();
-  const classes = useStyles()
+  const classes = useStyles();
+  const teamAPI = useTeamAPI();
 
-  // console.log(team.settings.avatar)
+  const [selectedTeam, setSelectedTeam] = useState<Team>(team);
+  const [teams, setTeams] = useState<pond.Team[]>([])
+
+  useEffect(() => {
+    teamAPI.listTeams(10, 0, "desc", "name", undefined, false, undefined).then(resp => {
+      setTeams(resp.data.teams)
+    })
+  }, [teamAPI])
 
   return (
     <Drawer
@@ -74,9 +84,30 @@ export function ChatDrawer(props: Props) {
             borderRight: `1px solid ${theme.palette.divider}`,
           })}
         >
-          <IconButton >
+          <IconButton
+            onClick={() => setSelectedTeam(team)}
+            sx={{
+              border: selectedTeam.settings?.key === team.settings.key ? "1px solid white" : "1px solid transparent",
+              borderRadius: "50%",
+            }}
+          >
             <Avatar src={team.settings.avatar} />
           </IconButton>
+          {teams.map((t, i)=> {
+            if (t.settings?.key === team.key()) return null;
+            return (
+              <IconButton
+                onClick={() => setSelectedTeam(Team.create(t))}
+                sx={{
+                  border: selectedTeam.key() === t.settings?.key ? "1px solid white" : "1px solid transparent",
+                  borderRadius: "50%",
+                }}
+                key={"chat-team-"+i}
+              >
+                <Avatar src={t.settings?.avatar} />
+              </IconButton>
+            )
+          })}
         </Box>
 
         {/* Main chat area */}
@@ -85,13 +116,13 @@ export function ChatDrawer(props: Props) {
             <IconButton onClick={onClose}>
               <ChevronRight />
             </IconButton>
-            <Typography>{team.name()} Chat</Typography>
+            <Typography>{selectedTeam.name()} Chat</Typography>
           </Box>
           <Box className={classes.chatContainer}>
-            <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+            <Chat objectKey={selectedTeam.key()} type={pond.NoteType.NOTE_TYPE_TEAM} />
           </Box>
         </Box>
       </Box>
     </Drawer>
-  )
+  );
 }

src/providers/pond/teamAPI.tsx

@@ -117,9 +117,11 @@ export default function TeamProvider(props: PropsWithChildren<Props>) {
     asRoot?: boolean,
     otherTeam?: string,
     prefixSearch?: string,
+    useImitation?: boolean,
   ) => {
     //let asText = team ? "&as=" + team.key() : "";
-    const view = otherTeam ? otherTeam : (as.length > 0 ? as : undefined)
+    let view = otherTeam ? otherTeam : (as.length > 0 ? as : undefined)
+    if (useImitation === undefined || useImitation === false) view = ""
     let url = pondURL(
       "/teams" +
         "?limit=" +