Add notifications badge and page (#240)

* WIP on server notifications

* WIP: Add server notifications page and removal of notifications

* improve design

* fix missing notifications case; add tooltop

* Fix api response

* fix tests

* add docs; update readme

src/components/etke.cc/ServerNotificationsPage.tsx

@@ -0,0 +1,58 @@
+import { Box, Typography, Paper, Button } from "@mui/material"
+import { Stack } from "@mui/material"
+import { useStore } from "react-admin"
+import dataProvider, { ServerNotificationsResponse } from "../../synapse/dataProvider"
+import { useAppContext } from "../../Context";
+import DeleteIcon from "@mui/icons-material/Delete";
+const DisplayTime = ({ date }: { date: string }) => {
+  const dateFromDateString = new Date(date);
+  return <>{dateFromDateString.toLocaleString()}</>;
+};
+
+const ServerNotificationsPage = () => {
+  const { etkeccAdmin } = useAppContext();
+  const [serverNotifications, setServerNotifications] = useStore<ServerNotificationsResponse>("serverNotifications", {
+      notifications: [],
+      success: false,
+  });
+
+  const notifications = serverNotifications.notifications;
+
+  return (
+    <Stack spacing={3} mt={3}>
+      <Stack spacing={1} direction="row" alignItems="center">
+        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", gap: 1 }}>
+          <Typography variant="h4">Server Notifications</Typography>
+          <Button variant="text" color="error" onClick={async () => {
+            await dataProvider.deleteServerNotifications(etkeccAdmin);
+            setServerNotifications({
+              notifications: [],
+              success: true,
+            });
+          }}>
+            <DeleteIcon fontSize="small" sx={{ mr: 1 }} /> Clear
+          </Button>
+        </Box>
+      </Stack>
+
+      {notifications.length === 0 ? (
+        <Paper sx={{ p: 2 }}>
+          <Typography>No new notifications.</Typography>
+        </Paper>
+      ) : (
+        notifications.map((notification, index) => (
+          <Paper key={notification.event_id ? notification.event_id : index} sx={{ p: 2 }}>
+            <Stack spacing={1}>
+              <Typography variant="subtitle1" fontWeight="bold" color="text.secondary">
+                <DisplayTime date={notification.sent_at} />
+              </Typography>
+              <Typography dangerouslySetInnerHTML={{ __html: notification.output }} />
+            </Stack>
+          </Paper>
+        ))
+      )}
+    </Stack>
+  );
+};
+
+export default ServerNotificationsPage;