refactor(ui): improve naming and typing of new snackbar implementation

Author: luizhf42

ui/src/components/Snackbar/SnackbarNew.vue

@@ -3,7 +3,7 @@
     v-model="show"
     location="top"
     :timeout="4000"
-    :color="type"
+    :color="color"
     transition="slide-x-transition"
   >
     {{ message }}
@@ -12,13 +12,14 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { rawPlugin } from "@/plugins/snackbar";
+import { plugin } from "@/plugins/snackbar";
 
 const show = computed({
-  get: () => rawPlugin.state.show,
-  set: (value) => rawPlugin.setShow(value),
+  get: () => plugin.state.show,
+  set: (value) => plugin.setShow(value),
 });
 
-const message = computed(() => rawPlugin.state.message);
-const type = computed(() => rawPlugin.state.type);
+const message = computed(() => plugin.state.message);
+const type = computed(() => plugin.state.type);
+const color = computed(() => type.value ?? "info");
 </script>

ui/src/helpers/snackbar.ts

@@ -1,6 +1,6 @@
 import { inject } from "vue";
-import { InjectionKey, type ISnackbarPlugin } from "@/plugins/snackbar";
+import { InjectionKey, type SnackbarPlugin } from "@/plugins/snackbar";
 
-const useSnackbar = (): ISnackbarPlugin => inject(InjectionKey) as ISnackbarPlugin;
+const useSnackbar = (): SnackbarPlugin => inject(InjectionKey) as SnackbarPlugin;
 
 export default useSnackbar;

ui/src/main.ts

@@ -13,7 +13,7 @@ import "asciinema-player/dist/bundle/asciinema-player.css";
 import { loadFonts } from "./plugins/webfontloader";
 
 import SnackbarComponent from "./components/Snackbar/Snackbar.vue";
-import { SnackbarPlugin } from "./plugins/snackbar";
+import { SnackbarPluginProvider } from "./plugins/snackbar";
 
 const app = createApp(App);
 
@@ -58,6 +58,6 @@ if ((envVariables.isCloud) && (envVariables.chatWootWebsiteToken && envVariables
   );
 }
 
-app.use(SnackbarPlugin);
+app.use(SnackbarPluginProvider);
 app.component("SnackbarComponent", SnackbarComponent);
 app.mount("#app");

ui/src/plugins/snackbar.ts

@@ -2,28 +2,30 @@ import { App, Plugin, reactive, readonly } from "vue";
 
 const InjectionKey = Symbol("snackbar");
 
+type SnackbarType = "success" | "error" | "info" | "warning";
+
 interface SnackbarState {
   message: string;
-  type: "success" | "error" | "info" | "warning" | "";
+  type: SnackbarType | null;
   show: boolean;
 }
 
-interface ISnackbarPlugin {
+interface SnackbarPlugin {
   showSuccess: (msg: string) => void;
   showError: (msg: string) => void;
   showInfo: (msg: string) => void;
   showWarning: (msg: string) => void;
-  hideSnackbar: () => void;
+  setShow: (value: boolean) => void;
   state: Readonly<SnackbarState>;
 }
 
 const state = reactive<SnackbarState>({
   message: "",
-  type: "",
+  type: null,
   show: false,
 });
 
-const showSnackbar = (type: SnackbarState["type"], message: string) => {
+const showSnackbar = (type: SnackbarType, message: string) => {
   state.message = message;
   state.type = type;
   state.show = true;
@@ -33,7 +35,7 @@ const showSnackbar = (type: SnackbarState["type"], message: string) => {
   }, 4000);
 };
 
-const plugin = {
+const plugin: SnackbarPlugin = {
   showSuccess: (msg: string) => showSnackbar("success", msg),
   showError: (msg: string) => showSnackbar("error", msg),
   showInfo: (msg: string) => showSnackbar("info", msg),
@@ -42,11 +44,11 @@ const plugin = {
   state: readonly(state),
 };
 
-const SnackbarPlugin: Plugin = {
+const SnackbarPluginProvider: Plugin = {
   install(app: App) {
     app.provide(InjectionKey, plugin);
   },
 };
 
-export { SnackbarPlugin, InjectionKey, plugin as rawPlugin };
-export type { SnackbarState, ISnackbarPlugin };
+export { SnackbarPluginProvider, InjectionKey, plugin };
+export type { SnackbarState, SnackbarPlugin };