feat(@ui): port Modal component

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 (
-            <Modal
-                visible
-                border={dummy}
-                padding={false}
-                onClose={onClose}
-                dontModal={dummy}>
+        const children = (
+            <>
                 <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>
         );
     },