Handlers for UserShort.

View user's profile picture.
Close #25, adds logic to hamburger.

src/components/common/user/UserShort.tsx

@@ -4,6 +4,7 @@ import { User } from "revolt.js/dist/maps/Users";
 
 import { Text } from "preact-i18n";
 
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import UserIcon from "./UserIcon";
@@ -67,14 +68,23 @@ export default function UserShort({
     size?: number;
     showServerIdentity?: boolean;
 }) {
+    const { openScreen } = useIntermediate();
+    const openProfile = () =>
+        user && openScreen({ id: "profile", user_id: user._id });
+
     return (
         <>
             <UserIcon
                 size={size ?? 24}
                 target={user}
+                onClick={openProfile}
                 showServerIdentity={showServerIdentity}
             />
-            <Username user={user} showServerIdentity={showServerIdentity} />
+            <Username
+                user={user}
+                showServerIdentity={showServerIdentity}
+                onClick={openProfile}
+            />
         </>
     );
 }

src/components/navigation/right/Search.tsx

@@ -0,0 +1,12 @@
+/*export const SearchSidebar = observer(
+    ({ channel }: { channel: Channel }) => {
+        const keys = [...channel.recipient_ids!];
+        const entries = useEntries(channel, keys);
+
+        return (
+            <GenericSidebarBase>
+                <MemberList entries={entries} context={channel} />
+            </GenericSidebarBase>
+        );
+    },
+);*/

src/components/ui/Header.tsx

@@ -1,5 +1,8 @@
+import { Menu } from "@styled-icons/boxicons-regular";
 import styled, { css } from "styled-components";
 
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
 interface Props {
     borders?: boolean;
     background?: boolean;
@@ -60,3 +63,19 @@ export default styled.div<Props>`
             border-start-start-radius: 8px;
         `}
 `;
+
+export function HamburgerAction() {
+    if (!isTouchscreenDevice) return null;
+
+    function openSidebar() {
+        document
+            .querySelector("#app > div > div")
+            ?.scrollTo({ behavior: "smooth", left: 0 });
+    }
+
+    return (
+        <div className="menu" onClick={openSidebar}>
+            <Menu size={27} />
+        </div>
+    );
+}

src/context/intermediate/popovers/UserProfile.tsx

@@ -130,7 +130,20 @@ export const UserProfile = observer(
                             `linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url('${backgroundURL}')`,
                     }}>
                     <div className={styles.profile}>
-                        <UserIcon size={80} target={user} status animate />
+                        <UserIcon
+                            size={80}
+                            target={user}
+                            status
+                            animate
+                            hover={typeof user.avatar !== "undefined"}
+                            onClick={() =>
+                                user.avatar &&
+                                openScreen({
+                                    id: "image_viewer",
+                                    attachment: user.avatar,
+                                })
+                            }
+                        />
                         <div className={styles.details}>
                             <Localizer>
                                 <span

src/context/revoltjs/FileUploads.tsx

@@ -79,7 +79,6 @@ export function grabFiles(
         const files = (e.currentTarget as HTMLInputElement)?.files;
         if (!files) return;
         for (const file of files) {
-            alert(file.size);
             if (file.size > maxFileSize) {
                 return tooLarge();
             }

src/pages/channels/Channel.tsx

@@ -16,7 +16,7 @@ import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
 
-import MemberSidebar from "../../components/navigation/right/MemberSidebar";
+import RightSidebar from "../../components/navigation/RightSidebar";
 import ChannelHeader from "./ChannelHeader";
 import { MessageArea } from "./messaging/MessageArea";
 import VoiceHeader from "./voice/VoiceHeader";
@@ -93,9 +93,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                     <JumpToBottom channel={channel} />
                     <MessageBox channel={channel} />
                 </ChannelContent>
-                {!isTouchscreenDevice && showMembers && (
-                    <MemberSidebar channel={channel} />
-                )}
+                {!isTouchscreenDevice && showMembers && <RightSidebar />}
             </ChannelMain>
         </AgeGate>
     );

src/pages/channels/ChannelHeader.tsx

@@ -12,7 +12,7 @@ import { getChannelName } from "../../context/revoltjs/util";
 
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import UserStatus from "../../components/common/user/UserStatus";
-import Header from "../../components/ui/Header";
+import Header, { HamburgerAction } from "../../components/ui/Header";
 
 import Markdown from "../../components/markdown/Markdown";
 import HeaderActions from "./actions/HeaderActions";
@@ -87,11 +87,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
 
     return (
         <Header placement="primary">
-            {isTouchscreenDevice && (
-                <div className="menu">
-                    <Menu size={27} />
-                </div>
-            )}
+            <HamburgerAction />
             {icon}
             <Info>
                 <span className="name">{name}</span>

src/pages/channels/actions/HeaderActions.tsx

@@ -8,6 +8,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { useHistory } from "react-router-dom";
 
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -24,6 +25,18 @@ export default function HeaderActions({
     const { openScreen } = useIntermediate();
     const history = useHistory();
 
+    function openSidebar() {
+        if (isTouchscreenDevice) {
+            const panels = document.querySelector("#app > div > div");
+            panels?.scrollTo({
+                behavior: "smooth",
+                left: panels.clientWidth * 3,
+            });
+        } else {
+            toggleSidebar?.();
+        }
+    }
+
     return (
         <>
             <UpdateIndicator style="channel" />
@@ -54,7 +67,7 @@ export default function HeaderActions({
             <VoiceActions channel={channel} />
             {(channel.channel_type === "Group" ||
                 channel.channel_type === "TextChannel") && (
-                <IconButton onClick={toggleSidebar}>
+                <IconButton onClick={openSidebar}>
                     <Group size={25} />
                 </IconButton>
             )}