From b427fe7f4618a633882b241ee771d05ce3daa092 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Wed, 8 Dec 2021 09:31:56 +0100
Subject: [PATCH] feat: show tag with array item count also when expanded

---
 src/lib/components/modes/treemode/JSONNode.scss    | 14 ++++++++------
 src/lib/components/modes/treemode/JSONNode.svelte  |  3 +++
 .../modes/treemode/json-node-selected-mixin.scss   |  4 ++++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/modes/treemode/JSONNode.scss b/src/lib/components/modes/treemode/JSONNode.scss
index 5cfb26bf..b4c54084 100644
--- a/src/lib/components/modes/treemode/JSONNode.scss
+++ b/src/lib/components/modes/treemode/JSONNode.scss
@@ -183,25 +183,27 @@
   font-size: $font-size-small;
   font-family: $font-family;
   color: $white;
+  background: $light-gray-transparent;
   border-radius: 2px;
   cursor: pointer;
   position: relative;
-}
-
-.tag {
+  display: inline-block;
   padding: 0 4px 1px;
   margin: 0 2px;
-  position: relative;
   top: 1px;
 
   height: $line-height - 2px;
   line-height: $line-height - 4px;
 
-  background: $light-gray-transparent;
-
   &:hover {
     background: lighten($light-gray-transparent, 15%);
   }
+
+  &.readonly {
+    color: $light-gray-transparent;
+    background: $background-gray;
+    cursor: inherit;
+  }
 }
 
 .identifier {
diff --git a/src/lib/components/modes/treemode/JSONNode.svelte b/src/lib/components/modes/treemode/JSONNode.svelte
index 84b3f28c..7fd2bb43 100644
--- a/src/lib/components/modes/treemode/JSONNode.svelte
+++ b/src/lib/components/modes/treemode/JSONNode.svelte
@@ -297,6 +297,9 @@
           <div class="meta-inner" data-type="selectable-value">
             {#if expanded}
               <div class="bracket expanded">[</div>
+              <span class="tag readonly">
+                {value.length} items
+              </span>
             {:else}
               <div class="bracket">[</div>
               <button type="button" class="tag" on:click={handleExpand}>
diff --git a/src/lib/components/modes/treemode/json-node-selected-mixin.scss b/src/lib/components/modes/treemode/json-node-selected-mixin.scss
index 984510f6..a30d13cf 100644
--- a/src/lib/components/modes/treemode/json-node-selected-mixin.scss
+++ b/src/lib/components/modes/treemode/json-node-selected-mixin.scss
@@ -62,6 +62,10 @@
         background-color: $selection-background !important;
       }
     }
+
+    .tag.readonly {
+      background: transparent;
+    }
   }
 
   .insert-area {