feat(domains): enhance TLD and domain management with edit and delete functionality

- Added edit and delete buttons for TLDs in the TLD management interface.
- Implemented a modal confirmation for delete actions across TLDs, mailboxes, users, and aliases.
- Created separate edit pages for domains and TLDs with forms for updating their details.
- Improved user experience by adding alerts for error messages and success notifications.

feat(mail): streamline mailbox management with alias support

- Introduced alias creation and deletion functionality for mailboxes.
- Enhanced mailbox edit interface to include alias management.
- Added dropdowns for selecting users and domains when creating aliases.

fix(alerts): implement alert system for error messages

- Developed a reusable alert component to display error messages.
- Integrated alert dismiss functionality with automatic timeout for user notifications.

refactor: general code improvements and organization

- Updated error handling in the backend to support HTMX requests.
- Refactored redirect functions to handle HTMX redirects appropriately.

1 files changed, 44 insertions, 0 deletions

diff --git a/static/css/tailwind.css b/static/css/tailwind.css
index a325d92..2f948dc 100644
--- a/static/css/tailwind.css
+++ b/static/css/tailwind.css
@@ -308,6 +308,50 @@
   background: rgba(99, 102, 241, 0.1);
 }
 
+.alert-toast {
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  background: linear-gradient(
+    135deg,
+    rgba(239, 68, 68, 0.08),
+    rgba(239, 68, 68, 0.04)
+  );
+  backdrop-filter: blur(20px);
+  box-shadow:
+    0 10px 40px rgba(0, 0, 0, 0.3),
+    0 0 20px rgba(239, 68, 68, 0.05);
+  animation: alertSlideIn 0.3s ease-out;
+  min-width: 20rem;
+  max-width: 28rem;
+}
+
+.alert-toast.dismissing {
+  animation: alertSlideOut 0.2s ease-in forwards;
+}
+
+@keyframes alertSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes alertSlideOut {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
 ::selection {
   background-color: var(--color-accent-500);
   color: white;