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>
+    );
+}

src/lib/ContextMenus.tsx

@@ -23,7 +23,6 @@ import { At, Bell, BellOff, Check, CheckSquare, ChevronRight, Block, Square, Lef
 import { Cog } from "@styled-icons/boxicons-solid";
 import { getNotificationState, Notifications, NotificationState } from "../redux/reducers/notifications";
 import UserStatus from "../components/common/user/UserStatus";
-import { Link } from "react-router-dom";
 import IconButton from "../components/ui/IconButton";
 
 interface ContextMenuData {
@@ -438,7 +437,7 @@ function ContextMenus(props: Props) {
                                 ];
                                 break;
                             case Users.Relationship.Incoming:
-                                actions = ["add_friend", "block_user"];
+                                actions = ["add_friend", "cancel_friend", "block_user"];
                                 break;
                             case Users.Relationship.Outgoing:
                                 actions = ["cancel_friend", "block_user"];

src/pages/friends/Friend.module.scss

@@ -122,6 +122,53 @@
     background: var(--primary-background);
 }
 
+.title {
+    flex-grow: 1;
+}
+
+.pending {
+    gap: 12px;
+    padding: 1em;
+    display: flex;
+    cursor: pointer;
+    margin-top: 1em;
+    align-items: center;
+    flex-direction: row;
+    background: var(--secondary-background);
+
+    .avatars {
+        display: flex;
+    }
+
+    .details {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+
+        > div {
+            font-size: 1.4em;
+            font-weight: 800;
+
+            span {
+                width: 1.5em;
+                height: 1.5em;
+                font-size: 0.8em;
+
+                border-radius: 50%;
+                align-items: center;
+                display: inline-flex;
+                justify-content: center;
+                background: var(--error);
+            }
+        }
+
+        > span {
+            font-weight: 600;
+            color: var(--tertiary-foreground);
+        }
+    }
+}
+
 @media only screen and (max-width: 768px) {
     .list {
         padding: 0 8px 8px 8px;
@@ -131,10 +178,3 @@
         display: none;
     }
 }
-
-//! FIXME: Move this to the Header component, do this:
-// 1. Check if header has topic, if yes, flex-grow: 0 on the title.
-// 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
-.title {
-    flex-grow: 1;
-}

src/pages/friends/Friend.tsx

@@ -70,7 +70,11 @@ export function Friend({ user }: Props) {
         actions.push(
             <IconButton type="circle"
                 className={classNames(styles.button, styles.error)}
-                onClick={ev => stopPropagation(ev, openScreen({ id: 'special_prompt', type: 'unfriend_user', target: user }))}>
+                onClick={ev => stopPropagation(ev,
+                    user.relationship === Users.Relationship.Friend ?
+                        openScreen({ id: 'special_prompt', type: 'unfriend_user', target: user })
+                        : client.users.removeFriend(user._id)
+                )}>
                 <X size={24} />
             </IconButton>
         );

src/pages/friends/Friends.tsx

@@ -1,16 +1,17 @@
 import { Friend } from "./Friend";
 import { Text } from "preact-i18n";
 import styles from "./Friend.module.scss";
-import Tooltip from "../../components/common/Tooltip";
 import Header from "../../components/ui/Header";
 import Overline from "../../components/ui/Overline";
+import Tooltip from "../../components/common/Tooltip";
 import IconButton from "../../components/ui/IconButton";
 import { useUsers } from "../../context/revoltjs/hooks";
 import { User, Users } from "revolt.js/dist/api/objects";
+import UserIcon from "../../components/common/user/UserIcon";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
-import { UserDetail, Conversation, UserPlus, TennisBall } from "@styled-icons/boxicons-solid";
+import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -22,7 +23,9 @@ export default function Friends() {
 
     const lists = [
         [ 'app.special.friends.pending', users.filter(x =>
-            x.relationship === Users.Relationship.Incoming ||
+            x.relationship === Users.Relationship.Incoming
+        ) ],
+        [ 'app.special.friends.pending', users.filter(x =>
             x.relationship === Users.Relationship.Outgoing
         ) ],
         [ 'app.status.online', friends.filter(x =>
@@ -70,8 +73,23 @@ export default function Friends() {
                         <Text id="app.special.friends.nobody" />
                     </>
                 )}
+
+                { lists[0][1].length > 0 && <div className={styles.pending}
+                    onClick={() => openScreen({ id: 'pending_requests', users: lists[0][1].map(x => x._id) })}>
+                    <div className={styles.avatars}>
+                        { lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={64} />) }
+                    </div>
+                    <div className={styles.details}>
+                        {/* ! FIXME: i18n */}
+                        <div>Pending requests <span>{ lists[0][1].length }</span></div>
+                        <span>From { lists[0][1].map(x => x.username).join(', ') }</span>
+                    </div>
+                    <ChevronRight size={48} />
+                </div> }
+
                 {
-                    lists.map(([i18n, list]) => {
+                    lists.map(([i18n, list], index) => {
+                        if (index === 0) return;
                         if (list.length === 0) return;
 
                         return (

src/styles/_context-menu.scss

@@ -1,5 +1,5 @@
 .preact-context-menu .context-menu {
-    z-index: 100;
+    z-index: 10000;
     min-width: 190px;
     padding: 6px 8px;
     user-select: none;