feat: use real toaster

Author: sifferhans

app.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { useAuth0 } from "@auth0/auth0-vue";
+import { Toaster } from "vue-sonner";
+import "vue-sonner/style.css";
 
-const { $appInsights } = useNuxtApp();
+const { $appInsights, $colorMode } = useNuxtApp();
 
 const { isLoading, loginWithRedirect, isAuthenticated, error, logout } =
   useAuth0();
@@ -108,6 +110,17 @@ useHead({
 
 <template>
   <div class="h-full">
+    <Toaster
+      :theme="$colorMode.preference"
+      expand
+      position="bottom-center"
+      :toast-options="{
+        style: {
+          background: 'var(--bmm-background-3)',
+          color: 'var(--bmm-label-1)',
+        },
+      }"
+    />
     <NuxtLayout v-if="isAuthenticated && !error">
       <div class="container mx-auto min-w-80 px-2 pb-20 lg:px-9">
         <NuxtPage />

components/CopyToClipboard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { NuxtRoute, RoutesNamesList } from "@typed-router";
+import { toast } from "vue-sonner";
 
 const props = defineProps<{
   link: NuxtRoute<RoutesNamesList, string, boolean>;
@@ -10,22 +11,22 @@ const runtimeConfig = useRuntimeConfig();
 const isElectron = runtimeConfig.public.systemName === "Electron";
 
 const router = useRouter();
-const showToast = ref(false);
 
 const copyToClipboard = () => {
-  showToast.value = true;
-
   const domain = isElectron
     ? `https://${config.websiteDomain}`
     : window.location.origin;
 
-  navigator.clipboard.writeText(
-    `${domain}${router.resolve(props.link).href.replace("/./", "/")}`, // not sure why Electron adds /. at the beginning
-  );
-
-  setTimeout(() => {
-    showToast.value = false;
-  }, 2000);
+  navigator.clipboard
+    .writeText(
+      `${domain}${router.resolve(props.link).href.replace("/./", "/")}`, // not sure why Electron adds /. at the beginning
+    )
+    .then(() => {
+      toast.success(t("share.link-copied-message"));
+    })
+    .catch(() => {
+      toast.error("Could not copy link");
+    });
 };
 
 defineExpose({
@@ -34,14 +35,6 @@ defineExpose({
 </script>
 
 <template>
-  <div
-    v-if="showToast"
-    class="fixed inset-0 z-20 flex items-center justify-center bg-white-2 p-4 backdrop-blur-md dark:bg-black-4"
-  >
-    <p class="rounded-xl bg-tint px-10 py-6 text-label-1 dark:text-black-1">
-      {{ t("share.link-copied-message") }}
-    </p>
-  </div>
   <div class="cursor-pointer" @click.stop="copyToClipboard">
     <slot />
   </div>

package.json

@@ -47,7 +47,8 @@
     "string-strip-html": "^13.4.8",
     "tailwindcss": "^3.4.3",
     "ua-parser-js": "^1.0.37",
-    "vue-draggable-plus": "^0.3.5"
+    "vue-draggable-plus": "^0.3.5",
+    "vue-sonner": "^2.0.8"
   },
   "devDependencies": {
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",