fix(iOS): actually fix context menus

closes #138

src/components/navigation/items/ButtonItem.tsx

@@ -7,7 +7,8 @@ import { User } from "revolt.js/dist/maps/Users";
 
 import styles from "./Item.module.scss";
 import classNames from "classnames";
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { Localizer, Text } from "preact-i18n";
 
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -66,12 +67,14 @@ export const UserButton = observer((props: UserProps) => {
                 typeof channel !== "undefined" ||
                 (user.online && user.status?.presence !== Presence.Invisible)
             }
-            onContextMenu={attachContextMenu("Menu", {
-                user: user._id,
-                channel: channel?._id,
-                unread: alert,
-                contextualChannel: context?._id,
-            })}>
+            ref={
+                refContextMenu("Menu", {
+                    user: user._id,
+                    channel: channel?._id,
+                    unread: alert,
+                    contextualChannel: context?._id,
+                }) as Ref<HTMLDivElement>
+            }>
             <UserIcon
                 className={styles.avatar}
                 target={user}
@@ -163,10 +166,12 @@ export const ChannelButton = observer((props: ChannelProps) => {
             data-muted={muted}
             aria-label={channel.name}
             className={classNames(styles.item, { [styles.compact]: compact })}
-            onContextMenu={attachContextMenu("Menu", {
-                channel: channel._id,
-                unread: !!alert,
-            })}>
+            ref={
+                refContextMenu("Menu", {
+                    channel: channel._id,
+                    unread: !!alert,
+                }) as Ref<HTMLDivElement>
+            }>
             <ChannelIcon
                 className={styles.avatar}
                 target={channel}

src/components/navigation/left/ServerListSidebar.tsx

@@ -5,8 +5,8 @@ import { Link, useHistory, useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components/macro";
 
-import { attachContextMenu } from "preact-context-menu";
-import { Text } from "preact-i18n";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
@@ -265,7 +265,9 @@ export default observer(() => {
                     <ServerEntry home active={homeActive}>
                         <Swoosh />
                         <div
-                            onContextMenu={attachContextMenu("Status")}
+                            ref={
+                                refContextMenu("Status") as Ref<HTMLDivElement>
+                            }
                             onClick={() =>
                                 homeActive && history.push("/settings")
                             }>
@@ -301,10 +303,12 @@ export default observer(() => {
                                 <ServerEntry
                                     home
                                     active={false}
-                                    onContextMenu={attachContextMenu("Menu", {
-                                        channel: x._id,
-                                        unread: true,
-                                    })}>
+                                    ref={
+                                        refContextMenu("Menu", {
+                                            channel: x._id,
+                                            unread: true,
+                                        }) as Ref<HTMLDivElement>
+                                    }>
                                     <div>
                                         <Icon
                                             size={42}
@@ -350,10 +354,12 @@ export default observer(() => {
                             to={state.layout.getServerPath(server._id)}>
                             <ServerEntry
                                 active={active}
-                                onContextMenu={attachContextMenu("Menu", {
-                                    server: server._id,
-                                    unread: isUnread,
-                                })}>
+                                ref={
+                                    refContextMenu("Menu", {
+                                        server: server._id,
+                                        unread: isUnread,
+                                    }) as Ref<HTMLDivElement>
+                                }>
                                 <Swoosh />
                                 <Tooltip
                                     content={server.name}

src/components/navigation/left/ServerSidebar.tsx

@@ -3,7 +3,8 @@ import { Redirect, useParams } from "react-router";
 import { Server } from "revolt.js/dist/maps/Servers";
 import styled, { css } from "styled-components/macro";
 
-import { attachContextMenu } from "preact-context-menu";
+import { Ref } from "preact";
+import { refContextMenu } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
@@ -145,9 +146,11 @@ export default observer(() => {
             <ServerHeader server={server} />
             <ConnectionStatus />
             <ServerList
-                onContextMenu={attachContextMenu("Menu", {
-                    server_list: server._id,
-                })}>
+                ref={
+                    refContextMenu("Menu", {
+                        server_list: server._id,
+                    }) as Ref<HTMLDivElement>
+                }>
                 {elements}
             </ServerList>
             <PaintCounter small />