feat: port input modals to new system

src/pages/friends/Friends.tsx

@@ -85,8 +85,7 @@ export default observer(() => {
                     <Tooltip content={"Create Group"} placement="bottom">
                         <IconButton
                             onClick={() =>
-                                openScreen({
-                                    id: "special_input",
+                                modalController.push({
                                     type: "create_group",
                                 })
                             }>
@@ -96,8 +95,7 @@ export default observer(() => {
                     <Tooltip content={"Add Friend"} placement="bottom">
                         <IconButton
                             onClick={() =>
-                                openScreen({
-                                    id: "special_input",
+                                modalController.push({
                                     type: "add_friend",
                                 })
                             }>

src/pages/home/Home.tsx

@@ -29,6 +29,7 @@ import wideSVG from "/assets/wide.svg";
 
 import { PageHeader } from "../../components/ui/Header";
 import { useClient } from "../../controllers/client/ClientController";
+import { modalController } from "../../controllers/modals/ModalController";
 
 const Overlay = styled.div`
     display: grid;
@@ -98,8 +99,7 @@ export default observer(() => {
                         <div className={styles.actions}>
                             <a
                                 onClick={() =>
-                                    openScreen({
-                                        id: "special_input",
+                                    modalController.push({
                                         type: "create_group",
                                     })
                                 }>

src/pages/settings/Settings.tsx

@@ -347,9 +347,8 @@ export default observer(() => {
                         <a
                             className="status"
                             onClick={() =>
-                                openScreen({
-                                    id: "special_input",
-                                    type: "set_custom_status",
+                                modalController.push({
+                                    type: "custom_status",
                                 })
                             }>
                             Change your status...

src/pages/settings/server/Roles.tsx

@@ -16,10 +16,9 @@ import {
     Category,
 } from "@revoltchat/ui";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-
 import { PermissionList } from "../../../components/settings/roles/PermissionList";
 import { RoleOrDefault } from "../../../components/settings/roles/RoleSelection";
+import { modalController } from "../../../controllers/modals/ModalController";
 
 interface Props {
     server: Server;
@@ -54,18 +53,14 @@ export const Roles = observer(({ server }: Props) => {
     // Consolidate all permissions that we can change right now.
     const currentRoles = useRoles(server);
 
-    // Pull in modal context.
-    const { openScreen } = useIntermediate();
-
     return (
         <PermissionsLayout
             server={server}
             rank={server.member?.ranking ?? Infinity}
             onCreateRole={(callback) =>
-                openScreen({
-                    id: "special_input",
+                modalController.push({
                     type: "create_role",
-                    server: server as any,
+                    server,
                     callback,
                 })
             }