Added a JSON viewer for items

frontend/src/components/grid.svelte

@@ -53,6 +53,11 @@
     }
   }
 
+  function doubleClick(itemKey) {
+    toggleChildren(itemKey, false);
+    dispatch('trigger', itemKey);
+  }
+
   function showContextMenu(evt, item) {
     select(item[key]);
     contextMenu.show(evt, item.menu);
@@ -87,7 +92,7 @@
       {#each _items as item (item[key])}
         <tr
           on:click={() => select(item[key])}
-          on:dblclick={() => toggleChildren(item[key])}
+          on:dblclick={() => doubleClick(item[key])}
           on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
           class:selected={activeKey === item[key] && !activeChildKey}
         >

frontend/src/components/icon.svelte

@@ -20,4 +20,6 @@
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
 {:else if name === 'reload'}
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
+{:else if name === 'clipboard'}
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clipboard"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>
 {/if}

frontend/src/components/jsonviewer.svelte

@@ -0,0 +1,58 @@
+<script>
+  import hljs from 'highlight.js/lib/core';
+  import hljsJson from 'highlight.js/lib/languages/json';
+  import 'highlight.js/styles/atom-one-dark.css';
+  import Icon from './icon.svelte';
+  import Modal from './modal.svelte';
+
+  export let json = '';
+
+  hljs.registerLanguage('json', hljsJson);
+  $: highlighted = json ? hljs.highlight('json', json).value : '';
+
+  function copy() {
+    navigator.clipboard.writeText(json);
+  }
+</script>
+
+{#if json}
+  <Modal bind:show={json} title="JSON viewer" contentPadding={false}>
+    <div class="codeblock">
+      <div class="buttons">
+        <button class="btn" on:click={copy}>
+          <Icon name="clipboard" />
+        </button>
+      </div>
+      <pre><code class="hljs">{@html highlighted}</code></pre>
+    </div>
+  </Modal>
+{/if}
+
+<style>
+  .codeblock {
+    position: relative;
+  }
+  .buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 1rem;
+  }
+  .buttons button {
+    margin-left: 1rem;
+    background: none;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
+  .buttons button:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .hljs {
+    user-select: text;
+    line-height: 1.2;
+  }
+
+  pre :global(::selection) {
+    background: rgba(5, 5, 5, 0.8);
+  }
+</style>

frontend/src/components/modal.svelte

@@ -8,7 +8,7 @@
 </script>
 
 {#if show}
-  <div class="modal outer" on:mousedown|self={close} transition:fade>
+  <div class="modal outer" on:mousedown|self={() => show = false} transition:fade>
     <div class="inner" transition:fly={{ y: 100 }}>
       <header>
         {#if title}
@@ -18,7 +18,7 @@
           <Icon name="x" />
         </button>
       </header>
-      <div class="slot content" class:p-0={!contentPadding}> <slot /> </div>
+      <div class="slot content" class:padded={contentPadding}> <slot /> </div>
       {#if $$slots.footerLeft || $$slots.footerRight}
         <footer>
           <slot name="footer" />
@@ -52,6 +52,7 @@
     margin-bottom: auto;
     width: 100%;
     border-radius: 10px;
+    overflow: hidden;
     display: flex;
     flex-flow: column;
     cursor: auto;
@@ -79,10 +80,12 @@
   }
 
   .content {
-    padding: 1rem;
     overflow-y: auto;
     max-height: 100%;
   }
+  .content.padded {
+    padding: 1rem;
+  }
 
   footer {
     padding: 1rem;

frontend/src/components/objectgrid.svelte

@@ -69,4 +69,14 @@
   }
 </script>
 
-<Grid {columns} {items} {showHeaders} {contained} key="key" bind:activeKey />
+<Grid
+  key="key"
+  on:select
+  on:selectChild
+  on:trigger
+  bind:activeKey
+  {columns}
+  {items}
+  {showHeaders}
+  {contained}
+/>