feat: port UserProfile, Onboarding, CreateBot to legacy

src/components/common/messaging/Message.tsx

@@ -15,7 +15,7 @@ import { QueuedMessage } from "../../../mobx/stores/MessageQueue";
 import { I18nError } from "../../../context/Locale";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
-import { useClient } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
 import Markdown from "../../markdown/Markdown";
 import UserIcon from "../user/UserIcon";
 import { Username } from "../user/UserShort";
@@ -70,7 +70,10 @@ const Message = observer(
             : undefined;
 
         const openProfile = () =>
-            openScreen({ id: "profile", user_id: message.author_id });
+            modalController.push({
+                type: "user_profile",
+                user_id: message.author_id,
+            });
 
         const handleUserClick = (e: MouseEvent) => {
             if (e.shiftKey && user?._id) {

src/components/common/user/UserShort.tsx

@@ -8,9 +8,8 @@ import { Text } from "preact-i18n";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-
 import { useClient } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
 import UserIcon from "./UserIcon";
 
 const BotBadge = styled.div`
@@ -125,9 +124,9 @@ export default function UserShort({
     masquerade?: API.Masquerade;
     showServerIdentity?: boolean;
 }) {
-    const { openScreen } = useIntermediate();
     const openProfile = () =>
-        user && openScreen({ id: "profile", user_id: user._id });
+        user &&
+        modalController.push({ type: "user_profile", user_id: user._id });
 
     const handleUserClick = (e: MouseEvent) => {
         if (e.shiftKey && user?._id) {

src/components/navigation/right/MemberList.tsx

@@ -8,11 +8,7 @@ import { memo } from "preact/compat";
 
 import { internalEmit } from "../../../lib/eventEmitter";
 
-import {
+import { modalController } from "../../../controllers/modals/ModalController";
-    Screen,
-    useIntermediate,
-} from "../../../context/intermediate/Intermediate";
-
 import { UserButton } from "../items/ButtonItem";
 
 export type MemberListGroup = {
@@ -55,15 +51,7 @@ const NoOomfie = styled.div`
 `;
 
 const ItemContent = memo(
-    ({
+    ({ item, context }: { item: User; context: Channel }) => (
-        item,
-        context,
-        openScreen,
-    }: {
-        item: User;
-        context: Channel;
-        openScreen: (screen: Screen) => void;
-    }) => (
         <UserButton
             key={item._id}
             user={item}
@@ -77,13 +65,12 @@ const ItemContent = memo(
                         `<@${item._id}>`,
                         "mention",
                     );
-                } else
+                } else {
-                    [
+                    modalController.push({
-                        openScreen({
+                        type: "user_profile",
-                            id: "profile",
+                        user_id: item._id,
-                            user_id: item._id,
+                    });
-                        }),
+                }
-                    ];
             }}
         />
     ),
@@ -96,8 +83,6 @@ export default function MemberList({
     entries: MemberListGroup[];
     context: Channel;
 }) {
-    const { openScreen } = useIntermediate();
-
     return (
         <GroupedVirtuoso
             groupCounts={entries.map((x) => x.users.length)}
@@ -137,7 +122,8 @@ export default function MemberList({
                                 server, see issue{" "}
                                 <a
                                     href="https://github.com/revoltchat/delta/issues/128"
-                                    target="_blank" rel="noreferrer">
+                                    target="_blank"
+                                    rel="noreferrer">
                                     #128
                                 </a>{" "}
                                 for when this will be resolved.
@@ -158,11 +144,7 @@ export default function MemberList({
 
                 return (
                     <div>
-                        <ItemContent
+                        <ItemContent item={item} context={context} />
-                            item={item}
-                            context={context}
-                            openScreen={openScreen}
-                        />
                     </div>
                 );
             }}

src/context/intermediate/Intermediate.tsx

@@ -159,7 +159,7 @@ export default function Intermediate(props: Props) {
 
     useEffect(() => {
         const openProfile = (user_id: string) =>
-            openScreen({ id: "profile", user_id });
+            modalController.push({ type: "user_profile", user_id });
         const navigate = (path: string) => history.push(path);
 
         const subs = [

src/context/intermediate/Modals.tsx

@@ -1,7 +1,6 @@
 //import { isModalClosing } from "../../components/ui/Modal";
 import { Screen } from "./Intermediate";
 import { InputModal } from "./modals/Input";
-import { OnboardingModal } from "./modals/Onboarding";
 import { PromptModal } from "./modals/Prompt";
 
 export interface Props {
@@ -20,8 +19,6 @@ export default function Modals({ screen, openScreen }: Props) {
             return <PromptModal onClose={onClose} {...screen} />;
         case "_input":
             return <InputModal onClose={onClose} {...screen} />;
-        case "onboarding":
-            return <OnboardingModal onClose={onClose} {...screen} />;
     }
 
     return null;

src/context/intermediate/Popovers.tsx

@@ -3,9 +3,6 @@ import { useContext } from "preact/hooks";
 import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { SpecialInputModal } from "./modals/Input";
 import { SpecialPromptModal } from "./modals/Prompt";
-import { CreateBotModal } from "./popovers/CreateBot";
-import { UserPicker } from "./popovers/UserPicker";
-import { UserProfile } from "./popovers/UserProfile";
 
 export default function Popovers() {
     const { screen } = useContext(IntermediateContext);
@@ -17,15 +14,6 @@ export default function Popovers() {
     //: internalEmit("Modal", "close");
 
     switch (screen.id) {
-        case "profile":
-            // @ts-expect-error someone figure this out :)
-            return <UserProfile {...screen} onClose={onClose} />;
-        case "user_picker":
-            // @ts-expect-error someone figure this out :)
-            return <UserPicker {...screen} onClose={onClose} />;
-        case "create_bot":
-            // @ts-expect-error someone figure this out :)
-            return <CreateBotModal onClose={onClose} {...screen} />;
         case "special_prompt":
             // @ts-expect-error someone figure this out :)
             return <SpecialPromptModal onClose={onClose} {...screen} />;

src/controllers/client/Session.tsx

@@ -5,6 +5,8 @@ import { state } from "../../mobx/State";
 
 import { __thisIsAHack } from "../../context/intermediate/Intermediate";
 
+import { modalController } from "../modals/ModalController";
+
 /**
  * Current lifecycle state
  */
@@ -189,8 +191,8 @@ export default class Session {
                     );
 
                     if (onboarding) {
-                        __thisIsAHack({
+                        modalController.push({
-                            id: "onboarding",
+                            type: "onboarding",
                             callback: async (username: string) =>
                                 this.client!.completeOnboarding(
                                     { username },

src/controllers/modals/ModalController.tsx

@@ -16,7 +16,6 @@ import { getApplicationState } from "../../mobx/State";
 import { history } from "../../context/history";
 import { __thisIsAHack } from "../../context/intermediate/Intermediate";
 
-// import { determineLink } from "../../lib/links";
 import Changelog from "./components/Changelog";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
@@ -34,6 +33,10 @@ import ServerInfo from "./components/ServerInfo";
 import ShowToken from "./components/ShowToken";
 import SignOutSessions from "./components/SignOutSessions";
 import SignedOut from "./components/SignedOut";
+import { UserPicker } from "./components/UserPicker";
+import { CreateBotModal } from "./components/legacy/CreateBot";
+import { OnboardingModal } from "./components/legacy/Onboarding";
+import { UserProfile } from "./components/legacy/UserProfile";
 import { Modal } from "./types";
 
 type Components = Record<string, React.FC<any>>;
@@ -191,7 +194,7 @@ class ModalControllerExtended extends ModalController<Modal> {
 
         switch (link.type) {
             case "profile": {
-                __thisIsAHack({ id: "profile", user_id: link.id });
+                this.push({ type: "user_profile", user_id: link.id });
                 break;
             }
             case "navigate": {
@@ -222,6 +225,7 @@ export const modalController = new ModalControllerExtended({
     changelog: Changelog,
     channel_info: ChannelInfo,
     clipboard: Clipboard,
+    create_bot: CreateBotModal,
     error: Error,
     image_viewer: ImageViewer,
     link_warning: LinkWarning,
@@ -229,6 +233,7 @@ export const modalController = new ModalControllerExtended({
     mfa_recovery: MFARecovery,
     mfa_enable_totp: MFAEnableTOTP,
     modify_account: ModifyAccount,
+    onboarding: OnboardingModal,
     out_of_date: OutOfDate,
     pending_friend_requests: PendingFriendRequests,
     server_identity: ServerIdentity,
@@ -236,4 +241,6 @@ export const modalController = new ModalControllerExtended({
     show_token: ShowToken,
     signed_out: SignedOut,
     sign_out_sessions: SignOutSessions,
+    user_picker: UserPicker,
+    user_profile: UserProfile,
 });

src/controllers/modals/components/UserPicker.tsx

@@ -1,41 +1,50 @@
-import styles from "./UserPicker.module.scss";
+import styled from "styled-components";
+
 import { Text } from "preact-i18n";
-import { useState } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
 
 import { Modal } from "@revoltchat/ui";
 
 import UserCheckbox from "../../../components/common/user/UserCheckbox";
-import { useClient } from "../../../controllers/client/ClientController";
+import { useClient } from "../../client/ClientController";
+import { ModalProps } from "../types";
 
-interface Props {
+const List = styled.div`
-    omit?: string[];
+    max-width: 100%;
-    onClose: () => void;
+    max-height: 360px;
-    callback: (users: string[]) => Promise<void>;
+    overflow-y: scroll;
-}
+`;
 
-export function UserPicker(props: Props) {
+export function UserPicker({
+    callback,
+    omit,
+    ...props
+}: ModalProps<"user_picker">) {
     const [selected, setSelected] = useState<string[]>([]);
-    const omit = [...(props.omit || []), "00000000000000000000000000"];
+    const omitted = useMemo(
+        () => new Set([...(omit || []), "00000000000000000000000000"]),
+        [omit],
+    );
 
     const client = useClient();
 
     return (
         <Modal
+            {...props}
             title={<Text id="app.special.popovers.user_picker.select" />}
-            onClose={props.onClose}
             actions={[
                 {
                     children: <Text id="app.special.modals.actions.ok" />,
-                    onClick: () => props.callback(selected).then(() => true),
+                    onClick: () => callback(selected).then(() => true),
                 },
             ]}>
-            <div className={styles.list}>
+            <List>
                 {[...client.users.values()]
                     .filter(
                         (x) =>
                             x &&
                             x.relationship === "Friend" &&
-                            !omit.includes(x._id),
+                            !omitted.has(x._id),
                     )
                     .map((x) => (
                         <UserCheckbox
@@ -53,7 +62,7 @@ export function UserPicker(props: Props) {
                             }}
                         />
                     ))}
-            </div>
+            </List>
         </Modal>
     );
 }

src/controllers/modals/components/legacy/CreateBot.tsx

@@ -6,21 +6,24 @@ import { useState } from "preact/hooks";
 
 import { Category, Modal } from "@revoltchat/ui";
 
-import { useClient } from "../../../controllers/client/ClientController";
+import { noopTrue } from "../../../../lib/js";
-import FormField from "../../../pages/login/FormField";
-import { I18nError } from "../../Locale";
-import { takeError } from "../../revoltjs/util";
 
-interface Props {
+import { I18nError } from "../../../../context/Locale";
-    onClose: () => void;
+import { takeError } from "../../../../context/revoltjs/util";
-    onCreate: (bot: API.Bot) => void;
+
-}
+import FormField from "../../../../pages/login/FormField";
+import { useClient } from "../../../client/ClientController";
+import { modalController } from "../../ModalController";
+import { ModalProps } from "../../types";
 
 interface FormInputs {
     name: string;
 }
 
-export function CreateBotModal({ onClose, onCreate }: Props) {
+export function CreateBotModal({
+    onCreate,
+    ...props
+}: ModalProps<"create_bot">) {
     const client = useClient();
     const { handleSubmit, register, errors } = useForm<FormInputs>();
     const [error, setError] = useState<string | undefined>(undefined);
@@ -29,7 +32,7 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
         try {
             const { bot } = await client.bots.create({ name });
             onCreate(bot);
-            onClose();
+            modalController.close();
         } catch (err) {
             setError(takeError(err));
         }
@@ -37,7 +40,7 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
 
     return (
         <Modal
-            onClose={onClose}
+            {...props}
             title={<Text id="app.special.popovers.create_bot.title" />}
             actions={[
                 {
@@ -51,7 +54,7 @@ export function CreateBotModal({ onClose, onCreate }: Props) {
                 },
                 {
                     palette: "plain",
-                    onClick: onClose,
+                    onClick: noopTrue,
                     children: <Text id="app.special.modals.actions.cancel" />,
                 },
             ]}>

src/controllers/modals/components/legacy/Onboarding.module.scss

@@ -1,5 +1,12 @@
 .onboarding {
-    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    background: var(--background);
+
     display: flex;
     align-items: center;
     flex-direction: column;

src/controllers/modals/components/legacy/Onboarding.tsx

@@ -6,21 +6,21 @@ import { useState } from "preact/hooks";
 
 import { Button, Preloader } from "@revoltchat/ui";
 
+import { takeError } from "../../../../context/revoltjs/util";
+
 import wideSVG from "/assets/wide.svg";
 
-import FormField from "../../../pages/login/FormField";
+import FormField from "../../../../pages/login/FormField";
-import { takeError } from "../../revoltjs/util";
+import { ModalProps } from "../../types";
-
-interface Props {
-    onClose: () => void;
-    callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
-}
 
 interface FormInputs {
     username: string;
 }
 
-export function OnboardingModal({ onClose, callback }: Props) {
+export function OnboardingModal({
+    callback,
+    ...props
+}: ModalProps<"onboarding">) {
     const { handleSubmit, register } = useForm<FormInputs>();
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | undefined>(undefined);
@@ -28,7 +28,7 @@ export function OnboardingModal({ onClose, callback }: Props) {
     const onSubmit: SubmitHandler<FormInputs> = ({ username }) => {
         setLoading(true);
         callback(username, true)
-            .then(() => onClose())
+            .then(() => props.onClose())
             .catch((err: unknown) => {
                 setError(takeError(err));
                 setLoading(false);

src/controllers/modals/components/legacy/UserProfile.tsx

@@ -24,31 +24,27 @@ import {
     Preloader,
 } from "@revoltchat/ui";
 
-import { noop } from "../../../lib/js";
+import { noop } from "../../../../lib/js";
 
-import ChannelIcon from "../../../components/common/ChannelIcon";
+import ChannelIcon from "../../../../components/common/ChannelIcon";
-import ServerIcon from "../../../components/common/ServerIcon";
+import ServerIcon from "../../../../components/common/ServerIcon";
-import Tooltip from "../../../components/common/Tooltip";
+import Tooltip from "../../../../components/common/Tooltip";
-import UserBadges from "../../../components/common/user/UserBadges";
+import UserBadges from "../../../../components/common/user/UserBadges";
-import UserIcon from "../../../components/common/user/UserIcon";
+import UserIcon from "../../../../components/common/user/UserIcon";
-import { Username } from "../../../components/common/user/UserShort";
+import { Username } from "../../../../components/common/user/UserShort";
-import UserStatus from "../../../components/common/user/UserStatus";
+import UserStatus from "../../../../components/common/user/UserStatus";
-import Markdown from "../../../components/markdown/Markdown";
+import Markdown from "../../../../components/markdown/Markdown";
-import { useSession } from "../../../controllers/client/ClientController";
+import { useSession } from "../../../../controllers/client/ClientController";
-import { modalController } from "../../../controllers/modals/ModalController";
+import { modalController } from "../../../../controllers/modals/ModalController";
-import { useIntermediate } from "../Intermediate";
+import { ModalProps } from "../../types";
-
-interface Props {
-    user_id: string;
-    dummy?: boolean;
-    onClose?: () => void;
-    dummyProfile?: API.UserProfile;
-}
 
 export const UserProfile = observer(
-    ({ user_id, onClose, dummy, dummyProfile }: Props) => {
+    ({
-        const { openScreen, writeClipboard } = useIntermediate();
+        user_id,
-
+        dummy,
+        dummyProfile,
+        ...props
+    }: ModalProps<"user_profile">) => {
         const [profile, setProfile] = useState<
             undefined | null | API.UserProfile
         >(undefined);
@@ -66,7 +62,7 @@ export const UserProfile = observer(
 
         const user = client.users.get(user_id);
         if (!user) {
-            if (onClose) useEffect(onClose, []);
+            if (props.onClose) useEffect(props.onClose, []);
             return null;
         }
 
@@ -171,7 +167,7 @@ export const UserProfile = observer(
                                 <span
                                     className={styles.username}
                                     onClick={() =>
-                                        writeClipboard(user.username)
+                                        modalController.writeText(user.username)
                                     }>
                                     @{user.username}
                                 </span>
@@ -187,7 +183,7 @@ export const UserProfile = observer(
                                 <Button
                                     palette="accent"
                                     compact
-                                    onClick={onClose}>
+                                    onClick={props.onClose}>
                                     Add to server
                                 </Button>
                             </Link>
@@ -200,7 +196,7 @@ export const UserProfile = observer(
                                     }>
                                     <IconButton
                                         onClick={() => {
-                                            onClose?.();
+                                            props.onClose?.();
                                             history.push(`/open/${user_id}`);
                                         }}>
                                         <Envelope size={30} />
@@ -211,7 +207,7 @@ export const UserProfile = observer(
                         {user.relationship === "User" && !dummy && (
                             <IconButton
                                 onClick={() => {
-                                    onClose?.();
+                                    props.onClose?.();
                                     history.push(`/settings/profile`);
                                 }}>
                                 <Edit size={28} />
@@ -291,8 +287,8 @@ export const UserProfile = observer(
                                         <div
                                             onClick={() =>
                                                 user.bot &&
-                                                openScreen({
+                                                modalController.push({
-                                                    id: "profile",
+                                                    type: "user_profile",
                                                     user_id: user.bot.owner,
                                                 })
                                             }
@@ -355,8 +351,8 @@ export const UserProfile = observer(
                                             x && (
                                                 <div
                                                     onClick={() =>
-                                                        openScreen({
+                                                        modalController.push({
-                                                            id: "profile",
+                                                            type: "user_profile",
                                                             user_id: x._id,
                                                         })
                                                     }
@@ -436,7 +432,7 @@ export const UserProfile = observer(
 
         return (
             <Modal
-                onClose={onClose}
+                {...props}
                 nonDismissable={dummy}
                 transparent
                 maxWidth="560px">

src/controllers/modals/types.ts

@@ -85,6 +85,28 @@ export type Modal = {
           embed?: API.Image;
           attachment?: API.File;
       }
+    | {
+          type: "user_picker";
+          omit?: string[];
+          callback: (users: string[]) => Promise<void>;
+      }
+    | {
+          type: "user_profile";
+          user_id: string;
+          dummy?: boolean;
+          dummyProfile?: API.UserProfile;
+      }
+    | {
+          type: "create_bot";
+          onCreate: (bot: API.Bot) => void;
+      }
+    | {
+          type: "onboarding";
+          callback: (
+              username: string,
+              loginAfterSuccess?: true,
+          ) => Promise<void>;
+      }
 );
 
 export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {

src/lib/ContextMenus.tsx

@@ -314,7 +314,10 @@ export default function ContextMenus() {
                     break;
 
                 case "view_profile":
-                    openScreen({ id: "profile", user_id: data.user._id });
+                    modalController.push({
+                        type: "user_profile",
+                        user_id: data.user._id,
+                    });
                     break;
 
                 case "message_user":

src/pages/channels/actions/HeaderActions.tsx

@@ -24,6 +24,7 @@ import { SIDEBAR_MEMBERS } from "../../../mobx/stores/Layout";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import UpdateIndicator from "../../../components/common/UpdateIndicator";
+import { modalController } from "../../../controllers/modals/ModalController";
 import { ChannelHeaderProps } from "../ChannelHeader";
 
 const Container = styled.div`
@@ -114,8 +115,8 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
                     <>
                         <IconButton
                             onClick={() =>
-                                openScreen({
+                                modalController.push({
-                                    id: "user_picker",
+                                    type: "user_picker",
                                     omit: channel.recipient_ids!,
                                     callback: async (users) => {
                                         for (const user of users) {

src/pages/friends/Friend.tsx

@@ -18,6 +18,7 @@ import { useIntermediate } from "../../context/intermediate/Intermediate";
 
 import UserIcon from "../../components/common/user/UserIcon";
 import UserStatus from "../../components/common/user/UserStatus";
+import { modalController } from "../../controllers/modals/ModalController";
 
 interface Props {
     user: User;
@@ -128,7 +129,12 @@ export const Friend = observer(({ user }: Props) => {
     return (
         <div
             className={styles.friend}
-            onClick={() => openScreen({ id: "profile", user_id: user._id })}
+            onClick={() =>
+                modalController.push({
+                    type: "user_profile",
+                    user_id: user._id,
+                })
+            }
             {...useTriggerEvents("Menu", {
                 user: user._id,
             })}>

src/pages/settings/panes/Profile.tsx

@@ -12,13 +12,13 @@ import { Button, LineDivider, Tip } from "@revoltchat/ui";
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { useTranslation } from "../../../lib/i18n";
 
-import { UserProfile } from "../../../context/intermediate/popovers/UserProfile";
 import { FileUploader } from "../../../context/revoltjs/FileUploads";
 
 import AutoComplete, {
     useAutoComplete,
 } from "../../../components/common/AutoComplete";
 import { useSession } from "../../../controllers/client/ClientController";
+import { UserProfile } from "../../../controllers/modals/components/legacy/UserProfile";
 
 export const Profile = observer(() => {
     const translate = useTranslation();
@@ -75,6 +75,7 @@ export const Profile = observer(() => {
                     user_id={client.user!._id}
                     dummy={true}
                     dummyProfile={profile}
+                    {...({} as any)}
                 />
             </div>
             {/*<h3>Badges</h3>