make object list collapsible

web/kiri/index.css

@@ -184,6 +184,30 @@ th, tr, td, span, div, label, button {
 th, tr, td, label {
     white-space: nowrap;
 }
+details > summary {
+    list-style: none;
+}
+details > summary::-webkit-details-marker {
+    display: none;
+}
+details > summary::before {
+    content: "";
+}
+details > summary {
+    position: relative;
+    cursor: pointer;
+}
+details > summary::after {
+    content: "▸";
+    position: absolute;
+    right: 5px;
+    font-size: 1em;
+    transform: rotate(-90deg);
+    transition: transform 0.2s ease;
+}
+details[open] > summary::after {
+    transform: rotate(90deg);
+}
 
 /* container for entire page / app */
 #app {

web/kiri/index.html

@@ -392,8 +392,10 @@
                     <div><label>Profile</label><span id="mode-profile"></span></div>
                 </div>
                 <div class="set2-group f-col">
-                    <div class="set-header"><a>objects</a></div>
-                    <div id="ws-widgets" class="f-col"></div>
+                    <details open>
+                        <summary class="set-header"><a>objects</a></summary>
+                        <div id="ws-widgets" class="f-col"></div>
+                    </details>
                 </div>
                 <div class="set2-group f-col mode-fdm">
                     <div class="set-header"><a>ranges</a></div>