Add pending requests menu.

src/context/intermediate/Intermediate.tsx

@@ -53,6 +53,7 @@ export type Screen =
 | { id: "modify_account"; field: "username" | "email" | "password" }
 | { id: "profile"; user_id: string }
 | { id: "channel_info"; channel_id: string }
+| { id: "pending_requests"; users: string[] }
 | {
       id: "user_picker";
       omit?: string[];
@@ -119,7 +120,7 @@ export default function Intermediate(props: Props) {
                     } /** By specifying a key, we reset state whenever switching screen. */
                 />
                 <Prompt
-                    when={[ 'modify_account', 'special_prompt', 'special_input', 'image_viewer', 'profile', 'channel_info', 'user_picker' ].includes(screen.id)}
+                    when={[ 'modify_account', 'special_prompt', 'special_input', 'image_viewer', 'profile', 'channel_info', 'pending_requests', 'user_picker' ].includes(screen.id)}
                     message={(_, action) => {
                         if (action === 'POP') {
                             openScreen({ id: 'none' });

src/context/intermediate/Popovers.tsx

@@ -7,6 +7,7 @@ import { SpecialPromptModal } from "./modals/Prompt";
 import { UserProfile } from "./popovers/UserProfile";
 import { ImageViewer } from "./popovers/ImageViewer";
 import { ChannelInfo } from "./popovers/ChannelInfo";
+import { PendingRequests } from "./popovers/PendingRequests";
 import { ModifyAccountModal } from "./popovers/ModifyAccount";
 
 export default function Popovers() {
@@ -24,6 +25,8 @@ export default function Popovers() {
             return <ImageViewer {...screen} onClose={onClose} />;
         case "channel_info":
             return <ChannelInfo {...screen} onClose={onClose} />;
+        case "pending_requests":
+            return <PendingRequests {...screen} onClose={onClose} />;
         case "modify_account":
             return <ModifyAccountModal onClose={onClose} {...screen} />;
         case "special_prompt":

src/context/intermediate/popovers/PendingRequests.tsx

@@ -0,0 +1,26 @@
+import styles from "./UserPicker.module.scss";
+import { useUsers } from "../../revoltjs/hooks";
+import Modal from "../../../components/ui/Modal";
+import { Friend } from "../../../pages/friends/Friend";
+
+interface Props {
+    users: string[];
+    onClose: () => void;
+}
+
+export function PendingRequests({ users: ids, onClose }: Props) {
+    const users = useUsers(ids);
+
+    return (
+        <Modal
+            visible={true}
+            title={"Pending requests"}
+            onClose={onClose}>
+            <div className={styles.list}>
+                { users
+                    .filter(x => typeof x !== 'undefined')
+                    .map(x => <Friend user={x!} key={x!._id} />) }
+            </div>
+        </Modal>
+    );
+}