first draft

Author: ot-goegelem

src/App.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="app">
-    <toast position="bottom-right" />
+    <toast position="bottom-right">
+      <template #message="slotProps">
+        <div class="toast-content">
+          <div class="toast-text">
+            <div class="toast-summary">{{ slotProps.message.summary }}</div>
+            <div class="toast-detail">{{ slotProps.message.detail }}</div>
+          </div>
+          <button v-if="slotProps.message.data?.action" class="toast-action-btn" @click="slotProps.message.data.action()">
+            {{ slotProps.message.data.actionLabel }}
+          </button>
+        </div>
+      </template>
+    </toast>
     <router-view />
   </div>
 </template>
@@ -27,3 +39,35 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.toast-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.toast-summary {
+  font-weight: bold;
+}
+
+.toast-detail {
+  font-size: 0.9em;
+}
+
+.toast-action-btn {
+  align-self: flex-end;
+  padding: 4px 12px;
+  background-color: #4dabf7;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.toast-action-btn:hover {
+  background-color: #339af0;
+}
+</style>

src/app.js

@@ -7,7 +7,7 @@ import ToastService from "primevue/toastservice";
 import * as Sentry from "@sentry/browser";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faLayerGroup, faGlobeAfrica, faMobileAlt, faHammer, faEye } from "@fortawesome/free-solid-svg-icons";
+import { faLayerGroup, faGlobeAfrica, faMobileAlt, faHammer, faEye, faTrash, faLink, faLinkSlash, faSave, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 
 import App from "./App.vue";
@@ -53,7 +53,7 @@ app.use(PrimeVue, {
 // Setup directives and components
 app.directive("tooltip", Tooltip);
 app.use(ToastService);
-library.add(faLayerGroup, faGlobeAfrica, faMobileAlt, faHammer, faEye, faGithub);
+library.add(faLayerGroup, faGlobeAfrica, faMobileAlt, faHammer, faEye, faTrash, faLink, faLinkSlash, faSave, faExclamationTriangle, faGithub);
 app.component("FontAwesomeIcon", FontAwesomeIcon);
 
 // Mount the app