json tab, json dark mode style fix

packages/web/src/tabs/JsonTab.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" context="module">
+  export function openJsonDocument(json, title = 'JSON') {
+    openNewTab(
+      {
+        title,
+        icon: 'img json',
+        tabComponent: 'JsonTab',
+      },
+      { editor: json }
+    );
+  }
+</script>
+
+<script lang="ts">
+  import _ from 'lodash';
+  import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import JSONTree from '../jsontree/JSONTree.svelte';
+  import useEditorData from '../query/useEditorData';
+  import openNewTab from '../utility/openNewTab';
+
+  export let selection;
+  export let showWholeRow = false;
+  export let tabid;
+
+  let json = null;
+  let error = null;
+
+  useEditorData({
+    tabid,
+    onInitialData: value => {
+      json = value;
+    },
+  });
+</script>
+
+<div class="outer">
+  <div class="inner">
+    <JSONTree value={json} expanded />
+  </div>
+</div>
+
+<style>
+  .outer {
+    flex: 1;
+    position: relative;
+  }
+  .inner {
+    overflow: scroll;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>

packages/web/src/tabs/index.js

@@ -16,6 +16,7 @@ import * as QueryDesignTab from './QueryDesignTab.svelte';
 import * as CommandListTab from './CommandListTab.svelte';
 import * as YamlEditorTab from './YamlEditorTab.svelte';
 import * as CompareModelTab from './CompareModelTab.svelte';
+import * as JsonTab from './JsonTab.svelte';
 
 export default {
   TableDataTab,
@@ -36,4 +37,5 @@ export default {
   CommandListTab,
   YamlEditorTab,
   CompareModelTab,
+  JsonTab,
 };