feat: Notification menu (#615)

Introduces a notification menu, which hosts notifications fired while the app was not focused.
Notifications can be closed by the user.

2 files changed, 33 insertions, 0 deletions

diff --git a/src-vue/src/plugins/modules/notifications.ts b/src-vue/src/plugins/modules/notifications.ts
new file mode 100644
index 00000000..ed57f8af
--- /dev/null
+++ b/src-vue/src/plugins/modules/notifications.ts
@@ -0,0 +1,31 @@
+type NotificationType = 'success' | 'warning' | 'info' | 'error';
+
+export interface Notification {
+    title: string;
+    text: string;
+    type: NotificationType;
+}
+
+interface NotificationsStoreState {
+    notifications: Notification[];
+}
+
+
+/**
+ * This notification module is meant to host the list of notifications that have been fired while the application was
+ * not focused.
+ * This list is then used by the [NotificationButton] component to display notifications to user.
+ **/
+export const notificationsModule = {
+    state: () => ({
+        notifications: []
+    }) as NotificationsStoreState,
+    mutations: {
+        addNotification(state: NotificationsStoreState, payload: Notification) {
+            state.notifications.push(payload);
+        },
+        removeNotification(state: NotificationsStoreState, index: number): void {
+            state.notifications.splice(index, 1);
+        }
+    }
+  }
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index 854cd19e..56bf37e9 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -19,6 +19,7 @@ import { searchModule } from './modules/search';
 import { i18n } from '../main';
 import { pullRequestModule } from './modules/pull_requests';
 import { showErrorNotification, showNotification } from '../utils/ui';
+import { notificationsModule } from './modules/notifications';
 
 const persistentStore = new Store('flight-core-settings.json');
 
@@ -57,6 +58,7 @@ export const store = createStore<FlightCoreStore>({
     modules: {
         search: searchModule,
         pullrequests: pullRequestModule,
+        notifications: notificationsModule
     },
     state(): FlightCoreStore {
         return {