add checkmark to notification card to mark notification as read

web/public/static/langs/en.json

@@ -26,6 +26,7 @@
   "alert_not_supported_description": "Notifications are not supported in your browser.",
   "notifications_list": "Notifications list",
   "notifications_list_item": "Notification",
+  "notifications_mark_read": "Mark as read",
   "notifications_delete": "Delete notification",
   "notifications_copied_to_clipboard": "Copied to clipboard",
   "notifications_tags": "Tags",

web/src/app/SubscriptionManager.js

@@ -115,6 +115,12 @@ class SubscriptionManager {
             .delete();
     }
 
+    async markNotificationRead(notificationId) {
+        await db.notifications
+            .where({id: notificationId, new: 1})
+            .modify({new: 0});
+    }
+
     async markNotificationsRead(subscriptionId) {
         await db.notifications
             .where({subscriptionId: subscriptionId, new: 1})

web/src/app/db.js

@@ -8,9 +8,9 @@ import Dexie from 'dexie';
 
 const db = new Dexie('ntfy');
 
-db.version(1).stores({
+db.version(2).stores({
     subscriptions: '&id,baseUrl',
-    notifications: '&id,subscriptionId,time,new,[subscriptionId+new]', // compound key for query performance
+    notifications: '&id,subscriptionId,time,new,[subscriptionId+new],[id+new]', // compound keys for query performance
     users: '&baseUrl,username',
     prefs: '&key'
 });

web/src/components/Notifications.js

@@ -26,6 +26,7 @@ import {
     unmatchedTags
 } from "../app/utils";
 import IconButton from "@mui/material/IconButton";
+import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import {LightboxBackdrop, Paragraph, VerticallyCenteredContainer} from "./styles";
 import {useLiveQuery} from "dexie-react-hooks";
@@ -135,6 +136,10 @@ const NotificationItem = (props) => {
         console.log(`[Notifications] Deleting notification ${notification.id}`);
         await subscriptionManager.deleteNotification(notification.id)
     }
+    const handleMarkRead = async () => {
+        console.log(`[Notifications] Marking notification ${notification.id} as read`);
+        await subscriptionManager.markNotificationRead(notification.id)
+    }
     const handleCopy = (s) => {
         navigator.clipboard.writeText(s);
         props.onShowSnack();
@@ -150,6 +155,12 @@ const NotificationItem = (props) => {
                 <IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>
                     <CloseIcon />
                 </IconButton>
+                {notification.new === 1 &&
+                  <Tooltip title={t("notifications_mark_read")}>
+                    <IconButton onClick={handleMarkRead} sx={{ float: 'right', marginRight: -1, marginTop: -1 }} aria-label={t("notifications_mark_read")}>
+                      <CheckIcon />
+                    </IconButton>
+                  </Tooltip>}
                 <Typography sx={{ fontSize: 14 }} color="text.secondary">
                     {date}
                     {[1,2,4,5].includes(notification.priority) &&