refactor: Notifications (#259)

* feat: wrap ElNotification class in a showNotification method

* refactor: replace notification invocations in mod views

* feat: add 'info' type to showNotification method

* refactor: replace notification invocations in repair view

* refactor: replace notification invocations in settings view

* refactor: replace notification invocations in developer view

* feat: showNotification method now returns a NotificationHandle

* feat: showNotification has a duration argument

* refactor: replace notification invocations in pull requests module

* refactor: replace notification invocation in repair view

* refactor: replace notification invocations in UI store

* refactor: remove unused import from play view

* refactor: use showErrorNotification method to wrap up error display

* fix: add missing showErrorNotification imports

* style: format code

* style: format ThunderstoreModCard.vue

* style: format pull_requests.ts

* style: format SettingsView.vue

* style: format RepairView.vue

* style: format DeveloperView.vue

* refactor: remove useless import

* refactor: add missing showErrorNotification invocation

* feat: showErrorNotification has an optional title argument

* style: format LocalModsView.vue

5 files changed, 37 insertions, 144 deletions

diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index 7712756c..d9e268e3 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -87,10 +87,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { invoke } from "@tauri-apps/api";
-import { ElNotification } from "element-plus";
 import { GameInstall } from "../utils/GameInstall";
 import { TagWrapper } from "../../../src-tauri/bindings/TagWrapper";
 import PullRequestsSelector from "../components/PullRequestsSelector.vue";
+import { showErrorNotification, showNotification } from "../utils/ui";
 
 export default defineComponent({
     name: "DeveloperView",
@@ -130,30 +130,15 @@ export default defineComponent({
         },
         async crashApplication() {
             await invoke("force_panic");
-            ElNotification({
-                title: 'Error',
-                message: "Never should have been able to get here!",
-                type: 'error',
-                position: 'bottom-right'
-            });
+            showErrorNotification("Never should have been able to get here!");
         },
         async checkLinuxCompatibility() {
             await invoke("linux_checks")
                 .then(() => {
-                    ElNotification({
-                        title: 'Linux compatible',
-                        message: 'All checks passed',
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification('Linux compatible', 'All checks passed');
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Not linux compatible',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showNotification('Not Linux compatible', error, 'error');
                     console.error(error);
                 });
         },
@@ -174,20 +159,10 @@ export default defineComponent({
                 console.log(message);
 
                 // Just a visual indicator that it worked
-                ElNotification({
-                    title: 'Success',
-                    message: "Success",
-                    type: 'success',
-                    position: 'bottom-right'
-                });
+                showNotification('Success');
             })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async installMod() {
@@ -196,62 +171,32 @@ export default defineComponent({
                 install_type: this.$store.state.install_type
             } as GameInstall;
             let mod_to_install = this.mod_to_install_field_string;
-            await invoke("install_mod_caller", { gameInstall: game_install, thunderstoreModString: mod_to_install }).then((message) => {
+            await invoke<string>("install_mod_caller", { gameInstall: game_install, thunderstoreModString: mod_to_install }).then((message) => {
                 // Show user notification if mod install completed.
-                ElNotification({
-                    title: `Installed ${mod_to_install}`,
-                    message: message as string,
-                    type: 'success',
-                    position: 'bottom-right'
-                });
+                showNotification(`Installed ${mod_to_install}`, message);
             })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async getTags() {
             await invoke<TagWrapper[]>("get_list_of_tags")
                 .then((message) => {
                     this.ns_release_tags = message;
-                    ElNotification({
-                        title: "Done",
-                        message: "Fetched tags",
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification("Done", "Fetched tags");
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async compareTags() {
             await invoke<string>("compare_tags", {firstTag: this.firstTag.value, secondTag: this.secondTag.value})
                 .then((message) => {
                     this.release_notes_text = message;
-                    ElNotification({
-                        title: "Done",
-                        message: "Generated release notes",
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification("Done", "Generated release notes");
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
     }
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index 57d02904..2f3562ef 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { ElNotification } from 'element-plus';
 import { Tabs } from "../utils/Tabs";
 import PlayButton from '../components/PlayButton.vue';
 import { defineComponent } from "vue";
diff --git a/src-vue/src/views/RepairView.vue b/src-vue/src/views/RepairView.vue
index 12224524..9de9a7f3 100644
--- a/src-vue/src/views/RepairView.vue
+++ b/src-vue/src/views/RepairView.vue
@@ -32,11 +32,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ElNotification } from "element-plus";
 import { GameInstall } from "../utils/GameInstall";
 import { invoke } from "@tauri-apps/api";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { Store } from 'tauri-plugin-store-api';
+import { showErrorNotification, showNotification } from "../utils/ui";
 import { appWindow } from "@tauri-apps/api/window";
 const persistentStore = new Store('flight-core-settings.json');
 
@@ -55,20 +55,10 @@ export default defineComponent({
             } as GameInstall;
             await invoke("disable_all_but_core", { gameInstall: game_install })
                 .then((message) => {
-                    ElNotification({
-                        title: 'Success',
-                        message: "Disabled all mods but core",
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification('Success', "Disabled all mods but core");
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async forceInstallNorthstar() {
@@ -78,33 +68,22 @@ export default defineComponent({
             } as GameInstall;
 
             // Send notification telling the user to wait for the process to finish
-            const notification = ElNotification({
-                title: 'Force reinstalling Northstar',
-                message: 'Please wait',
-                duration: 0,
-                type: 'info',
-                position: 'bottom-right'
-            });
+            const notification = showNotification(
+                'Force reinstalling Northstar',
+                'Please wait',
+                'info',
+                0
+            );
 
             let install_northstar_result = invoke("install_northstar_caller", { gamePath: game_install.game_path, northstarPackageName: ReleaseCanal.RELEASE });
             await install_northstar_result
                 .then((message) => {
                     // Send notification
-                    ElNotification({
-                        title: `Done`,
-                        message: `Successfully reinstalled Northstar`,
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification('Done', `Successfully reinstalled Northstar`);
                     this.$store.commit('checkNorthstarUpdates');
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                     console.error(error);
                 })
                 .finally(() => {
@@ -119,20 +98,10 @@ export default defineComponent({
             } as GameInstall;
             await invoke("clean_up_download_folder_caller", { gameInstall: game_install, force: true }).then((message) => {
                 // Show user notification if task completed.
-                ElNotification({
-                    title: `Done`,
-                    message: `Done`,
-                    type: 'success',
-                    position: 'bottom-right'
-                });
+                showNotification('Done', 'Done');
             })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
         async clearFlightCorePersistentStore() {
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index e526f821..772a4c5c 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -72,10 +72,10 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ElNotification } from 'element-plus';
 import { invoke } from "@tauri-apps/api";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { Store } from 'tauri-plugin-store-api';
+import { showErrorNotification, showNotification } from "../utils/ui";
 import LanguageSelector from "../components/LanguageSelector.vue";
 const persistentStore = new Store('flight-core-settings.json');
 
@@ -125,12 +125,11 @@ export default defineComponent({
             this.developerModeClicks += 1;
             if (this.developerModeClicks >= 6 && !this.$store.state.developer_mode) {
                 this.$store.commit('toggleDeveloperMode');
-                ElNotification({
-                    title: this.$t('settings.dev_mode_enabled_title'),
-                    message: this.$t('settings.dev_mode_enabled_text'),
-                    type: 'info',
-                    position: 'bottom-right'
-                });
+                showNotification(
+                    this.$t('settings.dev_mode_enabled_title'),
+                    this.$t('settings.dev_mode_enabled_text'),
+                    'info'
+                );
                 this.developerModeClicks = 0;
             }
         },
@@ -141,12 +140,7 @@ export default defineComponent({
             await invoke("open_repair_window")
                 .then((message) => { })
                 .catch((error) => {
-                    ElNotification({
-                        title: 'Error',
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 });
         },
     },
diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue
index 2cd253ae..3fb90bdc 100644
--- a/src-vue/src/views/mods/LocalModsView.vue
+++ b/src-vue/src/views/mods/LocalModsView.vue
@@ -35,10 +35,10 @@
 
 <script lang="ts">
 import { invoke } from '@tauri-apps/api';
-import { ElNotification } from 'element-plus';
 import { defineComponent } from 'vue';
 import { GameInstall } from '../../utils/GameInstall';
 import { NorthstarMod } from "../../../../src-tauri/bindings/NorthstarMod";
+import { showErrorNotification, showNotification } from '../../utils/ui';
 
 export default defineComponent({
     name: 'LocalModsView',
@@ -85,12 +85,7 @@ export default defineComponent({
                 })
             }
             catch (error) {
-                ElNotification({
-                    title: this.$t('generic.error'),
-                    message: `${error}`,
-                    type: 'error',
-                    position: 'bottom-right'
-                });
+                showErrorNotification(`${error}`);
                 this.global_load_indicator = false;
                 return false;
             }
@@ -106,19 +101,10 @@ export default defineComponent({
             await invoke("delete_northstar_mod", { gameInstall: game_install, nsmodName: mod.name })
                 .then((message) => {
                     // Just a visual indicator that it worked
-                    ElNotification({
-                        title: this.$t('mods.local.success_deleting', {modName: mod.name}),
-                        type: 'success',
-                        position: 'bottom-right'
-                    });
+                    showNotification(this.$t('mods.local.success_deleting', {modName: mod.name}));
                 })
                 .catch((error) => {
-                    ElNotification({
-                        title: this.$t('generic.error'),
-                        message: error,
-                        type: 'error',
-                        position: 'bottom-right'
-                    });
+                    showErrorNotification(error);
                 })
                 .finally(() => {
                     this.$store.commit('loadInstalledMods');