feat: port input modals to new system

src/components/navigation/left/HomeSidebar.tsx

@@ -25,6 +25,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import placeholderSVG from "../items/placeholder.svg";
 
 import { useClient } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
 import ButtonItem, { ChannelButton } from "../items/ButtonItem";
 import ConnectionStatus from "../items/ConnectionStatus";
@@ -131,8 +132,7 @@ export default observer(() => {
                     <Text id="app.main.categories.conversations" />
                     <IconButton
                         onClick={() =>
-                            openScreen({
-                                id: "special_input",
+                            modalController.push({
                                 type: "create_group",
                             })
                         }>

src/components/navigation/left/ServerListSidebar.tsx

@@ -7,9 +7,8 @@ import { ServerList } from "@revoltchat/ui";
 
 import { useApplicationState } from "../../../mobx/State";
 
-import { useIntermediate } from "../../../context/intermediate/Intermediate";
-
 import { useClient } from "../../../controllers/client/ClientController";
+import { modalController } from "../../../controllers/modals/ModalController";
 
 /**
  * Server list sidebar shim component
@@ -17,13 +16,11 @@ import { useClient } from "../../../controllers/client/ClientController";
 export default observer(() => {
     const client = useClient();
     const state = useApplicationState();
-    const { openScreen } = useIntermediate();
     const { server: server_id } = useParams<{ server?: string }>();
 
     const createServer = useCallback(
         () =>
-            openScreen({
-                id: "special_input",
+            modalController.push({
                 type: "create_server",
             }),
         [],

src/components/settings/appearance/ChatOptions.tsx

@@ -8,7 +8,21 @@ import { useApplicationState } from "../../../mobx/State";
 
 import { FONTS, Fonts, FONT_KEYS } from "../../../context/Theme";
 
-import { ShimDisplayEmoji } from "../appearance_legacy/Shims";
+import { EmojiSelector } from "./legacy/EmojiSelector";
+
+/**
+ * ! LEGACY
+ * Component providing a way to change emoji pack.
+ */
+export const ShimDisplayEmoji = observer(() => {
+    const settings = useApplicationState().settings;
+    return (
+        <EmojiSelector
+            value={settings.get("appearance:emoji")}
+            setValue={(v) => settings.set("appearance:emoji", v)}
+        />
+    );
+});
 
 export default observer(() => {
     const settings = useApplicationState().settings;