Show server identity in message replies and typing indicator.

Revert reply connector temporarily.

src/components/common/messaging/attachments/MessageReply.tsx

@@ -1,3 +1,4 @@
+import { Reply } from "@styled-icons/boxicons-regular";
 import { File } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
@@ -38,6 +39,9 @@ export const ReplyBase = styled.div<{
     align-items: center;
     color: var(--secondary-foreground);
 
+    /* nizune's Discord replies,
+        does not scale properly with messages,
+        reverted temporarily
     &::before {
         content: "";
         height: 10px;
@@ -48,7 +52,7 @@ export const ReplyBase = styled.div<{
         border-top: 2.2px solid var(--tertiary-foreground);
         border-inline-start: 2.2px solid var(--tertiary-foreground);
         border-start-start-radius: 6px;
-    }
+    }*/
 
     * {
         overflow: hidden;
@@ -153,6 +157,7 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
     if (!message) {
         return (
             <ReplyBase head={index === 0} fail>
+                <Reply size={16} />
                 <span>
                     <Text id="app.main.channel.misc.failed_load" />
                 </span>
@@ -164,6 +169,7 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
 
     return (
         <ReplyBase head={index === 0}>
+            <Reply size={16} />
             {message.author?.relationship === RelationshipStatus.Blocked ? (
                 <Text id="app.main.channel.misc.blocked_user" />
             ) : (
@@ -173,7 +179,11 @@ export const MessageReply = observer(({ index, channel, id }: Props) => {
                     ) : (
                         <>
                             <div className="user">
-                                <UserShort user={message.author} size={16} />
+                                <UserShort
+                                    user={message.author}
+                                    size={16}
+                                    showServerIdentity
+                                />
                             </div>
                             <div
                                 className="content"

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

@@ -114,7 +114,11 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                         <ReplyBase preview>
                             <ReplyIcon size={22} />
                             <div class="username">
-                                <UserShort user={message.author} size={16} />
+                                <UserShort
+                                    user={message.author}
+                                    size={16}
+                                    showServerIdentity
+                                />
                             </div>
                             <div class="message">
                                 {message.attachments && (
@@ -130,7 +134,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                     </>
                                 )}
                                 {message.author_id === SYSTEM_USER_ID ? (
-                                    <SystemMessage message={message} />
+                                    <SystemMessage message={message} hideInfo />
                                 ) : (
                                     <Markdown
                                         disallowBigEmoji

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

@@ -5,6 +5,11 @@ 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;
 }
@@ -31,17 +36,10 @@ const Base = styled.div`
     .avatars {
         display: flex;
 
-        img {
+        :not(:first-child) {
-            width: 16px;
-            height: 16px;
-            object-fit: cover;
-            border-radius: 50%;
-
-            &:not(:first-child) {
             margin-left: -4px;
         }
     }
-    }
 
     .usernames {
         min-width: 0;
@@ -69,27 +67,31 @@ 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) => x!.username);
+            const userlist = [...users].map((x) => (
+                <Username key={x!._id} user={x} showServerIdentity />
+            ));
             const user = userlist.pop();
 
-            /*for (let i = 0; i < userlist.length - 1; i++) {
+            for (let i = 0; i < userlist.length - 1; i++) {
-                userlist.splice(i * 2 + 1, 0, ", ");
+                userlist.splice(i * 2 + 1, 0, <span key={`sep_${i}`}>, </span>);
-            }*/
+            }
 
             text = (
-                <Text
+                <TextReact
                     id="app.main.channel.typing.multiple"
                     fields={{
                         user,
-                        userlist: userlist.join(", "),
+                        userlist,
                     }}
                 />
             );
         } else {
             text = (
-                <Text
+                <TextReact
                     id="app.main.channel.typing.single"
-                    fields={{ user: users[0]!.username }}
+                    fields={{
+                        user: <Username user={users[0]} showServerIdentity />,
+                    }}
                 />
             );
         }
@@ -99,10 +101,11 @@ export default observer(({ channel }: Props) => {
                 <div>
                     <div className="avatars">
                         {users.map((user) => (
-                            <img
+                            <UserIcon
                                 key={user!._id}
-                                loading="eager"
+                                target={user}
-                                src={user!.generateAvatarURL({ max_side: 256 })}
+                                size={16}
+                                showServerIdentity
                             />
                         ))}
                     </div>

src/components/common/user/UserShort.tsx

@@ -61,14 +61,20 @@ export const Username = observer(
 export default function UserShort({
     user,
     size,
+    showServerIdentity,
 }: {
     user?: User;
     size?: number;
+    showServerIdentity?: boolean;
 }) {
     return (
         <>
-            <UserIcon size={size ?? 24} target={user} />
+            <UserIcon
-            <Username user={user} />
+                size={size ?? 24}
+                target={user}
+                showServerIdentity={showServerIdentity}
+            />
+            <Username user={user} showServerIdentity={showServerIdentity} />
         </>
     );
 }