feat: begin to add support for multiple teams

src/Avatar.tsx

@@ -1,5 +1,5 @@
 import { createRef, MouseEventHandler, useEffect, useState } from "react";
-import { useSession } from "./Session";
+import { TeamState, useSession } from "./Session";
 import { User } from "./api";
 import { useTheme } from "./ThemeProvider";
 import { colourTheme, darkTheme, normalTheme, rainbowTheme } from "./themes";
@@ -11,7 +11,7 @@ interface ContextMenuItem {
   onClick: () => void;
 }
 
-const UserInfo = (user: User, teams: Team[] | undefined) => {
+const UserInfo = (user: User, teams: TeamState | undefined) => {
   return (
     <div className="user-info">
       <div>
@@ -42,9 +42,9 @@ const UserInfo = (user: User, teams: Team[] | undefined) => {
               textAlign: "left",
             }}
           >
-            {teams.map((team) => (
+            {teams.teams.map((team, index) => (
               <li>
-                {team.name} (
+                {teams.activeTeam === index ? <b>{team.name}</b> : team.name} (
                 {team.location || team.country || "location unknown"})
               </li>
             ))}
@@ -56,7 +56,7 @@ const UserInfo = (user: User, teams: Team[] | undefined) => {
 };
 
 export default function Avatar() {
-  const { user, teams, onLogout } = useSession();
+  const { user, teams, setTeams, onLogout } = useSession();
   const { theme, setTheme } = useTheme();
   const navigate = useNavigate();
   const [contextMenu, setContextMenu] = useState<{
@@ -147,20 +147,40 @@ export default function Avatar() {
   }
 
   return (
-    <div
-      className="avatar"
-      onContextMenu={handleMenuClick}
-      style={{ display: user ? "block" : "none" }}
-      onClick={(event) => {
-        if (contextMenu.open && event.target === avatarRef.current) {
-          handleMenuClose();
-        } else {
-          handleMenuClick(event);
-        }
-      }}
-      ref={avatarRef}
-    >
-      👤 {user?.username}
+    <>
+      <div className="avatars">
+        <div
+          className="avatar"
+          onContextMenu={handleMenuClick}
+          style={{ display: user ? "block" : "none" }}
+          onClick={(event) => {
+            if (contextMenu.open && event.target === avatarRef.current) {
+              handleMenuClose();
+            } else {
+              handleMenuClick(event);
+            }
+          }}
+          ref={avatarRef}
+        >
+          👤 {user?.username}
+        </div>
+        {teams && teams?.teams.length > 1 && (
+          <select
+            className="group-avatar"
+            value={teams.activeTeam}
+            onChange={(e) =>
+              setTeams({ ...teams, activeTeam: Number(e.target.value) })
+            }
+          >
+            {teams.teams.map((team) => (
+              <option key={team.id} value={team.id}>
+                👥 {team.name}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
       {contextMenu.open && (
         <ul
           className="context-menu"
@@ -193,6 +213,6 @@ export default function Avatar() {
       >
         {dialog}
       </dialog>
-    </div>
+    </>
   );
 }