add foldable set hierarchy

frontend/website/src/components/ElementTree.vue

@@ -1,10 +1,23 @@
 <script setup lang="ts">
 import type { SetElementNode } from '@/stores/setLayout'
 
-defineProps<{
+const props = defineProps<{
   nodes: SetElementNode[]
+  expandedElementIds: ReadonlySet<number>
   label?: string
 }>()
+
+defineEmits<{
+  'toggle-element': [elementId: number]
+}>()
+
+function childListId(elementId: number): string {
+  return `element-children-${elementId}`
+}
+
+function isExpanded(elementId: number): boolean {
+  return props.expandedElementIds.has(elementId)
+}
 </script>
 
 <template>
@@ -14,12 +27,39 @@ defineProps<{
     :aria-label="label"
   >
     <li v-for="node in nodes" :key="node.id" class="element-tree__item" :data-element-id="node.id">
-      <div class="element-node__card">
+      <button
+        v-if="node.children.length > 0"
+        type="button"
+        class="element-node__card element-node__card--toggle"
+        :aria-expanded="isExpanded(node.id)"
+        :aria-controls="childListId(node.id)"
+        @click="$emit('toggle-element', node.id)"
+      >
         <span class="element-node__name">{{ node.name }}</span>
-        <span class="element-node__kind">{{ node.kind }}</span>
+        <span class="element-node__metadata">
+          <span class="element-node__kind">{{ node.kind }}</span>
+          <span
+            class="element-node__chevron"
+            :class="{ 'element-node__chevron--expanded': isExpanded(node.id) }"
+            aria-hidden="true"
+          ></span>
+        </span>
+      </button>
+
+      <div v-else class="element-node__card">
+        <span class="element-node__name">{{ node.name }}</span>
+        <span class="element-node__metadata">
+          <span class="element-node__kind">{{ node.kind }}</span>
+        </span>
       </div>
 
-      <ElementTree v-if="node.children.length > 0" :nodes="node.children" />
+      <ElementTree
+        v-if="node.children.length > 0 && isExpanded(node.id)"
+        :id="childListId(node.id)"
+        :nodes="node.children"
+        :expanded-element-ids="expandedElementIds"
+        @toggle-element="$emit('toggle-element', $event)"
+      />
     </li>
   </ol>
 </template>
@@ -69,6 +109,23 @@ defineProps<{
   box-shadow: 0 0.55rem 1.5rem rgb(40 62 52 / 6%);
 }
 
+.element-node__card--toggle {
+  width: 100%;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.element-node__card--toggle:hover {
+  border-color: rgb(40 92 78 / 34%);
+  background: #fffdf7;
+}
+
+.element-node__card--toggle:focus-visible {
+  outline: 3px solid rgb(86 127 112 / 34%);
+  outline-offset: 0.2rem;
+}
+
 .element-node__name {
   min-width: 0;
   color: #183029;
@@ -78,6 +135,13 @@ defineProps<{
   overflow-wrap: anywhere;
 }
 
+.element-node__metadata {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.8rem;
+}
+
 .element-node__kind {
   flex: 0 0 auto;
   padding: 0.35rem 0.55rem;
@@ -90,6 +154,18 @@ defineProps<{
   text-transform: none;
 }
 
+.element-node__chevron {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-right: 2px solid #5e7067;
+  border-bottom: 2px solid #5e7067;
+  transform: rotate(-45deg);
+}
+
+.element-node__chevron--expanded {
+  transform: rotate(45deg);
+}
+
 @media (max-width: 37.5rem) {
   .element-tree {
     margin-left: 0.45rem;
@@ -106,6 +182,10 @@ defineProps<{
     padding: 0.75rem 0.7rem;
   }
 
+  .element-node__metadata {
+    gap: 0.6rem;
+  }
+
   .element-node__kind {
     padding-inline: 0.42rem;
     font-size: 0.56rem;