Can delete events from WebUI

matrixgw_frontend/src/api/matrix/MatrixApiEvent.ts

@@ -91,4 +91,14 @@ export class MatrixApiEvent {
       jsonData: { content },
     });
   }
+
+  /**
+   * Delete an event
+   */
+  static async DeleteEvent(room: Room, event_id: string): Promise<void> {
+    await APIClient.exec({
+      method: "DELETE",
+      uri: `/matrix/room/${room.id}/event/${event_id}`,
+    });
+  }
 }

matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx

@@ -67,7 +67,7 @@ export default function DashboardSidebar({
   const hasDrawerTransitions = isOverSmViewport && isOverMdViewport;
 
   const getDrawerContent = React.useCallback(
-    (viewport: "phone" | "tablet" | "desktop") => (
+    (viewport: "phone" | "desktop") => (
       <React.Fragment>
         <Box
           component="nav"
@@ -194,20 +194,7 @@ export default function DashboardSidebar({
       <Drawer
         variant="permanent"
         sx={{
-          display: {
-            xs: "none",
-            sm: "block",
-            md: "none",
-          },
-          ...getDrawerSharedSx(false),
-        }}
-      >
-        {getDrawerContent("tablet")}
-      </Drawer>
-      <Drawer
-        variant="permanent"
-        sx={{
-          display: { xs: "none", md: "block" },
+          display: { xs: "none", sm: "block", md: "block" },
           ...getDrawerSharedSx(false, true),
         }}
       >

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -1,10 +1,22 @@
-import { Dialog, Typography } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Dialog,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import React from "react";
 import { MatrixApiEvent } from "../../api/matrix/MatrixApiEvent";
 import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
+import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider";
+import { useConfirm } from "../../hooks/contexts_provider/ConfirmDialogProvider";
 import type { Message, RoomEventsManager } from "../../utils/RoomEventsManager";
+import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
 import { AccountIcon } from "./AccountIcon";
-import React from "react";
 
 export function RoomMessagesList(p: {
   room: Room;
@@ -59,14 +71,30 @@ function RoomMessage(p: {
   previousFromSamePerson: boolean;
   firstMessageOfDay: boolean;
 }): React.ReactElement {
+  const theme = useTheme();
+  const user = useUserInfo();
+  const alert = useAlert();
+  const confirm = useConfirm();
+
   const [showImageFullScreen, setShowImageFullScreen] = React.useState(false);
 
   const closeImageFullScreen = () => setShowImageFullScreen(false);
 
-  const user = p.users.get(p.message.account);
+  const sender = p.users.get(p.message.account);
+
+  const handleDeleteMessage = async () => {
+    if (!(await confirm(`Do you really want to delete this message?`))) return;
+    try {
+      await MatrixApiEvent.DeleteEvent(p.room, p.message.event_id);
+    } catch (e) {
+      console.error(`Failed to delete message!`, e),
+        alert(`Failed to delete message!${e}`);
+    }
+  };
 
   return (
     <>
+      {/* Print date if required */}
       {p.firstMessageOfDay && (
         <Typography
           variant="caption"
@@ -76,7 +104,9 @@ function RoomMessage(p: {
           {p.message.time_sent_dayjs.format("DD/MM/YYYY")}
         </Typography>
       )}
-      {(!p.previousFromSamePerson || p.firstMessageOfDay) && user && (
+
+      {/* Give person name if required */}
+      {(!p.previousFromSamePerson || p.firstMessageOfDay) && sender && (
         <div
           style={{
             display: "flex",
@@ -85,17 +115,30 @@ function RoomMessage(p: {
             marginTop: "20px",
           }}
         >
-          <AccountIcon user={user} />
+          <AccountIcon user={sender} />
           &nbsp;&nbsp;&nbsp;
-          {user.display_name}
+          {sender.display_name}
         </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={{
+          [theme.getColorSchemeSelector("dark") + "&:hover"]: {
+            backgroundColor: "#ffffff2b",
+          },
+          [theme.getColorSchemeSelector("light") + "&:hover"]: {
+            backgroundColor: "#00000039",
+          },
+          "&:hover *": { visibility: "visible" },
         }}
       >
         <Typography variant="caption">
@@ -117,7 +160,29 @@ function RoomMessage(p: {
         ) : (
           p.message.content
         )}
-      </div>
+        <ButtonGroup
+          className="buttons"
+          size="small"
+          style={{
+            position: "absolute",
+            visibility: "hidden",
+            display: "block",
+            top: "-34px",
+            right: "0px",
+          }}
+        >
+          {p.message.account === user.info.matrix_user_id && (
+            <Button>
+              <EditIcon />
+            </Button>
+          )}
+          {p.message.account === user.info.matrix_user_id && (
+            <Button onClick={handleDeleteMessage}>
+              <DeleteIcon color="error" />
+            </Button>
+          )}
+        </ButtonGroup>
+      </Box>
 
       <Dialog open={showImageFullScreen} onClose={closeImageFullScreen}>
         <img