fix(ui): do not use crypto.randomUUID

This API is not available in all browsers. Also add an eslint rule to prevent usage in the future.

invokeai/frontend/web/.eslintrc.js

@@ -16,6 +16,14 @@ module.exports = {
     'no-promise-executor-return': 'error',
     // https://eslint.org/docs/latest/rules/require-await
     'require-await': 'error',
+    'no-restricted-properties': [
+      'error',
+      {
+        object: 'crypto',
+        property: 'randomUUID',
+        message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
+      },
+    ],
   },
   overrides: [
     /**

invokeai/frontend/web/src/features/toast/toast.ts

@@ -1,5 +1,6 @@
 import type { UseToastOptions } from '@invoke-ai/ui-library';
 import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
+import { nanoid } from 'features/controlLayers/konva/util';
 import { map } from 'nanostores';
 
 const toastApi = createStandaloneToast({
@@ -67,7 +68,7 @@ const getGetState = (id: string) => () => $toastMap.get()[id] ?? null;
  */
 export const toast = (arg: ToastArg): ToastApi => {
   // All toasts need an id, set a random one if not provided
-  const id = arg.id ?? crypto.randomUUID();
+  const id = arg.id ?? nanoid();
   if (!arg.id) {
     arg.id = id;
   }