From 73c61cd7f87bb67d75962195efe77a27a6f55423 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 2 Jul 2021 18:56:00 +0100
Subject: [PATCH] Add i18n to incoming requests. Add icon stacking mask.

---
 external/lang                                 |  2 +-
 src/components/common/user/UserIcon.tsx       |  5 ++--
 src/components/ui/Masks.tsx                   |  4 +++
 .../intermediate/popovers/PendingRequests.tsx |  3 ++-
 src/pages/friends/Friend.module.scss          |  5 ++++
 src/pages/friends/Friends.tsx                 | 27 +++++++++++++------
 6 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/external/lang b/external/lang
index dad00381..5cad406a 160000
--- a/external/lang
+++ b/external/lang
@@ -1 +1 @@
-Subproject commit dad00381aaaafc1ab829816dffc31f0f37ee56a9
+Subproject commit 5cad406a2fb09d90803c5604d6f27701c3bf140b
diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx
index 9d7bb801..724f042e 100644
--- a/src/components/common/user/UserIcon.tsx
+++ b/src/components/common/user/UserIcon.tsx
@@ -9,6 +9,7 @@ import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 type VoiceStatus = "muted";
 interface Props extends IconBaseProps<User> {
+    mask?: string;
     status?: boolean;
     voice?: VoiceStatus;
 }
@@ -52,7 +53,7 @@ import fallback from '../assets/user.png';
 export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
     const client = useContext(AppContext);
 
-    const { target, attachment, size, voice, status, animate, children, as, ...svgProps } = props;
+    const { target, attachment, size, voice, status, animate, mask, children, as, ...svgProps } = props;
     const iconURL = client.generateFileURL(target?.avatar ?? attachment, { max_side: 256 }, animate)
         ?? (target ? client.users.getDefaultAvatarURL(target._id) : fallback);
 
@@ -62,7 +63,7 @@ export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGEle
             height={size}
             aria-hidden="true"
             viewBox="0 0 32 32">
-            <foreignObject x="0" y="0" width="32" height="32" mask={props.status ? "url(#user)" : undefined}>
+            <foreignObject x="0" y="0" width="32" height="32" mask={mask ?? (status ? "url(#user)" : undefined)}>
                 {
                     <img src={iconURL}
                         draggable={false} />
diff --git a/src/components/ui/Masks.tsx b/src/components/ui/Masks.tsx
index 3a1513f1..eba85108 100644
--- a/src/components/ui/Masks.tsx
+++ b/src/components/ui/Masks.tsx
@@ -12,6 +12,10 @@ export default function Masks() {
                     <rect x="0" y="0" width="32" height="32" fill="white" />
                     <circle cx="27" cy="27" r="7" fill={"black"} />
                 </mask>
+                <mask id="overlap">
+                    <rect x="0" y="0" width="32" height="32" fill="white" />
+                    <circle cx="32" cy="16" r="18" fill={"black"} />
+                </mask>
             </defs>
         </svg>
     )
diff --git a/src/context/intermediate/popovers/PendingRequests.tsx b/src/context/intermediate/popovers/PendingRequests.tsx
index 710cb6b2..5b6a68b8 100644
--- a/src/context/intermediate/popovers/PendingRequests.tsx
+++ b/src/context/intermediate/popovers/PendingRequests.tsx
@@ -1,3 +1,4 @@
+import { Text } from "preact-i18n";
 import styles from "./UserPicker.module.scss";
 import { useUsers } from "../../revoltjs/hooks";
 import Modal from "../../../components/ui/Modal";
@@ -14,7 +15,7 @@ export function PendingRequests({ users: ids, onClose }: Props) {
     return (
         <Modal
             visible={true}
-            title={"Pending requests"}
+            title={<Text id="app.special.friends.pending" />}
             onClose={onClose}>
             <div className={styles.list}>
                 { users
diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 2fd1da5b..5d1b5aec 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -150,6 +150,11 @@
         display: flex;
         flex-shrink: 0;
         margin-inline-end: 15px;
+
+        svg:not(:first-child) {
+            position: relative;
+            margin-left: -32px;
+        }
     }
 
     .details {
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 7e11fe68..b713eddc 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -12,6 +12,8 @@ import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
 import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
+import { TextReact } from "../../lib/i18n";
+import { Children } from "../../types/Preact";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -22,10 +24,10 @@ export default function Friends() {
     const friends = users.filter(x => x.relationship === Users.Relationship.Friend);
 
     const lists = [
-        [ 'app.special.friends.pending', users.filter(x =>
+        [ '', users.filter(x =>
             x.relationship === Users.Relationship.Incoming
         ) ],
-        [ 'app.special.friends.pending', users.filter(x =>
+        [ 'app.special.friends.sent', users.filter(x =>
             x.relationship === Users.Relationship.Outgoing
         ) ],
         [ 'app.status.online', friends.filter(x =>
@@ -39,6 +41,10 @@ export default function Friends() {
         ) ]
     ] as [ string, User[] ][];
 
+    const incoming = lists[0][1];
+    const userlist: Children[] = incoming.map(x => <b>{ x.username }</b>);
+    for (let i=incoming.length-1;i>0;i--) userlist.splice(i, 0, ', ');
+
     const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
     return (
         <>
@@ -74,15 +80,20 @@ export default function Friends() {
                     </>
                 )}
 
-                { lists[0][1].length > 0 && <div className={styles.pending}
-                    onClick={() => openScreen({ id: 'pending_requests', users: lists[0][1].map(x => x._id) })}>
+                { incoming.length > 0 && <div className={styles.pending}
+                    onClick={() => openScreen({ id: 'pending_requests', users: incoming.map(x => x._id) })}>
                     <div className={styles.avatars}>
-                        { lists[0][1].map((x, i) => i < 3 && <UserIcon target={x} size={54} />) }
+                        { incoming.map((x, i) => i < 3 && <UserIcon target={x} size={64} mask={ i < Math.min(incoming.length - 1, 2) ? "url(#overlap)" : undefined } />) }
                     </div>
                     <div className={styles.details}>
-                        {/* ! FIXME: i18n */}
-                        <div className={styles.title}>Pending requests<span>{ lists[0][1].length }</span></div>
-                        <span className={styles.from}>From <span className={styles.user}>{ lists[0][1].map(x => x.username).join(', ') }</span></span>
+                        <div><Text id="app.special.friends.pending" /> <span>{ incoming.length }</span></div>
+                        <span>
+                            {
+                                  incoming.length > 3 ? <TextReact id="app.special.friends.from.several" fields={{ userlist: userlist.slice(0, 6), count: incoming.length - 3 }} />
+                                : incoming.length > 1 ? <TextReact id="app.special.friends.from.multiple" fields={{ user: userlist.shift()!, userlist: userlist.slice(1) }} />
+                                : <TextReact id="app.special.friends.from.single" fields={{ user: userlist[0] }} />
+                            }
+                        </span>
                     </div>
                     <ChevronRight size={28} />
                 </div> }