From bfb15e31096582e963178944f12c873565f11c94 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 2 Jul 2021 16:47:42 +0100
Subject: [PATCH] Add collapsible sections in friends menu.

---
 src/pages/friends/Friend.module.scss | 21 +++++++
 src/pages/friends/Friends.tsx        | 93 +++++++++++-----------------
 2 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index de5fee43..450abee1 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -18,6 +18,27 @@
         }
     }
 
+    details {
+        summary {
+            outline: none;
+            list-style: none;
+
+            &::marker, &::-webkit-details-marker {
+                display: none;
+            }
+
+            svg {
+                transition: .2s ease transform;
+            }
+        }
+
+        &:not([open]) {
+            summary svg {
+                transform: rotateZ(-90deg);
+            }
+        }
+    }
+
     &[data-empty="true"] {
         img {
             height: 120px;
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 689419ae..7ff2a462 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -18,21 +18,25 @@ export default function Friends() {
     const users = useUsers() as User[];
     users.sort((a, b) => a.username.localeCompare(b.username));
 
-    const pending = users.filter(
-        x =>
+    const friends = users.filter(x => x.relationship === Users.Relationship.Friend);
+
+    const lists = [
+        [ 'app.special.friends.pending', users.filter(x =>
             x.relationship === Users.Relationship.Incoming ||
             x.relationship === Users.Relationship.Outgoing
-    );
-    const friends = users.filter(
-        x => x.relationship === Users.Relationship.Friend
-    );
-    const blocked = users.filter(
-        x => x.relationship === Users.Relationship.Blocked
-    );
-
-    const online = friends.filter(x => x.online && x.status?.presence !== Users.Presence.Invisible);
-    const offline = friends.filter(x => !x.online || x.status?.presence === Users.Presence.Invisible);
+        ) ],
+        [ 'app.status.online', friends.filter(x =>
+            x.online && x.status?.presence !== Users.Presence.Invisible
+        ) ],
+        [ 'app.status.offline', friends.filter(x =>
+            !x.online || x.status?.presence === Users.Presence.Invisible
+        ) ],
+        [ 'app.special.friends.blocked', friends.filter(x =>
+            x.relationship === Users.Relationship.Blocked
+        ) ]
+    ] as [ string, User[] ][];
 
+    const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
     return (
         <>
             <Header placement="primary">
@@ -59,57 +63,30 @@ export default function Friends() {
                 </Tooltip>
                 */}
             </Header>
-            <div
-                className={styles.list}
-                data-empty={
-                    pending.length + friends.length + blocked.length === 0
-                }
-            >
-                {pending.length + friends.length + blocked.length === 0 && (
+            <div className={styles.list} data-empty={isEmpty}>
+                {isEmpty && (
                     <>
                         <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
                         <Text id="app.special.friends.nobody" />
                     </>
                 )}
-                {pending.length > 0 && (
-                    <Overline className={styles.overline} type="subtle">
-                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
-                        <Text id="app.special.friends.pending" /> —{" "}
-                        {pending.length}
-                    </Overline>
-                )}
-                {pending.map(y => (
-                    <Friend key={y._id} user={y} />
-                ))}
-                {online.length > 0 && (
-                    <Overline className={styles.overline} type="subtle">
-                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
-                        <Text id="app.status.online" /> —{" "}
-                        {online.length}
-                    </Overline>
-                )}
-                {online.map(y => (
-                    <Friend key={y._id} user={y} />
-                ))}
-                {offline.length > 0 && (
-                    <Overline className={styles.overline} type="subtle">
-                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
-                        <Text id="app.status.offline" /> —{" "}
-                        {offline.length}
-                    </Overline>
-                )}
-                {offline.map(y => (
-                    <Friend key={y._id} user={y} />
-                ))}
-                {blocked.length > 0 && (
-                    <Overline className={styles.overline} type="subtle">
-                        <Text id="app.special.friends.blocked" /> —{" "}
-                        {blocked.length}
-                    </Overline>
-                )}
-                {blocked.map(y => (
-                    <Friend key={y._id} user={y} />
-                ))}
+                {
+                    lists.map(([i18n, list]) => {
+                        if (list.length === 0) return;
+
+                        return (
+                            <details open>
+                                <summary>
+                                    <Overline className={styles.overline} type="subtle">
+                                        <ChevronDown size={20} />
+                                        <Text id={i18n} /> — { list.length }
+                                    </Overline>
+                                </summary>
+                                { list.map(x => <Friend key={x._id} user={x} />) }
+                            </details>
+                        )
+                    })
+                }
             </div>
         </>
     );