web: add notification 'mark as seen' button

web/src/elements/buttons/ActionButton.ts

@@ -15,11 +15,6 @@ export class ActionButton extends SpinnerButton {
         }
         this.setLoading();
         const csrftoken = getCookie("authentik_csrf");
-        if (!csrftoken) {
-            console.debug("No csrf token in cookie");
-            this.setDone(ERROR_CLASS);
-            return;
-        }
         const request = new Request(this.url, {
             headers: { "X-CSRFToken": csrftoken },
         });

web/src/elements/notifications/NotificationDrawer.ts

@@ -30,9 +30,12 @@ export class NotificationDrawer extends LitElement {
     }
 
     firstUpdated(): void {
-        Notification.list().then(r => {
+        Notification.list({
+            seen: false,
+            ordering: "-created"
+        }).then(r => {
             this.notifications = r;
-            this.unread = r.results.filter((n) => !n.seen).length;
+            this.unread = r.results.length;
         });
     }
 
@@ -63,6 +66,15 @@ export class NotificationDrawer extends LitElement {
                     ${item.event?.action}
                 </h2>
             </div>
+            <div class="pf-c-notification-drawer__list-item-action">
+                <button class="pf-c-dropdown__toggle pf-m-plain" type="button" @click=${() => {
+                    Notification.markSeen(item.pk).then(() => {
+                        this.firstUpdated();
+                    });
+                }}>
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
             <p class="pf-c-notification-drawer__list-item-description">${item.body}</p>
             <small class="pf-c-notification-drawer__list-item-timestamp">${age}</small>
         </li>`;