feat(@ui): port Modal component

src/components/ui/Modal.tsx

@@ -1,263 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import styled, { css, keyframes } from "styled-components/macro";
-
-import { createPortal, useCallback, useEffect, useState } from "preact/compat";
-
-import { Button } from "@revoltchat/ui";
-import { Props as ButtonProps } from "@revoltchat/ui/esm/components/design/atoms/inputs/Button";
-
-import { internalSubscribe } from "../../lib/eventEmitter";
-
-import { Children } from "../../types/Preact";
-
-const open = keyframes`
-    0% {opacity: 0;}
-    70% {opacity: 0;}
-    100% {opacity: 1;}
-`;
-
-const close = keyframes`
-    0% {opacity: 1;}
-    70% {opacity: 0;}
-    100% {opacity: 0;}
-`;
-
-const zoomIn = keyframes`
-    0% {transform: scale(0.5);}
-    98% {transform: scale(1.01);}
-    100% {transform: scale(1);}
-`;
-
-const zoomOut = keyframes`
-    0% {transform: scale(1);}
-    100% {transform: scale(0.5);}
-`;
-
-const ModalBase = styled.div`
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
-    position: fixed;
-    max-height: 100%;
-    user-select: none;
-
-    animation-name: ${open};
-    animation-duration: 0.2s;
-
-    display: grid;
-    overflow-y: auto;
-    place-items: center;
-
-    color: var(--foreground);
-    background: rgba(0, 0, 0, 0.8);
-
-    &.closing {
-        animation-name: ${close};
-        animation-fill-mode: forwards;
-    }
-
-    &.closing > div {
-        animation-name: ${zoomOut};
-    }
-`;
-
-const ModalContainer = styled.div`
-    overflow: hidden;
-    max-width: calc(100vw - 20px);
-    border-radius: var(--border-radius);
-
-    animation-name: ${zoomIn};
-    animation-duration: 0.25s;
-    animation-timing-function: cubic-bezier(0.3, 0.3, 0.18, 1.1);
-`;
-
-const ModalContent = styled.div<
-    { [key in "attachment" | "noBackground" | "border" | "padding"]?: boolean }
->`
-    text-overflow: ellipsis;
-    border-radius: var(--border-radius);
-
-    h3 {
-        font-size: 14px;
-        text-transform: uppercase;
-        margin: 0;
-        margin-bottom: 10px;
-        color: var(--foreground);
-    }
-
-    h5 {
-        margin: 0;
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--secondary-foreground);
-    }
-
-    form {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-
-        > div {
-            margin: 0;
-            color: var(--secondary-foreground);
-            font-size: 12px;
-        }
-    }
-
-    .description {
-        color: var(--tertiary-foreground);
-        font-size: 90%;
-    }
-
-    ${(props) =>
-        !props.noBackground &&
-        css`
-            background: var(--secondary-header);
-        `}
-
-    ${(props) =>
-        props.padding &&
-        css`
-            padding: 1rem;
-            min-width: 450px;
-        `}
-
-    ${(props) =>
-        props.attachment &&
-        css`
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
-        `}
-
-    ${(props) =>
-        props.border &&
-        css`
-            border-radius: var(--border-radius);
-            border: 2px solid var(--secondary-background);
-        `}
-`;
-
-const ModalActions = styled.div`
-    gap: 8px;
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 1rem;
-    background: var(--secondary-background);
-    border-radius: 0 0 var(--border-radius) var(--border-radius);
-`;
-
-export type Action = Omit<
-    JSX.HTMLAttributes<HTMLButtonElement>,
-    "as" | "onClick"
-> & {
-    palette?: ButtonProps["palette"];
-    confirmation?: boolean;
-    onClick: () => void;
-};
-
-interface Props {
-    children?: Children;
-    title?: Children;
-    description?: Children;
-
-    disallowClosing?: boolean;
-    noBackground?: boolean;
-    dontModal?: boolean;
-    padding?: boolean;
-
-    onClose?: () => void;
-    actions?: Action[];
-    disabled?: boolean;
-    palette?: ButtonProps["palette"];
-    border?: boolean;
-    visible: boolean;
-}
-
-export let isModalClosing = false;
-
-export default function Modal(props: Props) {
-    if (!props.visible) return null;
-
-    const content = (
-        <ModalContent
-            attachment={!!props.actions}
-            noBackground={props.noBackground}
-            border={props.border}
-            padding={props.padding ?? !props.dontModal}>
-            {props.title && <h3>{props.title}</h3>}
-
-            {props.description && <h5>{props.description}</h5>}
-            {props.children}
-        </ModalContent>
-    );
-
-    if (props.dontModal) {
-        return content;
-    }
-
-    const [animateClose, setAnimateClose] = useState(false);
-    isModalClosing = animateClose;
-    const onClose = useCallback(() => {
-        setAnimateClose(true);
-        setTimeout(() => props.onClose!(), 2e2);
-    }, [setAnimateClose, props]);
-
-    useEffect(() => internalSubscribe("Modal", "close", onClose), [onClose]);
-
-    useEffect(() => {
-        if (props.disallowClosing) return;
-
-        function keyDown(e: KeyboardEvent) {
-            if (e.key === "Escape") {
-                onClose();
-            }
-        }
-
-        document.body.addEventListener("keydown", keyDown);
-        return () => document.body.removeEventListener("keydown", keyDown);
-    }, [props.disallowClosing, onClose]);
-
-    const confirmationAction = props.actions?.find(
-        (action) => action.confirmation,
-    );
-
-    useEffect(() => {
-        if (!confirmationAction) return;
-
-        // ! TODO: this may be done better if we
-        // ! can focus the button although that
-        // ! doesn't seem to work...
-        function keyDown(e: KeyboardEvent) {
-            if (e.key === "Enter") {
-                confirmationAction!.onClick();
-            }
-        }
-
-        document.body.addEventListener("keydown", keyDown);
-        return () => document.body.removeEventListener("keydown", keyDown);
-    }, [confirmationAction]);
-
-    return createPortal(
-        <ModalBase
-            className={animateClose ? "closing" : undefined}
-            onClick={(!props.disallowClosing && props.onClose) || undefined}>
-            <ModalContainer onClick={(e) => (e.cancelBubble = true)}>
-                {content}
-                {props.actions && (
-                    <ModalActions>
-                        {props.actions.map((x, index) => (
-                            <Button
-                                palette={props.palette}
-                                key={index}
-                                {...x}
-                                disabled={props.disabled}
-                            />
-                        ))}
-                    </ModalActions>
-                )}
-            </ModalContainer>
-        </ModalBase>,
-        document.body,
-    );
-}

