feat: toasts/copy tracking script

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

web/src/components/settings/dialogs.tsx

@@ -19,6 +19,7 @@ import {
 	type UserResponse,
 } from "../../api";
 import { InfoIcon } from "lucide-react";
+import { createToast } from "../toast";
 
 const toTitleCase = (str: string) => str[0].toUpperCase() + str.slice(1);
 
@@ -52,6 +53,7 @@ export const DeleteDialog = ({
 					invalidateUsers();
 					break;
 			}
+			createToast(`${toTitleCase(type)} deleted successfully`, "success");
 		},
 		onError: console.error,
 	});
@@ -117,6 +119,7 @@ export const EditProjectEntities = ({ project, trigger }: { project: ProjectResp
 		mutationFn: api["/api/dashboard/project/{project_id}"].put,
 		onSuccess: () => {
 			closeRef?.current?.click();
+			createToast("Entities updated successfully", "success");
 			invalidateProjects();
 		},
 		onError: console.error,
@@ -184,6 +187,7 @@ export const EditProject = ({ project, trigger }: { project: ProjectResponse; tr
 		onSuccess: () => {
 			closeRef?.current?.click();
 			queryClient.invalidateQueries({ queryKey: ["projects"] });
+			createToast("Project updated successfully", "success");
 		},
 		onError: console.error,
 	});
@@ -256,6 +260,7 @@ export const CreateProject = () => {
 		mutationFn: api["/api/dashboard/project/{project_id}"].post,
 		onSuccess: () => {
 			closeRef?.current?.click();
+			createToast("Project created successfully", "success");
 			invalidateProjects();
 		},
 		onError: console.error,
@@ -337,6 +342,7 @@ export const EditEntity = ({ entity, trigger }: { entity: EntityResponse; trigge
 		mutationFn: api["/api/dashboard/entity/{entity_id}"].put,
 		onSuccess: () => {
 			closeRef?.current?.click();
+			createToast("Entity updated successfully", "success");
 			invalidateEntities();
 		},
 		onError: console.error,
@@ -422,6 +428,7 @@ export const CreateEntity = () => {
 		mutationFn: api["/api/dashboard/entity"].post,
 		onSuccess: () => {
 			closeRef?.current?.click();
+			createToast("Entity created successfully", "success");
 			invalidateEntities();
 		},
 		onError: console.error,
@@ -497,6 +504,7 @@ export const EditPassword = ({ user, trigger }: { user: UserResponse; trigger: J
 	const { mutate, error, reset } = useMutation({
 		mutationFn: api["/api/dashboard/user/{username}/password"].put,
 		onSuccess: () => {
+			createToast("Password updated successfully", "success");
 			closeRef?.current?.click();
 		},
 		onError: console.error,
@@ -564,6 +572,7 @@ export const EditUser = ({ user, trigger }: { user: UserResponse; trigger: JSX.E
 		mutationFn: api["/api/dashboard/user/{username}"].put,
 		onSuccess: () => {
 			closeRef?.current?.click();
+			createToast("User updated successfully", "success");
 			invalidateUsers();
 		},
 		onError: console.error,
@@ -624,6 +633,7 @@ export const CreateUser = () => {
 		mutationFn: api["/api/dashboard/user"].post,
 		onSuccess: () => {
 			closeRef?.current?.click();
+			createToast("User created successfully", "success");
 			invalidateUsers();
 		},
 		onError: console.error,

web/src/components/settings/tables.tsx

@@ -24,6 +24,7 @@ import {
 	type ProjectResponse,
 	type UserResponse,
 } from "../../api";
+import { createToast } from "../toast";
 
 type DropdownOptions = Record<string, ((close: () => void) => JSX.Element) | null>;
 
@@ -74,7 +75,6 @@ const ProjectDropdown = ({ project }: { project: ProjectResponse }) => {
 				}
 			/>
 		),
-
 		delete: (close) => (
 			<DeleteDialog
 				id={project.id}
@@ -107,6 +107,7 @@ export const ProjectsTable = () => {
 			icon: <WholeWordIcon size={18} />,
 			header: "ID",
 			render: (row) => <i>{row.id}</i>,
+			nowrap: true,
 		},
 		{
 			id: "public",
@@ -141,6 +142,24 @@ export const ProjectsTable = () => {
 
 const EntityDropdown = ({ entity }: { entity: EntityResponse }) => {
 	const options: DropdownOptions = {
+		copy: (close) => (
+			<button
+				type="button"
+				onClick={() => {
+					navigator.clipboard
+						.writeText(
+							`<script type="module" data-entity=${entity.id} src="${window.location.origin}/script.js"></script>`,
+						)
+						.then(() => createToast("Snippet copied to clipboard", "info"))
+						.catch(() => createToast("Failed to copy snippet to clipboard", "error"));
+
+					close();
+				}}
+			>
+				<RectangleEllipsisIcon size={18} />
+				Copy Snippet
+			</button>
+		),
 		edit: (close) => (
 			<EditEntity
 				entity={entity}
@@ -184,6 +203,7 @@ export const EntitiesTable = () => {
 			icon: <WholeWordIcon size={18} />,
 			header: "ID",
 			render: (row) => <i>{row.id}</i>,
+			nowrap: true,
 		},
 		{
 			id: "projects",
@@ -266,6 +286,7 @@ export const UsersTable = () => {
 			header: "Username",
 			icon: <UserIcon size={18} />,
 			render: (row) => <span>{row.username}</span>,
+			nowrap: true,
 		},
 		{
 			id: "role",

web/src/components/table.tsx

@@ -17,7 +17,7 @@ export const Table = <T extends { id: string }>({
 	columns: Column<T>[];
 }) => {
 	return (
-		<div className="overflow-auto">
+		<div className={styles.container}>
 			<table className={styles.table}>
 				<thead>
 					<tr>

web/src/components/toast.module.css

@@ -0,0 +1,35 @@
+.toastContainer {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.5rem;
+  z-index: 9999;
+}
+
+.toast {
+  padding: 0.8rem 1.1rem;
+  border-radius: 0.5rem;
+  font-size: 0.9rem;
+  color: #fff;
+  box-shadow: var(--pico-card-box-shadow);
+  border-radius: var(--pico-border-radius);
+}
+
+.success {
+  background-color: #4caf50;
+}
+
+.error {
+  background-color: #f44336;
+}
+
+.info {
+  background-color: var(--pico-primary-background);
+}
+
+.warning {
+  background-color: #ff9800;
+}

web/src/components/toast.ts

@@ -0,0 +1,52 @@
+import styles from "./toast.module.css";
+
+type ToastType = "success" | "error" | "info" | "warning";
+
+export const createToast = (message: string, type: ToastType = "info") => {
+	let toastContainer = document.getElementById("toast-container");
+	if (!toastContainer) {
+		toastContainer = document.createElement("div");
+		toastContainer.id = "toast-container";
+		toastContainer.className = styles.toastContainer;
+		toastContainer.setAttribute("role", "alert");
+		toastContainer.setAttribute("aria-live", "assertive");
+		toastContainer.setAttribute("aria-atomic", "true");
+		document.body.appendChild(toastContainer);
+	}
+
+	const toast = document.createElement("div");
+	toast.className = `${styles.toast} ${styles[type]}`;
+	toast.textContent = message;
+
+	toastContainer.appendChild(toast);
+	toast.animate(
+		[
+			{ opacity: 0, transform: "translateY(0.5rem)" },
+			{ opacity: 1, transform: "translateY(0)" },
+		],
+		{
+			duration: 300,
+			easing: "ease-out",
+		},
+	);
+
+	setTimeout(() => {
+		const fadeOut = toast.animate(
+			[
+				{ opacity: 1, transform: "translateY(0)" },
+				{ opacity: 0, transform: "translateY(0.5rem)" },
+			],
+			{
+				duration: 500,
+				easing: "ease-out",
+			},
+		);
+
+		fadeOut.onfinish = () => {
+			toast.remove();
+			if (toastContainer && toastContainer.childElementCount === 0) {
+				toastContainer.remove();
+			}
+		};
+	}, 2500);
+};