Error handling modals

src/lib/components/GlobalModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
- import modalState, { type ModalData } from "$lib/stores/modalState";
+ import modalState, { type ModalButton, type ModalData } from "$lib/stores/modalState";
  import { Button } from "@gradio/button";
  import Modal from "./Modal.svelte";
 
@@ -12,12 +12,20 @@
 
      modalState.closeModal(modal.id)
  }
+
+ function onButtonClicked(button: ModalButton, closeDialog: Function) {
+     button.onClick();
+
+     if (button.closeOnClick !== false) {
+         closeDialog()
+     }
+ }
 </script>
 
 {#each $modalState.activeModals as modal(modal.id)}
-    <Modal showModal={true} on:close={() => onClose(modal)}>
+    <Modal showModal={true} closeOnClick={modal.closeOnClick} on:close={() => onClose(modal)}>
         <div slot="header" class="modal-header">
-            {#if modal != null}
+            {#if modal != null && modal.title != null}
                 <h1 style="padding-bottom: 1rem;">{modal.title}</h1>
             {/if}
         </div>
@@ -26,10 +34,10 @@
                 <svelte:component this={modal.svelteComponent} {...modal.svelteProps}/>
             {/if}
         </svelte:fragment>
-        <div slot="buttons" let:closeDialog>
+        <div slot="buttons" class="buttons" let:closeDialog>
             {#if modal != null && modal.buttons?.length > 0}
                 {#each modal.buttons as button}
-                    <Button variant={button.variant} on:click={button.onClick}>
+                    <Button variant={button.variant} on:click={() => onButtonClicked(button, closeDialog)}>
                         {button.name}
                     </Button>
                 {/each}
@@ -42,3 +50,9 @@
         </div>
     </Modal>
 {/each}
+
+<style lang="scss">
+ .buttons {
+     gap: var(--spacing-sm);
+ }
+</style>