Port modal / popover context.

src/pages/App.tsx

@@ -6,6 +6,7 @@ import LeftSidebar from "../components/navigation/LeftSidebar";
 import RightSidebar from "../components/navigation/RightSidebar";
 
 import Home from './home/Home';
+import Popovers from "../context/intermediate/Popovers";
 
 export default function App() {
     return (
@@ -20,6 +21,7 @@ export default function App() {
                     <Home />
                 </Route>
             </Switch>
+            <Popovers />
         </OverlappingPanels>
     );
 };

src/pages/home/Home.tsx

@@ -1,59 +1,9 @@
-import { useChannels, useForceUpdate, useServers, useUser } from "../../context/revoltjs/hooks";
-import ChannelIcon from "../../components/common/ChannelIcon";
-import ServerIcon from "../../components/common/ServerIcon";
-import UserIcon from "../../components/common/UserIcon";
 import PaintCounter from "../../lib/PaintCounter";
 
-export function Nested() {
-    const ctx = useForceUpdate();
-
-    let user = useUser('01EX2NCWQ0CHS3QJF0FEQS1GR4', ctx)!;
-    let user2 = useUser('01EX40TVKYNV114H8Q8VWEGBWQ', ctx)!;
-    let user3 = useUser('01F5GV44HTXP3MTCD2VPV42DPE', ctx)!;
-
-    let channels = useChannels(undefined, ctx);
-    let servers = useServers(undefined, ctx);
-
-    return (
-        <>
-            <h3>Nested component</h3>
-            <PaintCounter />
-            @{ user.username } is { user.online ? 'online' : 'offline' }<br/><br/>
-
-            <h3>UserIcon Tests</h3>
-            <UserIcon size={64} target={user} />
-            <UserIcon size={64} target={user} status />
-            <UserIcon size={64} target={user} voice='muted' />
-            <UserIcon size={64} attachment={user2.avatar} />
-            <UserIcon size={64} attachment={user3.avatar} />
-            <UserIcon size={64} attachment={user3.avatar} animate />
-
-            <h3>Channels</h3>
-            { channels.map(channel =>
-                channel &&
-                channel.channel_type !== 'SavedMessages' &&
-                channel.channel_type !== 'DirectMessage' &&
-                <ChannelIcon size={48} target={channel} />
-            ) }
-
-            <h3>Servers</h3>
-            { servers.map(server =>
-                server &&
-                <ServerIcon size={48} target={server} />
-            ) }
-
-            <br/><br/>
-            <p>{ 'test long paragraph'.repeat(2000) }</p>
-        </>
-    )
-}
-
 export default function Home() {
     return (
-        <div style={{ overflowY: 'scroll', height: '100vh' }}>
-            <h1>HOME</h1>
+        <div>
             <PaintCounter />
-            <Nested />
         </div>
     );
 }

src/pages/login/Login.tsx

@@ -17,7 +17,7 @@ import { FormReset, FormSendReset } from "./forms/FormReset";
 
 export default function Login() {
     const theme = useContext(ThemeContext);
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
 
     return (
         <div className={styles.login}>

src/pages/login/forms/CaptchaBlock.tsx

@@ -11,7 +11,7 @@ export interface CaptchaProps {
 }
 
 export function CaptchaBlock(props: CaptchaProps) {
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
 
     useEffect(() => {
         if (!client.configuration?.features.captcha.enabled) {

src/pages/login/forms/Form.tsx

@@ -7,7 +7,7 @@ import { MailProvider } from "./MailProvider";
 import { useContext, useState } from "preact/hooks";
 import { CheckCircle, Mail } from "@styled-icons/feather";
 import { CaptchaBlock, CaptchaProps } from "./CaptchaBlock";
-import { takeError } from "../../../context/revoltjs/error";
+import { takeError } from "../../../context/revoltjs/util";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 import FormField from "../FormField";
@@ -34,7 +34,7 @@ function getInviteCode() {
 }
 
 export function Form({ page, callback }: Props) {
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
 
     const [loading, setLoading] = useState(false);
     const [success, setSuccess] = useState<string | undefined>(undefined);

src/pages/login/forms/FormCreate.tsx

@@ -3,7 +3,7 @@ import { useContext } from "preact/hooks";
 import { Form } from "./Form";
 
 export function FormCreate() {
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
 
     return (
         <Form

src/pages/login/forms/FormLogin.tsx

@@ -2,10 +2,10 @@ import { Form } from "./Form";
 import { useContext } from "preact/hooks";
 import { useHistory } from "react-router-dom";
 import { deviceDetect } from "react-device-detect";
-import { AppContext } from "../../../context/revoltjs/RevoltClient";
+import { OperationsContext } from "../../../context/revoltjs/RevoltClient";
 
 export function FormLogin() {
-    const { operations } = useContext(AppContext);
+    const { login } = useContext(OperationsContext);
     const history = useHistory();
 
     return (
@@ -21,7 +21,7 @@ export function FormLogin() {
                     device_name = "Unknown Device";
                 }
 
-                await operations.login({ ...data, device_name });
+                await login({ ...data, device_name });
                 history.push("/");
             }}
         />

src/pages/login/forms/FormResend.tsx

@@ -3,7 +3,7 @@ import { useContext } from "preact/hooks";
 import { Form } from "./Form";
 
 export function FormResend() {
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
 
     return (
         <Form

src/pages/login/forms/FormReset.tsx

@@ -4,7 +4,7 @@ import { useHistory, useParams } from "react-router-dom";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 
 export function FormSendReset() {
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
 
     return (
         <Form
@@ -18,7 +18,7 @@ export function FormSendReset() {
 
 export function FormReset() {
     const { token } = useParams<{ token: string }>();
-    const { client } = useContext(AppContext);
+    const client = useContext(AppContext);
     const history = useHistory();
 
     return (