Update: Work on new Friends tab + minor fixes

src/pages/friends/Friend.module.scss

@@ -3,6 +3,10 @@
     user-select: none;
     overflow-y: scroll;
 
+    .overline {
+        display: flex;
+    }
+
     &[data-empty="true"] {
         img {
             height: 120px;
@@ -41,14 +45,21 @@
 
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
+        overflow: hidden;
+
+        span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
         .subtext {
             font-size: 12px;
             color: var(--tertiary-foreground);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
     }
 
@@ -57,8 +68,16 @@
         gap: 12px;
 
         > div {
-            height: 32px;
-            width: 32px;
+            height: 40px;
+            width: 40px;
+
+            &:nth-child(1):hover {
+                background: var(--status-online); //TOFIX: change to normal green color
+            }
+
+            &:nth-child(3):hover {
+                background: var(--error);
+            }
         }
     }
 }

src/pages/friends/Friend.tsx

@@ -3,7 +3,8 @@ import { Link } from "react-router-dom";
 import styles from "./Friend.module.scss";
 import { useContext } from "preact/hooks";
 import { Children } from "../../types/Preact";
-import { X, Plus, Envelope } from "@styled-icons/boxicons-regular";
+import { X, Plus } from "@styled-icons/boxicons-regular";
+import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid";
 import IconButton from "../../components/ui/IconButton";
 import { attachContextMenu } from "preact-context-menu";
 import { User, Users } from "revolt.js/dist/api/objects";
@@ -27,12 +28,20 @@ export function Friend({ user }: Props) {
     if (user.relationship === Users.Relationship.Friend) {
         subtext = <UserStatus user={user} />
         actions.push(
+            <>
+            <IconButton type="circle"
+                onClick={stopPropagation}>
+                <Link to={'/open/' + user._id}>
+                    <PhoneCall size={20} />
+                </Link>
+            </IconButton>
             <IconButton type="circle"
                 onClick={stopPropagation}>
                 <Link to={'/open/' + user._id}>
                     <Envelope size={20} />
                 </Link>
             </IconButton>
+            </>
         );
     }
 
@@ -77,7 +86,7 @@ export function Friend({ user }: Props) {
         <div className={styles.friend}
             onClick={() => openScreen({ id: 'profile', user_id: user._id })}
             onContextMenu={attachContextMenu('Menu', { user: user._id })}>
-            <UserIcon target={user} size={32} status />
+            <UserIcon target={user} size={38} status />
             <div className={styles.name}>
                 <span>@{user.username}</span>
                 {subtext && (