Revert typing indicator changes.

src/components/common/messaging/bars/TypingIndicator.tsx

@@ -5,11 +5,6 @@ import styled from "styled-components";
 
 import { Text } from "preact-i18n";
 
-import { TextReact } from "../../../../lib/i18n";
-
-import UserIcon from "../../user/UserIcon";
-import { Username } from "../../user/UserShort";
-
 interface Props {
     channel: Channel;
 }
@@ -36,8 +31,15 @@ const Base = styled.div`
     .avatars {
         display: flex;
 
-        :not(:first-child) {
+        img {
-            margin-left: -4px;
+            width: 16px;
+            height: 16px;
+            object-fit: cover;
+            border-radius: 50%;
+
+            &:not(:first-child) {
+                margin-left: -4px;
+            }
         }
     }
 
@@ -67,34 +69,24 @@ export default observer(({ channel }: Props) => {
         if (users.length >= 5) {
             text = <Text id="app.main.channel.typing.several" />;
         } else if (users.length > 1) {
-            const userlist = [...users].map((x) => (
+            const userlist = [...users].map((x) => x!.username);
-                <Username key={x!._id} user={x} showServerIdentity />
+            const user = userlist.pop();
-            ));
-            //const user = userlist.pop();
-
-            for (let i = 0; i < userlist.length - 1; i++) {
-                userlist.splice(i * 2 + 1, 0, <span key={`sep_${i}`}>, </span>);
-            }
 
             text = (
-                userlist
+                <Text
-                /*<TextReact
                     id="app.main.channel.typing.multiple"
                     fields={{
                         user,
-                        userlist,
+                        userlist: userlist.join(", "),
                     }}
-                />*/
+                />
             );
         } else {
             text = (
-                <Username user={users[0]} showServerIdentity />
+                <Text
-                /*<TextReact
                     id="app.main.channel.typing.single"
-                    fields={{
+                    fields={{ user: users[0]!.username }}
-                        user: <Username user={users[0]} showServerIdentity />,
+                />
-                    }}
-                />*/
             );
         }
 
@@ -103,11 +95,10 @@ export default observer(({ channel }: Props) => {
                 <div>
                     <div className="avatars">
                         {users.map((user) => (
-                            <UserIcon
+                            <img
                                 key={user!._id}
-                                target={user}
+                                loading="eager"
-                                size={16}
+                                src={user!.generateAvatarURL({ max_side: 256 })}
-                                showServerIdentity
                             />
                         ))}
                     </div>