Port context menus.

src/components/common/UserHeader.tsx

@@ -1,11 +1,17 @@
+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" />}