src/context/intermediate/Intermediate.tsx

@@ -5,13 +5,13 @@ import { API, Channel, Message, Server, User } from "revolt.js";
 import { createContext } from "preact";
 import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 
+import type { Action } from "@revoltchat/ui/esm/components/design/atoms/layout/Modal";
+
 import { internalSubscribe } from "../../lib/eventEmitter";
 import { determineLink } from "../../lib/links";
 
 import { useApplicationState } from "../../mobx/State";
 
-import { Action } from "../../components/ui/Modal";
-
 import { Children } from "../../types/Preact";
 import Modals from "./Modals";
 
@@ -24,7 +24,7 @@ export type Screen =
     | { id: "clipboard"; text: string }
     | { id: "token_reveal"; token: string; username: string }
     | { id: "external_link_prompt"; link: string }
-    | { id: "sessions", confirm: () => void }
+    | { id: "sessions"; confirm: () => void }
     | {
           id: "_prompt";
           question: Children;

src/context/intermediate/Modals.tsx

@@ -1,16 +1,15 @@
 import { internalEmit } from "../../lib/eventEmitter";
 
-import { isModalClosing } from "../../components/ui/Modal";
+//import { isModalClosing } from "../../components/ui/Modal";
-
 import { Screen } from "./Intermediate";
 import { ClipboardModal } from "./modals/Clipboard";
 import { ErrorModal } from "./modals/Error";
+import { ExternalLinkModal } from "./modals/ExternalLinkPrompt";
 import { InputModal } from "./modals/Input";
 import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
-import { SignedOutModal } from "./modals/SignedOut";
-import { ExternalLinkModal} from "./modals/ExternalLinkPrompt";
 import { SessionsModal } from "./modals/SessionsPrompt";
+import { SignedOutModal } from "./modals/SignedOut";
 import { TokenRevealModal } from "./modals/TokenReveal";
 
 export interface Props {
@@ -20,9 +19,9 @@ export interface Props {
 
 export default function Modals({ screen, openScreen }: Props) {
     const onClose = () =>
-        isModalClosing || screen.id === "onboarding"
+        //isModalClosing || screen.id === "onboarding"
-            ? openScreen({ id: "none" })
+        openScreen({ id: "none" });
-            : internalEmit("Modal", "close");
+    //            : internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "_prompt":

src/context/intermediate/Popovers.tsx

@@ -2,8 +2,6 @@ import { useContext } from "preact/hooks";
 
 import { internalEmit } from "../../lib/eventEmitter";
 
-import { isModalClosing } from "../../components/ui/Modal";
-
 import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
@@ -21,9 +19,9 @@ export default function Popovers() {
     const { openScreen } = useIntermediate();
 
     const onClose = () =>
-        isModalClosing
+        //isModalClosing
-            ? openScreen({ id: "none" })
+        openScreen({ id: "none" });
-            : internalEmit("Modal", "close");
+    //: internalEmit("Modal", "close");
 
     switch (screen.id) {
         case "profile":

src/context/intermediate/modals/Clipboard.tsx

@@ -1,6 +1,6 @@
 import { Text } from "preact-i18n";
 
-import Modal from "../../../components/ui/Modal";
+import { Modal } from "@revoltchat/ui";
 
 interface Props {
     onClose: () => void;
@@ -10,7 +10,6 @@ interface Props {
 export function ClipboardModal({ onClose, text }: Props) {
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={<Text id="app.special.modals.clipboard.unavailable" />}
             actions={[

src/context/intermediate/modals/Error.tsx

@@ -1,6 +1,6 @@
 import { Text } from "preact-i18n";
 
-import Modal from "../../../components/ui/Modal";
+import { Modal } from "@revoltchat/ui";
 
 interface Props {
     onClose: () => void;
@@ -10,7 +10,6 @@ interface Props {
 export function ErrorModal({ onClose, error }: Props) {
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={<Text id="app.special.modals.error" />}
             actions={[

src/context/intermediate/modals/ExternalLinkPrompt.tsx

@@ -1,8 +1,8 @@
 import { Text } from "preact-i18n";
 
-import { useApplicationState } from "../../../mobx/State";
+import { Modal } from "@revoltchat/ui";
 
-import Modal from "../../../components/ui/Modal";
+import { useApplicationState } from "../../../mobx/State";
 
 import { useIntermediate } from "../Intermediate";
 
@@ -17,7 +17,6 @@ export function ExternalLinkModal({ onClose, link }: Props) {
 
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={<Text id={"app.special.modals.external_links.title"} />}
             actions={[

src/context/intermediate/modals/Input.tsx

@@ -4,9 +4,8 @@ import { Server } from "revolt.js";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import { Category, InputBox } from "@revoltchat/ui";
+import { Category, InputBox, Modal } from "@revoltchat/ui";
 
-import Modal from "../../../components/ui/Modal";
 import { Children } from "../../../types/Preact";
 import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
@@ -35,7 +34,6 @@ export function InputModal({
 
     return (
         <Modal
-            visible={true}
             title={question}
             description={description}
             disabled={processing}

src/context/intermediate/modals/Prompt.tsx

@@ -7,13 +7,13 @@ import styles from "./Prompt.module.scss";
 import { Text } from "preact-i18n";
 import { useContext, useEffect, useState } from "preact/hooks";
 
-import { Category, Error, InputBox, Radio } from "@revoltchat/ui";
+import { Category, Modal, InputBox, Radio } from "@revoltchat/ui";
+import type { Action } from "@revoltchat/ui/esm/components/design/atoms/layout/Modal";
 
 import { TextReact } from "../../../lib/i18n";
 
 import Message from "../../../components/common/messaging/Message";
 import UserIcon from "../../../components/common/user/UserIcon";
-import Modal, { Action } from "../../../components/ui/Modal";
 import { Children } from "../../../types/Preact";
 import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
@@ -39,7 +39,6 @@ export function PromptModal({
 }: Props) {
     return (
         <Modal
-            visible={true}
             title={question}
             actions={actions}
             onClose={onClose}

src/context/intermediate/modals/SessionsPrompt.tsx

@@ -1,6 +1,6 @@
 import { Text } from "preact-i18n";
 
-import Modal from "../../../components/ui/Modal";
+import { Modal } from "@revoltchat/ui";
 
 interface Props {
     onClose: () => void;
@@ -10,7 +10,6 @@ interface Props {
 export function SessionsModal({ onClose, confirm }: Props) {
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={<Text id={"app.special.modals.sessions.title"} />}
             actions={[

src/context/intermediate/modals/SignedOut.tsx

@@ -1,6 +1,6 @@
 import { Text } from "preact-i18n";
 
-import Modal from "../../../components/ui/Modal";
+import { Modal } from "@revoltchat/ui";
 
 interface Props {
     onClose: () => void;
@@ -9,7 +9,6 @@ interface Props {
 export function SignedOutModal({ onClose }: Props) {
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={<Text id="app.special.modals.signed_out" />}
             actions={[

src/context/intermediate/modals/TokenReveal.tsx

@@ -1,6 +1,6 @@
 import { Text } from "preact-i18n";
 
-import Modal from "../../../components/ui/Modal";
+import { Modal } from "@revoltchat/ui";
 
 interface Props {
     onClose: () => void;
@@ -11,7 +11,6 @@ interface Props {
 export function TokenRevealModal({ onClose, token, username }: Props) {
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={
                 <Text

src/context/intermediate/popovers/ChannelInfo.tsx

@@ -4,7 +4,7 @@ import { Channel } from "revolt.js";
 
 import styles from "./ChannelInfo.module.scss";
 
-import Modal from "../../../components/ui/Modal";
+import { Modal } from "@revoltchat/ui";
 
 import Markdown from "../../../components/markdown/Markdown";
 import { getChannelName } from "../../revoltjs/util";
@@ -24,7 +24,7 @@ export const ChannelInfo = observer(({ channel, onClose }: Props) => {
     }
 
     return (
-        <Modal visible={true} onClose={onClose}>
+        <Modal onClose={onClose}>
             <div className={styles.info}>
                 <div className={styles.header}>
                     <h1>{getChannelName(channel, true)}</h1>

src/context/intermediate/popovers/CreateBot.tsx

@@ -4,9 +4,8 @@ import { API } from "revolt.js";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import { Category } from "@revoltchat/ui";
+import { Category, Modal } from "@revoltchat/ui";
 
-import Modal from "../../../components/ui/Modal";
 import FormField from "../../../pages/login/FormField";
 import { I18nError } from "../../Locale";
 import { AppContext } from "../../revoltjs/RevoltClient";
@@ -38,7 +37,6 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
 
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={<Text id="app.special.popovers.create_bot.title" />}
             actions={[

src/context/intermediate/popovers/ImageViewer.tsx

@@ -3,10 +3,10 @@ import { API } from "revolt.js";
 
 import styles from "./ImageViewer.module.scss";
 
+import { Modal } from "@revoltchat/ui";
+
 import AttachmentActions from "../../../components/common/messaging/attachments/AttachmentActions";
 import EmbedMediaActions from "../../../components/common/messaging/embed/EmbedMediaActions";
-import Modal from "../../../components/ui/Modal";
-
 import { useClient } from "../../revoltjs/RevoltClient";
 
 interface Props {
@@ -28,7 +28,7 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
     const client = useClient();
 
     return (
-        <Modal visible={true} onClose={onClose} noBackground>
+        <Modal onClose={onClose} transparent maxHeight="100vh" maxWidth="100vw">
             <div className={styles.viewer}>
                 {attachment && (
                     <>

src/context/intermediate/popovers/ModifyAccount.tsx

@@ -3,9 +3,8 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { Text } from "preact-i18n";
 import { useContext, useState } from "preact/hooks";
 
-import { Category, Error } from "@revoltchat/ui";
+import { Category, Error, Modal } from "@revoltchat/ui";
 
-import Modal from "../../../components/ui/Modal";
 import FormField from "../../../pages/login/FormField";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
@@ -69,7 +68,6 @@ export function ModifyAccountModal({ onClose, field }: Props) {
 
     return (
         <Modal
-            visible={true}
             onClose={onClose}
             title={<Text id={`app.special.modals.account.change.${field}`} />}
             disabled={processing}

src/context/intermediate/popovers/PendingRequests.tsx

@@ -4,7 +4,7 @@ import { User } from "revolt.js";
 import styles from "./UserPicker.module.scss";
 import { Text } from "preact-i18n";
 
-import Modal from "../../../components/ui/Modal";
+import { Modal } from "@revoltchat/ui";
 
 import { Friend } from "../../../pages/friends/Friend";
 
@@ -16,7 +16,6 @@ interface Props {
 export const PendingRequests = observer(({ users, onClose }: Props) => {
     return (
         <Modal
-            visible={true}
             title={<Text id="app.special.friends.pending" />}
             onClose={onClose}>
             <div className={styles.list}>

src/context/intermediate/popovers/ServerIdentityModal.tsx

@@ -5,11 +5,10 @@ import styles from "./ServerIdentityModal.module.scss";
 import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
-import { Button, Category, InputBox } from "@revoltchat/ui";
+import { Button, Category, InputBox, Modal } from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
-import Modal from "../../../components/ui/Modal";
 import { FileUploader } from "../../revoltjs/FileUploads";
 import { useClient } from "../../revoltjs/RevoltClient";
 
@@ -36,7 +35,6 @@ export const ServerIdentityModal = observer(({ server, onClose }: Props) => {
 
     return (
         <Modal
-            visible={true}
             title={
                 <Text
                     id={"app.special.popovers.server_identity.title"}

src/context/intermediate/popovers/UserPicker.tsx

@@ -2,8 +2,9 @@ import styles from "./UserPicker.module.scss";
 import { Text } from "preact-i18n";
 import { useState } from "preact/hooks";
 
+import { Modal } from "@revoltchat/ui";
+
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
-import Modal from "../../../components/ui/Modal";
 import { useClient } from "../../revoltjs/RevoltClient";
 
 interface Props {
@@ -20,7 +21,6 @@ export function UserPicker(props: Props) {
 
     return (
         <Modal
-            visible={true}
             title={<Text id="app.special.popovers.user_picker.select" />}
             onClose={props.onClose}
             actions={[

src/context/intermediate/popovers/UserProfile.tsx

@@ -15,7 +15,14 @@ import styles from "./UserProfile.module.scss";
 import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect, useLayoutEffect, useState } from "preact/hooks";
 
-import { Button, Category, Error, IconButton, Preloader } from "@revoltchat/ui";
+import {
+    Button,
+    Category,
+    Error,
+    IconButton,
+    Modal,
+    Preloader,
+} from "@revoltchat/ui";
 
 import { noop } from "../../../lib/js";
 
@@ -27,7 +34,6 @@ import UserIcon from "../../../components/common/user/UserIcon";
 import { Username } from "../../../components/common/user/UserShort";
 import UserStatus from "../../../components/common/user/UserStatus";
 import Markdown from "../../../components/markdown/Markdown";
-import Modal from "../../../components/ui/Modal";
 import {
     ClientStatus,
     StatusContext,
@@ -143,13 +149,8 @@ export const UserProfile = observer(
         const badges = user.badges ?? 0;
         const flags = user.flags ?? 0;
 
-        return (
+        const children = (
-            <Modal
+            <>
-                visible
-                border={dummy}
-                padding={false}
-                onClose={onClose}
-                dontModal={dummy}>
                 <div
                     className={styles.header}
                     data-force={profile?.background ? "light" : undefined}
@@ -437,6 +438,18 @@ export const UserProfile = observer(
                             </div>
                         ))}
                 </div>
+            </>
+        );
+
+        if (dummy) return <div>{children}</div>;
+
+        return (
+            <Modal
+                onClose={onClose}
+                nonDismissable={dummy}
+                transparent
+                maxWidth="560px">
+                {children}
             </Modal>
         );
     },

src/pages/settings/panes/Panes.module.scss

@@ -128,8 +128,9 @@
         border-radius: var(--border-radius);
         width: 100%;
         display: flex;
-        display: grid;
+        flex-direction: column;
-        place-items: center;
+        align-items: center;
+        justify-content: center;
         grid-template-columns: minmax(auto, 100%);
 
         > div {