Link to profiles from message / member sidebar.

src/components/common/messaging/Message.tsx

@@ -14,6 +14,7 @@ import { useContext } from "preact/hooks";
 import { AppContext } from "../../../context/revoltjs/RevoltClient";
 import { memo } from "preact/compat";
 import { MessageReply } from "./attachments/MessageReply";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 
 interface Props {
     attachContext?: boolean
@@ -29,10 +30,13 @@ function Message({ attachContext, message, contrast, content: replacement, head:
     // TODO: of dependencies. We only need to update on u/avatar.
     const user = useUser(message.author);
     const client = useContext(AppContext);
+    const { openScreen } = useIntermediate();
 
     const content = message.content as string;
     const head = preferHead || (message.replies && message.replies.length > 0);
+
     const userContext = attachContext ? attachContextMenu('Menu', { user: message.author, contextualChannel: message.channel }) : undefined as any; // ! FIXME: tell fatal to make this type generic
+    const openProfile = () => openScreen({ id: 'profile', user_id: message.author });
 
     return (
         <div id={message._id}>
@@ -46,13 +50,13 @@ function Message({ attachContext, message, contrast, content: replacement, head:
                 onContextMenu={attachContext ? attachContextMenu('Menu', { message, contextualChannel: message.channel, queued }) : undefined}>
                 <MessageInfo>
                     { head ?
-                        <UserIcon target={user} size={36} onContextMenu={userContext} /> :
+                        <UserIcon target={user} size={36} onContextMenu={userContext} onClick={openProfile} /> :
                         <MessageDetail message={message} position="left" /> }
                 </MessageInfo>
                 <MessageContent>
                     { head && <span className="detail">
                         <span className="author">
-                            <Username user={user} onContextMenu={userContext} />
+                            <Username user={user} onContextMenu={userContext} onClick={openProfile} />
                         </span>
                         <MessageDetail message={message} position="top" />
                     </span> }

src/components/navigation/items/ButtonItem.tsx

@@ -14,7 +14,7 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { useIntermediate } from '../../../context/intermediate/Intermediate';
 import { stopPropagation } from '../../../lib/stopPropagation';
 
-interface CommonProps {
+type CommonProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'as'> & {
     active?: boolean
     alert?: 'unread' | 'mention'
     alertCount?: number
@@ -26,11 +26,12 @@ type UserProps = CommonProps & {
     channel?: Channels.DirectMessageChannel
 }
 
-export function UserButton({ active, alert, alertCount, user, context, channel }: UserProps) {
+export function UserButton(props: UserProps) {
+    const { active, alert, alertCount, user, context, channel, ...divProps } = props;
     const { openScreen } = useIntermediate();
 
     return (
-        <div
+        <div {...divProps}
             className={classNames(styles.item, styles.user)}
             data-active={active}
             data-alert={typeof alert === 'string'}
@@ -85,7 +86,9 @@ type ChannelProps = CommonProps & {
     compact?: boolean
 }
 
-export function ChannelButton({ active, alert, alertCount, channel, user, compact }: ChannelProps) {
+export function ChannelButton(props: ChannelProps) {
+    const { active, alert, alertCount, channel, user, compact, ...divProps } = props;
+
     if (channel.channel_type === 'SavedMessages') throw "Invalid channel type.";
     if (channel.channel_type === 'DirectMessage') {
         if (typeof user === 'undefined') throw "No user provided.";
@@ -95,9 +98,10 @@ export function ChannelButton({ active, alert, alertCount, channel, user, compac
     const { openScreen } = useIntermediate();
 
     return (
-        <div data-active={active}
+        <div {...divProps}
+            data-active={active}
             data-alert={typeof alert === 'string'}
-            aria-label={{}} /*TOFIX: ADD ARIA LABEL*/
+            aria-label={{}} /*FIXME: ADD ARIA LABEL*/
             className={classNames(styles.item, { [styles.compact]: compact })}
             onContextMenu={attachContextMenu('Menu', { channel: channel._id, unread: typeof channel.unread !== 'undefined' })}>
             <ChannelIcon className={styles.avatar} target={channel} size={compact ? 24 : 32} />
@@ -138,9 +142,12 @@ type ButtonProps = CommonProps & {
     compact?: boolean
 }
 
-export default function ButtonItem({ active, alert, alertCount, onClick, className, children, compact }: ButtonProps) {
+export default function ButtonItem(props: ButtonProps) {
+    const { active, alert, alertCount, onClick, className, children, compact, ...divProps } = props;
+
     return (
-        <div className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
+        <div {...divProps}
+            className={classNames(styles.item, { [styles.compact]: compact, [styles.normal]: !compact }, className)}
             onClick={onClick}
             data-active={active}
             data-alert={typeof alert === 'string'}>

src/components/navigation/right/MemberSidebar.tsx

@@ -8,11 +8,12 @@ import { UserButton } from "../items/ButtonItem";
 import { ChannelDebugInfo } from "./ChannelDebugInfo";
 import { Channels, Servers, Users } from "revolt.js/dist/api/objects";
 import { GenericSidebarBase, GenericSidebarList } from "../SidebarBase";
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { ClientboundNotification } from "revolt.js/dist/websocket/notifications";
+import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
 import { HookContext, useChannel, useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
 
 import placeholderSVG from "../items/placeholder.svg";
-import { AppContext, ClientStatus, StatusContext } from "../../../context/revoltjs/RevoltClient";
 
 interface Props {
     ctx: HookContext
@@ -31,6 +32,7 @@ export default function MemberSidebar(props: { channel?: Channels.Channel }) {
 }
 
 export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels.GroupChannel }) {
+    const { openScreen } = useIntermediate();
     const users = useUsers(undefined, ctx);
     let members = channel.recipients
         .map(x => users.find(y => y?._id === x))
@@ -112,13 +114,11 @@ export function GroupMemberSidebar({ channel, ctx }: Props & { channel: Channels
                 {members.map(
                     user =>
                         user && (
-                            // <LinkProfile user_id={user._id}>
                             <UserButton
                                 key={user._id}
                                 user={user}
                                 context={channel}
-                                />
-                            // </LinkProfile>
+                                onClick={() => openScreen({ id: 'profile', user_id: user._id })} />
                         )
                 )}
             </GenericSidebarList>

src/context/intermediate/Intermediate.tsx

@@ -98,7 +98,7 @@ export default function Intermediate(props: Props) {
         const navigate = (path: string) => history.push(path);
 
         const subs = [
-            internalSubscribe("Intermediate", "open_profile", openProfile),
+            internalSubscribe("Intermediate", "openProfile", openProfile),
             internalSubscribe("Intermediate", "navigate", navigate)
         ]