dev: automated commit - 2025-06-17 16:15:21

templates/toast.templ

@@ -0,0 +1,73 @@
+
+package templates
+
+import "fmt"
+
+// NotificationList renders the container for notifications
+templ NotificationList() {
+	<ul x-sync id="notification_list" x-merge="prepend" role="status" class="list-unstyled">
+		{ children... }
+	</ul>
+}
+
+// NotificationToast renders a single notification toast
+templ NotificationToast(message, notificationType string) {
+	<li>
+		<div
+			class={ fmt.Sprintf("toast align-items-center text-white bg-%s show", notificationType) }
+			role="alert"
+			aria-live="assertive"
+			aria-atomic="true"
+			x-data="{
+				show: false,
+				init() {
+					this.$nextTick(() => this.show = true);
+					setTimeout(() => this.dismiss(), 6000);
+				},
+				dismiss() {
+					this.show = false;
+					setTimeout(() => this.$root.remove(), 500);
+				}
+			}"
+			x-show="show"
+			x-transition.duration.500ms
+		>
+			<div class="d-flex">
+				<div class="toast-body">{ message }</div>
+				<button
+					type="button"
+					class="btn-close btn-close-white me-2 m-auto"
+					@click="dismiss()"
+					aria-label="Close"
+				>
+					&times;
+				</button>
+			</div>
+		</div>
+	</li>
+}
+
+// Helper functions for common notification types
+templ SuccessNotification(message string) {
+	@NotificationList() {
+		@NotificationToast(message, "success")
+	}
+}
+
+templ ErrorNotification(message string) {
+	@NotificationList() {
+		@NotificationToast(message, "danger")
+	}
+}
+
+templ WarningNotification(message string) {
+	@NotificationList() {
+		@NotificationToast(message, "warning")
+	}
+}
+
+templ InfoNotification(message string) {
+	@NotificationList() {
+		@NotificationToast(message, "info")
+	}
+}