Add pending requests menu.

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 (