feat: allow removing members from groups

.prettierrc

@@ -2,5 +2,6 @@
   "tabWidth": 2,
   "useTabs": false,
   "plugins": ["prettier-plugin-organize-imports"],
-  "organizeImportsTypeOrder": "first"
+  "organizeImportsTypeOrder": "first",
+  "endOfLine": "auto"
 }

packages/client/components/app/menus/UserContextMenu.tsx

@@ -189,6 +189,17 @@ export function UserContextMenu(props: {
     navigator.clipboard.writeText(props.user.id);
   }
 
+  /**
+   * Remove user from group
+   */
+  function removeMember() {
+    openModal({
+      type: "remove_member",
+      user: props.user,
+      group: props.channel!,
+    });
+  }
+
   return (
     <ContextMenu class="UserContextMenu">
       <Show when={props.inVoice && !props.user.self}>
@@ -328,6 +339,23 @@ export function UserContextMenu(props: {
         </Show>
       </Show>
 
+      <Show
+        when={
+          props.channel?.type === "Group" &&
+          !props.user.self &&
+          props.channel.havePermission("ManageChannel") &&
+          !props.channel.owner?.self
+        }
+      >
+        <ContextMenuButton
+          icon={MdPersonRemove}
+          onClick={removeMember}
+          destructive
+        >
+          <Trans>Remove Member</Trans>
+        </ContextMenuButton>
+      </Show>
+
       <Show
         when={
           !props.user.self &&
@@ -345,6 +373,8 @@ export function UserContextMenu(props: {
         </ContextMenuButton>
       </Show>
 
+      <ContextMenuDivider />
+
       <Show when={!props.user.self}>
         <ContextMenuButton icon={MdReport} onClick={reportUser} destructive>
           <Trans>Report user</Trans>
@@ -414,11 +444,14 @@ export function UserContextMenu(props: {
  * Provide floating user menus on this element
  * @param user User
  * @param member Server Member
+ * @param contextMessage Message
+ * @param contextGroup Group
  */
 export function floatingUserMenus(
   user: User,
   member?: ServerMember,
   contextMessage?: Message,
+  contextGroup?: Channel,
 ): JSX.Directives["floating"] & object {
   return {
     userCard: {
@@ -435,7 +468,7 @@ export function floatingUserMenus(
           user={user}
           member={member}
           contextMessage={contextMessage}
-          channel={contextMessage?.channel}
+          channel={contextMessage?.channel ?? contextGroup}
         />
       );
     },

packages/client/components/modal/modals.tsx

@@ -45,6 +45,7 @@ import { MFAFlowModal } from "./modals/MFAFlow";
 import { MFARecoveryModal } from "./modals/MFARecovery";
 import { OnboardingModal } from "./modals/Onboarding";
 import { PolicyChangeModal } from "./modals/PolicyChange";
+import { RemoveMemberModal } from "./modals/RemoveMember";
 import { RenameSessionModal } from "./modals/RenameSession";
 import { ReportContentModal } from "./modals/ReportContent";
 import { ResetBotTokenModal } from "./modals/ResetBotToken";
@@ -184,6 +185,9 @@ export function RenderModal(props: ActiveModal & { onClose: () => void }) {
       return <ResetBotTokenModal {...modalProps} />;
     case "edit_category":
       return <EditCategoryModal {...modalProps} />;
+    case "remove_member":
+      return <RemoveMemberModal {...modalProps} />;
+
     case "screen_share_settings":
       return <ScreenShareSettingsModal {...modalProps} />;
     default:

packages/client/components/modal/modals/RemoveMember.tsx

@@ -0,0 +1,50 @@
+import { Trans } from "@lingui-solid/solid/macro";
+
+import { Avatar, Column, Dialog, DialogProps, Text } from "@revolt/ui";
+
+import { useMutation } from "@tanstack/solid-query";
+import { useModals } from "..";
+import { Modals } from "../types";
+
+/**
+ * Ban a server member with reason
+ */
+export function RemoveMemberModal(
+  props: DialogProps & Modals & { type: "remove_member" },
+) {
+  const { showError } = useModals();
+
+  const removeMember = useMutation(() => ({
+    mutationFn: (user: string) => {
+      return props.group.removeMember(user);
+    },
+    onError: showError,
+  }));
+
+  return (
+    <Dialog
+      show={props.show}
+      onClose={props.onClose}
+      title={<Trans>Remove Member</Trans>}
+      actions={[
+        { text: <Trans>Cancel</Trans> },
+        {
+          text: <Trans>Remove</Trans>,
+          onClick: () => removeMember.mutateAsync(props.user.id),
+        },
+      ]}
+      isDisabled={removeMember.isPending}
+    >
+      <Column align>
+        <Avatar src={props.user.animatedAvatarURL} size={64} />
+        <Text>
+          <Trans>
+            Are you sure you want to remove{" "}
+            {props.user?.displayName ?? props.user.username} from{" "}
+            {props.group.name}?
+          </Trans>
+        </Text>
+      </Column>
+    </Dialog>
+  );
+}

packages/client/components/modal/types.ts

@@ -7,9 +7,9 @@ import {
   Emoji,
   File,
   ImageEmbed,
+  Message,
   MFA,
   MFATicket,
-  Message,
   PublicBot,
   PublicChannelInvite,
   Server,
@@ -317,6 +317,10 @@ export type Modals =
       server: Server;
       category: CategoryData;
     }
+  | {
+      type: "remove_member";
+      group: Channel;
+      user: User;
   | {
       type: "screen_share_settings";
       trackReference: TrackReference;

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

@@ -1,4 +1,4 @@
-import { Match, Show, Switch, createEffect, createMemo, on } from "solid-js";
+import { createEffect, createMemo, Match, on, Show, Switch } from "solid-js";
 
 import { useLingui } from "@lingui-solid/solid/macro";
 import { VirtualContainer } from "@minht11/solid-virtual-container";
@@ -16,9 +16,9 @@ import {
   OverflowingText,
   Row,
   Tooltip,
-  UserStatus,
-  Username,
   typography,
+  Username,
+  UserStatus,
 } from "@revolt/ui";
 
 interface Props {
@@ -311,7 +311,7 @@ export function GroupMemberSidebar(props: Props) {
                 width: "100%",
               }}
             >
-              <Member user={item.item} />
+              <Member user={item.item} group={props.channel} />
             </div>
           )}
         </VirtualContainer>
@@ -378,7 +378,11 @@ const NameStatusStack = styled("div", {
 /**
  * Member
  */
-function Member(props: { user?: User; member?: ServerMember }) {
+function Member(props: {
+  user?: User;
+  member?: ServerMember;
+  group?: Channel;
+}) {
   const { t } = useLingui();
 
   /**
@@ -408,6 +412,8 @@ function Member(props: { user?: User; member?: ServerMember }) {
       use:floating={floatingUserMenus(
         (props.user ?? props.member?.user)!,
         props.member,
+        undefined,
+        props.group,
       )}
     >
       <MenuButton