Reset array limit when not expanded, and create a "show more" button

src/JSONNode.scss

@@ -124,6 +124,24 @@
   }
 }
 
+div.limit {
+  margin-left: $indentation-width;
+
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    color: $black;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: $red;
+    }
+  }
+}
+
 div.empty {
   &:not(:focus) {
     outline: 1px dotted lightgray;

src/JSONNode.svelte

@@ -178,6 +178,10 @@
   function handleShowAll () {
     onLimit(path, Infinity)
   }
+
+  function handleShowMore () {
+    onLimit(path, (Math.round(limit / DEFAULT_LIMIT) + 1) * DEFAULT_LIMIT)
+  }
 </script>
 
 <div class='json-node'>
@@ -229,8 +233,8 @@
           />
         {/each}
         {#if limited}
-          <div>
+          <div class='limit'>
-            (showing {limit} of {value.length} items <button on:click={handleShowAll}>show all</button>)
+            (showing {limit} of {value.length} items <button on:click={handleShowMore}>show more</button> <button on:click={handleShowAll}>show all</button>)
           </div>
         {/if}
       </div>

src/styles.scss

@@ -7,6 +7,7 @@ $font-size-icon: 16px;
 
 $white: #fff;
 $black: #1A1A1A;
+$red: #ee422e;
 $contentsMinHeight: 150px;
 $theme-color: #3883fa;
 $theme-color-light: lighten($theme-color, 5%);