Add server avatars. Closes #52

Add identity edit menu. Closes #51

src/context/intermediate/Intermediate.tsx

@@ -86,6 +86,10 @@ export type Screen =
           id: "user_picker";
           omit?: string[];
           callback: (users: string[]) => Promise<void>;
+      }
+    | {
+          id: "server_identity";
+          server: Server;
       };
 
 export const IntermediateContext = createContext({

src/context/intermediate/Popovers.tsx

@@ -11,6 +11,7 @@ import { ChannelInfo } from "./popovers/ChannelInfo";
 import { ImageViewer } from "./popovers/ImageViewer";
 import { ModifyAccountModal } from "./popovers/ModifyAccount";
 import { PendingRequests } from "./popovers/PendingRequests";
+import { ServerIdentityModal } from "./popovers/ServerIdentityModal";
 import { UserPicker } from "./popovers/UserPicker";
 import { UserProfile } from "./popovers/UserProfile";
 
@@ -40,6 +41,8 @@ export default function Popovers() {
             return <SpecialPromptModal onClose={onClose} {...screen} />;
         case "special_input":
             return <SpecialInputModal onClose={onClose} {...screen} />;
+        case "server_identity":
+            return <ServerIdentityModal onClose={onClose} {...screen} />;
     }
 
     return null;

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -0,0 +1,71 @@
+import { observer } from "mobx-react-lite";
+import { Server } from "revolt.js/dist/maps/Servers";
+
+import { useEffect, useState } from "preact/hooks";
+
+import Button from "../../../components/ui/Button";
+import InputBox from "../../../components/ui/InputBox";
+import Modal from "../../../components/ui/Modal";
+import Overline from "../../../components/ui/Overline";
+
+import { FileUploader } from "../../revoltjs/FileUploads";
+import { useClient } from "../../revoltjs/RevoltClient";
+
+interface Props {
+    server: Server;
+    onClose: () => void;
+}
+
+export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
+    const client = useClient();
+    const member = client.members.getKey({
+        server: server._id,
+        user: client.user!._id,
+    });
+
+    if (!member) return null;
+
+    const [nickname, setNickname] = useState("");
+    useEffect(() => setNickname(member.nickname ?? ""), [member.nickname]);
+
+    return (
+        <Modal visible={true} onClose={onClose}>
+            <Overline type="subtle">Nickname</Overline>
+            <p>
+                <InputBox
+                    value={nickname}
+                    onChange={(e) => setNickname(e.currentTarget.value)}
+                />
+            </p>
+            <p>
+                <Button onClick={() => member.edit({ nickname })}>Save</Button>
+            </p>
+            <p>
+                <Button onClick={() => member.edit({ remove: "Nickname" })}>
+                    Remove
+                </Button>
+            </p>
+            <Overline type="subtle">Avatar</Overline>
+            <FileUploader
+                width={80}
+                height={80}
+                style="icon"
+                fileType="avatars"
+                behaviour="upload"
+                maxFileSize={4_000_000}
+                onUpload={(avatar) => member.edit({ avatar })}
+                remove={() => member.edit({ remove: "Avatar" })}
+                defaultPreview={client.generateFileURL(
+                    member.avatar ?? undefined,
+                    { max_side: 256 },
+                    true,
+                )}
+                previewURL={client.generateFileURL(
+                    member.avatar ?? undefined,
+                    { max_side: 256 },
+                    true,
+                )}
+            />
+        </Modal>
+    );
+});