diff --git a/ui/package.json b/ui/package.json
index c16c5b0..f393ced 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,9 +27,11 @@
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/test-utils": "^2.4.1",
"@vueuse/core": "^10.5.0",
+ "animate.css": "^4.1.1",
"axios": "^1.5.0",
"bulma": "^0.9.4",
"bulma-prefers-dark": "^0.1.0-beta.1",
+ "bulma-toast": "^2.4.3",
"chai": "^4.2.0",
"core-js": "^3.32.2",
"eslint": "^8.49.0",
diff --git a/ui/src/components/bulma/Toast.vue b/ui/src/components/bulma/Toast.vue
new file mode 100644
index 0000000..a8e3bae
--- /dev/null
+++ b/ui/src/components/bulma/Toast.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
diff --git a/ui/src/main.scss b/ui/src/main.scss
index 8919c2c..77a9e2e 100644
--- a/ui/src/main.scss
+++ b/ui/src/main.scss
@@ -26,6 +26,7 @@ $card-background-color-dark: $background-dark;
// main imports
//==============
+@import "~animate.css/animate";
@import "~bulma/bulma";
@import "~bulma-prefers-dark/bulma-prefers-dark";
diff --git a/ui/src/main.ts b/ui/src/main.ts
index ab6a9be..cf89026 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -1,6 +1,7 @@
import { Advent22Plugin } from "@/plugins/advent22";
import { FontAwesomePlugin } from "@/plugins/fontawesome";
import { advent22Store } from "@/plugins/store";
+import * as bulmaToast from "bulma-toast";
import { createPinia } from "pinia";
import { createApp } from "vue";
import App from "./App.vue";
@@ -16,3 +17,13 @@ app.use(createPinia());
advent22Store().init();
app.mount("#app");
+
+bulmaToast.setDefaults({
+ duration: 10000,
+ pauseOnHover: true,
+ dismissible: true,
+ closeOnClick: false,
+ type: "is-white",
+ position: "top-center",
+ animate: { in: "backInDown", out: "backOutUp" },
+});
diff --git a/ui/yarn.lock b/ui/yarn.lock
index c32e29f..921326c 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -2205,6 +2205,11 @@ ajv@^8.0.0, ajv@^8.9.0:
require-from-string "^2.0.2"
uri-js "^4.2.2"
+animate.css@^4.1.1:
+ version "4.1.1"
+ resolved "https://registry.yarnpkg.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+ integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
ansi-colors@4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -2503,6 +2508,11 @@ bulma-prefers-dark@^0.1.0-beta.1:
resolved "https://registry.yarnpkg.com/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz#074aa71899f389a0137dd3753f0d89e96ab1e59b"
integrity sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==
+bulma-toast@^2.4.3:
+ version "2.4.3"
+ resolved "https://registry.yarnpkg.com/bulma-toast/-/bulma-toast-2.4.3.tgz#cd302ad5ed625f47d7426b48b741250950e1cbf9"
+ integrity sha512-OpNn3MUD27ne8RkQns3yS7HaltU5/s67ivbdxAb/gXjxmfZhIdoeUFPYkopEXwCpzc+VasYy1OAglGIFvjEvUQ==
+
bulma@^0.9.4:
version "0.9.4"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.4.tgz#0ca8aeb1847a34264768dba26a064c8be72674a1"