feat(ui) [closes #160] Move transcript scrollbar to content window edge (#212)

* feat(ui): [closes #160] move transcript scrollbar to edge of container
* feat(ui): prevent controls from obscuring transcript
* feat(ui): hide unnecessary hide controls button

src/components/ChatTranscript/ChatTranscript.tsx

@@ -1,9 +1,11 @@
-import { HTMLAttributes, useRef, useEffect, useState } from 'react'
+import { HTMLAttributes, useRef, useEffect, useState, useContext } from 'react'
 import cx from 'classnames'
 import Box from '@mui/material/Box'
+import useTheme from '@mui/material/styles/useTheme'
 
 import { Message as IMessage, InlineMedia } from 'models/chat'
 import { Message } from 'components/Message'
+import { ShellContext } from 'contexts/ShellContext'
 
 export interface ChatTranscriptProps extends HTMLAttributes<HTMLDivElement> {
   messageLog: Array<IMessage | InlineMedia>
@@ -15,6 +17,8 @@ export const ChatTranscript = ({
   messageLog,
   userId,
 }: ChatTranscriptProps) => {
+  const { showRoomControls } = useContext(ShellContext)
+  const theme = useTheme()
   const boxRef = useRef<HTMLDivElement>(null)
   const [previousMessageLogLength, setPreviousMessageLogLength] = useState(0)
 
@@ -53,18 +57,25 @@ export const ChatTranscript = ({
     setPreviousMessageLogLength(messageLog.length)
   }, [messageLog.length])
 
+  const transcriptMaxWidth = theme.breakpoints.values.md
+  const transcriptPaddingX = `(50% - ${
+    transcriptMaxWidth / 2
+  }px) - ${theme.spacing(1)}`
+  const transcriptMinPadding = theme.spacing(1)
+
   return (
     <Box
       ref={boxRef}
       className={cx('ChatTranscript', className)}
-      sx={theme => ({
+      sx={{
         display: 'flex',
         flexDirection: 'column',
-        mx: 'auto',
+        py: transcriptMinPadding,
-        paddingY: theme.spacing(1),
+        pt: showRoomControls ? theme.spacing(10) : theme.spacing(2),
+        px: `max(${transcriptPaddingX}, ${transcriptMinPadding})`,
+        transition: `padding-top ${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`,
         width: '100%',
-        maxWidth: theme.breakpoints.values.md,
+      }}
-      })}
     >
       {messageLog.map((message, idx) => {
         const previousMessage = messageLog[idx - 1]

src/components/Room/Room.tsx

@@ -1,9 +1,9 @@
 import { useContext } from 'react'
 import { useWindowSize } from '@react-hook/window-size'
-import Collapse from '@mui/material/Collapse'
 import Zoom from '@mui/material/Zoom'
 import Box from '@mui/material/Box'
 import Divider from '@mui/material/Divider'
+import useTheme from '@mui/material/styles/useTheme'
 import { v4 as uuid } from 'uuid'
 
 import { rtcConfig } from 'config/rtcConfig'
@@ -22,7 +22,6 @@ import { RoomScreenShareControls } from './RoomScreenShareControls'
 import { RoomFileUploadControls } from './RoomFileUploadControls'
 import { RoomVideoDisplay } from './RoomVideoDisplay'
 import { RoomShowMessagesControls } from './RoomShowMessagesControls'
-import { RoomHideRoomControls } from './RoomHideRoomControls'
 import { TypingStatusBar } from './TypingStatusBar'
 
 export interface RoomProps {
@@ -40,6 +39,7 @@ export function Room({
   password,
   userId,
 }: RoomProps) {
+  const theme = useTheme()
   const settingsContext = useContext(SettingsContext)
   const { showActiveTypingStatus } = settingsContext.getUserSettings()
   const {
@@ -96,14 +96,16 @@ export function Room({
             overflow: 'auto',
           }}
         >
-          <Collapse in={showRoomControls}>
+          <Zoom in={showRoomControls}>
             <Box
               sx={{
                 alignItems: 'flex-start',
                 display: 'flex',
                 justifyContent: 'center',
-                padding: 1,
+                overflow: 'visible',
-                overflowX: 'auto',
+                height: 0,
+                position: 'relative',
+                top: theme.spacing(1),
               }}
             >
               <RoomAudioControls peerRoom={peerRoom} />
@@ -118,9 +120,8 @@ export function Room({
                   <RoomShowMessagesControls />
                 </span>
               </Zoom>
-              <RoomHideRoomControls />
             </Box>
-          </Collapse>
+          </Zoom>
           <Box
             sx={{
               display: 'flex',
@@ -150,7 +151,7 @@ export function Room({
                 <ChatTranscript
                   messageLog={messageLog}
                   userId={userId}
-                  className="grow overflow-auto px-4"
+                  className="grow overflow-auto"
                 />
                 <Divider />
                 <Box>

src/components/Shell/ShellAppBar.tsx

@@ -85,7 +85,7 @@ export const ShellAppBar = ({
   isFullscreen,
   setIsFullscreen,
 }: ShellAppBarProps) => {
-  const { peerList, isEmbedded } = useContext(ShellContext)
+  const { peerList, isEmbedded, showRoomControls } = useContext(ShellContext)
   const handleQRCodeClick = () => setIsQRCodeDialogOpen(true)
   const onClickFullscreen = () => setIsFullscreen(!isFullscreen)
 
@@ -149,7 +149,11 @@ export const ShellAppBar = ({
                 </Tooltip>
               </>
             )}
-            <Tooltip title="Show Room Controls">
+            <Tooltip
+              title={
+                showRoomControls ? 'Hide Room Controls' : 'Show Room Controls'
+              }
+            >
               <IconButton
                 size="large"
                 color="inherit"