feat: basic user and message context menus (just so we have them)

components/app/interface/channels/text/Message.tsx

@@ -31,6 +31,9 @@ import {
   styled,
 } from "@revolt/ui";
 
+import { MessageContextMenu } from "../../../menus/MessageContextMenu";
+import { floatingUserMenus } from "../../../menus/UserContextMenu";
+
 floating;
 
 /**
@@ -85,15 +88,10 @@ export function Message(props: Props) {
     <MessageContainer
       username={
         <div
-          use:floating={{
-            userCard: {
-              user: props.message.author!,
-              member: props.message.member,
-            },
-            contextMenu() {
-              return <h1>hello!</h1>;
-            },
-          }}
+          use:floating={floatingUserMenus(
+            props.message.author!,
+            props.message.member
+          )}
         >
           <Username
             username={props.message.username}
@@ -103,20 +101,15 @@ export function Message(props: Props) {
       }
       avatar={
         <AvatarContainer
-          use:floating={{
-            userCard: {
-              user: props.message.author!,
-              member: props.message.member,
-            },
-            contextMenu() {
-              return <h1>hello!</h1>;
-            },
-          }}
+          use:floating={floatingUserMenus(
+            props.message.author!,
+            props.message.member
+          )}
         >
           <Avatar size={36} src={props.message.avatarURL} />
         </AvatarContainer>
       }
-      contextMenu={() => <h1>epic</h1>}
+      contextMenu={() => <MessageContextMenu message={props.message} />}
       timestamp={props.message.createdAt}
       edited={props.message.editedAt}
       tail={props.tail || state.settings.getValue("appearance:compact_mode")}
@@ -222,6 +215,15 @@ export function Message(props: Props) {
         <Show when={props.message.systemMessage}>
           <SystemMessage
             systemMessage={props.message.systemMessage!}
+            menuGenerator={(user) =>
+              user
+                ? floatingUserMenus(
+                    user!,
+                    // TODO: try to fetch on demand member
+                    props.message.server?.getMember(user!.id)
+                  )
+                : {}
+            }
             isServer={!!props.message.server}
           />
         </Show>

components/app/menus/ContextMenu.tsx

@@ -0,0 +1,17 @@
+import { styled } from "@revolt/ui";
+
+export const ContextMenu = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  background: ${(props) => props.theme!.colours.accent};
+`;
+
+export const ContextMenuDivider = styled.div``;
+
+export const ContextMenuButton = styled.a`
+  margin: 2px;
+  display: block;
+
+  background: red;
+`;

components/app/menus/MessageContextMenu.tsx

@@ -0,0 +1,54 @@
+import { Message } from "revolt.js";
+
+import { useUser } from "@revolt/client";
+import { state } from "@revolt/state";
+
+import { ContextMenu, ContextMenuButton } from "./ContextMenu";
+
+/**
+ *
+ * @param props
+ * @returns
+ */
+export function MessageContextMenu(props: { message: Message }) {
+  const user = useUser();
+
+  return (
+    <ContextMenu>
+      my context menu.jpg{" "}
+      <ContextMenuButton
+        onClick={() => {
+          state.draft.addReply(props.message, user()!.id);
+        }}
+      >
+        Reply
+      </ContextMenuButton>
+      <ContextMenuButton>Mark as unread</ContextMenuButton>
+      <ContextMenuButton
+        onClick={() => {
+          navigator.clipboard.writeText(props.message.content);
+        }}
+      >
+        Copy text
+      </ContextMenuButton>
+      <ContextMenuButton>Report message</ContextMenuButton>
+      <ContextMenuButton
+        onClick={() => {
+          props.message.delete();
+        }}
+      >
+        Delete message
+      </ContextMenuButton>
+      <ContextMenuButton
+        onClick={() =>
+          window.open(
+            `https://admin.revolt.chat/panel/inspect/message/${props.message.id}`,
+            "_blank"
+          )
+        }
+      >
+        Admin Panel
+      </ContextMenuButton>
+    </ContextMenu>
+  );
+}

components/app/menus/UserContextMenu.tsx

@@ -0,0 +1,68 @@
+import { JSX, Show } from "solid-js";
+
+import { ServerMember, User } from "revolt.js";
+
+import { ContextMenu, ContextMenuButton } from "./ContextMenu";
+
+/**
+ *
+ * @param props
+ * @returns
+ */
+export function UserContextMenu(props: { user?: User; member?: ServerMember }) {
+  // TODO: if we take serverId instead, we could dynamically fetch server member here
+  // same for the floating menu I guess?
+
+  return (
+    <ContextMenu>
+      user context menu.jpg{" "}
+      <Show when={props.member}>
+        <ContextMenuButton
+          onClick={() => prompt("u sure?") && props.member!.kick()}
+        >
+          Kick Member
+        </ContextMenuButton>
+        <ContextMenuButton
+          onClick={() =>
+            prompt("u sure?") && props.member!.ban({ reason: "die" })
+          }
+        >
+          Ban Member (reason = "die")
+        </ContextMenuButton>
+      </Show>
+      <ContextMenuButton
+        onClick={() =>
+          window.open(
+            `https://admin.revolt.chat/panel/inspect/user/${props.user?.id}`,
+            "_blank"
+          )
+        }
+      >
+        Admin Panel
+      </ContextMenuButton>
+    </ContextMenu>
+  );
+}
+
+/**
+ * Provide floating user menus on this element
+ * @param user User
+ * @param member Server Member
+ */
+export function floatingUserMenus(
+  user: User,
+  member?: ServerMember
+): JSX.Directives["floating"] & object {
+  return {
+    userCard: {
+      user,
+      member,
+    },
+    /**
+     * Build user context menu
+     */
+    contextMenu() {
+      return <UserContextMenu user={user} member={member} />;
+    },
+  };
+}

packages/client/src/interface/channels/text/MemberSidebar.tsx

@@ -1,8 +1,9 @@
 import { For, Match, Show, Switch, createMemo, onMount } from "solid-js";
 
 import { VirtualContainer } from "@minht11/solid-virtual-container";
-import { API, Channel, ServerMember } from "revolt.js";
+import { Channel, ServerMember } from "revolt.js";
 
+import { floatingUserMenus } from "@revolt/app/menus/UserContextMenu";
 import { useClient } from "@revolt/client";
 import { useTranslation } from "@revolt/i18n";
 import { TextWithEmoji } from "@revolt/markdown";
@@ -259,14 +260,7 @@ function Member(props: { member: ServerMember }) {
     );
 
   return (
-    <div
-      use:floating={{
-        userCard: {
-          user: props.member.user!,
-          member: props.member,
-        },
-      }}
-    >
+    <div use:floating={floatingUserMenus(props.member.user!, props.member)}>
       <MenuButton
         size="normal"
         attention={props.member.user?.online ? "active" : "muted"}