Fix Friend button styling and actions.

Can now call from friends list.

src/components/ui/IconButton.tsx

@@ -12,6 +12,7 @@ export default styled.div<Props>`
     display: grid;
     cursor: pointer;
     place-items: center;
+    transition: .1s ease background-color;
 
     fill: ${normal};
     color: ${normal};

src/context/revoltjs/RevoltClient.tsx

@@ -3,12 +3,12 @@ import { Client } from "revolt.js";
 import { takeError } from "./util";
 import { createContext } from "preact";
 import { Children } from "../../types/Preact";
+import { useHistory } from 'react-router-dom';
 import { Route } from "revolt.js/dist/api/routes";
 import { connectState } from "../../redux/connector";
 import Preloader from "../../components/ui/Preloader";
 import { WithDispatcher } from "../../redux/reducers";
 import { AuthState } from "../../redux/reducers/auth";
-import { SyncOptions } from "../../redux/reducers/sync";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { useIntermediate } from '../intermediate/Intermediate';
 import { registerEvents, setReconnectDisallowed } from "./events";
@@ -30,6 +30,8 @@ export interface ClientOperations {
     logout: (shouldRequest?: boolean) => Promise<void>;
     loggedIn: () => boolean;
     ready: () => boolean;
+
+    openDM: (user_id: string) => Promise<string>;
 }
 
 export const AppContext = createContext<Client>(undefined as any);
@@ -42,6 +44,7 @@ type Props = WithDispatcher & {
 };
 
 function Context({ auth, children, dispatcher }: Props) {
+    const history = useHistory();
     const { openScreen } = useIntermediate();
     const [status, setStatus] = useState(ClientStatus.INIT);
     const [client, setClient] = useState<Client>(undefined as unknown as Client);
@@ -132,7 +135,12 @@ function Context({ auth, children, dispatcher }: Props) {
             ready: () => (
                 operations.loggedIn() &&
                 typeof client.user !== "undefined"
-            )
+            ),
+            openDM: async (user_id: string) => {
+                let channel = await client.users.openDM(user_id);
+                history.push(`/channel/${channel!._id}`);
+                return channel!._id;
+            }
         }
     }, [ client, auth.active ]);
 

src/pages/friends/Friend.module.scss

@@ -72,16 +72,16 @@
         display: flex;
         gap: 12px;
 
-        > a {
+        .button {
-            height: 40px;
             width: 40px;
+            height: 40px;
 
-            &:nth-child(1):hover {
+            &:hover.error {
-                background: var(--status-online); //TOFIX: change to normal green color
+                background: var(--error);
             }
 
-            &:nth-child(3):hover {
+            &:hover.success {
-                background: var(--error);
+                background: var(--success);
             }
         }
     }

src/pages/friends/Friend.tsx

@@ -1,18 +1,19 @@
 import { Text } from "preact-i18n";
-import { Link } from "react-router-dom";
+import classNames from "classnames";
 import styles from "./Friend.module.scss";
 import { useContext } from "preact/hooks";
 import { Children } from "../../types/Preact";
-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 { X, Plus } from "@styled-icons/boxicons-regular";
 import { User, Users } from "revolt.js/dist/api/objects";
 import { stopPropagation } from "../../lib/stopPropagation";
+import { VoiceOperationsContext } from "../../context/Voice";
 import UserIcon from "../../components/common/user/UserIcon";
 import UserStatus from '../../components/common/user/UserStatus';
-import { AppContext } from "../../context/revoltjs/RevoltClient";
+import { PhoneCall, Envelope } from "@styled-icons/boxicons-solid";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { AppContext, OperationsContext } from "../../context/revoltjs/RevoltClient";
 
 interface Props {
     user: User;
@@ -21,6 +22,8 @@ interface Props {
 export function Friend({ user }: Props) {
     const client = useContext(AppContext);
     const { openScreen } = useIntermediate();
+    const { openDM } = useContext(OperationsContext);
+    const { connect } = useContext(VoiceOperationsContext);
 
     const actions: Children[] = [];
     let subtext: Children = null;
@@ -29,18 +32,16 @@ export function Friend({ user }: Props) {
         subtext = <UserStatus user={user} />
         actions.push(
             <>
-            <Link to={'/open/' + user._id}>
                 <IconButton type="circle"
-                    onClick={stopPropagation}>
+                    className={classNames(styles.button, styles.success)}
+                    onClick={ev => stopPropagation(ev, openDM(user._id).then(connect))}>
                     <PhoneCall size={20} />
                 </IconButton>
-            </Link>
-            <Link to={'/open/' + user._id}>
                 <IconButton type="circle"
-                    onClick={stopPropagation}>
+                    className={styles.button}
+                    onClick={ev => stopPropagation(ev, openDM(user._id))}>
                     <Envelope size={20} />
                 </IconButton>
-            </Link>
             </>
         );
     }
@@ -48,6 +49,7 @@ export function Friend({ user }: Props) {
     if (user.relationship === Users.Relationship.Incoming) {
         actions.push(
             <IconButton type="circle"
+                className={styles.button}
                 onClick={ev => stopPropagation(ev, client.users.addFriend(user.username))}>
                 <Plus size={24} />
             </IconButton>
@@ -67,6 +69,7 @@ export function Friend({ user }: Props) {
     ) {
         actions.push(
             <IconButton type="circle"
+                className={classNames(styles.button, styles.error)}
                 onClick={ev => stopPropagation(ev, client.users.removeFriend(user._id))}>
                 <X size={24} />
             </IconButton>
@@ -76,6 +79,7 @@ export function Friend({ user }: Props) {
     if (user.relationship === Users.Relationship.Blocked) {
         actions.push(
             <IconButton type="circle"
+                className={classNames(styles.button, styles.error)}
                 onClick={ev => stopPropagation(ev, client.users.unblockUser(user._id))}>
                 <X size={24} />
             </IconButton>

src/pages/friends/Friends.tsx

@@ -29,6 +29,9 @@ export default function Friends() {
         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);
+
     return (
         <>
             <Header placement="primary">
@@ -36,7 +39,7 @@ export default function Friends() {
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>
-                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}> {/* TOFIX: Make sure this opens the "Start Group DM" window on click */}
+                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
                     <Conversation size={24} />
                 </IconButton>
                 <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
@@ -64,13 +67,22 @@ export default function Friends() {
                 {pending.map(y => (
                     <Friend key={y._id} user={y} />
                 ))}
-                {friends.length > 0 && (
+                {online.length > 0 && (
                     <Overline className={styles.overline} type="subtle">
-                        <Text id="app.navigation.tabs.friends" /> —{" "}
+                        <Text id="app.status.online" /> —{" "}
-                        {friends.length}
+                        {online.length}
                     </Overline>
                 )}
-                {friends.map(y => (
+                {online.map(y => (
+                    <Friend key={y._id} user={y} />
+                ))}
+                {offline.length > 0 && (
+                    <Overline className={styles.overline} type="subtle">
+                        <Text id="app.status.offline" /> —{" "}
+                        {offline.length}
+                    </Overline>
+                )}
+                {offline.map(y => (
                     <Friend key={y._id} user={y} />
                 ))}
                 {blocked.length > 0 && (