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,
                                           })
                                       }
                                   />