WIP: show invalid forms UI

src/views/ManageForms.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
+    import { setIcon } from "obsidian";
     import { FormDefinition, MigrationError } from "src/core/formDefinition";
+    import Button from "./components/Button.svelte";
+    import KeyValue from "./components/KeyValue.svelte";
 
     export let createNewForm: () => void;
     export let deleteForm: (formName: string) => void;
     export let duplicateForm: (form: FormDefinition) => void;
     export let editForm: (formName: string) => void;
+    export let copyFormToClipboard: (form: FormDefinition) => void;
 
     export let forms: FormDefinition[];
     export let invalidForms: MigrationError[] = [];
     function handleDeleteForm(formName: string) {
-        const confirmed = confirm(`Are you sure you want to delete ${formName}?`);
-        if (confirmed) { console.log(`Deleting ${formName}`); }
+        const confirmed = confirm(
+            `Are you sure you want to delete ${formName}?`,
+        );
+        if (confirmed) {
+            console.log(`Deleting ${formName}`);
+            deleteForm(formName);
+        }
     }
     function handleEditForm(formName: string) {
         console.log(`Editing ${formName}`);
@@ -22,51 +31,88 @@
     }
     function handleCopyForm(form: FormDefinition) {
         console.log(`Copying ${form.name}`);
+        copyFormToClipboard(form);
     }
 </script>
 
