Port friends menu over.

src/context/intermediate/Intermediate.tsx

@@ -27,7 +27,7 @@ export type Screen =
     { type: "ban_member", target: Servers.Server, user: string }
 )) |
 ({ id: "special_input" } & (
-    { type: "create_group" | "create_server" | "set_custom_status" } |
+    { type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } |
     { type: "create_channel", server: string }
 ))
 | {

src/context/intermediate/Modals.tsx

@@ -1,12 +1,12 @@
 import { Screen } from "./Intermediate";
 
 import { ErrorModal } from "./modals/Error";
+import { InputModal } from "./modals/Input";
+import { PromptModal } from "./modals/Prompt";
 import { SignedOutModal } from "./modals/SignedOut";
 import { ClipboardModal } from "./modals/Clipboard";
 import { OnboardingModal } from "./modals/Onboarding";
 import { ModifyAccountModal } from "./modals/ModifyAccount";
-import { InputModal, SpecialInputModal } from "./modals/Input";
-import { PromptModal, SpecialPromptModal } from "./modals/Prompt";
 
 export interface Props {
     screen: Screen;
@@ -19,12 +19,8 @@ export default function Modals({ screen, openScreen }: Props) {
     switch (screen.id) {
         case "_prompt":
             return <PromptModal onClose={onClose} {...screen} />;
-        case "special_prompt":
-            return <SpecialPromptModal onClose={onClose} {...screen} />;
         case "_input":
             return <InputModal onClose={onClose} {...screen} />;
-        case "special_input":
-            return <SpecialInputModal onClose={onClose} {...screen} />;
         case "error":
             return <ErrorModal onClose={onClose} {...screen} />;
         case "signed_out":

src/context/intermediate/Popovers.tsx

@@ -2,6 +2,8 @@ import { IntermediateContext, useIntermediate } from "./Intermediate";
 import { useContext } from "preact/hooks";
 
 import { UserPicker } from "./popovers/UserPicker";
+import { SpecialInputModal } from "./modals/Input";
+import { SpecialPromptModal } from "./modals/Prompt";
 import { UserProfile } from "./popovers/UserProfile";
 import { ImageViewer } from "./popovers/ImageViewer";
 import { ChannelInfo } from "./popovers/ChannelInfo";
@@ -21,6 +23,10 @@ export default function Popovers() {
             return <ImageViewer {...screen} onClose={onClose} />;
         case "channel_info":
             return <ChannelInfo {...screen} onClose={onClose} />;
+        case "special_prompt":
+            return <SpecialPromptModal onClose={onClose} {...screen} />;
+        case "special_input":
+            return <SpecialInputModal onClose={onClose} {...screen} />;
     }
 
     return null;

src/context/intermediate/modals/Input.tsx

@@ -12,7 +12,7 @@ import { AppContext } from "../../revoltjs/RevoltClient";
 interface Props {
     onClose: () => void;
     question: Children;
-    field: Children;
+    field?: Children;
     defaultValue?: string;
     callback: (value: string) => Promise<void>;
 }
@@ -53,9 +53,9 @@ export function InputModal({
             ]}
             onClose={onClose}
         >
-            <Overline error={error} block>
+            { field ? <Overline error={error} block>
                 {field}
-            </Overline>
+            </Overline> : (error && <Overline error={error} type="error" block />) }
             <InputBox
                 value={value}
                 onChange={e => setValue(e.currentTarget.value)}
@@ -65,7 +65,7 @@ export function InputModal({
 }
 
 type SpecialProps = { onClose: () => void } & (
-    { type: "create_group" | "create_server" | "set_custom_status" } |
+    { type: "create_group" | "create_server" | "set_custom_status" | "add_friend" } |
     { type: "create_channel", server: string }
 )
 
@@ -144,6 +144,15 @@ export function SpecialInputModal(props: SpecialProps) {
                 }
             />;
         }
+        case "add_friend": {
+            return <InputModal
+                onClose={onClose}
+                question={"Add Friend"}
+                callback={username =>
+                    client.users.addFriend(username)
+                }
+            />;
+        }
         default: return null;
     }
 }

src/context/intermediate/modals/Prompt.tsx

@@ -1,7 +1,7 @@
 import { Text } from "preact-i18n";
 import styles from './Prompt.module.scss';
 import { Children } from "../../../types/Preact";
-import { IntermediateContext, useIntermediate } from "../Intermediate";
+import { useIntermediate } from "../Intermediate";
 import InputBox from "../../../components/ui/InputBox";
 import Overline from "../../../components/ui/Overline";
 import UserIcon from "../../../components/common/UserIcon";
@@ -82,7 +82,8 @@ export function SpecialPromptModal(props: SpecialProps) {
                     actions={[
                         {
                             confirmation: true,
-                            style: 'contrast-error',
+                            contrast: true,
+                            error: true,
                             text: <Text id="app.special.modals.actions.delete" />,
                             onClick: async () => {
                                 setProcessing(true);
@@ -162,7 +163,8 @@ export function SpecialPromptModal(props: SpecialProps) {
                     actions={[
                         {
                             text: <Text id="app.special.modals.actions.kick" />,
-                            style: 'contrast-error',
+                            contrast: true,
+                            error: true,
                             confirmation: true,
                             onClick: async () => {
                                 setProcessing(true);
@@ -200,7 +202,8 @@ export function SpecialPromptModal(props: SpecialProps) {
                     actions={[
                         {
                             text: <Text id="app.special.modals.actions.ban" />,
-                            style: 'contrast-error',
+                            contrast: true,
+                            error: true,
                             confirmation: true,
                             onClick: async () => {
                                 setProcessing(true);