From 0c8fce7b42e468513be736c9dfdb5796b34db9a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Wed, 11 May 2022 15:11:17 +0200
Subject: [PATCH] Web: hide notifications after a few seconds

The notifications (like "job requeued" after pushing the "requeue" button)
are now hidden after 5 seconds.
---
 web/app/src/stores/notifications.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/app/src/stores/notifications.js b/web/app/src/stores/notifications.js
index 82301999..9be88171 100644
--- a/web/app/src/stores/notifications.js
+++ b/web/app/src/stores/notifications.js
@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia'
 
+/** Time after which a notification is hidden. */
+const MESSAGE_HIDE_DELAY_MS = 5000;
+
 /**
  * Store notifications to users of the web frontend.
  */
@@ -8,7 +11,9 @@ export const useNotifs = defineStore('notifications', {
     /** @type {{ msg: string, time: Date }[]} */
     history: [],
     /** @type { msg: string, time: Date } */
-    last: null,
+    last: "",
+
+    hideTimerID: 0,
   }),
   actions: {
     /**
@@ -20,6 +25,7 @@ export const useNotifs = defineStore('notifications', {
       this.history.push(notif);
       this.last = notif;
       this._prune();
+      this._restartHideTimer();
     },
 
     /* Ensure there is only 1000 items in the history. */
@@ -27,5 +33,16 @@ export const useNotifs = defineStore('notifications', {
       if (this.history.length <= 1000) return;
       this.history.splice(0, 1000 - this.history.length);
     },
+
+    _restartHideTimer() {
+      if (this.hideTimerID) window.clearTimeout(this.hideTimerID);
+      this.hideTimerID = window.setTimeout(this._hideMessage, MESSAGE_HIDE_DELAY_MS);
+    },
+    _hideMessage() {
+      this.$patch({
+        hideTimerID: 0,
+        last: "",
+      });
+    },
   },
 })