feat: provide and consume scroll offsets

src/pages/channels/Channel.tsx

@@ -29,20 +29,17 @@ import ChannelHeader from "./ChannelHeader";
 import { MessageArea } from "./messaging/MessageArea";
 import VoiceHeader from "./voice/VoiceHeader";
 
-const ChannelMain = styled.div`
+const ChannelMain = styled.div.attrs({ "data-component": "channel" })`
     flex-grow: 1;
     display: flex;
     min-height: 0;
     overflow: hidden;
     flex-direction: row;
-
-    > * > ::-webkit-scrollbar-thumb {
-        background-clip: content-box;
-        border-top: 48px solid transparent;
-    }
 `;
 
-const ChannelContent = styled.div`
+const ChannelContent = styled.div.attrs({
+    "data-component": "content",
+})`
     flex-grow: 1;
     display: flex;
     overflow: hidden;

src/pages/channels/ChannelHeader.tsx

@@ -78,7 +78,6 @@ const Info = styled.div`
 
 export default observer(({ channel }: ChannelHeaderProps) => {
     const { openScreen } = useIntermediate();
-    const layout = useApplicationState().layout;
 
     const name = getChannelName(channel);
     let icon, recipient: User | undefined;
@@ -99,7 +98,7 @@ export default observer(({ channel }: ChannelHeaderProps) => {
     }
 
     return (
-        <PageHeader icon={icon}>
+        <PageHeader icon={icon} transparent>
             <Info>
                 <span className="name">{name}</span>
                 {isTouchscreenDevice &&

src/pages/channels/actions/HeaderActions.tsx

@@ -30,7 +30,7 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
     const history = useHistory();
 
     function openRightSidebar() {
-        const panels = document.querySelector("#app > div > div");
+        const panels = document.querySelector("#app > div > div > div");
         panels?.scrollTo({
             behavior: "smooth",
             left: panels.clientWidth * 3,
@@ -84,7 +84,11 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) {
             )}
             {(channel.channel_type === "Group" ||
                 channel.channel_type === "TextChannel") && (
-                <IconButton onClick={openSidebar}>
+                <IconButton
+                    onClick={() => {
+                        internalEmit("RightSidebar", "open", undefined);
+                        openRightSidebar();
+                    }}>
                     <Group size={25} />
                 </IconButton>
             )}

src/pages/channels/messaging/MessageArea.tsx

@@ -33,14 +33,18 @@ import Preloader from "../../../components/ui/Preloader";
 import ConversationStart from "./ConversationStart";
 import MessageRenderer from "./MessageRenderer";
 
-const Area = styled.div`
+const Area = styled.div.attrs({ "data-scroll-offset": "with-padding" })`
     height: 100%;
     flex-grow: 1;
     min-height: 0;
+    word-break: break-word;
+
     overflow-x: hidden;
     overflow-y: scroll;
-    padding-top: 48px;
-    word-break: break-word;
+
+    &::-webkit-scrollbar-thumb {
+        min-height: 150px;
+    }
 
     > div {
         display: flex;