Implement adding/removing timeouts

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

@@ -211,6 +211,16 @@ export function Message(props: Props) {
               </Symbol>
             </Tooltip>
           </Match>
+          <Match when={props.message.member?.timeout}>
+            <Tooltip
+              content={t`User is timed out for ${dayjs(props.message.member?.timeout).fromNow(true)}`}
+              placement="top"
+            >
+              <Symbol css={{ fontSize: "1rem !important", paddingTop: "5px" }}>
+                schedule
+              </Symbol>
+            </Tooltip>
+          </Match>
           <Match
             when={
               props.message.authorId &&

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

@@ -20,9 +20,11 @@ import MdChat from "@material-design-icons/svg/outlined/chat.svg?component-solid
 import MdClose from "@material-design-icons/svg/outlined/close.svg?component-solid";
 import MdDoNotDisturbOn from "@material-design-icons/svg/outlined/do_not_disturb_on.svg?component-solid";
 import MdFace from "@material-design-icons/svg/outlined/face.svg?component-solid";
+import MdHistoryToggleOff from "@material-design-icons/svg/outlined/history_toggle_off.svg?component-solid";
 import MdPersonAddAlt from "@material-design-icons/svg/outlined/person_add_alt.svg?component-solid";
 import MdPersonRemove from "@material-design-icons/svg/outlined/person_remove.svg?component-solid";
 import MdReport from "@material-design-icons/svg/outlined/report.svg?component-solid";
+import MdSchedule from "@material-design-icons/svg/outlined/schedule.svg?component-solid";
 
 import {
   ContextMenu,
@@ -84,6 +86,20 @@ export function UserContextMenu(props: {
     });
   }
 
+  /**
+   * Timeout the user
+   */
+  function timeoutMember() {
+    openModal({
+      type: "timeout_member",
+      member: props.member!,
+    });
+  }
+
+  function removeTimeoutForMember() {
+    props.member!.edit({ remove: ["Timeout"] });
+  }
+
   /**
    * Report the user
    */
@@ -248,7 +264,38 @@ export function UserContextMenu(props: {
             <Trans>Edit roles</Trans>
           </ContextMenuButton>
         </Show>
-        {/** TODO: #287 timeout users */}
+        <Show
+          when={
+            !props.user.self &&
+            props.member?.server?.havePermission("TimeoutMembers") &&
+            props.member.inferiorTo(props.member.server.member!) &&
+            !props.member.timeout
+          }
+        >
+          <ContextMenuButton
+            icon={MdSchedule}
+            onClick={timeoutMember}
+            destructive
+          >
+            <Trans>Timeout member</Trans>
+          </ContextMenuButton>
+        </Show>
+        <Show
+          when={
+            !props.user.self &&
+            props.member?.server?.havePermission("TimeoutMembers") &&
+            props.member.inferiorTo(props.member.server.member!) &&
+            props.member.timeout
+          }
+        >
+          <ContextMenuButton
+            icon={MdHistoryToggleOff}
+            onClick={removeTimeoutForMember}
+            destructive
+          >
+            <Trans>Remove timeout</Trans>
+          </ContextMenuButton>
+        </Show>
         <Show
           when={
             !props.user.self &&

packages/client/components/modal/modals.tsx

@@ -53,6 +53,7 @@ import { UserProfileModal } from "./modals/UserProfile";
 import { UserProfileMutualFriendsModal } from "./modals/UserProfileMutualFriends";
 import { UserProfileMutualGroupsModal } from "./modals/UserProfileMutualGroups";
 import { UserProfileRolesModal } from "./modals/UserProfileRoles";
+import { TimeoutMemberModal } from "./modals/TimeoutMemberModal";
 
 /**
  * Render the modal
@@ -79,6 +80,8 @@ export function RenderModal(props: ActiveModal & { onClose: () => void }) {
       return <BanMemberModal {...modalProps} />;
     case "ban_non_member":
       return <BanNonMemberModal {...modalProps} />;
+    case "timeout_member":
+      return <TimeoutMemberModal {...modalProps} />;
     case "changelog":
       return <ChangelogModal {...modalProps} />;
     case "add_members_to_group":

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

@@ -0,0 +1,85 @@
+import { For, createSignal } from "solid-js";
+
+import { Trans } from "@lingui-solid/solid/macro";
+import { t } from "@lingui/core/macro";
+import { useMutation } from "@tanstack/solid-query";
+
+import {
+  Avatar,
+  Chip,
+  Column,
+  Dialog,
+  DialogProps,
+  InputTimePicker,
+  Row,
+  Text,
+  toOffset,
+} from "@revolt/ui";
+
+import { useModals } from "..";
+import { Modals } from "../types";
+
+/**
+ * Timeout a server member
+ */
+export function TimeoutMemberModal(
+  props: DialogProps & Modals & { type: "timeout_member" },
+) {
+  const { showError } = useModals();
+
+  const [offset, setOffset] = createSignal(0);
+
+  const presets = [
+    // Translations are not handled within the InputTimePicker component due to limitations in how useTime() is implemented
+    { label: t`30 Minutes`, value: 1800 * 1000 },
+    { label: t`1 Hour`, value: 3600 * 1000 },
+    { label: t`12 Hours`, value: 43200 * 1000 },
+    { label: t`1 Day`, value: 86400 * 1000 },
+    { label: t`1 Week`, value: 604800 * 1000 },
+  ];
+
+  const timeout = useMutation(() => ({
+    mutationFn: () =>
+      props.member.edit({
+        timeout: new Date(Date.now() + offset()).toISOString(),
+      }),
+    onError: showError,
+  }));
+
+  return (
+    <Dialog
+      show={props.show}
+      onClose={props.onClose}
+      title={
+        <Column align>
+          <Trans>Timeout Member</Trans>
+        </Column>
+      }
+      actions={[
+        { text: <Trans>Cancel</Trans> },
+        {
+          text: <Trans>Apply</Trans>,
+          onClick: timeout.mutateAsync,
+        },
+      ]}
+      isDisabled={timeout.isPending}
+    >
+      <Column align>
+        <Avatar src={props.member.user?.animatedAvatarURL} size={64} />
+        <Text>
+          <Trans>
+            You are about to timeout {props.member.user?.username} (You can undo
+            this via the context menu)
+          </Trans>
+        </Text>
+        <Column align>
+          <InputTimePicker
+            assistChips={presets}
+            includeDays
+            onChange={setOffset}
+          />
+        </Column>
+      </Column>
+    </Dialog>
+  );
+}

packages/client/components/modal/types.ts

@@ -303,4 +303,8 @@ export type Modals =
     }
   | {
       type: "import_theme";
+    }
+  | {
+      type: "timeout_member"
+      member: ServerMember
     };

packages/client/components/ui/components/design/Chip.tsx

@@ -0,0 +1,35 @@
+import type { JSX } from "solid-js";
+import { splitProps } from "solid-js";
+
+import "mdui/components/chip.js";
+
+// [TODO] Better type definition for chip props, use https://www.mdui.org/en/docs/2/components/chip#attributes as reference
+
+type Props = Omit<
+  JSX.HTMLAttributes<HTMLInputElement>,
+  "onChange" | "onInput"
+> & {
+  variant: "assist" | "filter" | "input" | "suggestion";
+  children: JSX.Element;
+  elevated?: boolean;
+  icon?: JSX.Element;
+  iconSelected?: JSX.Element;
+  iconEnd?: JSX.Element;
+  disabled?: boolean;
+  loading?: boolean;
+  selectable?: boolean;
+  deletable?: boolean;
+  selected?: boolean;
+  value?: any;
+};
+
+/**
+ * Chips are compact elements that represent an input, attribute, or action.
+ *
+ * @library MDUI
+ * @specification https://m3.material.io/components/chips
+ */
+export function Chip(props: Props) {
+  const [local, others] = splitProps(props, ["children"]);
+  return <mdui-chip {...others}>{local.children}</mdui-chip>;
+}