Add notifications, notification on subscribe/unsubscribe in channels and subscriptions pages

package.json

@@ -12,6 +12,7 @@
         "@fortawesome/free-brands-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/vue-fontawesome": "^3.0.0-4",
+        "@kyvg/vue3-notification": "^2.3.4",
         "core-js": "3.18.2",
         "css-loader": "^6.4.0",
         "dompurify": "^2.3.3",

src/App.vue

@@ -1,4 +1,5 @@
 <template>
+    <notifications />
     <div class="uk-flex">
         <Menu style="flexShrink: 0" />
         <main

src/components/Channel.vue

@@ -120,6 +120,18 @@ export default {
                 },
             });
             this.subscribed = !this.subscribed;
+
+            var notifText;
+            if (this.subscribed) {
+                notifText = this.$t("notifications.notif_subscribe");
+            } else {
+                notifText = this.$t("notifications.notif_unsubscribe");
+            }
+
+            this.$notify({
+                text: notifText,
+                type: "success",
+            });
         },
     },
 };

src/components/SubscriptionsPage.vue

@@ -141,6 +141,18 @@ export default {
                 },
             });
             subscription.subscribed = !subscription.subscribed;
+
+            var notifText;
+            if (this.subscribed) {
+                notifText = this.$t("notifications.notif_subscribe");
+            } else {
+                notifText = this.$t("notifications.notif_unsubscribe");
+            }
+
+            this.$notify({
+                text: notifText,
+                type: "success",
+            });
         },
         exportHandler() {
             const subscriptions = [];

src/locales/en.json

@@ -73,6 +73,10 @@
         "no_subscriptions_in_subscriptions_2": "to see your subscriptions here.",
         "no_subscriptions_in_subscriptions_title": "No subscriptions yet"
     },
+    "notifications": {
+        "notif_subscribe": "Successfully subscribed!",
+        "notif_unsubscribe": "Successfully unsubscribed!"
+    },
     "comment": {
         "pinned_by": "Pinned by"
     },

src/main.js

@@ -59,6 +59,8 @@ const timeAgo = new TimeAgo("en-US");
 
 import("./registerServiceWorker");
 
+import Notifications from "@kyvg/vue3-notification";
+
 const mixin = {
     methods: {
         timeFormat: function(duration) {
@@ -259,6 +261,7 @@ window.i18n = i18n;
 const app = createApp(App);
 app.use(i18n);
 app.use(router);
+app.use(Notifications);
 app.mixin(mixin);
 app.component("FontAwesomeIcon", FontAwesomeIcon);
 app.mount("#app");

yarn.lock

@@ -1067,6 +1067,11 @@
     "@intlify/runtime" "9.1.9"
     "@intlify/shared" "9.1.9"
 
+"@kyvg/vue3-notification@^2.3.4":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@kyvg/vue3-notification/-/vue3-notification-2.3.4.tgz#7503647ae1d26a7c58bbf5182b505ca345c0882a"
+  integrity sha512-20Km1L75gncIZCjosT1OKbJl9HhNiOd7LRXqVIqlehHHem9NgBjQhDFz6XGo1RcF0MyA4/BC7kV7tcq/PMT+tA==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"