feat: pin message modal

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

@@ -87,6 +87,24 @@ export function MessageContextMenu(props: { message?: Message; file?: File }) {
     }
   }
 
+  /**
+   * Pin/unpin the message
+   */
+  function pinMessage(ev: MouseEvent) {
+    if (ev.shiftKey) {
+      if (props.message!.pinned) {
+        props.message!.unpin().catch(showError);
+      } else {
+        props.message!.pin().catch(showError);
+      }
+    } else {
+      openModal({
+        type: "pin_message",
+        message: props.message!,
+      });
+    }
+  }
+
   /**
    * Open message in Stoat Admin Panel
    */
@@ -182,16 +200,7 @@ export function MessageContextMenu(props: { message?: Message; file?: File }) {
             props.message!.channel?.havePermission("ManageMessages")
           }
         >
-          <ContextMenuButton
-            icon={MdPin}
-            onClick={() => {
-              if (props.message!.pinned) {
-                props.message!.unpin().catch(showError);
-              } else {
-                props.message!.pin().catch(showError);
-              }
-            }}
-          >
+          <ContextMenuButton icon={MdPin} onClick={pinMessage}>
             <Switch fallback={<Trans>Pin message</Trans>}>
               <Match when={props.message!.pinned}>
                 <Trans>Unpin message</Trans>

packages/client/components/modal/modals.tsx

@@ -44,6 +44,7 @@ import { MFAEnableTOTPModal } from "./modals/MFAEnableTOTP";
 import { MFAFlowModal } from "./modals/MFAFlow";
 import { MFARecoveryModal } from "./modals/MFARecovery";
 import { OnboardingModal } from "./modals/Onboarding";
+import { PinMessageModal } from "./modals/PinMessage";
 import { PolicyChangeModal } from "./modals/PolicyChange";
 import { RemoveMemberModal } from "./modals/RemoveMember";
 import { RenameSessionModal } from "./modals/RenameSession";
@@ -188,6 +189,8 @@ export function RenderModal(props: ActiveModal & { onClose: () => void }) {
       return <EditCategoryModal {...modalProps} />;
     case "remove_member":
       return <RemoveMemberModal {...modalProps} />;
+    case "pin_message":
+      return <PinMessageModal {...modalProps} />;
 
     case "screen_share_settings":
       return <ScreenShareSettingsModal {...modalProps} />;

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

@@ -0,0 +1,49 @@
+import { Trans } from "@lingui-solid/solid/macro";
+import { useMutation } from "@tanstack/solid-query";
+
+import { Dialog, DialogProps } from "@revolt/ui";
+
+import { useModals } from "..";
+import { Modals } from "../types";
+
+/**
+ * Modal to pin or unpin a message
+ */
+export function PinMessageModal(
+  props: DialogProps & Modals & { type: "pin_message" },
+) {
+  const { showError } = useModals();
+
+  const isPinned = () => props.message.pinned;
+
+  const togglePin = useMutation(() => ({
+    mutationFn: () =>
+      isPinned() ? props.message.unpin() : props.message.pin(),
+    onError: showError,
+    onSuccess: () => props.onClose(),
+  }));
+
+  return (
+    <Dialog
+      show={props.show}
+      onClose={props.onClose}
+      title={
+        isPinned() ? <Trans>Unpin message</Trans> : <Trans>Pin message</Trans>
+      }
+      actions={[
+        { text: <Trans>Cancel</Trans> },
+        {
+          text: isPinned() ? <Trans>Unpin</Trans> : <Trans>Pin</Trans>,
+          onClick: () => togglePin.mutateAsync(),
+        },
+      ]}
+      isDisabled={togglePin.isPending}
+    >
+      {isPinned() ? (
+        <Trans>Are you sure you want to unpin this message?</Trans>
+      ) : (
+        <Trans>Are you sure you want to pin this message?</Trans>
+      )}
+    </Dialog>
+  );
+}

packages/client/components/modal/types.ts

@@ -127,6 +127,10 @@ export type Modals =
       type: "delete_message";
       message: Message;
     }
+  | {
+      type: "pin_message";
+      message: Message;
+    }
   | {
       type: "delete_server";
       server: Server;