-<h3>Manage forms</h3>
-
-<button class="form-add-button" on:click={() => createNewForm()}>
-    Add new form
-</button>
+<div class="header">
+    <h1>Manage forms</h1>
+    <Button onClick={createNewForm} text="Create new form" variant="primary"
+    ></Button>
+    {#if invalidForms.length}
+        <h5 class="modal-form-danger">
+            There are {invalidForms.length} invalid forms.
+        </h5>
+        <p>
+            Please take a look at the invalid forms section for details and
+            potential fixes.
+        </p>
+    {/if}
+</div>
 
 <div id="form-rows">
     {#each forms as form}
         <div class="form-row">
-            <h4>{form.name}</h4>
+            <h4 class="form-name">{form.name}</h4>
+            <div>
+                {#each Object.entries(form) as [key, value]}
+                    {#if key !== "name"}
+                        <KeyValue {key}>
+                            <span
+                                >{Array.isArray(value)
+                                    ? value.length
+                                    : value}</span
+                            >
+                        </KeyValue>
+                    {/if}
+                {/each}
+                <KeyValue key="Field names">
+                    <span style="display: flex; flex-direction: column;">
+                        {#each form.fields as field}
+                            <span>{field.name}</span>
+                        {/each}</span
+                    >
+                </KeyValue>
+            </div>
             <div class="form-row-buttons">
-                <button
-                    class="form-row-button form-row-delete"
-                    on:click={() => handleDeleteForm(form.name)}
-                >
-                    <i class="fa fa-trash"></i>
-                    <span>Delete</span>
-                </button>
-                <button
-                    class="form-row-button form-row-edit"
-                    on:click={() => handleEditForm(form.name)}
-                >
-                    <i class="fa fa-edit"></i>
-                    <span>Edit</span>
-                </button>
-                <button
-                    class="form-row-button form-row-duplicate"
-                    on:click={() => handleDuplicateForm(form)}
-                >
-                    <i class="fa fa-copy"></i>
+                <Button
+                    onClick={() => handleDeleteForm(form.name)}
+                    tooltip={`Delete ${form.name}`}
+                    icon="trash"
+                    variant="danger"
+                ></Button>
+                <Button
+                    onClick={() => handleEditForm(form.name)}
+                    text="Edit"
+                    variant="primary"
+                    icon="pencil"
+                ></Button>
+                <button on:click={() => handleDuplicateForm(form)}>
                     <span>Duplicate</span>
                 </button>
-                <button
-                    class="form-row-button form-row-copy"
-                    on:click={() => handleCopyForm(form)}
-                >
-                    <i class="fa fa-clipboard"></i>
-                    <span>Copy</span>
-                </button>
+                <Button
+                    tooltip={`Copy ${form.name} to clipboard`}
+                    icon="clipboard-copy"
+                    onClick={() => handleCopyForm(form)}
+                ></Button>
             </div>
         </div>
     {/each}
+    {#if invalidForms.length}
+        <h3 class="form-name modal-form-danger">Invalid forms</h3>
+        <div>
+            {#each invalidForms as form}
+                <div class="form-row">
+                    <h4 class="form-name">{form.name}</h4>
+                    {#each form.error.issues as error}
+                        <KeyValue key={error.reason}>
+                            <span>{error.message}</span>
+                        </KeyValue>
+                    {/each}
+                </div>
+            {/each}
+        </div>
+    {/if}
 </div>
 
 <style>
@@ -80,56 +126,16 @@
         display: flex;
         gap: 8px;
     }
-
-    .form-row-button {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: background-color 0.2s ease-in-out;
-    }
-
-    .form-row-button:hover {
-        background-color: var(--background-modifier-hover);
+    .form-name {
+        margin-bottom: 0;
     }
-
-    .form-row-delete {
-        color: var(--text-danger);
-        background-color: var(--background-danger);
-    }
-
-    .form-row-delete:hover {
-        background-color: var(--background-danger-hover);
-    }
-
-    .form-row-edit {
-        color: var(--text-accent);
-        background-color: var(--background-accent);
-    }
-
-    .form-row-edit:hover {
-        background-color: var(--background-accent-hover);
-    }
-
-    .form-row-duplicate {
-        color: var(--text-primary);
-        background-color: var(--background-primary);
-    }
-
-    .form-row-duplicate:hover {
-        background-color: var(--background-primary-hover);
-    }
-
-    .form-row-copy {
-        color: var(--text-accent);
-        background-color: var(--background-accent);
+    .header {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
     }
-
-    .form-row-copy:hover {
-        background-color: var(--background-accent-hover);
+    h5 {
+        margin-bottom: 0;
     }
 </style>

src/views/ManageFormsView.ts

@@ -58,7 +58,12 @@ export class ManageFormsView extends ItemView {
                 },
                 duplicateForm: (form: FormDefinition) => {
                     this.plugin.duplicateForm(form);
+                },
+                copyFormToClipboard: async (form: FormDefinition) => {
+                    await navigator.clipboard.writeText(JSON.stringify(form, null, 2));
+                    new Notice("Form has been copied to the clipboard");
                 }
+
             }
         })
         // container.createEl("h3", { text: "Manage forms" });

src/views/components/Button.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { ButtonComponent, setIcon } from "obsidian";
+    import { onMount } from "svelte";
+
+    export let tooltip: string | undefined = undefined;
+    export let icon: "trash" | "clipboard-copy" | "pencil" | undefined =
+        undefined;
+    export let text: string | undefined = undefined;
+    export let variant: "regular" | "danger" | "primary" = "regular";
+    export let onClick: () => void;
+    const variants: Record<typeof variant, string> = {
+        regular: "modal-form-regular",
+        danger: "modal-form-danger",
+        primary: "modal-form-primary",
+    };
+    let root: HTMLElement;
+    onMount(() => {
+        const btn = new ButtonComponent(root);
+        console.log({ root, btn });
+        if (icon) btn.setIcon(icon);
+        if (tooltip) btn.setTooltip(tooltip);
+        if (text) btn.setButtonText(text);
+        btn.onClick(onClick);
+        btn.setClass(variants[variant]);
+    });
+</script>
+
+<span bind:this={root}></span>

src/views/components/KeyValue.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    export let key: string;
+</script>
+
+<div>
+    <span class="key">{key}:</span>
+    <slot />
+</div>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        gap: var(--mf-spacing);
+    }
+    .key {
+        color: var(--text-faint);
+    }
+</style>

styles.css

@@ -9,6 +9,7 @@ If your plugin does not need CSS, delete this file.
 
 :root {
     --mf-spacing: 0.75rem;
+    --mf-spacing2: 1.5rem;
 }
 
 /* Utilities to remove styles from native obsidian elements when wrapped like this