From 3e02fda6ab8e5ef45b01ad4c892a2d051abc9212 Mon Sep 17 00:00:00 2001
From: ismaail <contact@ismaail.com>
Date: Fri, 13 Sep 2024 21:52:02 +0100
Subject: [PATCH 1/7] Add <x-icon.close> component

---
 resources/views/components/icons/close.blade.php | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 resources/views/components/icons/close.blade.php

diff --git a/resources/views/components/icons/close.blade.php b/resources/views/components/icons/close.blade.php
new file mode 100644
index 0000000..bd006d3
--- /dev/null
+++ b/resources/views/components/icons/close.blade.php
@@ -0,0 +1,3 @@
+<svg {{ $attributes->twMerge('size-6') }} xmlns="http://www.w3.org/2000/svg" fill="fillColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

From d434ff401f07d4e6e451a52803adbac274e838ce Mon Sep 17 00:00:00 2001
From: ismaail <contact@ismaail.com>
Date: Fri, 13 Sep 2024 21:52:18 +0100
Subject: [PATCH 2/7] Add <utils.notice> Component

Add <utils.notice> Component
---
 .../views/components/utils/notice.blade.php   | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 resources/views/components/utils/notice.blade.php

diff --git a/resources/views/components/utils/notice.blade.php b/resources/views/components/utils/notice.blade.php
new file mode 100644
index 0000000..94eaf1f
--- /dev/null
+++ b/resources/views/components/utils/notice.blade.php
@@ -0,0 +1,66 @@
+{{-- @see https://codepen.io/KevinBatdorf/pen/JjGKbMa?editors=1010 --}}
+<div>
+	<div
+		x-data="noticesHandler()"
+		class="fixed right-0 left-auto inset-0 flex flex-col-reverse items-end justify-start p-4 space-y-4 h-screen w-0"
+		@notice.window="add($event.detail)"
+		style="pointer-events:none">
+		<template x-for="notice of notices" :key="notice.id">
+			<div
+					x-show="visible.includes(notice)"
+					x-transition:enter="transition ease-in duration-200"
+					x-transition:enter-start="transform opacity-0 translate-y-2"
+					x-transition:enter-end="transform opacity-100"
+					x-transition:leave="transition ease-out duration-500"
+					x-transition:leave-start="transform translate-x-0 opacity-100"
+					x-transition:leave-end="transform translate-x-full opacity-0"
+					class="max-wxs min-w-80 text-sm text-white rounded-xl shadow-lg" role="alert" tabindex="-1" aria-labelledby="hs-toast-solid-color-teal-label"
+					:class="{
+							'bg-teal-500': notice.type === 'success',
+							'bg-blue-500': notice.type === 'info',
+							'bg-orange-500': notice.type === 'warning',
+							'bg-red-500': notice.type === 'error',
+						}"
+					style="pointer-events:all"
+			>
+				<div class="flex px-4 pt-4 pb-2 items-start">
+					<p x-text="notice.text" class="text-pretty"></p>
+					<div class="ms-auto">
+						<button @click="remove(notice.id)" type="button" class="inline-flex shrink-0 justify-center items-center rounded-lg text-white hover:text-white opacity-50 hover:opacity-100 focus:outline-none focus:opacity-100" aria-label="Close">
+							<span class="sr-only">Close</span>
+							<x-icons.close></x-icons.close>
+						</button>
+					</div>
+				</div>
+			</div>
+		</template>
+	</div>
+</div>
+
+@push('javascript')
+	<script>
+		function noticesHandler() {
+			return {
+				notices: [],
+				visible: [],
+				add(notice) {
+					notice.id = Date.now();
+					this.notices.push(notice);
+					this.fire(notice.id);
+				},
+				fire(id) {
+					this.visible.push(this.notices.find(notice => notice.id === id));
+					const timeShown = 5000 * this.visible.length;
+					setTimeout(() => {
+						this.remove(id)
+					}, timeShown);
+				},
+				remove(id) {
+					const notice = this.visible.find(notice => notice.id === id);
+					const index = this.visible.indexOf(notice);
+					this.visible.splice(index, 1);
+				},
+			}
+		}
+	</script>
+@endpush

From 5110ee6967fffcec1703c4bd80d0cd86ee4fd7ee Mon Sep 17 00:00:00 2001
From: ismaail <contact@ismaail.com>
Date: Fri, 13 Sep 2024 21:52:46 +0100
Subject: [PATCH 3/7] Add <x-utils.notice> in layout/app template

---
 resources/views/components/layouts/app.blade.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index b153e13..8561fed 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -20,6 +20,7 @@
 	<div class="flex flex-grow w-full overflow-y-hidden">
 		{{ $slot }}
 	</div>
+	<x-utils.notice />
 	@livewire('wire-elements-modal')
 	@vite('resources/assets/js/app.js')
 </body>

From 31fb08f1a8872923faf78a328882ddc09b7b2c0c Mon Sep 17 00:00:00 2001
From: ismaail <contact@ismaail.com>
Date: Fri, 13 Sep 2024 21:53:02 +0100
Subject: [PATCH 4/7] Add @stack('javascript') to layout/app template

---
 resources/views/components/layouts/app.blade.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index 8561fed..9aa918e 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -23,5 +23,6 @@
 	<x-utils.notice />
 	@livewire('wire-elements-modal')
 	@vite('resources/assets/js/app.js')
+	@stack('javascript')
 </body>
 </html>

From 69af185dae70dc1f7f96eb66d3768f22a4fdccae Mon Sep 17 00:00:00 2001
From: ismaail <contact@ismaail.com>
Date: Fri, 13 Sep 2024 22:45:53 +0100
Subject: [PATCH 5/7] Add UseNotice Helper Trait

---
 src/Support/Helpers/Concerns/UseNotice.php | 39 ++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/Support/Helpers/Concerns/UseNotice.php

diff --git a/src/Support/Helpers/Concerns/UseNotice.php b/src/Support/Helpers/Concerns/UseNotice.php
new file mode 100644
index 0000000..fae0b24
--- /dev/null
+++ b/src/Support/Helpers/Concerns/UseNotice.php
@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Support\Helpers\Concerns;
+
+trait UseNotice
+{
+    public function info(string $message): void
+    {
+        $this->notice('info', $message,);
+    }
+
+    public function success(string $message): void
+    {
+        $this->notice('success', $message,);
+    }
+
+    public function warning(string $message): void
+    {
+        $this->notice('warning', $message,);
+    }
+
+    public function error(string $message): void
+    {
+        $this->notice('error', $message,);
+    }
+
+    public function notice(string $type, string $message): void
+    {
+        $this->dispatch(
+            'notice.add',
+            [
+                'type' => $type,
+                'text' => $message,
+            ]
+        );
+    }
+}

From f7c53632852e5145d6dcad03d4cf4bb6d3866b22 Mon Sep 17 00:00:00 2001
From: ismaail <contact@ismaail.com>
Date: Fri, 13 Sep 2024 22:46:37 +0100
Subject: [PATCH 6/7] Listen to 'notice.add' event in app.js

---
 resources/assets/js/app.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 581face..9b9a38c 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -8,3 +8,7 @@ window.addEventListener('refresh.preline.dropdown', () => {
 
 	setTimeout(() => HSDropdown.autoInit(), 1000);
 });
+
+window.addEventListener('notice.add', (event) => {
+	Livewire.dispatch('notice', event.detail[0]);
+});

From 193ec06e0a60ce7309858d6ff5fcc4b363330d42 Mon Sep 17 00:00:00 2001
From: ismaail <contact@ismaail.com>
Date: Fri, 13 Sep 2024 22:47:11 +0100
Subject: [PATCH 7/7] Use UseNotice in CardComponent when starting, stopping &
 deleting a Card

---
 app/Livewire/Card/CardComponent.php | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/Livewire/Card/CardComponent.php b/app/Livewire/Card/CardComponent.php
index 40a7afb..4575485 100644
--- a/app/Livewire/Card/CardComponent.php
+++ b/app/Livewire/Card/CardComponent.php
@@ -10,9 +10,12 @@
 use Domain\Timelog\Actions\CreateTimelogAction;
 use Illuminate\Contracts\View\View;
 use Livewire\Component;
+use Support\Helpers\Concerns\UseNotice;
 
 class CardComponent extends Component
 {
+    use UseNotice;
+
     public Card $card;
 
     protected $listeners = [
@@ -30,6 +33,7 @@ public function start(): void
         }
 
         $this->refreshCard($currentCard);
+        $this->success('Task started successfully.');
     }
 
     public function stop(): void
@@ -41,6 +45,7 @@ public function stop(): void
         CreateTimelogAction::run($currentCard);
 
         $this->refreshCard($currentCard);
+        $this->success('Task Stoped successfully.');
     }
 
     public function delete(): void
@@ -50,6 +55,7 @@ public function delete(): void
         $this->card->delete();
 
         $this->dispatch("bucket-$bucketId-updated");
+        $this->success('Task Deleted successfully.');
     }
 
     public function render(): View