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__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;

frontend/website/src/views/SetLayoutView.vue

@@ -11,6 +11,7 @@ const route = useRoute()
 const setLayoutStore = useSetLayoutStore()
 const { layout, loading, error, notFound } = storeToRefs(setLayoutStore)
 const currentSetId = ref<number | null>(null)
+const expandedElementIds = ref(new Set<number>())
 const EMPTY_MESSAGE = 'This set does not have any elements yet.'
 
 watch(
@@ -19,6 +20,7 @@ watch(
     const rawSetId = Array.isArray(setIdParameter) ? setIdParameter[0] : setIdParameter
     const setId = Number(rawSetId)
     currentSetId.value = setId
+    expandedElementIds.value = new Set<number>()
     await setLayoutStore.fetchSetLayout(setId)
   },
   { immediate: true },
@@ -29,8 +31,21 @@ async function retry(): Promise<void> {
     return
   }
 
+  expandedElementIds.value = new Set<number>()
   await setLayoutStore.fetchSetLayout(currentSetId.value)
 }
+
+function toggleElement(elementId: number): void {
+  const nextExpandedElementIds = new Set(expandedElementIds.value)
+
+  if (nextExpandedElementIds.has(elementId)) {
+    nextExpandedElementIds.delete(elementId)
+  } else {
+    nextExpandedElementIds.add(elementId)
+  }
+
+  expandedElementIds.value = nextExpandedElementIds
+}
 </script>
 
 <template>
@@ -81,7 +96,12 @@ async function retry(): Promise<void> {
         ></p>
 
         <div v-else class="layout-outline">
-          <ElementTree :nodes="layout.elements" :label="`${layout.set.name} element layout`" />
+          <ElementTree
+            :nodes="layout.elements"
+            :expanded-element-ids="expandedElementIds"
+            :label="`${layout.set.name} element layout`"
+            @toggle-element="toggleElement"
+          />
         </div>
       </template>
     </section>