Port context menus.

src/pages/App.tsx

@@ -1,14 +1,17 @@
 import { Docked, OverlappingPanels } from "react-overlapping-panels";
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
-import Popovers from "../context/intermediate/Popovers";
 import { Switch, Route } from "react-router-dom";
 import styled from "styled-components";
 
+import Popovers from "../context/intermediate/Popovers";
+import ContextMenus from "../lib/ContextMenus";
+
 import LeftSidebar from "../components/navigation/LeftSidebar";
 import RightSidebar from "../components/navigation/RightSidebar";
 
 import Home from './home/Home';
 import Friends from "./friends/Friends";
+import Developer from "./developer/Developer";
 
 const Routes = styled.div`
     min-width: 0;
@@ -28,6 +31,10 @@ export default function App() {
             docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
             <Routes>
                 <Switch>
+                    <Route path="/dev">
+                        <Developer />
+                    </Route>
+
                     <Route path="/friends">
                         <Friends />
                     </Route>
@@ -37,6 +44,7 @@ export default function App() {
                     </Route>
                 </Switch>
             </Routes>
+            <ContextMenus />
             <Popovers />
         </OverlappingPanels>
     );

src/pages/developer/Developer.tsx

@@ -0,0 +1,39 @@
+import { useContext } from "preact/hooks";
+import Header from "../../components/ui/Header";
+import PaintCounter from "../../lib/PaintCounter";
+import { AppContext } from "../../context/revoltjs/RevoltClient";
+import { useUserPermission } from "../../context/revoltjs/hooks";
+
+export default function Developer() {
+    // const voice = useContext(VoiceContext);
+    const client = useContext(AppContext);
+    const userPermission = useUserPermission(client.user!._id);
+
+    return (
+        <div>
+            <Header placement="primary">Developer Tab</Header>
+            <div style={{ padding: "16px" }}>
+                <PaintCounter always />
+            </div>
+            <div style={{ padding: "16px" }}>
+                <b>User ID:</b> {client.user!._id} <br/>
+                <b>Permission against self:</b> {userPermission} <br/>
+            </div>
+            <div style={{ padding: "16px" }}>
+                {/*<span>
+                    <b>Voice Status:</b> {VoiceStatus[voice.status]}
+                </span>
+                <br />
+                <span>
+                    <b>Voice Room ID:</b> {voice.roomId || "undefined"}
+                </span>
+                <br />
+                <span>
+                    <b>Voice Participants:</b> [
+                    {Array.from(voice.participants.keys()).join(", ")}]
+                </span>
+                <br />*/}
+            </div>
+        </div>
+    );
+}

src/pages/home/Home.module.scss

@@ -0,0 +1,28 @@
+.home {
+    user-select: none;
+
+    h3 {
+        margin: 1em 0;
+        font-size: 48px;
+        text-align: center;
+
+        img {
+            height: 36px;
+        }
+    }
+
+    ul {
+        margin: auto;
+        display: block;
+        font-size: 18px;
+        text-align: center;
+
+        li {
+            list-style: lower-greek;
+        }
+    }
+}
+
+[data-light="true"] .home svg {
+    filter: invert(100%);
+}

src/pages/home/Home.tsx

@@ -1,9 +1,35 @@
-import PaintCounter from "../../lib/PaintCounter";
+import styles from "./Home.module.scss";
+import { Link } from "react-router-dom";
+
+import { Text } from "preact-i18n";
+import Header from "../../components/ui/Header";
+// import WideLogo from "../../../../../assets/wide.svg";
 
 export default function Home() {
     return (
-        <div>
-            <PaintCounter />
+        <div className={styles.home}>
+            <Header placement="primary"><Text id="app.navigation.tabs.home" /></Header>
+            <h3>
+                <Text id="app.special.modals.onboarding.welcome" /> {/*<WideLogo />*/}
+            </h3>
+            <ul>
+                <li>
+                    Go to your <Link to="/friends">friends list</Link>.
+                </li>
+                <li>
+                    Give <Link to="/settings/feedback">feedback</Link>.
+                </li>
+                <li>
+                    Join <Link to="/invite/Testers">testers server</Link>.
+                </li>
+                <li>
+                    View{" "}
+                    <a href="https://gitlab.insrt.uk/revolt" target="_blank">
+                        source code
+                    </a>
+                    .
+                </li>
+            </ul>
         </div>
     );
 }