added chat button in header buttons

src/app/Header.tsx

@@ -6,12 +6,14 @@ import { getDarkLogo, getLightLogo, getSignatureAccentColour, hasTransparentLogo
 // import { Link } from "react-router-dom";
 import { useThemeType } from "../hooks/useThemeType";
 import UserMenu from "../user/UserMenu";
+import { useMobile } from "hooks";
+import HeaderButtons from "./HeaderButtons";
+import { useGlobalState } from "providers";
 
 const useStyles = makeStyles((theme: Theme) => ({
     appBar: {
         zIndex: theme.zIndex.drawer + 1,
         backgroundImage: "none", // This prevents de-saturation of header in dark mode
-        // border: "1px solid purple"
     },
     toolbar: {
         marginLeft: theme.spacing(0.5),
@@ -87,21 +89,25 @@ export default function Header(props: Props) {
     const { openSide, toggleTheme } = props;
     const themeType = useThemeType();
     const classes = useStyles()
+    const isMobile = useMobile();
+    
+    const [{ user, team }] = useGlobalState();
+    const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
 
     return (
         <AppBar position="fixed" className={classes.appBar}>
             <Toolbar disableGutters className={classes.toolbar}>
                 <Box className={classes.buttonContainer}>
-                    {/* {!isMobile && ( */}
+                    {!isMobile && (
-                    <IconButton
+                        <IconButton
-                        color="inherit"
+                            color="inherit"
-                        aria-label="Open side menu"
+                            aria-label="Open side menu"
-                        onClick={openSide}
+                            onClick={openSide}
-                        style={{ color: getSignatureAccentColour() }}
+                            style={{ color: getSignatureAccentColour() }}
-                        className={classes.button}>
+                            className={classes.button}>
-                            <Menu />
+                                <Menu />
-                    </IconButton>
+                        </IconButton>
-                    {/* )} */}
+                    )}
                 </Box>
                 <Box flexGrow={1} marginLeft={0.5}>
                     {!hideLogo() && (
@@ -116,6 +122,7 @@ export default function Header(props: Props) {
                 </Box>
                 <Box className={classes.appBarRight}>
                     <UserMenu toggleTheme={toggleTheme} />
+                    <HeaderButtons hasTeams={hasTeams} team={team} user={user} />
                 </Box>
             </Toolbar>
         </AppBar>

src/app/HeaderButtons.tsx

@@ -0,0 +1,146 @@
+import { Chat } from "@mui/icons-material";
+import { Box, IconButton, Theme, Tooltip, useTheme } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import { Team, User } from "models";
+import moment from "moment";
+import { useEffect, useState } from "react";
+import { getSignatureAccentColour, hasTransparentLogoBG } from "services/whiteLabel";
+
+const useStyles = makeStyles((theme: Theme) => ({
+  button: {
+    width: theme.spacing(6),
+    height: theme.spacing(6),
+    marginTop: "auto",
+    marginBottom: "auto",
+    marginLeft: theme.spacing(0.5)
+  },
+  on: {
+    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+    animationName: "$ripple",
+    animationDuration: "1.2s",
+    animationTimingFunction: "ease-in-out",
+    animationIterationCount: "infinite",
+    position: "absolute",
+    right: theme.spacing(0.5),
+    top: theme.spacing(0.5),
+    backgroundColor: theme.palette.primary.main
+  },
+  off: {
+    backgroundColor: "transparent"
+  },
+}))
+
+interface Props {
+  hasTeams: boolean;
+  team: Team;
+  user: User
+}
+
+export default function HeaderButtons(props: Props) {
+  const {hasTeams, user, team} = props
+  const [hasNewChats, setHasNewChats] = useState(false);
+  const [chatDrawerOpen, setChatDrawerOpen] = useState(false);
+
+  // const theme = useTheme();
+  const classes = useStyles();
+
+  useEffect(() => {
+    if (!team) return;
+    if (
+      team.preferences.chatViewedTimestamp.length < 1 &&
+      team.settings.lastChatTimestamp.length > 1
+    ) {
+      setHasNewChats(true);
+      return;
+    }
+    let viewMoment = moment(team.preferences.chatViewedTimestamp);
+    let chatMoment = moment(team.settings.lastChatTimestamp);
+    if (viewMoment.diff(chatMoment) < 0) {
+      setHasNewChats(true);
+    } else {
+      setHasNewChats(false);
+    }
+  }, [team]);
+
+  const chatButton = () => {
+    if (!hasTeams) return;
+    if (team.key().length < 1) return
+    return (
+      <>
+        <Tooltip title="Team chat">
+          <IconButton
+            className={classes.button}
+            onClick={() => {
+              setChatDrawerOpen(true);
+              setHasNewChats(false);
+            }}>
+            <Chat />
+          </IconButton>
+        </Tooltip>
+
+        {hasNewChats && (
+          <Box
+            width="8px"
+            height="8px"
+            borderRadius="50%"
+            // style={{ backgroundColor: theme.palette.primary.main }}
+            className={classes.on}
+          />
+        )}
+      </>
+    )
+  }
+
+  return (
+    chatButton()
+  )
+
+  // return (
+  //   {user.settings?.notificationMethods?.includes(
+  //     pond.NotificationMethod.NOTIFICATION_METHOD_APP
+  //   ) && (
+  //     <div style={{ position: "relative", marginLeft: theme.spacing(-1) }}>
+  //       <Tooltip title="Notifications">
+  //         <IconButton
+  //           style={{ marginLeft: theme.spacing(1) }}
+  //           onClick={() => {
+  //             setNotificationDrawerOpen(true);
+  //           }}>
+  //           <Notifications />
+  //         </IconButton>
+  //       </Tooltip>
+  //       {hasNewNotifications && (
+  //         <Box
+  //           width="8px"
+  //           height="8px"
+  //           borderRadius="50%"
+  //           style={{ backgroundColor: theme.palette.primary.main }}
+  //           className={classes.on}
+  //         />
+  //       )}
+  //     </div>
+  //   )}
+  //   {team && team.settings && team.settings.key && (
+  //     <Drawer
+  //       anchor="right"
+  //       open={chatDrawerOpen}
+  //       onClose={() => setChatDrawerOpen(false)}
+  //       style={{ height: "100%", maxWidth: "100%" }}
+  //       title={team.settings.name ? team.settings.name + "Chat" : "Chat"}>
+  //       <div className={isMobile ? classes.chatDrawerMobile : classes.chatDrawer}>
+  //         <div className={classes.drawerHeader}>
+  //           <IconButton onClick={() => setChatDrawerOpen(false)}>
+  //             <ChevronRightIcon />
+  //           </IconButton>
+  //           <Typography>{team.name()} Chat</Typography>
+  //         </div>
+  //         <Chat objectKey={team.settings.key} type={pond.NoteType.NOTE_TYPE_TEAM} />
+  //       </div>
+  //     </Drawer>
+  //   )}
+  //   <NotificationDrawer
+  //     setNotificationDrawerOpen={setNotificationDrawerOpen}
+  //     notificationDrawerOpen={notificationDrawerOpen}
+  //   />
+  // )
+}