Add "mark as read" button

docs/releases.md

@@ -35,6 +35,7 @@ to [@Joeharrison94](https://github.com/Joeharrison94) for the input.
 
 * Better parsing of the user actions, allowing quotes (no ticket)
 * Make web app more accessible ([#217](https://github.com/binwiederhier/ntfy/issues/217))
+* Add "mark as read" icon button to notification ([#243](https://github.com/binwiederhier/ntfy/pull/243), thanks to [@wunter8](https://github.com/wunter8))
 
 **Bugs:**
 

web/public/static/langs/en.json

@@ -27,7 +27,7 @@
   "notifications_list": "Notifications list",
   "notifications_list_item": "Notification",
   "notifications_mark_read": "Mark as read",
-  "notifications_delete": "Delete notification",
+  "notifications_delete": "Delete",
   "notifications_copied_to_clipboard": "Copied to clipboard",
   "notifications_tags": "Tags",
   "notifications_priority_x": "Priority {{priority}}",

web/src/app/SubscriptionManager.js

@@ -117,7 +117,7 @@ class SubscriptionManager {
 
     async markNotificationRead(notificationId) {
         await db.notifications
-            .where({id: notificationId, new: 1})
+            .where({id: notificationId})
             .modify({new: 0});
     }
 

web/src/app/db.js

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

web/src/components/Notifications.js

@@ -99,7 +99,7 @@ const NotificationList = (props) => {
         >
             <Container
                 maxWidth="md"
-                role="list" 
+                role="list"
                 aria-label={t("notifications_list")}
                 sx={{
                     marginTop: 3,
@@ -152,12 +152,14 @@ const NotificationItem = (props) => {
     return (
         <Card sx={{ minWidth: 275, padding: 1 }} role="listitem" aria-label={t("notifications_list_item")}>
             <CardContent>
-                <IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>
+                <Tooltip title={t("notifications_delete")} enterDelay={500}>
-                    <CloseIcon />
+                    <IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>
-                </IconButton>
+                        <CloseIcon />
+                    </IconButton>
+                </Tooltip>
                 {notification.new === 1 &&
-                  <Tooltip title={t("notifications_mark_read")}>
+                  <Tooltip title={t("notifications_mark_read")} enterDelay={500}>
-                    <IconButton onClick={handleMarkRead} sx={{ float: 'right', marginRight: -1, marginTop: -1 }} aria-label={t("notifications_mark_read")}>
+                    <IconButton onClick={handleMarkRead} sx={{ float: 'right', marginRight: -0.5, marginTop: -1 }} aria-label={t("notifications_mark_read")}>
                       <CheckIcon />
                     </IconButton>
                   </Tooltip>}