diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js index 532bf3ed..b4e95110 100644 --- a/web/src/components/Notifications.js +++ b/web/src/components/Notifications.js @@ -1,5 +1,5 @@ import Container from "@mui/material/Container"; -import {CardContent, Link, Stack} from "@mui/material"; +import {CardActions, CardContent, Link, Stack} from "@mui/material"; import Card from "@mui/material/Card"; import Typography from "@mui/material/Typography"; import * as React from "react"; @@ -9,6 +9,8 @@ import CloseIcon from '@mui/icons-material/Close'; import {Paragraph, VerticallyCenteredContainer} from "./styles"; import {useLiveQuery} from "dexie-react-hooks"; import db from "../app/db"; +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; const Notifications = (props) => { const subscription = props.subscription; @@ -47,6 +49,9 @@ const NotificationItem = (props) => { console.log(`[Notifications] Deleting notification ${notification.id} from ${subscriptionId}`); await db.notifications.delete(notification.id); // FIXME } + const attachment = notification.attachment; + const expired = attachment?.expires <= Date.now()/1000; + const image = attachment?.type.startsWith("image/") && !expired; return ( @@ -64,12 +69,36 @@ const NotificationItem = (props) => { {notification.title && {formatTitle(notification)}} {formatMessage(notification)} + {image && } + {attachment && !image && + + {attachment.name}
+ {attachment.size}, {attachment.expires} +
} {tags && Tags: {tags}}
+ {attachment && + + + + + }
); } + const NothingHereYet = (props) => { const shortUrl = topicShortUrl(props.subscription.baseUrl, props.subscription.topic); return (