Port context menus.

src/components/common/UserHeader.tsx

+import Tooltip from "./Tooltip";
 import { User } from "revolt.js";
 import Header from "../ui/Header";
 import UserIcon from "./UserIcon";
+import { Text } from "preact-i18n";
 import UserStatus from './UserStatus';
 import styled from "styled-components";
 import { Localizer } from 'preact-i18n';
+import { Link } from "react-router-dom";
+import IconButton from "../ui/IconButton";
 import { Settings } from "@styled-icons/feather";
+import { openContextMenu } from "preact-context-menu";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+import { useIntermediate } from "../../context/intermediate/Intermediate";
 
 const HeaderBase = styled.div`
     gap: 0;
@@ -39,12 +45,10 @@ interface Props {
 }
 
 export default function UserHeader({ user }: Props) {
-    function openPresenceSelector() {
-        // openContextMenu("Status");
-    }
+    const { writeClipboard } = useIntermediate();
 
-    function writeClipboard(a: string) {
-        alert('unimplemented');
+    function openPresenceSelector() {
+        openContextMenu("Status");
     }
 
     return (
@@ -57,12 +61,12 @@ export default function UserHeader({ user }: Props) {
             />
             <HeaderBase>
                 <Localizer>
-                    {/*<Tooltip content={<Text id="app.special.copy_username" />}>*/}
+                    <Tooltip content={<Text id="app.special.copy_username" />}>
                         <span className="username"
                             onClick={() => writeClipboard(user.username)}>
                             @{user.username}
                         </span>
-                    {/*</Tooltip>*/}
+                    </Tooltip>
                 </Localizer>
                 <span className="status"
                     onClick={openPresenceSelector}>
@@ -70,9 +74,11 @@ export default function UserHeader({ user }: Props) {
                 </span>
             </HeaderBase>
             { !isTouchscreenDevice && <div className="actions">
-                {/*<IconButton to="/settings">*/}
-                    <Settings size={24} />
-                {/*</IconButton>*/}
+                <Link to="/settings">
+                    <IconButton>
+                        <Settings size={24} />
+                    </IconButton>
+                </Link>
             </div> }
         </Header>
     )

src/components/navigation/left/HomeSidebar.tsx

@@ -22,6 +22,7 @@ import Header from '../../ui/Header';
 import UserHeader from "../../common/UserHeader";
 import Category from '../../ui/Category';
 import PaintCounter from "../../../lib/PaintCounter";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 type Props = WithDispatcher & {
     unreads: Unreads;
@@ -50,7 +51,7 @@ function HomeSidebar(props: Props) {
     const { pathname } = useLocation();
     const client = useContext(AppContext);
     const { channel } = useParams<{ channel: string }>();
-    // const { openScreen, writeClipboard } = useContext(IntermediateContext);
+    const { openScreen, writeClipboard } = useIntermediate();
 
     const ctx = useForceUpdate();
     const users = useUsers(undefined, ctx);
@@ -119,7 +120,7 @@ function HomeSidebar(props: Props) {
                                 <Text id="app.main.categories.conversations" />
                             ) as any
                         }
-                        action={() => /*openScreen({ id: "special_input", type: "create_group" })*/{}}
+                        action={() => openScreen({ id: "special_input", type: "create_group" })}
                     />
                 </Localizer>
                 {channelsArr.length === 0 && <img src="/assets/images/placeholder.svg" />}

src/lib/PaintCounter.tsx

@@ -2,8 +2,8 @@ import { useState } from "preact/hooks";
 
 const counts: { [key: string]: number } = {};
 
-export default function PaintCounter({ small }: { small?: boolean }) {
-    if (import.meta.env.PROD) return null;
+export default function PaintCounter({ small, always }: { small?: boolean, always?: boolean }) {
+    if (import.meta.env.PROD && !always) return null;
 
     const [uniqueId] = useState('' + Math.random());
     const count = counts[uniqueId] ?? 0;

src/pages/App.tsx

 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

+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

+.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

-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>
     );
 }

src/styles/_context-menu.scss

+.preact-context-menu .context-menu {
+    z-index: 100;
+    min-width: 180px;
+    padding: 6px 8px;
+    user-select: none;
+    border-radius: 4px;
+    color: var(--secondary-foreground);
+    background: var(--primary-background) !important;
+    box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.05);
+
+    > span {
+        gap: 6px;
+        margin: 2px 0;
+        display: flex;
+        padding: 6px 8px;
+        border-radius: 3px;
+        font-size: .875rem;
+        align-items: center;
+        white-space: nowrap;
+        
+        &:not([data-disabled="true"]) {
+            cursor: pointer;
+            
+            &:hover {
+                background: var(--secondary-background);
+            }
+        }
+
+        .tip {
+            flex-grow: 1;
+            font-size: .650rem;
+            text-align: right;
+            color: var(--tertiary-foreground);
+        }
+    }
+
+    .indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+
+        &.online {
+            background: var(--status-online);
+        }
+
+        &.idle {
+            background: var(--status-away);
+        }
+
+        &.busy {
+            background: var(--status-busy);
+        }
+
+        &.invisible {
+            background: var(--status-invisible);
+        }
+    }
+}

src/styles/index.scss

+@import "context-menu";
 @import "elements";
 @import "fonts";
 @import "page";