Add server avatars. Closes #52

Add identity edit menu. Closes #51

src/components/common/messaging/Message.tsx

@@ -113,6 +113,7 @@ const Message = observer(
                                 onContextMenu={userContext}
                                 onClick={openProfile}
                                 animate={animate}
+                                showServerIdentity
                             />
                         ) : (
                             <MessageDetail message={message} position="left" />
@@ -126,6 +127,7 @@ const Message = observer(
                                     user={user}
                                     onContextMenu={userContext}
                                     onClick={openProfile}
+                                    showServerIdentity
                                 />
                                 <MessageDetail
                                     message={message}

src/components/common/user/UserHover.tsx

@@ -42,7 +42,11 @@ export default function UserHover({ user, children }: Props) {
             placement="right-end"
             content={
                 <Base>
-                    <Username className="username" user={user} />
+                    <Username
+                        className="username"
+                        user={user}
+                        showServerIdentity
+                    />
                     <span className="status">
                         <UserStatus user={user} />
                     </span>

src/components/common/user/UserIcon.tsx

@@ -1,5 +1,6 @@
 import { MicrophoneOff } from "@styled-icons/boxicons-regular";
 import { observer } from "mobx-react-lite";
+import { useParams } from "react-router-dom";
 import { Presence } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
 import styled, { css } from "styled-components";
@@ -7,7 +8,7 @@ import styled, { css } from "styled-components";
 import { useContext } from "preact/hooks";
 
 import { ThemeContext } from "../../../context/Theme";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { AppContext, useClient } from "../../../context/revoltjs/RevoltClient";
 
 import IconBase, { IconBaseProps } from "../IconBase";
 import fallback from "../assets/user.png";
@@ -17,6 +18,7 @@ interface Props extends IconBaseProps<User> {
     mask?: string;
     status?: boolean;
     voice?: VoiceStatus;
+    showServerIdentity?: boolean;
 }
 
 export function useStatusColour(user?: User) {
@@ -59,7 +61,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useContext(AppContext);
+        const client = useClient();
 
         const {
             target,
@@ -69,11 +71,28 @@ export default observer(
             animate,
             mask,
             hover,
+            showServerIdentity,
             ...svgProps
         } = props;
+
+        let override;
+        if (target && showServerIdentity) {
+            const { server } = useParams<{ server?: string }>();
+            if (server) {
+                const member = client.members.getKey({
+                    server,
+                    user: target._id,
+                });
+
+                if (member?.avatar) {
+                    override = member?.avatar;
+                }
+            }
+        }
+
         const iconURL =
             client.generateFileURL(
-                target?.avatar ?? attachment,
+                override ?? target?.avatar ?? attachment,
                 { max_side: 256 },
                 animate,
             ) ?? (target ? target.defaultAvatarURL : fallback);

src/components/common/user/UserShort.tsx

@@ -11,12 +11,16 @@ import UserIcon from "./UserIcon";
 export const Username = observer(
     ({
         user,
+        showServerIdentity,
         ...otherProps
-    }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) => {
+    }: {
+        user?: User;
+        showServerIdentity?: boolean;
+    } & JSX.HTMLAttributes<HTMLElement>) => {
         let username = user?.username;
         let color;
 
-        if (user) {
+        if (user && showServerIdentity) {
             const { server } = useParams<{ server?: string }>();
             if (server) {
                 const client = useClient();

src/components/navigation/items/ButtonItem.tsx

@@ -64,10 +64,11 @@ export const UserButton = observer((props: UserProps) => {
                 target={user}
                 size={32}
                 status
+                showServerIdentity
             />
             <div className={styles.name}>
                 <div>
-                    <Username user={user} />
+                    <Username user={user} showServerIdentity />
                 </div>
                 {
                     <div className={styles.subText}>