Dialog redesign and content revamp (#1409)

* Revamp the content and design of dialogs

* Add the Licenses dialog

frontend/src/state-providers/dialog.ts

@@ -2,23 +2,25 @@ import {writable} from "svelte/store";
 
 import { type IconName } from "@graphite/utility-functions/icons";
 import { type Editor } from "@graphite/wasm-communication/editor";
-import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, patchWidgetLayout } from "@graphite/wasm-communication/messages";
+import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogButtons, UpdateDialogColumn1, UpdateDialogColumn2, patchWidgetLayout } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createDialogState(editor: Editor) {
 	const { subscribe, update } = writable({
 		visible: false,
+		title: "",
 		icon: "" as IconName,
-		widgets: defaultWidgetLayout(),
+		buttons: defaultWidgetLayout(),
+		column1: defaultWidgetLayout(),
+		column2: defaultWidgetLayout(),
 		// Special case for the crash dialog because we cannot handle button widget callbacks from Rust once the editor instance has panicked
-		crashDialogButtons: undefined as undefined | TextButtonWidget[],
+		panicDetails: "",
 	});
 
 	function dismissDialog(): void {
-		
 		update((state) => {
 			// Disallow dismissing the crash dialog since it can confuse users why the app stopped responding if they dismiss it without realizing what it means
-			if (!state.crashDialogButtons) state.visible = false;
+			if (state.panicDetails === "") state.visible = false;
 			
 			return state;
 		});
@@ -26,12 +28,18 @@ export function createDialogState(editor: Editor) {
 
 	// Creates a crash dialog from JS once the editor has panicked.
 	// Normal dialogs are created in the Rust backend, but for the crash dialog, the editor instance has panicked so it cannot respond to widget callbacks.
-	function createCrashDialog(icon: IconName, widgets: WidgetLayout, crashDialogButtons: TextButtonWidget[]): void {
+	function createCrashDialog(panicDetails: string): void {
 		update((state) => {
 			state.visible = true;
-			state.icon = icon;
-			state.widgets = widgets;
-			state.crashDialogButtons = crashDialogButtons;
+
+			state.icon = "Failure";
+			state.title = "Crash";
+			state.panicDetails = panicDetails;
+
+			state.column1 = defaultWidgetLayout();
+			state.column2 = defaultWidgetLayout();
+			state.buttons = defaultWidgetLayout();
+
 			return state;
 		});
 	}
@@ -40,15 +48,31 @@ export function createDialogState(editor: Editor) {
 	editor.subscriptions.subscribeJsMessage(DisplayDialog, (displayDialog) => {
 		update((state) => {
 			state.visible = true;
+
+			state.title = displayDialog.title;
 			state.icon = displayDialog.icon;
+			
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateDialogDetails, (updateDialogDetails) => {
+	editor.subscriptions.subscribeJsMessage(UpdateDialogButtons, (updateDialogButtons) => {
 		update((state) => {
-			patchWidgetLayout(state.widgets, updateDialogDetails);
+			patchWidgetLayout(state.buttons, updateDialogButtons);
+
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateDialogColumn1, (updateDialogColumn1) => {
+		update((state) => {
+			patchWidgetLayout(state.column1, updateDialogColumn1);
+
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateDialogColumn2, (updateDialogColumn2) => {
+		update((state) => {
+			patchWidgetLayout(state.column2, updateDialogColumn2);
 
-			state.crashDialogButtons = undefined;
 			return state;
 		});
 	});
@@ -57,7 +81,7 @@ export function createDialogState(editor: Editor) {
 	return {
 		subscribe,
 		dismissDialog,
-		createCrashDialog: createCrashDialog,
+		createCrashDialog,
 	};
 }
 export type DialogState = ReturnType<typeof createDialogState>;

frontend/src/state-providers/node-graph.ts

@@ -1,4 +1,3 @@
-import {tick} from "svelte";
 import {writable} from "svelte/store";
 
 import { type Editor } from "@graphite/wasm-communication/editor";

frontend/src/state-providers/portfolio.ts

@@ -90,10 +90,15 @@ export function createPortfolioState(editor: Editor) {
 		const backgroundColor = mime.endsWith("jpeg") ? "white" : undefined;
 
 		// Rasterize the SVG to an image file
-		const blob = await rasterizeSVG(svg, size.x, size.y, mime, backgroundColor);
+		try {
+			const blob = await rasterizeSVG(svg, size.x, size.y, mime, backgroundColor);
+
+			// Have the browser download the file to the user's disk
+			downloadFileBlob(name, blob);
+		} catch {
+			// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
+		}
 
-		// Have the browser download the file to the user's disk
-		downloadFileBlob(name, blob);
 	});
 	editor.subscriptions.subscribeJsMessage(UpdateImageData, (updateImageData) => {
 		updateImageData.imageData.forEach(async (element) => {