feat: port DeleteMessage and Confirmation

src/pages/channels/messaging/MessageEditor.tsx

@@ -14,6 +14,7 @@ import {
 import AutoComplete, {
     useAutoComplete,
 } from "../../../components/common/AutoComplete";
+import { modalController } from "../../../controllers/modals/ModalController";
 
 const EditorBase = styled.div`
     display: flex;
@@ -50,14 +51,12 @@ interface Props {
 export default function MessageEditor({ message, finish }: Props) {
     const [content, setContent] = useState(message.content ?? "");
     const { focusTaken } = useContext(IntermediateContext);
-    const { openScreen } = useIntermediate();
 
     async function save() {
         finish();
 
         if (content.length === 0) {
-            openScreen({
-                id: "special_prompt",
+            modalController.push({
                 type: "delete_message",
                 target: message,
             });

src/pages/channels/voice/VoiceHeader.tsx

@@ -21,6 +21,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import Tooltip from "../../../components/common/Tooltip";
 import UserIcon from "../../../components/common/user/UserIcon";
 import { useClient } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
 
 interface Props {
     id: string;
@@ -100,26 +101,27 @@ export default observer(({ id }: Props) => {
             <div className="participants">
                 {users && users.length !== 0
                     ? users.map((user, index) => {
-                          const id = keys![index];
+                          const user_id = keys![index];
                           return (
-                              <div key={id}>
+                              <div key={user_id}>
                                   <UserIcon
                                       size={80}
                                       target={user}
                                       status={false}
                                       voice={
-                                          client.user?._id === id &&
+                                          client.user?._id === user_id &&
                                           voiceState.isDeaf()
                                               ? "deaf"
-                                              : voiceState.participants!.get(id)
-                                                    ?.audio
+                                              : voiceState.participants!.get(
+                                                    user_id,
+                                                )?.audio
                                               ? undefined
                                               : "muted"
                                       }
                                       onClick={() =>
-                                          openScreen({
-                                              id: "profile",
-                                              user_id: id,
+                                          modalController.push({
+                                              type: "user_profile",
+                                              user_id,
                                           })
                                       }
                                   />

src/pages/friends/Friend.tsx

@@ -102,8 +102,7 @@ export const Friend = observer(({ user }: Props) => {
                     stopPropagation(
                         ev,
                         user.relationship === "Friend"
-                            ? openScreen({
-                                  id: "special_prompt",
+                            ? modalController.push({
                                   type: "unfriend_user",
                                   target: user,
                               })

src/pages/settings/ServerSettings.tsx

@@ -20,6 +20,7 @@ import { useIntermediate } from "../../context/intermediate/Intermediate";
 import ButtonItem from "../../components/navigation/items/ButtonItem";
 import { useClient } from "../../controllers/client/ClientController";
 import RequiresOnline from "../../controllers/client/jsx/RequiresOnline";
+import { modalController } from "../../controllers/modals/ModalController";
 import { GenericSettings } from "./GenericSettings";
 import { Bans } from "./server/Bans";
 import { Categories } from "./server/Categories";
@@ -132,8 +133,7 @@ export default observer(() => {
                         <LineDivider />
                         <ButtonItem
                             onClick={() =>
-                                openScreen({
-                                    id: "special_prompt",
+                                modalController.push({
                                     type: "delete_server",
                                     target: server,
                                 })

src/pages/settings/panes/MyBots.tsx

@@ -218,8 +218,8 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                                 target={user}
                                 size={42}
                                 onClick={() =>
-                                    openScreen({
-                                        id: "profile",
+                                    modalController.push({
+                                        type: "user_profile",
                                         user_id: user._id,
                                     })
                                 }
@@ -460,8 +460,7 @@ function BotCard({ bot, onDelete, onUpdate }: Props) {
                             palette="error"
                             onClick={async () => {
                                 setSaving(true);
-                                openScreen({
-                                    id: "special_prompt",
+                                modalController.push({
                                     type: "delete_bot",
                                     target: bot._id,
                                     name: user.username,
@@ -508,16 +507,14 @@ export const MyBots = observer(() => {
         // eslint-disable-next-line
     }, []);
 
-    const { openScreen } = useIntermediate();
-
     return (
         <div className={styles.myBots}>
             <CategoryButton
                 account
                 icon={<Plus size={24} />}
                 onClick={() =>
-                    openScreen({
-                        id: "create_bot",
+                    modalController.push({
+                        type: "create_bot",
                         onCreate: (bot) => setBots([...(bots ?? []), bot]),
                     })
                 }

src/pages/settings/server/Categories.tsx

@@ -17,6 +17,7 @@ import { noop } from "../../../lib/js";
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 import ChannelIcon from "../../../components/common/ChannelIcon";
+import { modalController } from "../../../controllers/modals/ModalController";
 
 const KanbanEntry = styled.div`
     padding: 2px 4px;
@@ -449,8 +450,7 @@ function ListElement({
                             </Droppable>
                             <KanbanListHeader
                                 onClick={() =>
-                                    openScreen({
-                                        id: "special_prompt",
+                                    modalController.push({
                                         type: "create_channel",
                                         target: server,
                                         cb: addChannel,