+ {{#if this.toast.isVisible}}
+
+ {{this.toast.message}}
+
+ {{/if}}
+
+}
diff --git a/app/services/toast.js b/app/services/toast.js
new file mode 100644
index 0000000..4116944
--- /dev/null
+++ b/app/services/toast.js
@@ -0,0 +1,21 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class ToastService extends Service {
+ @tracked message = null;
+ @tracked isVisible = false;
+ timeoutId = null;
+
+ show(message, duration = 3000) {
+ this.message = message;
+ this.isVisible = true;
+
+ if (this.timeoutId) {
+ clearTimeout(this.timeoutId);
+ }
+
+ this.timeoutId = setTimeout(() => {
+ this.isVisible = false;
+ }, duration);
+ }
+}
diff --git a/app/styles/app.css b/app/styles/app.css
index 8c53979..f27c8e5 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1321,3 +1321,36 @@ button.create-place {
cursor: not-allowed;
pointer-events: none;
}
+
+/* Toast Notification */
+.toast-notification {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: rgb(51 51 51 / 85%);
+ backdrop-filter: blur(4px);
+ color: white;
+ padding: 0.75rem 1.5rem;
+ border-radius: 999px;
+ z-index: 9999;
+ box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+ animation: fade-in-up 0.3s ease-out forwards;
+ text-align: center;
+ max-width: 90%;
+ font-size: 0.9rem;
+ font-weight: 500;
+ pointer-events: none;
+}
+
+@keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translate(-50%, 1rem);
+ }
+
+ to {
+ opacity: 1;
+ transform: translate(-50%, 0);
+ }
+}
diff --git a/app/templates/application.gjs b/app/templates/application.gjs
index 8dae51b..8dfd51b 100644
--- a/app/templates/application.gjs
+++ b/app/templates/application.gjs
@@ -3,6 +3,7 @@ import { pageTitle } from 'ember-page-title';
import Map from '#components/map';
import AppHeader from '#components/app-header';
import AppMenu from '#components/app-menu/index';
+import Toast from '#components/toast';
import { service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
@@ -89,6 +90,8 @@ export default class ApplicationComponent extends Component {