Improve frontend error handling

src-ui/src/app/components/common/edit-dialog/edit-dialog.component.ts

@@ -38,6 +38,9 @@ export abstract class EditDialogComponent<
   @Output()
   succeeded = new EventEmitter()
 
+  @Output()
+  failed = new EventEmitter()
+
   networkActive = false
 
   closeEnabled = false
@@ -141,7 +144,7 @@ export abstract class EditDialogComponent<
       error: (error) => {
         this.error = error.error
         this.networkActive = false
-        this.succeeded.next(error)
+        this.failed.next(error)
       },
     })
   }

src-ui/src/app/components/common/toasts/toasts.component.html

@@ -4,5 +4,10 @@
   [class]="toast.classname"
   (hidden)="toastService.closeToast(toast)">
   <p>{{toast.content}}</p>
+  <details *ngIf="toast.error">
+    <pre class="p-2 m-0 bg-light text-dark">
+      {{toast.error}}
+    </pre>
+  </details>
   <p class="mb-0" *ngIf="toast.action"><button class="btn btn-sm btn-outline-secondary" (click)="toastService.closeToast(toast); toast.action()">{{toast.actionName}}</button></p>
 </ngb-toast>

src-ui/src/app/components/common/toasts/toasts.component.scss

@@ -20,3 +20,8 @@
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 }
+
+pre {
+  white-space: pre-line;
+  --bs-bg-opacity: .25;
+}