Feat: Toast notification timeout settings (#3441)

* Add toast timeout to the settings

Changing gui, adding timeout with a fix value

memo

rc

rollback readme

cleanup code

cleanup code

Review fixes

review fix 2

* Feat: Add clearAll button below toastContainer

* Feat: Load & Apply defaults, improve wording

Chore: Remove unused

* Feat: Change setting to affect monitor notif. only

* Apply suggestions from code review

Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>

* Chore: Fix JSDoc

---------

Co-authored-by: Berczi Sandor <sandor.berczi@urss.hu>
Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>

src/layouts/Layout.vue

@@ -117,12 +117,23 @@
                 {{ $t("Settings") }}
             </router-link>
         </nav>
+
+        <button
+            v-if="numActiveToasts != 0"
+            type="button"
+            class="btn btn-normal clear-all-toast-btn"
+            @click="clearToasts"
+        >
+            <font-awesome-icon icon="times" />
+        </button>
     </div>
 </template>
 
 <script>
 import Login from "../components/Login.vue";
 import compareVersions from "compare-versions";
+import { useToast } from "vue-toastification";
+const toast = useToast();
 
 export default {
 
@@ -131,7 +142,11 @@ export default {
     },
 
     data() {
-        return {};
+        return {
+            toastContainer: null,
+            numActiveToasts: 0,
+            toastContainerObserver: null,
+        };
     },
 
     computed: {
@@ -159,11 +174,33 @@ export default {
     },
 
     mounted() {
+        this.toastContainer = document.querySelector(".bottom-right.toast-container");
 
+        // Watch the number of active toasts
+        this.toastContainerObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === "childList") {
+                    this.numActiveToasts = mutation.target.children.length;
+                }
+            }
+        });
+
+        if (this.toastContainer != null) {
+            this.toastContainerObserver.observe(this.toastContainer, { childList: true });
+        }
+    },
+
+    beforeUnmount() {
+        this.toastContainerObserver.disconnect();
     },
 
     methods: {
-
+        /**
+         * Clear all toast notifications.
+         */
+        clearToasts() {
+            toast.clear();
+        }
     },
 
 };
@@ -323,4 +360,22 @@ main {
         background-color: $dark-bg;
     }
 }
+
+.clear-all-toast-btn {
+    position: fixed;
+    right: 1em;
+    bottom: 1em;
+    font-size: 1.2em;
+    padding: 9px 15px;
+    width: 48px;
+    box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
+}
+
+@media (max-width: 770px) {
+    .clear-all-toast-btn {
+        bottom: 72px;
+        z-index: 100;
+    }
+}
+
 </style>