diff --git a/src/components/common/user/UserShort.tsx b/src/components/common/user/UserShort.tsx
index 61e7eeb2..c2d760dc 100644
--- a/src/components/common/user/UserShort.tsx
+++ b/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 (
<>
-
+
>
);
}
diff --git a/src/components/navigation/right/Search.tsx b/src/components/navigation/right/Search.tsx
new file mode 100644
index 00000000..f8023f16
--- /dev/null
+++ b/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 (
+
+
+
+ );
+ },
+);*/
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 048e8b12..24c2cc29 100644
--- a/src/components/ui/Header.tsx
+++ b/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`
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 (
+
+
+
+ );
+}
diff --git a/src/context/intermediate/popovers/UserProfile.tsx b/src/context/intermediate/popovers/UserProfile.tsx
index 819dddd9..814460a3 100644
--- a/src/context/intermediate/popovers/UserProfile.tsx
+++ b/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}')`,
}}>
-
+
+ user.avatar &&
+ openScreen({
+ id: "image_viewer",
+ attachment: user.avatar,
+ })
+ }
+ />
maxFileSize) {
return tooLarge();
}
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index 00653181..0559cc4d 100644
--- a/src/pages/channels/Channel.tsx
+++ b/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 }) => {
- {!isTouchscreenDevice && showMembers && (
-
- )}
+ {!isTouchscreenDevice && showMembers && }
);
diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx
index ae2c1881..72d62b49 100644
--- a/src/pages/channels/ChannelHeader.tsx
+++ b/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 (
- {isTouchscreenDevice && (
-
-
-
- )}
+
{icon}
{name}
diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx
index fa304598..3a9bb1ab 100644
--- a/src/pages/channels/actions/HeaderActions.tsx
+++ b/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 (
<>
@@ -54,7 +67,7 @@ export default function HeaderActions({
{(channel.channel_type === "Group" ||
channel.channel_type === "TextChannel") && (
-
+
)}