From fc0224562f279695065f4d1e886958110f456b5b Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Thu, 30 Dec 2021 14:02:00 +0100
Subject: [PATCH] fix(friends): fixed friends tab * you can deny requests on
 mobile now * fixed menu to work with glass header

---
 src/pages/friends/Friend.module.scss |  16 +-
 src/pages/friends/Friends.tsx        | 210 +++++++++++++++------------
 2 files changed, 123 insertions(+), 103 deletions(-)

diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index 26d663f0..402b4db2 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -10,17 +10,11 @@
     gap: 20px;
 }
 
-/*::-webkit-scrollbar-thumb {
-    width: 4px;
-    background-clip: content-box;
-    border-top: 48px solid transparent;
-}*/
-
 .list {
     padding: 0 10px 10px 10px;
     padding-top: 48px;
     user-select: none;
-    overflow-y: scroll;
+    /*overflow-y: scroll;*/
 
     &[data-empty="true"] {
         img {
@@ -194,10 +188,10 @@
 
 @media only screen and (max-width: 768px) {
     .list {
-        padding: 0 8px 8px 8px;
-    }
+        padding: 56px 8px 8px 8px;
 
-    .remove {
-        display: none;
+        .remove {
+            display: none;
+        }
     }
 }
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 1a0bea04..e8104864 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -3,6 +3,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { RelationshipStatus, Presence } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
+import styled, { css } from "styled-components";
 
 import styles from "./Friend.module.scss";
 import { Text } from "preact-i18n";
@@ -22,6 +23,26 @@ import IconButton from "../../components/ui/IconButton";
 import { Children } from "../../types/Preact";
 import { Friend } from "./Friend";
 
+const Container = styled.div`
+    overflow-y: scroll;
+
+    ::-webkit-scrollbar-thumb {
+        min-height: 100px;
+        width: 4px;
+        background-clip: content-box;
+        border-top: 48px solid transparent;
+    }
+    ${() =>
+        isTouchscreenDevice &&
+        css`
+            ::-webkit-scrollbar-thumb {
+                min-height: 150px;
+                border-top: 56px solid transparent;
+                border-bottom: var(--bottom-navigation-height) solid transparent;
+            }
+        `}
+`;
+
 export default observer(() => {
     const { openScreen } = useIntermediate();
 
@@ -115,100 +136,105 @@ export default observer(() => {
                     */}
                 </div>
             </PageHeader>
-            <div
-                className={styles.list}
-                data-empty={isEmpty}
-                data-mobile={isTouchscreenDevice}>
-                {isEmpty && (
-                    <>
-                        <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
-                        <Text id="app.special.friends.nobody" />
-                    </>
-                )}
+            <Container>
+                <div
+                    className={styles.list}
+                    data-empty={isEmpty}
+                    data-mobile={isTouchscreenDevice}>
+                    {isEmpty && (
+                        <>
+                            <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
+                            <Text id="app.special.friends.nobody" />
+                        </>
+                    )}
 
-                {incoming.length > 0 && (
-                    <div
-                        className={styles.pending}
-                        onClick={() =>
-                            openScreen({
-                                id: "pending_requests",
-                                users: incoming,
-                            })
-                        }>
-                        <div className={styles.avatars}>
-                            {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}>
-                            <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>
-                )}
-
-                {lists.map(([i18n, list, section_id], index) => {
-                    if (index === 0) return;
-                    if (list.length === 0) return;
-
-                    return (
-                        <CollapsibleSection
-                            key={section_id}
-                            id={`friends_${section_id}`}
-                            defaultValue={true}
-                            sticky
-                            large
-                            summary={
-                                <div class="title">
-                                    <Text id={i18n} /> — {list.length}
-                                </div>
+                    {incoming.length > 0 && (
+                        <div
+                            className={styles.pending}
+                            onClick={() =>
+                                openScreen({
+                                    id: "pending_requests",
+                                    users: incoming,
+                                })
                             }>
-                            {list.map((x) => (
-                                <Friend key={x._id} user={x} />
-                            ))}
-                        </CollapsibleSection>
-                    );
-                })}
-            </div>
+                            <div className={styles.avatars}>
+                                {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}>
+                                <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>
+                    )}
+
+                    {lists.map(([i18n, list, section_id], index) => {
+                        if (index === 0) return;
+                        if (list.length === 0) return;
+
+                        return (
+                            <CollapsibleSection
+                                key={section_id}
+                                id={`friends_${section_id}`}
+                                defaultValue={true}
+                                sticky
+                                large
+                                summary={
+                                    <div class="title">
+                                        <Text id={i18n} /> — {list.length}
+                                    </div>
+                                }>
+                                {list.map((x) => (
+                                    <Friend key={x._id} user={x} />
+                                ))}
+                            </CollapsibleSection>
+                        );
+                    })}
+                </div>
+            </Container>
         </>
     );
 });