feat: [closes #53] display message timestamps

src/components/Message/Message.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
 import Box from '@mui/material/Box'
+import Tooltip from '@mui/material/Tooltip'
 import Typography, { TypographyProps } from '@mui/material/Typography'
 import Link, { LinkProps } from '@mui/material/Link'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
@@ -72,6 +73,8 @@ const componentMap = {
   },
 }
 
+const spaceNeededForSideDateTooltip = 850
+
 export const Message = ({ message, showAuthor, userId }: MessageProps) => {
   let backgroundColor: string
 
@@ -96,27 +99,39 @@ export const Message = ({ message, showAuthor, userId }: MessageProps) => {
           <PeerNameDisplay>{message.authorId}</PeerNameDisplay>
         </Typography>
       )}
-      <Box
+      <Tooltip
-        sx={{
+        placement={
-          color: 'primary.contrastText',
+          window.innerWidth >= spaceNeededForSideDateTooltip ? 'left' : 'top'
-          backgroundColor,
+        }
-          margin: 0.5,
+        title={String(
-          padding: '0.5em 0.75em',
+          Intl.DateTimeFormat(undefined, {
-          borderRadius: 6,
+            dateStyle: 'short',
-          float: message.authorId === userId ? 'right' : 'left',
+            timeStyle: 'short',
-          transition: 'background-color 1s',
+          }).format(message.timeSent)
-          wordBreak: 'break-word',
+        )}
-        }}
-        maxWidth="85%"
       >
-        <Markdown
+        <Box
-          components={componentMap}
+          sx={{
-          remarkPlugins={[remarkGfm]}
+            color: 'primary.contrastText',
-          linkTarget="_blank"
+            backgroundColor,
+            margin: 0.5,
+            padding: '0.5em 0.75em',
+            borderRadius: 6,
+            float: message.authorId === userId ? 'right' : 'left',
+            transition: 'background-color 1s',
+            wordBreak: 'break-word',
+          }}
+          maxWidth="85%"
         >
-          {message.text}
+          <Markdown
-        </Markdown>
+            components={componentMap}
-      </Box>
+            remarkPlugins={[remarkGfm]}
+            linkTarget="_blank"
+          >
+            {message.text}
+          </Markdown>
+        </Box>
+      </Tooltip>
     </Box>
   )
 }