fix: Don't show colored ring on inactive collaborators, closes #4130

app/components/Avatar/AvatarWithPresence.tsx

@@ -1,141 +1,114 @@
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import User from "~/models/User";
-import UserProfile from "~/scenes/UserProfile";
 import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
 
-type Props = WithTranslation & {
+type Props = {
   user: User;
   isPresent: boolean;
   isEditing: boolean;
   isObserving: boolean;
   isCurrentUser: boolean;
-  profileOnClick: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
 };
 
-@observer
+function AvatarWithPresence({
-class AvatarWithPresence extends React.Component<Props> {
+  onClick,
-  @observable
+  user,
-  isOpen = false;
+  isPresent,
+  isEditing,
+  isObserving,
+  isCurrentUser,
+}: Props) {
+  const { t } = useTranslation();
+  const status = isPresent
+    ? isEditing
+      ? t("currently editing")
+      : t("currently viewing")
+    : t("previously edited");
 
-  handleOpenProfile = () => {
+  return (
-    this.isOpen = true;
+    <>
-  };
+      <Tooltip
-
+        tooltip={
-  handleCloseProfile = () => {
+          <Centered>
-    this.isOpen = false;
+            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-  };
+            {status && (
-
+              <>
-  render() {
+                <br />
-    const {
+                {status}
-      onClick,
+              </>
-      user,
+            )}
-      isPresent,
+          </Centered>
-      isEditing,
+        }
-      isObserving,
+        placement="bottom"
-      isCurrentUser,
+      >
-      t,
+        <AvatarWrapper
-    } = this.props;
+          $isPresent={isPresent}
-    const status = isPresent
+          $isObserving={isObserving}
-      ? isEditing
+          $color={user.color}
-        ? t("currently editing")
-        : t("currently viewing")
-      : t("previously edited");
-
-    return (
-      <>
-        <Tooltip
-          tooltip={
-            <Centered>
-              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-              {status && (
-                <>
-                  <br />
-                  {status}
-                </>
-              )}
-            </Centered>
-          }
-          placement="bottom"
         >
-          <AvatarWrapper
+          <Avatar src={user.avatarUrl} onClick={onClick} size={32} />
-            $isPresent={isPresent}
+        </AvatarWrapper>
-            $isObserving={isObserving}
+      </Tooltip>
-            $color={user.color}
+    </>
-          >
+  );
-            <Avatar
-              src={user.avatarUrl}
-              onClick={
-                this.props.profileOnClick === false
-                  ? onClick
-                  : this.handleOpenProfile
-              }
-              size={32}
-            />
-          </AvatarWrapper>
-        </Tooltip>
-        {this.props.profileOnClick && (
-          <UserProfile
-            user={user}
-            isOpen={this.isOpen}
-            onRequestClose={this.handleCloseProfile}
-          />
-        )}
-      </>
-    );
-  }
 }
 
 const Centered = styled.div`
   text-align: center;
 `;
 
-const AvatarWrapper = styled.div<{
+type AvatarWrapperProps = {
   $isPresent: boolean;
   $isObserving: boolean;
   $color: string;
-}>`
+};
+
+const AvatarWrapper = styled.div<AvatarWrapperProps>`
   opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
   transition: opacity 250ms ease-in-out;
   border-radius: 50%;
   position: relative;
 
-  &:after {
+  ${(props) =>
-    content: "";
+    props.$isPresent &&
-    position: absolute;
+    css<AvatarWrapperProps>`
-    top: 0;
+      &:after {
-    left: 0;
+        content: "";
-    right: 0;
+        position: absolute;
-    bottom: 0;
+        top: 0;
-    border-radius: 50%;
+        left: 0;
-    transition: border-color 100ms ease-in-out;
+        right: 0;
-    border: 2px solid transparent;
+        bottom: 0;
-    pointer-events: none;
+        border-radius: 50%;
+        transition: border-color 100ms ease-in-out;
+        border: 2px solid transparent;
+        pointer-events: none;
 
-    ${(props) =>
+        ${(props) =>
-      props.$isObserving &&
+          props.$isObserving &&
-      css`
+          css`
-        border: 2px solid ${props.$color};
+            border: 2px solid ${props.$color};
-        box-shadow: inset 0 0 0 2px ${props.theme.background};
+            box-shadow: inset 0 0 0 2px ${props.theme.background};
 
-        &:hover {
+            &:hover {
-          top: -1px;
+              top: -1px;
-          left: -1px;
+              left: -1px;
-          right: -1px;
+              right: -1px;
-          bottom: -1px;
+              bottom: -1px;
-        }
+            }
-      `}
+          `}
-  }
+      }
 
-  &:hover:after {
+      &:hover:after {
-    border: 2px solid ${(props) => props.$color};
+        border: 2px solid ${(props) => props.$color};
-    box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
+        box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
-  }
+      }
+    `}
 `;
 
-export default withTranslation()(AvatarWithPresence);
+export default observer(AvatarWithPresence);

app/components/Collaborators.tsx

@@ -90,7 +90,6 @@ function Collaborators(props: Props) {
                     isEditing={isEditing}
                     isObserving={isObserving}
                     isCurrentUser={currentUserId === collaborator.id}
-                    profileOnClick={false}
                     onClick={
                       isObservable
                         ? (ev) => {