From 15ac5ed23bea4209c9cda12cbf0586f6d9f69b94 Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Sat, 7 May 2022 19:16:08 -0400
Subject: [PATCH] Add "mark as read" button

---
 docs/releases.md                    |  1 +
 web/public/static/langs/en.json     |  2 +-
 web/src/app/SubscriptionManager.js  |  2 +-
 web/src/app/db.js                   |  4 ++--
 web/src/components/Notifications.js | 14 ++++++++------
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/docs/releases.md b/docs/releases.md
index a1e1c0ec..b1337627 100644
--- a/docs/releases.md
+++ b/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:**
 
diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
index 0f7c9756..63e9a3a0 100644
--- a/web/public/static/langs/en.json
+++ b/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}}",
diff --git a/web/src/app/SubscriptionManager.js b/web/src/app/SubscriptionManager.js
index 6384aa82..01418ee8 100644
--- a/web/src/app/SubscriptionManager.js
+++ b/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});
     }
 
diff --git a/web/src/app/db.js b/web/src/app/db.js
index 7c983090..7c82be31 100644
--- a/web/src/app/db.js
+++ b/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'
 });
diff --git a/web/src/components/Notifications.js b/web/src/components/Notifications.js
index 4d9043e2..87756b90 100644
--- a/web/src/components/Notifications.js
+++ b/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")}>
-                    <CloseIcon />
-                </IconButton>
+                <Tooltip title={t("notifications_delete")} enterDelay={500}>
+                    <IconButton onClick={handleDelete} sx={{ float: 'right', marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>
+                        <CloseIcon />
+                    </IconButton>
+                </Tooltip>
                 {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")}>
+                  <Tooltip title={t("notifications_mark_read")} enterDelay={500}>
+                    <IconButton onClick={handleMarkRead} sx={{ float: 'right', marginRight: -0.5, marginTop: -1 }} aria-label={t("notifications_mark_read")}>
                       <CheckIcon />
                     </IconButton>
                   </Tooltip>}