Errors now show as toasts in the bottom right corner

web/src/components/ToastList.tsx

@@ -0,0 +1,37 @@
+import type { JSX } from 'solid-js';
+import { For } from 'solid-js';
+
+import type { Toast } from '@/primitives/createToasts';
+import { linkButton } from './styles';
+
+interface Props {
+  toasts: Toast[];
+  onDismiss: (id: number) => void;
+}
+
+/** The toasts, stacked in the bottom right corner with the newest lowest. */
+export function ToastList(props: Props): JSX.Element {
+  return (
+    // The stack lets clicks through to the page; only the toasts take them.
+    <div class="pointer-events-none fixed right-4 bottom-4 z-50 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2">
+      <For each={props.toasts}>
+        {(toast) => (
+          <div
+            class="pointer-events-auto flex items-start justify-between gap-4 rounded-md border border-line bg-danger-soft px-3.5 py-2.5 text-danger shadow-[0_8px_24px_rgb(0_0_0/0.18)]"
+            role="alert"
+          >
+            <span>{toast.message}</span>
+            <button
+              type="button"
+              class={linkButton}
+              aria-label={`Dismiss: ${toast.message}`}
+              onClick={() => props.onDismiss(toast.id)}
+            >
+              Dismiss
+            </button>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+}