feat: masks, properties refactor, shaders, storage migrations, and more

1 files changed, 51 insertions, 0 deletions

diff --git a/apps/web/src/lib/media/upload-toast.ts b/apps/web/src/lib/media/upload-toast.ts
new file mode 100644
index 00000000..e5c5ee28
--- /dev/null
+++ b/apps/web/src/lib/media/upload-toast.ts
@@ -0,0 +1,51 @@
+import { toast } from "sonner";
+
+export interface MediaUploadToastResult {
+	uploadedCount: number;
+	assetNames?: string[];
+}
+
+function getAssetLabel({ count }: { count: number }): string {
+	return count === 1 ? "media asset" : "media assets";
+}
+
+function waitForNextPaint(): Promise<void> {
+	return new Promise((resolve) => {
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => resolve());
+		});
+	});
+}
+
+export async function showMediaUploadToast<T extends MediaUploadToastResult>({
+	filesCount,
+	promise,
+}: {
+	filesCount: number;
+	promise: Promise<T> | (() => Promise<T>);
+}) {
+	const run = typeof promise === "function" ? promise : () => promise;
+	const toastPromise = toast.promise(async () => {
+		await waitForNextPaint();
+		return run();
+	}, {
+		loading: `Uploading ${getAssetLabel({ count: filesCount })}...`,
+		success: ({ uploadedCount, assetNames }) => {
+			if (uploadedCount === 1) {
+				const assetName = assetNames?.[0];
+				return assetName
+					? `${assetName} has been uploaded`
+					: "1 media asset has been uploaded";
+			}
+
+			if (uploadedCount > 1) {
+				return `${uploadedCount} media assets have been uploaded`;
+			}
+
+			return "No media assets were uploaded";
+		},
+		error: `Failed to upload ${getAssetLabel({ count: filesCount })}`,
+	});
+
+	return toastPromise.unwrap();
+}