Add buttons bar

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -1,10 +1,12 @@
-import { Dialog, Typography } from "@mui/material";
+import { Box, Button, ButtonGroup, Dialog, Typography } from "@mui/material";
 import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
 import type { Message, RoomEventsManager } from "../../utils/RoomEventsManager";
 import { AccountIcon } from "./AccountIcon";
 import React from "react";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 export function RoomMessagesList(p: {
   room: Room;
@@ -67,6 +69,7 @@ function RoomMessage(p: {
 
   return (
     <>
+      {/* Print date if required */}
       {p.firstMessageOfDay && (
         <Typography
           variant="caption"
@@ -76,6 +79,8 @@ function RoomMessage(p: {
           {p.message.time_sent_dayjs.format("DD/MM/YYYY")}
         </Typography>
       )}
+
+      {/* Give person name if required */}
       {(!p.previousFromSamePerson || p.firstMessageOfDay) && user && (
         <div
           style={{
@@ -91,11 +96,21 @@ function RoomMessage(p: {
         </div>
       )}
 
-      <div
+      {/* Message content */}
+      <Box
         style={{
           wordBreak: "break-all",
           wordWrap: "break-word",
           maxWidth: "100%",
+          transition: "all 0.01s ease-in",
+          position: "relative",
+        }}
+        component="div"
+        sx={{
+          "&:hover": {
+            backgroundColor: "#ffffff2b",
+          },
+          "&:hover *": { visibility: "visible" },
         }}
       >
         <Typography variant="caption">
@@ -117,7 +132,26 @@ function RoomMessage(p: {
         ) : (
           p.message.content
         )}
-      </div>
+        <ButtonGroup
+          className="buttons"
+          size="small"
+          style={{
+            position: "absolute",
+            visibility: "hidden",
+            display: "block",
+            top: "-34px",
+            right: "0px",
+          }}
+          sx={{ "parent:hover": { visibility: "visible" } }}
+        >
+          <Button>
+            <EditIcon />
+          </Button>
+          <Button>
+            <DeleteIcon />
+          </Button>
+        </ButtonGroup>
+      </Box>
 
       <Dialog open={showImageFullScreen} onClose={closeImageFullScreen}>
         <img